diff --git a/css/cards.css b/css/cards.css new file mode 100644 index 0000000..74d392c --- /dev/null +++ b/css/cards.css @@ -0,0 +1,159 @@ +.card { + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.0512); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13); +} + +.card-basic, +textarea { + font-family: monospace; + font-size: 1.3em; + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.0326); + width: -moz-fit-content; + width: fit-content; +} + +.card-yellow { + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgb(67, 53, 25); + text-align: left; + width: -moz-fit-content; + width: fit-content; +} + +.card-red { + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgb(68, 39, 38); + text-align: left; + width: -moz-fit-content; + width: fit-content; +} + +.card-green { + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgb(57, 61, 27); + text-align: left; + width: -moz-fit-content; + width: fit-content; +} + +.card, +.card-basic, +.card-green, +.card-red, +.card-yellow, +.expander-bottom, +.expander-top, +textarea { + padding: 0 1em 0 1em; + border-radius: 8px; + border: 1px solid transparent; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +b.card-basic { + padding: 0.3em 0.5em 0.3em 0.5em; +} + +span.card-basic { + font-family: monospace !important; + padding: 0.5em !important; + line-height: 2.5em !important; + text-wrap: nowrap; + overflow-x: scroll !important; +} + +.card-yellow .card-basic { + background-color: rgba(255, 255, 255, 0.09) !important; + border-color: rgba(255, 255, 255, 0.2) !important; +} + +.expander-top { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.0512); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13); + margin-bottom: 0 !important; + display: flex; + flex-direction: row; + align-items: center; +} + +.expander-top.active { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-color: rgba(255, 255, 255, 0.0612); +} + +.expander-top.clickable { + cursor: pointer; +} + +.expander-top.clickable:hover { + outline: 1px solid rgba(255, 255, 255, 0.07); + background-color: rgba(255, 255, 255, 0.0812); +} + +.expander-top.clickable:active { + background-color: rgba(255, 255, 255, 0.03); +} + +.expander-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.0512); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13); + display: none; + animation: slide-up 0.4s; + z-index: 0; + position: relative; + overflow-y: hidden; + margin-top: 0 !important; +} + +.expander-opened { + animation: slide-down 2s; +} + +img.chevron { + display: flex; + height: 16px; + width: 16px; + box-shadow: none; + margin-top: 3px; + transition: transform 0.1s; + margin-left: auto; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +@media only screen and (max-width: 700px) { + .expander-bottom, + .expander-top, + .card-red, + .card-yellow, + .card-green, + .card-basic, + .card { + padding: 0.65em; + } + .card-basic p { + margin: 0; + text-wrap: nowrap; + overflow-x: scroll; + } + span.card-basic { + width: -moz-fit-content; + width: fit-content; + display: block !important; + padding: 0em 0.5em 0em 0.5em !important; + } + .card-basic { + width: unset; + } +}/*# sourceMappingURL=cards.css.map */ \ No newline at end of file diff --git a/css/cards.css.map b/css/cards.css.map new file mode 100644 index 0000000..3694a64 --- /dev/null +++ b/css/cards.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["cards.scss","cards.css"],"names":[],"mappings":"AAAA;EACI,qCAAA;EACA,6CAAA;EACA,2CAAA;ACCJ;;ADEA;;EAEI,sBAAA;EACA,gBAAA;EACA,qCAAA;EACA,6CAAA;EACA,uBAAA;EAAA,kBAAA;ACCJ;;ADEA;EACI,qCAAA;EACA,iCAAA;EACA,gBAAA;EACA,uBAAA;EAAA,kBAAA;ACCJ;;ADEA;EACI,qCAAA;EACA,iCAAA;EACA,gBAAA;EACA,uBAAA;EAAA,kBAAA;ACCJ;;ADEA;EACI,qCAAA;EACA,iCAAA;EACA,gBAAA;EACA,uBAAA;EAAA,kBAAA;ACCJ;;ADEA;;;;;;;;EAQI,oBAAA;EACA,kBAAA;EACA,6BAAA;EACA,iBAAA;EACA,oBAAA;ACCJ;;ADEA;EACI,gCAAA;ACCJ;;ADEA;EACI,iCAAA;EACA,yBAAA;EACA,6BAAA;EACA,iBAAA;EACA,6BAAA;ACCJ;;ADEA;EACI,sDAAA;EACA,iDAAA;ACCJ;;ADIA;EACI,8BAAA;EACA,+BAAA;EACA,qCAAA;EACA,6CAAA;EACA,2CAAA;EACA,2BAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACDJ;;ADIA;EACI,4BAAA;EACA,6BAAA;EACA,6CAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,4CAAA;EACA,6CAAA;ACDJ;;ADIA;EACI,2CAAA;ACDJ;;ADIA;EACI,oCAAA;EACA,qCAAA;EACA,qCAAA;EACA,6CAAA;EACA,2CAAA;EACA,aAAA;EACA,wBAAA;EACA,UAAA;EACA,kBAAA;EACA,kBAAA;EACA,wBAAA;ACDJ;;ADIA;EACI,wBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;EACA,eAAA;EACA,0BAAA;EACA,iBAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACDJ;;ADIA;EAEI;;;;;;;IAOI,eAAA;ECFN;EDKE;IACI,SAAA;IACA,iBAAA;IACA,kBAAA;ECHN;EDME;IACI,uBAAA;IAAA,kBAAA;IACA,yBAAA;IACA,uCAAA;ECJN;EDOE;IACI,YAAA;ECLN;AACF","file":"cards.css"} \ No newline at end of file diff --git a/css/cards.scss b/css/cards.scss new file mode 100644 index 0000000..b7d61a2 --- /dev/null +++ b/css/cards.scss @@ -0,0 +1,158 @@ +.card { + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgba(255, 255, 255, 5.12%); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 13%); +} + +.card-basic, +textarea { + font-family: monospace; + font-size: 1.3em; + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgba(255, 255, 255, 3.26%); + width: fit-content; +} + +.card-yellow { + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgb(67, 53, 25); + text-align: left; + width: fit-content; +} + +.card-red { + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgb(68, 39, 38); + text-align: left; + width: fit-content; +} + +.card-green { + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgb(57, 61, 27); + text-align: left; + width: fit-content; +} + +.card, +.card-basic, +.card-green, +.card-red, +.card-yellow, +.expander-bottom, +.expander-top, +textarea { + padding: 0 1em 0 1em; + border-radius: 8px; + border: 1px solid transparent; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +b.card-basic { + padding: 0.3em 0.5em 0.3em 0.5em; +} + +span.card-basic { + font-family: monospace !important; + padding: 0.5em !important; + line-height: 2.5em !important; + text-wrap: nowrap; + overflow-x: scroll !important; +} + +.card-yellow .card-basic { + background-color: rgba(255, 255, 255, 0.09) !important; + border-color: rgba(255, 255, 255, 0.2) !important; +} + +// Expanders + +.expander-top { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgba(255, 255, 255, 5.12%); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 13%); + margin-bottom: 0 !important; + display: flex; + flex-direction: row; + align-items: center; +} + +.expander-top.active { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-color: rgba(255, 255, 255, 6.12%); +} + +.expander-top.clickable { + cursor: pointer; +} + +.expander-top.clickable:hover { + outline: 1px solid rgba(255, 255, 255, 7%); + background-color: rgba(255, 255, 255, 8.12%); +} + +.expander-top.clickable:active { + background-color: rgba(255, 255, 255, 3%); +} + +.expander-bottom { + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgba(255, 255, 255, 5.12%); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 13%); + display: none; + animation: slide-up 0.4s; + z-index: 0; + position: relative; + overflow-y: hidden; + margin-top: 0 !important; +} + +.expander-opened { + animation: slide-down 2s; +} + +img.chevron { + display: flex; + height: 16px; + width: 16px; + box-shadow: none; + margin-top: 3px; + transition: transform 0.1s; + margin-left: auto; + user-select: none; +} + +@media only screen and (max-width: 700px) { + + .expander-bottom, + .expander-top, + .card-red, + .card-yellow, + .card-green, + .card-basic, + .card { + padding: 0.65em; + } + + .card-basic p { + margin: 0; + text-wrap: nowrap; + overflow-x: scroll; + } + + span.card-basic { + width: fit-content; + display: block !important; + padding: 0em 0.5em 0em 0.5em !important; + } + + .card-basic { + width: unset; + } +} \ No newline at end of file diff --git a/css/flip.css b/css/flip.css new file mode 100644 index 0000000..80dea6e --- /dev/null +++ b/css/flip.css @@ -0,0 +1,131 @@ +input, +button, +.button, +.button-big { + color: white; + background-color: rgba(255, 255, 255, 0.0605); + border: 1px solid rgba(255, 255, 255, 0.093); + border-radius: 3px; + text-align: center; + min-height: 1em; + font-size: 1.1em; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); +} + +input:hover, +button:hover, +.button:hover, +.button-big:hover { + background-color: rgba(255, 255, 255, 0.0837); +} + +input:active, +button:active, +.button:active, +.button-big:active { + background-color: rgba(255, 255, 255, 0.0326); + border-color: rgba(255, 255, 255, 0.0698); + color: rgba(255, 255, 255, 0.786); +} + +.button-big { + background-color: rgba(255, 255, 255, 0.0605); + border: 1px solid rgba(255, 255, 255, 0.093); + border-radius: 3px; + text-align: center; + padding: 0.7em; + display: inline-block; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + min-width: 5em; + max-width: 8em; + min-height: 1em; + width: 100%; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); +} + +#intelButton { + background-color: #2166b3; + color: white; +} + +#intelButton:hover { + background-color: hsl(212, 69%, 55%); +} + +#amdButton { + background-color: #dc0032; + color: white; +} + +#amdButton:hover { + background-color: hsl(346, 100%, 65%); +} + +#nvidiaButton { + background-color: #71bb21; + color: white; +} + +#nvidiaButton:hover { + background-color: hsl(89, 70%, 60%); +} + +.comparison-table { + table-layout: fixed; + width: 100%; + border-spacing: 0.4em; +} + +.comparison-table h2 { + font-size: 1.5em; +} + +.comparison-table .card, +.comparison-table .card-red, +.comparison-table .card-green { + vertical-align: top; +} + +.subIcon { + position: relative; + left: 15px; + margin-left: -12px; + font-size: large; + z-index: 0; +} + +.abbreviation { + text-decoration: underline !important; + text-decoration-style: dotted !important; +} + +@media only screen and (max-width: 700px) { + .headerTitle { + font-size: 0.7em; + } + .comparison-table .card-red, + .comparison-table .card-green { + padding: 0em; + } + .comparison-table .card-yellow { + margin: 0em 0.75em 0em 0em; + padding: 0.1em 0.5em 0.1em 0.5em; + } + .comparison-table { + border-spacing: 0.1em; + } + .comparison-table h2 { + font-size: 1em; + } + .comparison-table ul { + font-size: 0.8em; + word-wrap: break-word; + line-height: 1.3em; + list-style-position: outside; + margin-left: -3em; + list-style: none; + } +}/*# sourceMappingURL=flip.css.map */ \ No newline at end of file diff --git a/css/flip.css.map b/css/flip.css.map new file mode 100644 index 0000000..f83b375 --- /dev/null +++ b/css/flip.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["flip.scss","flip.css"],"names":[],"mappings":"AAAA;;;;EAII,YAAA;EACA,6CAAA;EACA,4CAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,8CAAA;ACCJ;;ADEA;;;;EAII,6CAAA;ACCJ;;ADEA;;;;EAII,6CAAA;EACA,yCAAA;EACA,iCAAA;ACCJ;;ADEA;EACI,6CAAA;EACA,4CAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;EACA,yBAAA;EACA,sBAAA;EACA,iBAAA;EACA,cAAA;EACA,cAAA;EACA,eAAA;EACA,WAAA;EACA,8CAAA;ACCJ;;ADEA;EACI,yBAAA;EACA,YAAA;ACCJ;;ADEA;EACI,oCAAA;ACCJ;;ADEA;EACI,yBAAA;EACA,YAAA;ACCJ;;ADEA;EACI,qCAAA;ACCJ;;ADEA;EACI,yBAAA;EACA,YAAA;ACCJ;;ADEA;EACI,mCAAA;ACCJ;;ADEA;EACI,mBAAA;EACA,WAAA;EACA,qBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;;;EAGI,mBAAA;ACCJ;;ADEA;EACI,kBAAA;EACA,UAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;ACCJ;;ADEA;EACI,qCAAA;EACA,wCAAA;ACCJ;;ADEA;EACI;IACI,gBAAA;ECCN;EDEE;;IAEI,YAAA;ECAN;EDGE;IACI,0BAAA;IACA,gCAAA;ECDN;EDIE;IACI,qBAAA;ECFN;EDKE;IACI,cAAA;ECHN;EDME;IACI,gBAAA;IACA,qBAAA;IACA,kBAAA;IACA,4BAAA;IACA,iBAAA;IACA,gBAAA;ECJN;AACF","file":"flip.css"} \ No newline at end of file diff --git a/css/flip.scss b/css/flip.scss new file mode 100644 index 0000000..2a0303a --- /dev/null +++ b/css/flip.scss @@ -0,0 +1,136 @@ +input, +button, +.button, +.button-big { + color: white; + background-color: rgba(255, 255, 255, 0.0605); + border: 1px solid rgba(255, 255, 255, 0.093); + border-radius: 3px; + text-align: center; + min-height: 1em; + font-size: 1.1em; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); +} + +input:hover, +button:hover, +.button:hover, +.button-big:hover { + background-color: rgba(255, 255, 255, 0.0837); +} + +input:active, +button:active, +.button:active, +.button-big:active { + background-color: rgba(255, 255, 255, 0.0326); + border-color: rgba(255, 255, 255, 0.0698); + color: rgba(255, 255, 255, 0.786); +} + +.button-big { + background-color: rgba(255, 255, 255, 0.0605); + border: 1px solid rgba(255, 255, 255, 0.093); + border-radius: 3px; + text-align: center; + padding: 0.7em; + display: inline-block; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + min-width: 5em; + max-width: 8em; + min-height: 1em; + width: 100%; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); +} + +#intelButton { + background-color: #2166b3; + color: white +} + +#intelButton:hover { + background-color: hsl(212, 69%, 55%); +} + +#amdButton { + background-color: #dc0032; + color: white +} + +#amdButton:hover { + background-color: hsl(346, 100%, 65%); +} + +#nvidiaButton { + background-color: #71bb21; + color: white +} + +#nvidiaButton:hover { + background-color: hsl(89, 70%, 60%); +} + +.comparison-table { + table-layout: fixed; + width: 100%; + border-spacing: 0.4em; +} + +.comparison-table h2 { + font-size: 1.5em; +} + +.comparison-table .card, +.comparison-table .card-red, +.comparison-table .card-green { + vertical-align: top; +} + +.subIcon { + position: relative; + left: 15px; + margin-left: -12px; + font-size: large; + z-index: 0; +} + +.abbreviation { + text-decoration: underline !important; + text-decoration-style: dotted !important; +} + +@media only screen and (max-width: 700px) { + .headerTitle { + font-size: 0.7em; + } + + .comparison-table .card-red, + .comparison-table .card-green { + padding: 0em; + } + + .comparison-table .card-yellow { + margin: 0em 0.75em 0em 0em; + padding: 0.1em 0.5em 0.1em 0.5em; + } + + .comparison-table { + border-spacing: 0.1em; + } + + .comparison-table h2 { + font-size: 1em; + } + + .comparison-table ul { + font-size: 0.8em; + word-wrap: break-word; + line-height: 1.3em; + list-style-position: outside; + margin-left: -3em; + list-style: none; + } +} \ No newline at end of file diff --git a/css/guideColors.css b/css/guideColors.css new file mode 100644 index 0000000..e825749 --- /dev/null +++ b/css/guideColors.css @@ -0,0 +1,20 @@ +strong { + color: #E3B2DA; +} + +body { + background-color: #201d20 !important; +} + +.sidebar, +.header { + background: #2b292b !important; +} + +.sidebar .active::before { + background-color: #E3B2DA !important; +} + +textarea { + border-color: #E3B2DA !important; +}/*# sourceMappingURL=guideColors.css.map */ \ No newline at end of file diff --git a/css/guideColors.css.map b/css/guideColors.css.map new file mode 100644 index 0000000..2d0c41f --- /dev/null +++ b/css/guideColors.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["guideColors.scss","guideColors.css"],"names":[],"mappings":"AAAA;EACI,cAAA;ACCJ;;ADEA;EACI,oCAAA;ACCJ;;ADEA;;EAEI,8BAAA;ACCJ;;ADEA;EACI,oCAAA;ACCJ;;ADEA;EACI,gCAAA;ACCJ","file":"guideColors.css"} \ No newline at end of file diff --git a/css/guideColors.scss b/css/guideColors.scss new file mode 100644 index 0000000..1283c9f --- /dev/null +++ b/css/guideColors.scss @@ -0,0 +1,20 @@ +strong { + color: #E3B2DA; +} + +body { + background-color: #201d20 !important; +} + +.sidebar, +.header { + background: #2b292b !important; +} + +.sidebar .active::before { + background-color: #E3B2DA !important; +} + +textarea { + border-color: #E3B2DA !important; +} \ No newline at end of file diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000..e447467 --- /dev/null +++ b/css/header.css @@ -0,0 +1,85 @@ +.header { + outline: 1px solid rgba(0, 0, 0, 0.1); + background-color: rgb(43, 43, 43); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13); + padding: 0 1em 0 1em; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + border: 1px solid transparent; + display: flex; + position: fixed; + width: 100%; + z-index: 3; + height: 5em; +} + +.guideLinks { + display: flex; + align-items: center; + margin-left: auto; +} + +.guideLinks a { + color: #ffffff; + font-size: 1.2em; + margin-right: 1em; +} + +.headerTitle { + display: flex; + align-items: center; +} + +.headerTitle a { + font-size: 2em; + color: rgb(255, 255, 255); +} + +.header a:hover { + text-shadow: rgba(255, 255, 255, 0.5) 0 0 10px; +} + +.headerTitle img { + padding: 0.8em 1em 0.8em 0em; + max-width: 100%; + max-height: 100%; +} + +.headerMenu { + display: flex; + align-items: center; +} + +.headerMenu img { + padding: 0.8em 1em 0.8em 0em; + width: 100%; + height: 100%; +} + +#navButton { + cursor: pointer; +} + +#navButton:hover { + transform: scale3d(1.05, 1.05, 1.05); +} + +#navButton:active { + transform: scale3d(0.95, 0.95, 0.95) !important; +} + +@media only screen and (max-width: 700px) { + .guideLinks { + display: none; + } +} +@media only screen and (max-width: 700px) { + #logo { + display: none; + } +} +@media only screen and (min-width: 900px) { + .headerMenu { + display: none; + } +}/*# sourceMappingURL=header.css.map */ \ No newline at end of file diff --git a/css/header.css.map b/css/header.css.map new file mode 100644 index 0000000..dfce62e --- /dev/null +++ b/css/header.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["header.scss","header.css"],"names":[],"mappings":"AAAA;EACI,qCAAA;EACA,iCAAA;EACA,2CAAA;EACA,oBAAA;EACA,8BAAA;EACA,+BAAA;EACA,6BAAA;EACA,aAAA;EACA,eAAA;EACA,WAAA;EACA,UAAA;EACA,WAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,cAAA;EACA,gBAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;ACCJ;;ADEA;EACI,cAAA;EACA,yBAAA;ACCJ;;ADEA;EACI,8CAAA;ACCJ;;ADEA;EACI,4BAAA;EACA,eAAA;EACA,gBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,mBAAA;ACCJ;;ADEA;EACI,4BAAA;EACA,WAAA;EACA,YAAA;ACCJ;;ADEA;EACI,eAAA;ACCJ;;ADEA;EACI,oCAAA;ACCJ;;ADEA;EACI,+CAAA;ACCJ;;ADEA;EACI;IACI,aAAA;ECCN;AACF;ADEA;EACI;IACI,aAAA;ECAN;AACF;ADGA;EACI;IACI,aAAA;ECDN;AACF","file":"header.css"} \ No newline at end of file diff --git a/css/header.scss b/css/header.scss new file mode 100644 index 0000000..747ac04 --- /dev/null +++ b/css/header.scss @@ -0,0 +1,87 @@ +.header { + outline: 1px solid rgba(0, 0, 0, 10%); + background-color: rgb(43, 43, 43); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 13%); + padding: 0 1em 0 1em; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + border: 1px solid transparent; + display: flex; + position: fixed; + width: 100%; + z-index: 3; + height: 5em; +} + +.guideLinks { + display: flex; + align-items: center; + margin-left: auto; +} + +.guideLinks a { + color: #ffffff; + font-size: 1.2em; + margin-right: 1em; +} + +.headerTitle { + display: flex; + align-items: center; +} + +.headerTitle a { + font-size: 2em; + color: rgb(255, 255, 255); +} + +.header a:hover { + text-shadow: rgba(255, 255, 255, 0.5) 0 0 10px; +} + +.headerTitle img { + padding: 0.8em 1em 0.8em 0em; + max-width: 100%; + max-height: 100%; +} + +.headerMenu { + display: flex; + align-items: center; +} + +.headerMenu img { + padding: 0.8em 1em 0.8em 0em; + width: 100%; + height: 100%; +} + +#navButton { + cursor: pointer; +} + +#navButton:hover { + transform: scale3d(1.05, 1.05, 1.05); +} + +#navButton:active { + transform: scale3d(0.95, 0.95, 0.95) !important; +} + +@media only screen and (max-width: 700px) { + .guideLinks { + display: none; + } +} + +@media only screen and (max-width: 700px) { + #logo { + display: none; + } +} + +@media only screen and (min-width: 900px) { + .headerMenu { + display: none; + } +} \ No newline at end of file diff --git a/css/images.css b/css/images.css new file mode 100644 index 0000000..3b25cd0 --- /dev/null +++ b/css/images.css @@ -0,0 +1,111 @@ +.image-container { + margin: 1em 0 1em 0; + position: relative; + display: inline-flex; + cursor: pointer; + max-width: 80%; +} + +.image-container img { + box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 0.5); + border-radius: 6pt; + max-width: 100%; + height: auto; +} + +.resize-overlay { + position: absolute; + top: 10px; + right: 10px; + width: 0px; + height: 0px; + background-size: contain; + background-repeat: no-repeat; + background-color: rgba(0, 0, 0, 0.6); + background-image: none !important; + padding: 5px; + display: flex; + border-radius: 6pt; + transition: all 0.4s; +} + +.image-container:hover .resize-overlay, +.overlay .resize-overlay { + width: 32px !important; + height: 32px !important; + padding: 10px !important; +} + +.image-container:hover .resize-overlay.expand { + background-image: url("../img/UI/Maximize.svg") !important; +} + +.image-container:hover .resize-overlay.shrink, +.overlay .resize-overlay.shrink { + background-image: url("../img/UI/Minimize.svg") !important; +} + +.image-container:hover img { + box-shadow: 0 0pt 10pt 0 rgba(255, 255, 255, 0.4); +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + display: none; +} + +.enlarged-image { + display: block; + max-height: 50vw; + width: auto; + height: auto; + border-radius: 6pt; + box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 0.5); +} + +.mo2-icon { + position: relative; + width: 2em; + height: 2em; + top: 0.5em; + margin-top: -1em; +} + +.logo-container { + display: flex; +} + +.logo-container img { + display: flex; + height: 256px !important; + padding: 1em; + -webkit-user-select: none !important; + -moz-user-select: none !important; + user-select: none !important; + pointer-events: none !important; +} + +@media only screen and (max-width: 900px) { + .image-container { + max-width: 95% !important; + } + .overlay .image-container { + max-width: 100% !important; + } + .enlarged-image { + max-height: 100vw !important; + } + .logo-container { + flex-direction: column; + align-items: center; + } +}/*# sourceMappingURL=images.css.map */ \ No newline at end of file diff --git a/css/images.css.map b/css/images.css.map new file mode 100644 index 0000000..548c187 --- /dev/null +++ b/css/images.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["images.scss","images.css"],"names":[],"mappings":"AAAA;EACI,mBAAA;EACA,kBAAA;EACA,oBAAA;EACA,eAAA;EACA,cAAA;ACCJ;;ADEA;EACI,0CAAA;EACA,kBAAA;EACA,eAAA;EACA,YAAA;ACCJ;;ADEA;EACI,kBAAA;EACA,SAAA;EACA,WAAA;EACA,UAAA;EACA,WAAA;EACA,wBAAA;EACA,4BAAA;EACA,oCAAA;EACA,iCAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;EACA,oBAAA;ACCJ;;ADEA;;EAEI,sBAAA;EACA,uBAAA;EACA,wBAAA;ACCJ;;ADEA;EACI,0DAAA;ACCJ;;ADEA;;EAEI,0DAAA;ACCJ;;ADEA;EACI,iDAAA;ACCJ;;ADEA;EACI,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,8BAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;EACA,aAAA;ACCJ;;ADEA;EACI,cAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,0CAAA;ACCJ;;ADEA;EACI,kBAAA;EACA,UAAA;EACA,WAAA;EACA,UAAA;EACA,gBAAA;ACCJ;;ADEA;EACI,aAAA;ACCJ;;ADEA;EACI,aAAA;EACA,wBAAA;EACA,YAAA;EACA,oCAAA;KAAA,iCAAA;UAAA,4BAAA;EACA,+BAAA;ACCJ;;ADEA;EACI;IACI,yBAAA;ECCN;EDEE;IACI,0BAAA;ECAN;EDGE;IACI,4BAAA;ECDN;EDIE;IACI,sBAAA;IACA,mBAAA;ECFN;AACF","file":"images.css"} \ No newline at end of file diff --git a/css/images.scss b/css/images.scss new file mode 100644 index 0000000..1b1b75b --- /dev/null +++ b/css/images.scss @@ -0,0 +1,112 @@ +.image-container { + margin: 1em 0 1em 0; + position: relative; + display: inline-flex; + cursor: pointer; + max-width: 80%; +} + +.image-container img { + box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 50%); + border-radius: 6pt; + max-width: 100%; + height: auto; +} + +.resize-overlay { + position: absolute; + top: 10px; + right: 10px; + width: 0px; + height: 0px; + background-size: contain; + background-repeat: no-repeat; + background-color: rgba(0, 0, 0, 0.6); + background-image: none !important; + padding: 5px; + display: flex; + border-radius: 6pt; + transition: all 0.4s; +} + +.image-container:hover .resize-overlay, +.overlay .resize-overlay { + width: 32px !important; + height: 32px !important; + padding: 10px !important; +} + +.image-container:hover .resize-overlay.expand { + background-image: url("../img/UI/Maximize.svg") !important; +} + +.image-container:hover .resize-overlay.shrink, +.overlay .resize-overlay.shrink { + background-image: url("../img/UI/Minimize.svg") !important; +} + +.image-container:hover img { + box-shadow: 0 0pt 10pt 0 rgba(255, 255, 255, 0.4); +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + display: none; +} + +.enlarged-image { + display: block; + max-height: 50vw; + width: auto; + height: auto; + border-radius: 6pt; + box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 50%); +} + +.mo2-icon { + position: relative; + width: 2em; + height: 2em; + top: 0.5em; + margin-top: -1em; +} + +.logo-container { + display: flex; +} + +.logo-container img { + display: flex; + height: 256px !important; + padding: 1em; + user-select: none !important; + pointer-events: none !important; +} + +@media only screen and (max-width: 900px) { + .image-container { + max-width: 95% !important; + } + + .overlay .image-container { + max-width: 100% !important; + } + + .enlarged-image { + max-height: 100vw !important; + } + + .logo-container { + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/css/progressBar.css b/css/progressBar.css new file mode 100644 index 0000000..7973b71 --- /dev/null +++ b/css/progressBar.css @@ -0,0 +1,17 @@ +.progress-container { + z-index: 2; + width: 100%; + height: 5.2em; + background-color: #6e6e6e; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + position: fixed; +} + +.progress-bar { + height: 5.2em; + width: 0%; + background-color: #71e075; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +}/*# sourceMappingURL=progressBar.css.map */ \ No newline at end of file diff --git a/css/progressBar.css.map b/css/progressBar.css.map new file mode 100644 index 0000000..df92293 --- /dev/null +++ b/css/progressBar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["progressBar.scss","progressBar.css"],"names":[],"mappings":"AAAA;EACI,UAAA;EACA,WAAA;EACA,aAAA;EACA,yBAAA;EACA,8BAAA;EACA,+BAAA;EACA,eAAA;ACCJ;;ADEA;EACI,aAAA;EACA,SAAA;EACA,yBAAA;EACA,8BAAA;EACA,+BAAA;ACCJ","file":"progressBar.css"} \ No newline at end of file diff --git a/css/progressBar.scss b/css/progressBar.scss new file mode 100644 index 0000000..c3862d3 --- /dev/null +++ b/css/progressBar.scss @@ -0,0 +1,17 @@ +.progress-container { + z-index: 2; + width: 100%; + height: 5.2em; + background-color: #6e6e6e; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + position: fixed; +} + +.progress-bar { + height: 5.2em; + width: 0%; + background-color: #71e075; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} \ No newline at end of file diff --git a/css/sidebar.css b/css/sidebar.css new file mode 100644 index 0000000..10fbe8d --- /dev/null +++ b/css/sidebar.css @@ -0,0 +1,153 @@ +.sidebar { + display: flex; + flex-direction: column; + width: 15em; + text-align: left; + position: fixed; + margin-top: 5.75em; + margin-left: 0.75em; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + background: #2b2b2b; + outline: 1px solid rgba(0, 0, 0, 0.1); + overflow-x: hidden; + overflow-y: auto; + height: calc(100vh - 6.25em); + transition: all 333ms cubic-bezier(0, 0, 0, 1); + justify-content: flex-start; +} + +.left-sidebar { + left: 0; +} + +.right-sidebar { + right: 0; + flex-wrap: nowrap; + padding-left: 0.7em; + margin-right: 0.75em; + width: 15.7em; +} + +.sidebar-padder { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.sidebar-bottom { + margin-top: auto; +} + +.sidebar .active { + background: rgba(255, 255, 255, 0.1); +} + +.sidebar .active::before { + content: ""; + position: absolute; + left: 0; + transform: translateY(2px); + width: 3px; + height: 16px; + background-color: #ff0000; + border-radius: 8px; +} + +.sidebar p { + margin: 10px 0; +} + +.left-sidebar a, +.sublink { + display: flex; + color: rgb(255, 255, 255); + border: 1px solid transparent; + background-color: transparent; + border-radius: 4px; + height: 32px; + width: auto; + text-align: left; + text-decoration: none; + padding: 5px 12px; + font-size: 1.05em; + margin: 1.5px 0; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); + text-wrap: nowrap; + text-overflow: clip; +} + +.sublink { + padding-left: 1.5em !important; + display: none !important; +} + +.right-sidebar div { + padding-bottom: 0.75em; +} + +.right-sidebar a:not(b a) { + display: flex; + color: rgb(255, 255, 255) !important; + text-decoration: none; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); + padding: 0.2em 0em 0.2em 1em; +} + +.right-sidebar b a { + display: flex; + color: rgb(255, 255, 255) !important; + text-decoration: none; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); + text-wrap: nowrap; +} + +.left-sidebar hr { + margin: 0px 10px !important; +} + +.left-sidebar a:hover { + background: rgba(255, 255, 255, 0.0605); + border: 1px solid rgba(255, 255, 255, 0.0605); +} + +.right-sidebar a:hover { + color: rgba(255, 255, 255, 0.8) !important; +} + +.left-sidebar a:active { + background: rgba(255, 255, 255, 0.0419); + border: 1px solid rgba(255, 255, 255, 0.0419); + color: rgba(255, 255, 255, 0.786); +} + +.right-sidebar a:active { + color: rgba(255, 255, 255, 0.5) !important; +} + +@media only screen and (max-width: 900px) { + .left-sidebar { + height: 100% !important; + width: 0; + margin-left: 0; + margin-top: 0; + padding-top: 5em; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + z-index: 1; + box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; + } + .left-sidebar a, + .sublink { + height: 36px !important; + padding: 7px 12px !important; + } +} +@media only screen and (max-width: 1230px) { + .right-sidebar { + height: 100%; + right: -200em; + } +}/*# sourceMappingURL=sidebar.css.map */ \ No newline at end of file diff --git a/css/sidebar.css.map b/css/sidebar.css.map new file mode 100644 index 0000000..519b10b --- /dev/null +++ b/css/sidebar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["sidebar.scss","sidebar.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,sBAAA;EACA,WAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,kBAAA;EACA,gBAAA;EACA,4BAAA;EACA,8CAAA;EACA,2BAAA;ACCJ;;ADEA;EACI,OAAA;ACCJ;;ADEA;EACI,QAAA;EACA,iBAAA;EACA,mBAAA;EACA,oBAAA;EACA,aAAA;ACCJ;;ADEA;EACI,aAAA;EACA,sBAAA;EACA,YAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,oCAAA;ACCJ;;ADEA;EACI,WAAA;EACA,kBAAA;EACA,OAAA;EACA,0BAAA;EACA,UAAA;EACA,YAAA;EACA,yBAAA;EACA,kBAAA;ACCJ;;ADEA;EACI,cAAA;ACCJ;;ADEA;;EAEI,aAAA;EACA,yBAAA;EACA,6BAAA;EACA,6BAAA;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;EACA,qBAAA;EACA,iBAAA;EACA,iBAAA;EACA,eAAA;EACA,8CAAA;EACA,iBAAA;EACA,mBAAA;ACCJ;;ADEA;EACI,8BAAA;EACA,wBAAA;ACCJ;;ADEA;EACI,sBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,oCAAA;EACA,qBAAA;EACA,8CAAA;EACA,4BAAA;ACCJ;;ADEA;EACI,aAAA;EACA,oCAAA;EACA,qBAAA;EACA,8CAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,2BAAA;ACCJ;;ADEA;EACI,uCAAA;EACA,6CAAA;ACCJ;;ADEA;EACI,0CAAA;ACCJ;;ADEA;EACI,uCAAA;EACA,6CAAA;EACA,iCAAA;ACCJ;;ADEA;EACI,0CAAA;ACCJ;;ADEA;EACI;IACI,uBAAA;IACA,QAAA;IACA,cAAA;IACA,aAAA;IACA,gBAAA;IACA,yBAAA;IACA,4BAAA;IACA,UAAA;IACA,2CAAA;ECCN;EDEE;;IAEI,uBAAA;IACA,4BAAA;ECAN;AACF;ADGA;EACI;IACI,YAAA;IACA,aAAA;ECDN;AACF","file":"sidebar.css"} \ No newline at end of file diff --git a/css/sidebar.scss b/css/sidebar.scss new file mode 100644 index 0000000..9fe14e4 --- /dev/null +++ b/css/sidebar.scss @@ -0,0 +1,153 @@ +.sidebar { + display: flex; + flex-direction: column; + width: 15em; + text-align: left; + position: fixed; + margin-top: 5.75em; + margin-left: 0.75em; + border-radius: 4px; + user-select: none; + background: #2b2b2b; + outline: 1px solid rgba(0, 0, 0, 10%); + overflow-x: hidden; + overflow-y: auto; + height: calc(100vh - 6.25em); + transition: all 333ms cubic-bezier(0, 0, 0, 1); + justify-content: flex-start; +} + +.left-sidebar { + left: 0; +} + +.right-sidebar { + right: 0; + flex-wrap: nowrap; + padding-left: 0.7em; + margin-right: 0.75em; + width: 15.7em; +} + +.sidebar-padder { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.sidebar-bottom { + margin-top: auto; +} + +.sidebar .active { + background: rgba(255, 255, 255, 0.1); +} + +.sidebar .active::before { + content: ''; + position: absolute; + left: 0; + transform: translateY(2px); + width: 3px; + height: 16px; + background-color: #ff0000; + border-radius: 8px; +} + +.sidebar p { + margin: 10px 0; +} + +.left-sidebar a, +.sublink { + display: flex; + color: rgb(255, 255, 255); + border: 1px solid transparent; + background-color: transparent; + border-radius: 4px; + height: 32px; + width: auto; + text-align: left; + text-decoration: none; + padding: 5px 12px; + font-size: 1.05em; + margin: 1.5px 0; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); + text-wrap: nowrap; + text-overflow: clip; +} + +.sublink { + padding-left: 1.5em !important; + display: none !important; +} + +.right-sidebar div { + padding-bottom: 0.75em; +} + +.right-sidebar a:not(b a) { + display: flex; + color: rgb(255, 255, 255) !important; + text-decoration: none; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); + padding: 0.2em 0em 0.2em 1em; +} + +.right-sidebar b a { + display: flex; + color: rgb(255, 255, 255) !important; + text-decoration: none; + transition: all 187ms Cubic-Bezier(0, 0, 0, 1); + text-wrap: nowrap; +} + +.left-sidebar hr { + margin: 0px 10px !important; +} + +.left-sidebar a:hover { + background: rgba(255, 255, 255, 0.0605); + border: 1px solid rgba(255, 255, 255, 0.0605); +} + +.right-sidebar a:hover { + color: rgba(255, 255, 255, 0.8) !important; +} + +.left-sidebar a:active { + background: rgba(255, 255, 255, 0.0419); + border: 1px solid rgba(255, 255, 255, 0.0419); + color: rgba(255, 255, 255, 0.786); +} + +.right-sidebar a:active { + color: rgba(255, 255, 255, 0.5) !important; +} + +@media only screen and (max-width: 900px) { + .left-sidebar { + height: 100% !important; + width: 0; + margin-left: 0; + margin-top: 0; + padding-top: 5em; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + z-index: 1; + box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; + } + + .left-sidebar a, + .sublink { + height: 36px !important; + padding: 7px 12px !important; + } +} + +@media only screen and (max-width: 1230px) { + .right-sidebar { + height: 100%; + right: -200em; + } +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index ee3c911..3a22f53 100644 --- a/css/styles.css +++ b/css/styles.css @@ -25,13 +25,17 @@ scale: 10%; } +html { + scroll-padding-top: 5.375em; +} + div { display: block; } body { margin: 0; - font-size: 0.875em; + font-size: 0.9em; font-weight: 400; line-height: 1.45em; } @@ -55,56 +59,26 @@ h3 { line-height: 1.25em; } -#logo { - width: 14em; - padding: 0.5em; - border-radius: 36px; - margin-right: 2em; - margin-left: 2em; -} - .flex { display: flex; } -.limiters-img { - box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 0.5); - border-radius: 6pt; - margin: 1em 0 1em 0; - max-width: 80%; - height: auto; -} - -.graph-img { - display: block; - margin-left: auto; - margin-right: auto; - box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 0.5); - border-radius: 6pt; - max-width: 80%; - max-height: 90%; - height: auto; -} - -#applyConfirmation { - opacity: 0%; - transition-duration: 1s; -} - a { color: rgb(101, 206, 253); text-decoration: none; } +a:hover { + color: hsl(199, 83%, 45%); +} + li { margin-top: 1em; margin-bottom: 1em; } input, -button, -.button, -.button-big { +button { color: white; background-color: rgba(255, 255, 255, 0.0605); border: 1px solid rgba(255, 255, 255, 0.093); @@ -116,351 +90,55 @@ button, } input:hover, -button:hover, -.button:hover, -.button-big:hover { +button:hover { background-color: rgba(255, 255, 255, 0.0837); } input:active, -button:active, -.button:active, -.button-big:active { +button:active { background-color: rgba(255, 255, 255, 0.0326); border-color: rgba(255, 255, 255, 0.0698); color: rgba(255, 255, 255, 0.786); } -#intelButton { - background-color: #2166b3; - color: white; -} - -#intelButton:hover { - background-color: hsl(212, 69%, 55%); -} - -#amdButton { - background-color: #dc0032; - color: white; -} - -#amdButton:hover { - background-color: hsl(346, 100%, 65%); -} - -#nvidiaButton { - background-color: #71bb21; - color: white; -} - -#nvidiaButton:hover { - background-color: hsl(89, 70%, 60%); -} - input:active { border-bottom: 1px solid rgb(101, 206, 253); } -.vertical-separator { - border-left: 5px solid #2b2b2b; - border-right: 5px solid #2b2b2b; - background-color: rgb(114, 114, 114); -} - -.comparison-table { - table-layout: fixed; - width: 100%; - border-spacing: 0.4em; -} - -.comparison-table h2 { - font-size: 1.5em; -} - -.comparison-table .card, -.comparison-table .card-red, -.comparison-table .card-green { - vertical-align: top; -} - -.expander-top { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - outline: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgba(255, 255, 255, 0.0512); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13); - margin-bottom: 0 !important; - display: flex; - align-items: center; -} - -.expander-top.active { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - background-color: rgba(255, 255, 255, 0.0612); -} - -.expander-top.clickable { - cursor: pointer; -} - -.expander-top.clickable:hover { - outline: 1px solid rgba(255, 255, 255, 0.07); - background-color: rgba(255, 255, 255, 0.0812); -} - -.expander-top.clickable:active { - background-color: rgba(255, 255, 255, 0.03); -} - -.expander-bottom { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; - outline: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgba(255, 255, 255, 0.0512); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13); - display: none; - animation: slide-up 0.4s; - z-index: 0; - position: relative; - overflow-y: hidden; - margin-top: 0 !important; -} - -.button-big { - background-color: rgba(255, 255, 255, 0.0605); - border: 1px solid rgba(255, 255, 255, 0.093); - border-radius: 3px; - text-align: center; - padding: 0.7em; - display: inline-block; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - min-width: 5em; - max-width: 8em; - min-height: 1em; - width: 100%; - transition: all 187ms Cubic-Bezier(0, 0, 0, 1); -} - .center { margin-left: auto; margin-right: auto; } -img.chevron { - height: 16px; - width: 16px; - box-shadow: none; - margin-top: 3px; - transition: transform 0.1s; - margin-left: auto; -} - hr { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; margin: 10px; } -.page-picker { - display: flex; - flex-direction: row; - flex-flow: row; - flex-basis: auto; - justify-content: space-between; - align-items: stretch; - padding: 0.25em 2em 0.25em 2em; -} - -.page-picker a { - flex-basis: 10%; - flex-grow: 1; - text-align: center; - padding: 1em; - margin: 0em 0.2em 0em 0.2em; - text-decoration: none; -} - -.sidebar { - top: 0; - float: left; - width: 15em; - text-align: center; - position: fixed; - z-index: 2; - margin-top: 1em; - margin-left: 0.75em; - border-radius: 4px; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - background: #2b2b2b; - outline: 1px solid rgba(0, 0, 0, 0.1); - transition: all 333ms Cubic-Bezier(0, 0, 0, 1); - overflow: hidden; -} - -.sidebar p { - margin: 10px 0; -} - -.sidebar a { - display: block; - color: rgb(255, 255, 255); - border: 1px solid transparent; - background-color: transparent; - border-radius: 4px; - height: 36px; - width: 100%; - text-align: left; - text-decoration: none; - padding: 7px 8px; - margin: 1.5px 0; - transition: all 187ms Cubic-Bezier(0, 0, 0, 1); -} - -.page-picker a:hover { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.0605); -} - -.sidebar a:hover { - background: rgba(255, 255, 255, 0.0605); - border: 1px solid rgba(255, 255, 255, 0.0605); -} - -.page-picker a:active, -.sidebar a:active { - background: rgba(255, 255, 255, 0.0419); - border: 1px solid rgba(255, 255, 255, 0.0419); - color: rgba(255, 255, 255, 0.786); -} - -.flippy { - display: inline-block; - position: relative; - z-index: 1; -} - -.page-picker a:hover .flippy, -.sidebar a:hover .flippy, -.header:hover span, -.flippy:hover { - cursor: pointer; - animation: rotate 0.4s ease-in-out; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.page-picker .flippy, -.sidebar .flippy { - top: 3px; -} - -.subIcon { - position: relative; - left: 15px; - margin-left: -12px; - font-size: large; - z-index: 0; -} - .selected { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } -.card { - outline: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgba(255, 255, 255, 0.0512); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13); -} - -.card-basic { - font-family: monospace; - font-size: 1.3em; - outline: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgba(255, 255, 255, 0.0326); - width: -moz-fit-content; - width: fit-content; -} - -.card-yellow { - outline: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgb(67, 53, 25); - text-align: left; - width: -moz-fit-content; - width: fit-content; -} - -.card-red { - outline: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgb(68, 39, 38); - text-align: left; - width: -moz-fit-content; - width: fit-content; -} - -.card-green { - outline: 1px solid rgba(0, 0, 0, 0.1); - background-color: rgb(57, 61, 27); - text-align: left; - width: -moz-fit-content; - width: fit-content; -} - -.card, -.card-basic, -.card-green, -.card-red, -.card-yellow, -.expander-bottom, -.expander-top { - padding: 0 1em 0 1em; - border-radius: 8px; - border: 1px solid transparent; - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -b.card-basic { - padding: 0.3em 0.5em 0.3em 0.5em; -} - .annotations { font-size: small; } -.header { - font-size: 32px; - padding: 20px 12px 22px 10px; - margin-left: -100px; - margin-bottom: 10px; - background: rgb(43, 43, 43); - outline: 1px solid rgba(0, 0, 0, 0.1); - position: fixed; - border-bottom-right-radius: 10px; - border-top-right-radius: 10px; - z-index: 2; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - transition: all 333ms Cubic-Bezier(0, 0, 0, 1); - margin-top: 0.033em !important; +.container { + display: flex; + min-height: 100vh; } .content { - float: left; + flex: 1; + display: flex; + flex-direction: column; + margin-top: 70px; margin-left: 14.5em; + margin-right: 15.2em; width: 80%; padding: 0 2em; - z-index: 0; } .content-index { @@ -485,153 +163,47 @@ footer { font-family: arial, helvetica, sans-serif; } -#karutpls { - margin: auto; -} - -.width-very-limited { - max-width: 70%; -} - -.width-limited { - max-width: 90%; -} - -.width-full { - max-width: 100%; -} - -#card-buttons { - position: absolute; - outline: 1px solid rgba(117, 117, 117, 0.4); - background: url(NoiseAsset_256.png), rgba(44, 44, 44, 0.442); - background-blend-mode: normal, luminosity; - mix-blend-mode: normal; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - border-radius: 7px; - padding: 1px 2px 1px 2px; - width: -moz-fit-content; - width: fit-content; - height: 42px; - margin-left: auto; - margin-right: auto; - top: 15px; - left: 0; - right: 0; - box-shadow: 0 32px 64px rgba(0, 0, 0, 0.1), 0 2px 21px rgba(0, 0, 0, 0.2); - z-index: 1; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -#card-fonfig { - position: absolute; - outline: 1px solid rgba(117, 117, 117, 0.4); - background: rgba(44, 44, 44, 0.442); - background-blend-mode: normal, luminosity; - mix-blend-mode: normal; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - border-radius: 7px; - margin-right: 10px; - padding: 10px 15px 10px 15px; - bottom: 20px; - right: 0; - z-index: 1; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - cursor: pointer; - transition: background-color 0.25s ease-in-out; - text-align: right; - font-size: 1.1em; -} - -#card-fonfig.active, -.button-big.active { - background-color: rgb(91, 206, 255); - color: black; +.section { + opacity: 0; + transition: opacity 1s ease; } -#card-fonfig.active:hover, -.button-big.active:hover { - background-color: rgba(96, 205, 255, 0.8); +.section.fade-in { + opacity: 1; } -.button-big.active:active { - background-color: rgb(82, 174, 215); - color: rgba(0, 0, 0, 0.5); +.faq h4 { + margin-top: 1.7em; + margin-bottom: 0.2em; } -#card-buttons button { - margin: 0 2px 0 2px; - height: 40px; - min-width: 80px; - background-color: transparent; - border: 0 solid transparent; - cursor: pointer; - padding-top: 6px; - transition: background-color 0.2s ease-in-out; +.mirror { + rotate: 180deg; } -#card-buttons button:hover, -#card-fonfig:hover { - color: rgba(255, 255, 255, 0.786); - background-color: rgba(255, 255, 255, 0.0837); +.width-90 { + max-width: 90% !important; } -.selector { - margin-left: auto; - margin-right: auto; - position: relative; - top: 9px; - width: 0; - height: 3px; - border-radius: 20px; - background: #60cdff; +.width-70 { + max-width: 70% !important; } -.active .selector { - width: 16px; - height: 3px; +.width-60 { + max-width: 60% !important; } -#card-buttons button:active .selector { - background: rgba(96, 205, 255, 0.8); +.width-40 { + max-width: 40% !important; } -.image-container { - position: relative; - margin: auto; -} - -.image-container img { - max-width: 100%; - z-index: 1; - vertical-align: middle; +textarea { + padding: 1em !important; + color: white; + resize: none; cursor: pointer; } -.image-container:hover #card-fonfig { - opacity: 100%; -} - -.section { - margin-top: 50px; -} - -.expander-opened { - animation: slide-down 2s; -} - -#pepestare { - width: 24px; - margin: 0; - box-shadow: none; -} - @keyframes rotate { 50% { transform: translateY(-6px) rotateZ(180deg); @@ -658,168 +230,19 @@ footer { margin-top: -0.12px; } } -@media (prefers-color-scheme: light) { - .theme { - background: rgb(243, 243, 243); - color: rgb(0, 0, 0); - } - .limiters-img { - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04); - } - hr { - border: 1px solid rgba(0, 0, 0, 0.2); - } - input, - button, - .button, - .button-big { - background-color: rgba(255, 255, 255, 0.7); - border-color: rgba(0, 0, 0, 0.1622); - color: rgba(0, 0, 0, 0.8956); - } - input:hover, - button:hover, - .button:hover, - .button-big:hover { - background-color: rgba(249, 249, 249, 0.5); - } - input:active, - button:active, - .button:active, - .button-big:active { - background-color: rgba(249, 249, 249, 0.3); - border-color: rgba(0, 0, 0, 0.0578); - color: rgba(0, 0, 0, 0.6063); - } - a { - color: rgb(13, 96, 182); - } - .header { - outline: 1px solid rgba(0, 0, 0, 0.0578); - background: rgb(251, 251, 251); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04); - } - .card, - .expander-top, - .expander-bottom { - outline: 1px solid rgba(0, 0, 0, 0.0578); - background-color: rgba(255, 255, 255, 0.7); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.8956); - } - .expander-top.clickable:hover { - outline: 1px solid rgba(0, 0, 0, 0.0578); - background-color: rgba(255, 255, 255, 0.25); - } - .expander-top.clickable:active { - background-color: rgba(255, 255, 255, 0.2); - } - .expander-top.active { - background-color: rgba(255, 255, 255, 0.7); - } - #card-fonfig.active, - .button-big.active { - background-color: rgb(0, 97, 185); - color: white; - } - #card-fonfig.active:hover, - .button-big.active:hover { - background-color: rgb(25, 112, 191); - } - .button-big.active:active { - background-color: rgb(49, 126, 198); - border-color: rgb(49, 126, 198); - color: rgba(255, 255, 255, 0.7); - } - .card-basic { - outline: 1px solid rgba(0, 0, 0, 0.0578); - background-color: rgba(249, 249, 249, 0.5); - color: rgba(0, 0, 0, 0.8956); - } - .card-green { - outline: 1px solid rgba(0, 0, 0, 0.0578); - background-color: rgb(223, 246, 221); - color: rgba(0, 0, 0, 0.8956); - border-radius: 8px; - } - .card-yellow { - outline: 1px solid rgba(0, 0, 0, 0.0578); - background-color: rgb(255, 244, 206); - color: rgba(0, 0, 0, 0.8956); - } - .card-red { - outline: 1px solid rgba(0, 0, 0, 0.0578); - background-color: rgb(253, 231, 233); - color: rgba(0, 0, 0, 0.8956); - } - .sidebar { - background: rgb(251, 251, 251); - outline: 1px solid rgba(0, 0, 0, 0.0578); - } - .sidebar a { - color: rgba(0, 0, 0, 0.8956); - } - .page-picker a:active, - .sidebar a:active { - background: rgba(0, 0, 0, 0.0241); - border: 1px solid rgba(0, 0, 0, 0.0241); - color: rgba(0, 0, 0, 0.6063); - } - .page-picker a:hover, - .sidebar a:hover { - background: rgba(0, 0, 0, 0.0373); - border: 1px solid rgba(0, 0, 0, 0.0373); - color: rgba(0, 0, 0, 0.8956); - } - *::-webkit-scrollbar { - width: 12px; - } - *::-webkit-scrollbar-track { - background: transparent; - } - *::-webkit-scrollbar-thumb { - background-color: rgba(99, 99, 99, 0.63); - border-radius: 20px; - } - *::-webkit-scrollbar-thumb:hover { - background-color: rgba(34, 34, 34, 0.63); - border-radius: 20px; - scale: 10%; +@media only screen and (max-width: 1220px) { + .content, + .content-index { + margin-right: 0px !important; } } @media only screen and (max-width: 900px) { .content, .content-index { - width: 100%; - margin-left: 0; - margin-top: 50px; - } - .sidebar { - height: 100%; - width: 0; - margin-top: 0; - margin-bottom: 20%; - margin-left: 0; - border-top-right-radius: 0; - overflow-y: scroll; - } - .header { - margin-left: 0; - height: -moz-fit-content; - height: fit-content; - width: -moz-fit-content; - width: fit-content; + margin-left: 0px; } } @media only screen and (max-width: 700px) { - .comparison-table .card-red, - .comparison-table .card-green { - padding: 0em; - } - .comparison-table .card-yellow { - margin: 0em 0.75em 0em 0em; - padding: 0.1em 0.5em 0.1em 0.5em; - } ul { margin-left: -1.75em; } @@ -829,84 +252,16 @@ footer { .content { padding: 4px; } - .expander-bottom, - .expander-top, - .card-red, - .card-yellow, - .card-green, - .card-basic, - .card { - padding: 0.65em; - } - .comparison-table { - border-spacing: 0.1em; - } - .comparison-table h2 { - font-size: 1em; - } - .comparison-table ul { - font-size: 0.8em; - word-wrap: break-word; - line-height: 1.3em; - list-style-position: outside; - margin-left: -3em; - list-style: none; - } - #card-buttons { - transform: scale(0.65); - } - #card-fonfig { - transform: scale(0.65); - margin-right: -2.5%; - } - #card-buttons button { - width: -moz-fit-content; - width: fit-content; + .width-90 { + max-width: 100% !important; } - #logo { - margin-left: 0; - margin-right: 0; - width: 0em; + .width-70 { + max-width: 90% !important; } - .width-limited { - max-width: 100%; + .width-60 { + max-width: 80% !important; } - .limiters-img { - max-width: 100%; + .width-40 { + max-width: 70% !important; } -} -@media only screen and (min-width: 901px) { - .header { - margin-left: -100px; - } -} -.abbreviation { - text-decoration: underline !important; - text-decoration-style: dotted !important; -} - -.progress-container { - width: 100%; - background-color: #6e6e6e; - position: fixed; -} - -.progress-bar { - height: 0.1em; - background-color: #71e075; - width: 0; -} - -.section { - opacity: 0; - transition: opacity 1s ease; -} - -.section.fade-in { - opacity: 1; -} - -.faq h4 { - margin-top: 1.7em; - margin-bottom: 0.2em; }/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/css/styles.css.map b/css/styles.css.map index 1c61bb7..18cf28b 100644 --- a/css/styles.css.map +++ b/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file +{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,uBAAA;EACA,8CAAA;EACA,qBAAA;EACA,sDAAA;ACCJ;;ADEA;EACI,WAAA;ACCJ;;ADEA;EACI,uBAAA;ACCJ;;ADEA;EACI,2CAAA;EACA,mBAAA;ACCJ;;ADEA;EACI,2CAAA;EACA,mBAAA;EACA,UAAA;ACCJ;;ADEA;EACI,2BAAA;ACCJ;;ADEA;EACI,cAAA;ACCJ;;ADEA;EACI,SAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;ACCJ;;ADEA;EACI,eAAA;EACA,gBAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,gBAAA;EACA,gBAAA;EACA,kBAAA;EACA,eAAA;ACCJ;;ADEA;EACI,gBAAA;EACA,gBAAA;EACA,mBAAA;ACCJ;;ADEA;EACI,aAAA;ACCJ;;ADEA;EACI,yBAAA;EACA,qBAAA;ACCJ;;ADEA;EACI,yBAAA;ACCJ;;ADEA;EACI,eAAA;EACA,kBAAA;ACCJ;;ADEA;;EAEI,YAAA;EACA,6CAAA;EACA,4CAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,8CAAA;ACCJ;;ADEA;;EAEI,6CAAA;ACCJ;;ADEA;;EAEI,6CAAA;EACA,yCAAA;EACA,iCAAA;ACCJ;;ADEA;EACI,2CAAA;ACCJ;;ADEA;EACI,iBAAA;EACA,kBAAA;ACCJ;;ADEA;EACI,0CAAA;EACA,kBAAA;EACA,YAAA;ACCJ;;ADEA;EACI,gDAAA;EACA,sDAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,OAAA;EACA,aAAA;EACA,sBAAA;EACA,gBAAA;EACA,mBAAA;EACA,oBAAA;EACA,UAAA;EACA,cAAA;ACCJ;;ADEA;EACI,mBAAA;EACA,oBAAA;EACA,cAAA;EACA,UAAA;ACCJ;;ADEA;EACI,kBAAA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;EACA,qCAAA;EACA,6CAAA;ACCJ;;ADEA;EACI,2BAAA;EACA,YAAA;EACA,yCAAA;ACCJ;;ADEA;EACI,UAAA;EACA,2BAAA;ACCJ;;ADEA;EACI,UAAA;ACCJ;;ADEA;EACI,iBAAA;EACA,oBAAA;ACCJ;;ADEA;EACI,cAAA;ACCJ;;ADEA;EACI,yBAAA;ACCJ;;ADEA;EACI,yBAAA;ACCJ;;ADEA;EACI,yBAAA;ACCJ;;ADEA;EACI,yBAAA;ACCJ;;ADEA;EACI,uBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;ACCJ;;ADEA;EACI;IACI,2CAAA;ECCN;EDEE;IACI,0CAAA;ECAN;AACF;ADIA;EACI;IACI,aAAA;IACA,mBAAA;ECFN;EDKE;IACI,kBAAA;ECHN;AACF;ADMA;EACI;IACI,kBAAA;ECJN;EDOE;IACI,aAAA;IACA,mBAAA;ECLN;AACF;ADQA;EACI;;IAEI,4BAAA;ECNN;AACF;ADSA;EACI;;IAEI,gBAAA;ECPN;AACF;ADUA;EACI;IACI,oBAAA;ECRN;EDWE;IACI,oBAAA;ECTN;EDYE;IACI,YAAA;ECVN;EDaE;IACI,0BAAA;ECXN;EDcE;IACI,yBAAA;ECZN;EDeE;IACI,yBAAA;ECbN;EDgBE;IACI,yBAAA;ECdN;AACF","file":"styles.css"} \ No newline at end of file diff --git a/css/styles.scss b/css/styles.scss index a57de08..24e6314 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -25,13 +25,17 @@ scale: 10% } +html { + scroll-padding-top: 5.375em; +} + div { display: block; } body { margin: 0; - font-size: 0.875em; + font-size: 0.9em; font-weight: 400; line-height: 1.45em; } @@ -55,56 +59,26 @@ h3 { line-height: 1.25em; } -#logo { - width: 14em; - padding: 0.5em; - border-radius: 36px; - margin-right: 2em; - margin-left: 2em; -} - .flex { display: flex; } -.limiters-img { - box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 50%); - border-radius: 6pt; - margin: 1em 0 1em 0; - max-width: 80%; - height: auto; -} - -.graph-img { - display: block; - margin-left: auto; - margin-right: auto; - box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 50%); - border-radius: 6pt; - max-width: 80%; - max-height: 90%; - height: auto; -} - -#applyConfirmation { - opacity: 0%; - transition-duration: 1s; -} - a { color: rgb(101, 206, 253); text-decoration: none; } +a:hover { + color: hsl(199, 83%, 45%); +} + li { margin-top: 1em; margin-bottom: 1em; } input, -button, -.button, -.button-big { +button { color: white; background-color: rgba(255, 255, 255, 6.05%); border: 1px solid rgba(255, 255, 255, 9.3%); @@ -116,343 +90,55 @@ button, } input:hover, -button:hover, -.button:hover, -.button-big:hover { +button:hover { background-color: rgba(255, 255, 255, 8.37%); } input:active, -button:active, -.button:active, -.button-big:active { +button:active { background-color: rgba(255, 255, 255, 3.26%); border-color: rgba(255, 255, 255, 6.98%); color: rgba(255, 255, 255, 78.6%); } -#intelButton { - background-color: #2166b3; - color: white -} - -#intelButton:hover { - background-color: hsl(212, 69%, 55%); -} - -#amdButton { - background-color: #dc0032; - color: white -} - -#amdButton:hover { - background-color: hsl(346, 100%, 65%); -} - -#nvidiaButton { - background-color: #71bb21; - color: white -} - -#nvidiaButton:hover { - background-color: hsl(89, 70%, 60%); -} - - input:active { border-bottom: 1px solid rgb(101, 206, 253); } -.vertical-separator { - border-left: 5px solid #2b2b2b; - border-right: 5px solid #2b2b2b; - background-color: rgb(114, 114, 114); -} - -.comparison-table { - table-layout: fixed; - width: 100%; - border-spacing: 0.4em; -} - -.comparison-table h2 { - font-size: 1.5em; -} - -.comparison-table .card, -.comparison-table .card-red, -.comparison-table .card-green { - vertical-align: top; -} - -.expander-top { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - outline: 1px solid rgba(0, 0, 0, 10%); - background-color: rgba(255, 255, 255, 5.12%); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 13%); - margin-bottom: 0 !important; - display:flex; - align-items: center; -} - -.expander-top.active { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - background-color: rgba(255, 255, 255, 6.12%); -} - -.expander-top.clickable { - cursor: pointer; -} - -.expander-top.clickable:hover { - outline: 1px solid rgba(255, 255, 255, 7%); - background-color: rgba(255, 255, 255, 8.12%); -} - -.expander-top.clickable:active { - background-color: rgba(255, 255, 255, 3%); -} - -.expander-bottom { - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; - outline: 1px solid rgba(0, 0, 0, 10%); - background-color: rgba(255, 255, 255, 5.12%); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 13%); - display: none; - animation: slide-up 0.4s; - z-index: 0; - position: relative; - overflow-y: hidden; - margin-top: 0 !important; -} - - - -.button-big { - background-color: rgba(255, 255, 255, 6.05%); - border: 1px solid rgba(255, 255, 255, 9.3%); - border-radius: 3px; - text-align: center; - padding: 0.7em; - display: inline-block; - cursor: pointer; - user-select: none; - min-width: 5em; - max-width: 8em; - min-height: 1em; - width: 100%; - transition: all 187ms Cubic-Bezier(0, 0, 0, 1); -} - .center { margin-left: auto; margin-right: auto; } -img.chevron { - height: 16px; - width: 16px; - box-shadow: none; - margin-top: 3px; - transition: transform 0.1s; - margin-left: auto; -} - hr { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; margin: 10px; } -.page-picker { - display: flex; - flex-direction: row; - flex-flow: row; - flex-basis: auto; - justify-content: space-between; - align-items: stretch; - padding: 0.25em 2em 0.25em 2em; - -} - -.page-picker a { - flex-basis: 10%; - flex-grow: 1; - text-align: center; - padding: 1em; - margin: 0em 0.2em 0em 0.2em; - text-decoration: none; -} - -.sidebar { - top: 0; - float: left; - width: 15em; - text-align: center; - position: fixed; - z-index: 2; - margin-top: 1em; - margin-left: 0.75em; - border-radius: 4px; - user-select: none; - background: #2b2b2b; - outline: 1px solid rgba(0, 0, 0, 10%); - transition: all 333ms Cubic-Bezier(0, 0, 0, 1); - overflow: hidden; -} - -.sidebar p { - margin: 10px 0; -} - -.sidebar a { - display: block; - color: rgb(255, 255, 255); - border: 1px solid transparent; - background-color: transparent; - border-radius: 4px; - height: 36px; - width: 100%; - text-align: left; - text-decoration: none; - padding: 7px 8px; - margin: 1.5px 0; - transition: all 187ms Cubic-Bezier(0, 0, 0, 1); -} - -.page-picker a:hover { - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.0605); -} - -.sidebar a:hover { - background: rgba(255, 255, 255, 0.0605); - border: 1px solid rgba(255, 255, 255, 0.0605); -} - -.page-picker a:active, -.sidebar a:active { - background: rgba(255, 255, 255, 0.0419); - border: 1px solid rgba(255, 255, 255, 0.0419); - color: rgba(255, 255, 255, 0.786); -} - -.flippy { - display: inline-block; - position: relative; - z-index: 1; -} - -.page-picker a:hover .flippy, -.sidebar a:hover .flippy, -.header:hover span, -.flippy:hover { - cursor: pointer; - animation: rotate 0.4s ease-in-out; - user-select: none; -} - -.page-picker .flippy, -.sidebar .flippy { - top: 3px; -} - -.subIcon { - position: relative; - left: 15px; - margin-left: -12px; - font-size: large; - z-index: 0; -} - .selected { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; } -.card { - outline: 1px solid rgba(0, 0, 0, 10%); - background-color: rgba(255, 255, 255, 5.12%); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 13%); -} - -.card-basic { - font-family: monospace; - font-size: 1.3em; - outline: 1px solid rgba(0, 0, 0, 10%); - background-color: rgba(255, 255, 255, 3.26%); - width: fit-content; -} - -.card-yellow { - outline: 1px solid rgba(0, 0, 0, 10%); - background-color: rgb(67, 53, 25); - text-align: left; - width: fit-content; -} - -.card-red { - outline: 1px solid rgba(0, 0, 0, 10%); - background-color: rgb(68, 39, 38); - text-align: left; - width: fit-content; -} - -.card-green { - outline: 1px solid rgba(0, 0, 0, 10%); - background-color: rgb(57, 61, 27); - text-align: left; - width: fit-content; -} - -.card, -.card-basic, -.card-green, -.card-red, -.card-yellow, -.expander-bottom, -.expander-top { - padding: 0 1em 0 1em; - border-radius: 8px; - border: 1px solid transparent; - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -b.card-basic { - padding: 0.3em 0.5em 0.3em 0.5em; -} - .annotations { font-size: small; } -.header { - font-size: 32px; - padding: 20px 12px 22px 10px; - margin-left: -100px; - margin-bottom: 10px; - background: rgb(43, 43, 43); - outline: 1px solid rgba(0, 0, 0, 10%); - position: fixed; - border-bottom-right-radius: 10px; - border-top-right-radius: 10px; - z-index: 2; - cursor: pointer; - user-select: none; - transition: all 333ms Cubic-Bezier(0, 0, 0, 1); - margin-top: 0.033em !important; +.container { + display: flex; + min-height: 100vh; } .content { - float: left; + flex: 1; + display: flex; + flex-direction: column; + margin-top: 70px; margin-left: 14.5em; + margin-right: 15.2em; width: 80%; padding: 0 2em; - z-index: 0; } .content-index { @@ -477,150 +163,48 @@ footer { font-family: arial, helvetica, sans-serif; } -#karutpls { - margin: auto; -} - -.width-very-limited { - max-width: 70%; -} - -.width-limited { - max-width: 90%; -} - -.width-full { - max-width: 100%; -} - -#card-buttons { - position: absolute; - outline: 1px solid rgba(117, 117, 117, 0.4); - background: url(NoiseAsset_256.png), rgba(44, 44, 44, 0.442); - background-blend-mode: normal, luminosity; - mix-blend-mode: normal; - backdrop-filter: blur(10px); - border-radius: 7px; - padding: 1px 2px 1px 2px; - width: fit-content; - height: 42px; - margin-left: auto; - margin-right: auto; - top: 15px; - left: 0; - right: 0; - box-shadow: 0 32px 64px rgba(0, 0, 0, 0.1), 0 2px 21px rgba(0, 0, 0, 0.2); - z-index: 1; - user-select: none; -} - -#card-fonfig { - position: absolute; - outline: 1px solid rgba(117, 117, 117, 0.4); - background: rgba(44, 44, 44, 0.442); - background-blend-mode: normal, luminosity; - mix-blend-mode: normal; - backdrop-filter: blur(10px); - border-radius: 7px; - margin-right: 10px; - padding: 10px 15px 10px 15px; - bottom: 20px; - right: 0; - z-index: 1; - user-select: none; - cursor: pointer; - transition: background-color 0.25s ease-in-out; - text-align: right; - font-size: 1.1em; +.section { + opacity: 0; + transition: opacity 1s ease; } -#card-fonfig.active, -.button-big.active { - background-color: rgb(91, 206, 255); - color: black; +.section.fade-in { + opacity: 1; } -#card-fonfig.active:hover, -.button-big.active:hover { - background-color: rgba(96, 205, 255, 0.8); +.faq h4 { + margin-top: 1.7em; + margin-bottom: 0.2em; } -.button-big.active:active { - background-color: rgb(82, 174, 215); - color: rgba(0, 0, 0, 50%); +.mirror { + rotate: 180deg; } -#card-buttons button { - margin: 0 2px 0 2px; - height: 40px; - min-width: 80px; - background-color: transparent; - border: 0 solid transparent; - cursor: pointer; - padding-top: 6px; - transition: background-color 0.2s ease-in-out; +.width-90 { + max-width: 90% !important; } -#card-buttons button:hover, -#card-fonfig:hover { - color: rgba(255, 255, 255, 0.786); - background-color: rgba(255, 255, 255, 8.37%); +.width-70 { + max-width: 70% !important; } - -.selector { - margin-left: auto; - margin-right: auto; - position: relative; - top: 9px; - width: 0; - height: 3px; - border-radius: 20px; - background: #60cdff; -} - -.active .selector { - width: 16px; - height: 3px; +.width-60 { + max-width: 60% !important; } -#card-buttons button:active .selector { - background: rgba(96, 205, 255, 0.8); +.width-40 { + max-width: 40% !important; } - -.image-container { - position: relative; - margin: auto; -} - -.image-container img { - max-width: 100%; - z-index: 1; - vertical-align: middle; +textarea { + padding: 1em !important; + color: white; + resize: none; cursor: pointer; } -.image-container:hover #card-fonfig { - opacity: 100%; -} - -.section { - margin-top: 50px; -} - -.expander-opened { - animation: slide-down 2s; -} - -#pepestare { - width: 24px; - margin: 0; - box-shadow: none; -} - @keyframes rotate { - 50% { transform: translateY(-6px) rotateZ(180deg); } @@ -653,200 +237,21 @@ footer { } } -@media (prefers-color-scheme: light) { - .theme { - background: rgb(243, 243, 243); - color: rgb(0, 0, 0); - } - - .limiters-img { - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 4%); - } - - hr { - border: 1px solid rgba(0, 0, 0, 0.2); - } - - input, - button, - .button, - .button-big { - background-color: rgba(255, 255, 255, 70%); - border-color: rgba(0, 0, 0, 16.22%); - color: rgba(0, 0, 0, 89.56%); - } - - input:hover, - button:hover, - .button:hover, - .button-big:hover { - background-color: rgba(249, 249, 249, 50%); - } - - input:active, - button:active, - .button:active, - .button-big:active { - background-color: rgba(249, 249, 249, 30%); - border-color: rgba(0, 0, 0, 5.78%); - color: rgba(0, 0, 0, 60.63%); - } - - a { - color: rgb(13, 96, 182) - } - - .header { - outline: 1px solid rgba(0, 0, 0, 5.78%); - background: rgb(251, 251, 251); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 4%); - } - - .card, - .expander-top, - .expander-bottom { - outline: 1px solid rgba(0, 0, 0, 5.78%); - background-color: rgba(255, 255, 255, 70%); - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 4%); - color: rgba(0, 0, 0, 89.56%); - } - - .expander-top.clickable:hover { - outline: 1px solid rgba(0, 0, 0, 5.78%); - background-color: rgba(255, 255, 255, 25%); - } - - .expander-top.clickable:active { - background-color: rgba(255, 255, 255, 20%); - } - - .expander-top.active { - background-color: rgba(255, 255, 255, 70%); - } - - #card-fonfig.active, - .button-big.active { - background-color: rgb(0, 97, 185); - color: white; - } - - #card-fonfig.active:hover, - .button-big.active:hover { - background-color: rgb(25, 112, 191); - } - - .button-big.active:active { - background-color: rgb(49, 126, 198); - border-color: rgb(49, 126, 198); - color: rgba(255, 255, 255, 70%); - } - - .card-basic { - outline: 1px solid rgba(0, 0, 0, 5.78%); - background-color: rgba(249, 249, 249, 50%); - color: rgba(0, 0, 0, 89.56%); - } - - .card-green { - outline: 1px solid rgba(0, 0, 0, 5.78%); - background-color: rgb(223, 246, 221); - color: rgba(0, 0, 0, 89.56%); - border-radius: 8px; - } - - .card-yellow { - outline: 1px solid rgba(0, 0, 0, 5.78%); - background-color: rgb(255, 244, 206); - color: rgba(0, 0, 0, 89.56%); - } - - .card-red { - outline: 1px solid rgba(0, 0, 0, 5.78%); - background-color: rgb(253, 231, 233); - color: rgba(0, 0, 0, 89.56%); - } - - .sidebar { - background: rgb(251, 251, 251); - outline: 1px solid rgba(0, 0, 0, 5.78%); - } - - .sidebar a { - color: rgba(0, 0, 0, 0.8956); - } - - .page-picker a:active, - .sidebar a:active { - background: rgba(0, 0, 0, 0.0241); - border: 1px solid rgba(0, 0, 0, 0.0241); - color: rgba(0, 0, 0, 0.6063); - } - - .page-picker a:hover, - .sidebar a:hover { - background: rgba(0, 0, 0, 0.0373); - border: 1px solid rgba(0, 0, 0, 0.0373); - color: rgba(0, 0, 0, 0.8956); - } - - *::-webkit-scrollbar { - width: 12px; - } - - *::-webkit-scrollbar-track { - background: transparent; - } - - *::-webkit-scrollbar-thumb { - background-color: rgba(99, 99, 99, 0.63); - border-radius: 20px; - } - - *::-webkit-scrollbar-thumb:hover { - background-color: rgba(34, 34, 34, 0.63); - border-radius: 20px; - scale: 10% +@media only screen and (max-width: 1220px) { + .content, + .content-index { + margin-right: 0px !important; } } @media only screen and (max-width: 900px) { - .content, .content-index { - width: 100%; - margin-left: 0; - margin-top: 50px; - } - - .sidebar { - height: 100%; - width: 0; - margin-top: 0; - margin-bottom: 20%; - margin-left: 0; - border-top-right-radius: 0; - overflow-y: scroll; - } - - .header { - margin-left: 0; - height: fit-content; - width: fit-content; + margin-left: 0px; } } @media only screen and (max-width: 700px) { - - .comparison-table .card-red, - .comparison-table .card-green { - padding: 0em; - } - - .comparison-table .card-yellow { - margin: 0em 0.75em 0em 0em; - padding: 0.1em 0.5em 0.1em 0.5em; - } - ul { margin-left: -1.75em; } @@ -859,95 +264,19 @@ footer { padding: 4px; } - .expander-bottom, - .expander-top, - .card-red, - .card-yellow, - .card-green, - .card-basic, - .card { - padding: 0.65em; - } - - .comparison-table { - border-spacing: 0.1em; + .width-90 { + max-width: 100% !important; } - - .comparison-table h2 { - font-size: 1em; + + .width-70 { + max-width: 90% !important; } - - .comparison-table ul { - font-size: 0.8em; - word-wrap: break-word; - line-height: 1.3em; - list-style-position: outside; - margin-left: -3em; - list-style: none; + + .width-60 { + max-width: 80% !important; } - - #card-buttons { - transform: scale(0.65); + + .width-40 { + max-width: 70% !important; } - - #card-fonfig { - transform: scale(0.65); - margin-right: -2.5%; - } - - #card-buttons button { - width: fit-content; - } - - #logo { - margin-left: 0; - margin-right: 0; - width: 0em; - } - - .width-limited { - max-width: 100%; - } - - .limiters-img { - max-width: 100%; - } -} - -@media only screen and (min-width: 901px) { - - .header { - margin-left: -100px; - } -} - -.abbreviation { - text-decoration: underline !important; - text-decoration-style: dotted !important; -} - -.progress-container { - width: 100%; - background-color: #6e6e6e; - position: fixed; -} - -.progress-bar { - height: 0.1em; - background-color: #71e075; - width: 0; -} - -.section { - opacity: 0; - transition: opacity 1s ease; -} - -.section.fade-in { - opacity: 1; -} - -.faq h4 { - margin-top: 1.7em; - margin-bottom: 0.2em; } \ No newline at end of file diff --git a/css/textIcons.css b/css/textIcons.css new file mode 100644 index 0000000..2796895 --- /dev/null +++ b/css/textIcons.css @@ -0,0 +1,19 @@ +.link-download a::after, +.link-page a::after { + content: ""; + margin-left: 10px; + display: inline-block; + width: 1.25em; + height: 1.25em; + transform: translateY(0.25em); + background-size: contain; + background-repeat: no-repeat; +} + +.link-page a::after { + background-image: url("../img/UI/Open.svg"); +} + +.link-download a::after { + background-image: url("../img/UI/Download.svg"); +}/*# sourceMappingURL=textIcons.css.map */ \ No newline at end of file diff --git a/css/textIcons.css.map b/css/textIcons.css.map new file mode 100644 index 0000000..61566b0 --- /dev/null +++ b/css/textIcons.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["textIcons.scss","textIcons.css"],"names":[],"mappings":"AAAA;;EAEI,WAAA;EACA,iBAAA;EACA,qBAAA;EACA,aAAA;EACA,cAAA;EACA,6BAAA;EACA,wBAAA;EACA,4BAAA;ACCJ;;ADEA;EACI,2CAAA;ACCJ;;ADEA;EACI,+CAAA;ACCJ","file":"textIcons.css"} \ No newline at end of file diff --git a/css/textIcons.scss b/css/textIcons.scss new file mode 100644 index 0000000..e4d4157 --- /dev/null +++ b/css/textIcons.scss @@ -0,0 +1,19 @@ +.link-download a::after, +.link-page a::after{ + content: ""; + margin-left: 10px; + display: inline-block; + width: 1.25em; + height: 1.25em; + transform: translateY(0.25em); + background-size: contain; + background-repeat: no-repeat; +} + +.link-page a::after{ + background-image: url("../img/UI/Open.svg"); +} + +.link-download a::after{ + background-image: url("../img/UI/Download.svg"); +} \ No newline at end of file diff --git a/falloutnv.html b/falloutnv.html index 2654ef9..3990f20 100644 --- a/falloutnv.html +++ b/falloutnv.html @@ -11,121 +11,85 @@ - - + + + + + + + +
-
+
-
-