mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
1536 lines
29 KiB
SCSS
1536 lines
29 KiB
SCSS
---
|
|
---
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
--transparent-cover: rgba(51, 63, 103, 0.4);
|
|
--transparent-cover-darker: rgba(51, 63, 103, 0.9);
|
|
|
|
--base-color: #eff1f5;
|
|
--base-color-text: #4a5365;
|
|
--base-color-text-hl: #454b59;
|
|
--base-color-text-title: #546b99;
|
|
--base-color-text-subtitle: #778ab3;
|
|
--base-color-text-subtitle-date: #9aacd2;
|
|
|
|
--dark-color: #333f67;
|
|
--dark-color-text: lightsteelblue;
|
|
--dark-color-text-hl: #d4e3f6;
|
|
--dark-color-text-title: white;
|
|
|
|
--primary-color: hsl(206, 58%, 52%);
|
|
--primary-color-text: #d4edff;
|
|
--primary-color-text-hl: white;
|
|
--primary-color-text-title: white;
|
|
--primary-color-subdued: #1f3c5e;
|
|
--accent-color: #f57389;
|
|
|
|
--secondary-color-text: #546b99;
|
|
--post-recent-highlight-color: #ea580c;
|
|
|
|
--link-color: hsl(206, 58%, 50%);
|
|
--link-underline-color: hsla(206, 58%, 50%, 0.3);
|
|
--navbar-link-color: var(--dark-color);
|
|
--navbar-link-current-color: var(--primary-color);
|
|
--tab-active-color: var(--primary-color);
|
|
|
|
--big-button-color: #478cbf;
|
|
|
|
--fund-color: #F35774;
|
|
|
|
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
|
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
--background-color: #d5daea;
|
|
--navbar-background-color: #ffffff;
|
|
--head-background-color: var(--primary-color);
|
|
--card-background-color: #ffffff;
|
|
--card-footer-color: #eeeeee;
|
|
--button-background-color: #ffffff;
|
|
--button-card-background-color: #d7dee6;
|
|
--pagination-active-color: #284786;
|
|
--placeholder-text-color: #7a87a2;
|
|
|
|
--hero-text-background-color: #1a1a1a7a;
|
|
|
|
--code-background-color: #dcdfe2;
|
|
--codeblock-background-color: #282b2e;
|
|
--codeblock-color: #e0e2e4;
|
|
|
|
--download-hero-color: hsla(0, 0%, 100%, 0.9);
|
|
--download-main-details-color: #f1f1f1;
|
|
--download-table-color: rgba(22, 22, 22, 0.08);
|
|
--platform-note-background-color: rgba(212, 237, 255, 0.9);
|
|
--platform-code-background-color: #e5ebf1;
|
|
--download-mono-background-color: rgba(43, 58, 76, 0.82);
|
|
|
|
--feature-heading-color: #2d76ad;
|
|
--feature-note-color: #e53e3e;
|
|
|
|
--teams-odd-color: rgba(160, 160, 160, 0.15);
|
|
--teams-even-color: rgba(160, 160, 160, 0.05);
|
|
--teams-subteams-color: rgba(255, 255, 255, 0.4);
|
|
|
|
--table-divider-color: rgba(0, 0, 0, 0.1);
|
|
|
|
--warning-background-color: #ffedcc;
|
|
--warning-color: #404040;
|
|
|
|
--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
--header-font-family: "Montserrat", sans-serif;
|
|
|
|
// Buttons
|
|
--button-border-radius: 12px;
|
|
}
|
|
|
|
.nav-logo.dark-logo {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--transparent-cover: rgba(51, 63, 103, 0.4);
|
|
--transparent-cover-darker: rgba(51, 63, 103, 0.9);
|
|
|
|
--base-color: #25282b;
|
|
--base-color-text: hsla(0, 0%, 100%, 0.9);
|
|
--base-color-text-hl: hsla(0, 0%, 100%, 1);
|
|
--base-color-text-title: hsla(200, 00%, 100%, 0.85);
|
|
--base-color-text-subtitle: hsla(200, 00%, 100%, 0.7);
|
|
--base-color-text-subtitle-date: hsla(200, 00%, 100%, 0.5);
|
|
|
|
--dark-color: #263256;
|
|
--dark-color-text: lightsteelblue;
|
|
--dark-color-text-hl: #d4e3f6;
|
|
--dark-color-text-title: white;
|
|
|
|
--primary-color: #4d9fdc;
|
|
--primary-color-text: #d4edff;
|
|
--primary-color-text-hl: white;
|
|
--primary-color-text-title: white;
|
|
--primary-color-subdued: #1f3c5e;
|
|
--accent-color: #5b5491;
|
|
|
|
--secondary-color-text: #a6a6a6;
|
|
--post-recent-highlight-color: #fb923c;
|
|
|
|
--link-color: hsl(200, 60%, 70%);
|
|
--link-underline-color: hsla(200, 60%, 70%, 0.3);
|
|
--navbar-link-color: hsla(0, 0%, 100%, 0.9);
|
|
--navbar-link-current-color: hsl(200, 100%, 80%);
|
|
--tab-active-color: white;
|
|
|
|
--big-button-color: #478cbf;
|
|
|
|
--fund-color: #F35774;
|
|
|
|
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
|
|
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
|
--background-color: #202326;
|
|
--navbar-background-color: #333639;
|
|
--head-background-color: #232f57;
|
|
--card-background-color: #333639;
|
|
--card-footer-color: #505356;
|
|
--button-background-color: #333639;
|
|
--button-card-background-color: #55595e;
|
|
--pagination-active-color: #4080ff;
|
|
--placeholder-text-color: #a6a6a6;
|
|
|
|
--code-background-color: #333639;
|
|
--codeblock-background-color: #333639;
|
|
--codeblock-color: hsla(0, 0%, 100%, 0.9);
|
|
|
|
--download-hero-color: hsla(0, 0%, 100%, 0.9);
|
|
--download-main-details-color: #f1f1f1;
|
|
--download-table-color: rgba(0, 0, 0, 0.2);
|
|
--platform-note-background-color: rgba(150, 150, 150, 0.9);
|
|
--platform-code-background-color: #282b2e;
|
|
--download-mono-background-color: rgba(132, 151, 174, 0.68);
|
|
|
|
--feature-heading-color: #57b3f8;
|
|
--feature-note-color: #ef6767;
|
|
|
|
--teams-odd-color: rgba(120, 120, 120, 0.15);
|
|
--teams-even-color: rgba(120, 120, 120, 0.05);
|
|
--teams-subteams-color: rgba(0, 0, 0, 0.2);
|
|
|
|
--table-divider-color: rgba(255, 255, 255, 0.1);
|
|
|
|
--warning-background-color: #444033;
|
|
--warning-color: #ffeeaf;
|
|
}
|
|
|
|
/* Use logo with white text for dark navbar. */
|
|
.nav-logo {
|
|
display: none;
|
|
}
|
|
|
|
.nav-logo.dark-logo {
|
|
display: initial;
|
|
}
|
|
|
|
/* Fade Patreon widget a little to be less distracting. */
|
|
.patreon {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Invert hamburger menu button on mobile to be visible on dark navbar. */
|
|
#nav_toggle_btn {
|
|
filter: invert(100%) saturate(0%) brightness(120%);
|
|
}
|
|
|
|
.dark-invert {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.dark-desaturate {
|
|
filter: saturate(0%);
|
|
}
|
|
}
|
|
|
|
/* Montserrat */
|
|
@font-face {
|
|
font-family: "Montserrat";
|
|
font-optical-sizing: auto;
|
|
font-weight: 100 900;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
src: url("../fonts/Montserrat-Italic-VariableFont_wght.woff2") format("woff2"), url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Montserrat";
|
|
font-optical-sizing: auto;
|
|
font-weight: 100 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url("../fonts/Montserrat-VariableFont_wght.woff2") format("woff2"), url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
|
|
}
|
|
|
|
/*
|
|
Godot icon.
|
|
Font made on https://fontello.com/, using
|
|
`/assets/press/icon_monochrome_light.svg` linted on
|
|
https://jakearchibald.github.io/svgomg/
|
|
*/
|
|
@font-face {
|
|
font-family: 'godot';
|
|
src: url("../fonts/godot.woff2") format("woff2");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
[class^="godot-icon-"]:before, [class*=" godot-icon-"]:before {
|
|
font-family: "godot";
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
speak: never;
|
|
|
|
display: inline-block;
|
|
text-decoration: inherit;
|
|
width: 1em;
|
|
margin-right: .2em;
|
|
text-align: center;
|
|
/* opacity: .8; */
|
|
|
|
/* For safety - reset parent styles, that can break glyph codes*/
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
|
|
/* fix buttons height, for twitter bootstrap */
|
|
line-height: 1em;
|
|
|
|
/* Animation center compensation - margins should be symmetric */
|
|
/* remove if not needed */
|
|
margin-left: .2em;
|
|
|
|
/* you can be more comfortable with increased icons size */
|
|
/* font-size: 120%; */
|
|
|
|
/* Font smoothing. That was taken from TWBS */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
/* Uncomment for 3D effect */
|
|
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
|
}
|
|
|
|
.godot-icon-godot:before { content: '\e003'; } /* '' */
|
|
|
|
*:focus {
|
|
/* More visible outline for better keyboard navigation. */
|
|
outline: 0.125rem solid hsl(220, 100%, 62.5%);
|
|
outline-color: currentcolor;
|
|
/* Make the outline always appear above other elements. */
|
|
/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
|
|
position: relative;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--default-font-family);
|
|
font-size: 18px;
|
|
|
|
background-color: var(--base-color);
|
|
color: var(--base-color-text);
|
|
|
|
margin: 0px;
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body a {
|
|
outline: none;
|
|
color: var(--link-color);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--link-underline-color);
|
|
/* Prevent color transitions from being too fast (for epilepsy). */
|
|
transition: 0.1s filter;
|
|
}
|
|
|
|
body a,
|
|
.btn.flat,
|
|
.search-bar-btn:hover {
|
|
/* Use `filter` on all states to prevent the clickable area from changing */
|
|
/* when an image is hovered (see GH-369). */
|
|
filter: brightness(100%);
|
|
}
|
|
|
|
body a:hover,
|
|
.btn.flat:hover,
|
|
.search-bar-btn:hover {
|
|
filter: brightness(117.5%);
|
|
}
|
|
|
|
body a:active,
|
|
.btn.flat:active,
|
|
.search-bar-btn:active {
|
|
filter: brightness(82.5%);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
#nav a,
|
|
.btn,
|
|
a.btn,
|
|
.title-font {
|
|
font-family: var(--header-font-family);
|
|
font-weight: 800;
|
|
color: var(--base-color-text-title);
|
|
margin-top: 0px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 42px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 2px solid var(--base-color-text);
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
}
|
|
|
|
.intro-title {
|
|
margin-top: 48px;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.container {
|
|
width: 1200px;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.container-text {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 24px;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
overflow: visible;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.container-text h2 {
|
|
margin-top: 80px;
|
|
}
|
|
|
|
.container-text h3 {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.container-text h4 {
|
|
margin-top: 40px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex.align-center {
|
|
align-items: center;
|
|
}
|
|
.flex.justify-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex.eqsize > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
grid-gap: 16px;
|
|
}
|
|
.grid > * {
|
|
width: 100%;
|
|
min-width: unset;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.base-padding {
|
|
padding: 16px;
|
|
}
|
|
.unpad-left {
|
|
padding-left: 0px;
|
|
}
|
|
.unpad-right {
|
|
padding-right: 0px;
|
|
}
|
|
|
|
header {
|
|
/* Show on top of GodotCon banner (if any). */
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
width: 100vw;
|
|
height: 64px;
|
|
background-color: var(--navbar-background-color);
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: var(--base-shadow);
|
|
|
|
.container {
|
|
overflow: initial;
|
|
}
|
|
|
|
#nav, #nav_head {
|
|
.fund {
|
|
margin-right: 0px;
|
|
&.desktop {
|
|
@media (max-width: 1200px) {
|
|
display: none;
|
|
}
|
|
}
|
|
&.mobile {
|
|
top: -2px;
|
|
position: relative;
|
|
@media (min-width: 1200px) {
|
|
display: none;
|
|
}
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--fund-color);
|
|
color: white;
|
|
background-color: var(--fund-color) !important; // avoid hover overwrite
|
|
border-radius: var(--button-border-radius);
|
|
box-shadow: inset 0 0 0 2px var(--fund-color);
|
|
padding: 13px;
|
|
}
|
|
}
|
|
}
|
|
#logo-link {
|
|
/* Make the logo's clickable area as tall as for other navigation links. */
|
|
padding: 0.2rem 0.5rem;
|
|
padding-top: 6px;
|
|
margin-left: -9px;
|
|
padding-right: 15px;
|
|
margin-right: -23px;
|
|
}
|
|
}
|
|
|
|
header > div.container {
|
|
width: 100%;
|
|
}
|
|
|
|
#nav_head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
#nav_toggle_cb,
|
|
#nav_toggle_btn {
|
|
display: none;
|
|
line-height: 0px;
|
|
cursor: pointer;
|
|
/* Prevent double-clicking the button from highlighting the icon as selected text on desktop. */
|
|
user-select: none;
|
|
}
|
|
|
|
.mobile-links {
|
|
display: grid;
|
|
grid-template-columns: 1fr 49px;
|
|
align-items: center;
|
|
}
|
|
|
|
#nav {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
#nav a {
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: var(--navbar-link-color);
|
|
/* Make links easier to click. */
|
|
padding: 1.3175rem 1rem;
|
|
}
|
|
|
|
#nav a:hover,
|
|
#logo-link:hover {
|
|
background-color: hsla(0, 0%, 50%, 0.1);
|
|
}
|
|
|
|
#nav ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
#nav > ul {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
#nav > ul > :first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
#nav > ul > :last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
#nav > ul li {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
margin-bottom: 0;
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
|
|
#nav li.active > a {
|
|
color: var(--navbar-link-current-color);
|
|
}
|
|
|
|
#nav > ul ul {
|
|
display: none;
|
|
}
|
|
|
|
a.patronImgLink {
|
|
display: inline-block;
|
|
}
|
|
|
|
a.patronImgLink > img {
|
|
display: block;
|
|
}
|
|
|
|
a.patreonLink {
|
|
text-decoration: none;
|
|
height: 64px !important;
|
|
margin-left: 16px !important;
|
|
}
|
|
|
|
a.patreonLink > .patreon {
|
|
height: inherit;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
a.patreonLink .patreon-brand {
|
|
background-size: 160px;
|
|
}
|
|
|
|
a.patreonLink .patreon-uppercase {
|
|
font-size: 12px;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
ul li {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.pagination {
|
|
margin: 2rem 0;
|
|
justify-content: center;
|
|
/* Remove spacing between list items when `display` is `block`. */
|
|
font-size: 0;
|
|
}
|
|
|
|
.pagination a,
|
|
.pagination-disabled {
|
|
color: inherit;
|
|
display: inline-block;
|
|
background-color: var(--button-background-color);
|
|
padding: 0.7rem 0.7rem;
|
|
min-width: 1.4rem;
|
|
font-size: initial;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
box-shadow: var(--base-shadow);
|
|
}
|
|
|
|
.pagination-disabled {
|
|
opacity: 50%;
|
|
user-select: none;
|
|
}
|
|
|
|
.pagination a.active {
|
|
background-color: var(--pagination-active-color);
|
|
color: white;
|
|
}
|
|
|
|
.pagination a:not(:last-child) {
|
|
border-right: 1px solid var(--card-footer-color);
|
|
}
|
|
|
|
.pagination a.pagination-previous,
|
|
.pagination a.pagination-next {
|
|
padding-left: 1.2rem;
|
|
padding-right: 1.2rem;
|
|
}
|
|
|
|
/* Make blog article images readable on a dark background. */
|
|
article .content img {
|
|
background-color: white;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
blockquote {
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.pagination {
|
|
display: block;
|
|
justify-content: initial;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.padded {
|
|
padding-top: 64px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.youtube {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0.5rem;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
.youtube iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
}
|
|
|
|
svg.icon {
|
|
fill: red;
|
|
height: 42px;
|
|
width: 42px;
|
|
}
|
|
|
|
p,
|
|
ul,
|
|
ol {
|
|
text-rendering: optimizeLegibility;
|
|
line-height: 1.5;
|
|
}
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-justified {
|
|
text-align: justify;
|
|
}
|
|
|
|
p.small {
|
|
width: 500px;
|
|
}
|
|
.auto-margin {
|
|
margin: auto;
|
|
}
|
|
|
|
.head {
|
|
background-color: var(--head-background-color);
|
|
color: var(--primary-color-text);
|
|
margin-bottom: 32px;
|
|
}
|
|
.head h1,
|
|
.head h2,
|
|
.head h3 {
|
|
color: var(--primary-color-text-title);
|
|
margin: 0px;
|
|
}
|
|
.head .main > :first-child {
|
|
margin-top: 32px;
|
|
}
|
|
.head .main > :last-child {
|
|
margin-bottom: 32px;
|
|
}
|
|
.head a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dark {
|
|
background-color: var(--dark-color);
|
|
color: var(--dark-color-text);
|
|
}
|
|
.dark h1,
|
|
.dark h2,
|
|
.dark h3,
|
|
.dark h4 {
|
|
color: var(--dark-color-text-title);
|
|
}
|
|
|
|
.btn {
|
|
background-color: var(--button-background-color);
|
|
box-shadow: var(--base-shadow);
|
|
font-size: 18px;
|
|
padding: 16px 32px 16px 32px;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
border-radius: var(--button-border-radius);
|
|
transition: box-shadow 0.1s ease-in-out;
|
|
}
|
|
.btn:hover {
|
|
box-shadow: var(--more-shadow);
|
|
}
|
|
|
|
.btn.btn-flat {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
color: var(--link-color);
|
|
margin: 16px 32px 16px 32px;
|
|
}
|
|
.btn.btn-flat:hover {
|
|
background-color: hsla(0, 0%, 50%, 0.1);
|
|
}
|
|
.btn.btn-flat.btn-flat-white {
|
|
color: hsla(0, 0%, 100%, 0.95);
|
|
}
|
|
.btn.btn-flat.btn-flat-frosted {
|
|
background-color: rgba(111, 111, 111, 0.27);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.btn.btn-download {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
background-color: white;
|
|
padding: 0px;
|
|
text-align: center;
|
|
border-radius: var(--button-border-radius);
|
|
}
|
|
.btn.btn-download > .download-title {
|
|
color: var(--dark-color);
|
|
display: inline-block;
|
|
padding: 16px 32px 16px 32px;
|
|
flex-grow: 1;
|
|
}
|
|
.btn.btn-download > .download-hint {
|
|
background-color: var(--primary-color);
|
|
color: var(--primary-color-text-title);
|
|
display: inline-block;
|
|
padding: 16px 16px 16px 16px;
|
|
min-width: 48px;
|
|
border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
|
|
// Cover the white border radius from the button below
|
|
position: relative;
|
|
left: 3px;
|
|
}
|
|
|
|
.date-big {
|
|
font-size: 64px;
|
|
color: #b6bfd1;
|
|
}
|
|
.date-small {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #8f9db9;
|
|
}
|
|
|
|
.tags > a {
|
|
border-radius: 1000px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
background-color: var(--card-background-color);
|
|
border-radius: 1000px;
|
|
box-shadow: var(--base-shadow);
|
|
filter: saturate(0.35);
|
|
font-family: var(--header-font-family);
|
|
font-size: 16px;
|
|
padding: 0.25rem 0.75rem;
|
|
margin: 0.1rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tag.active {
|
|
filter: saturate(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--card-background-color);
|
|
color: var(--base-color-text);
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
box-sizing: border-box;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
a.card {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card .footer {
|
|
background-color: var(--card-footer-color);
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
}
|
|
.tabs > * {
|
|
padding: 16px 24px 16px 24px;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabs a {
|
|
color: inherit;
|
|
white-space: nowrap;
|
|
}
|
|
.tabs a:not(.active):hover {
|
|
color: var(--primary-color-text-title);
|
|
background-color: hsla(0, 0%, 100%, 0.1);
|
|
}
|
|
.tabs .active {
|
|
background-color: var(--base-color);
|
|
color: var(--tab-active-color);
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.snap-tabs {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
justify-content: initial;
|
|
overflow: auto hidden;
|
|
overscroll-behavior-x: contain;
|
|
scroll-snap-type: x mandatory;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
}
|
|
.snap-tabs::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.snap-tabs > .tab {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
scroll-snap-align: center;
|
|
overscroll-behavior-y: contain;
|
|
}
|
|
|
|
code {
|
|
font-family: monospace;
|
|
}
|
|
|
|
pre {
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
background-color: var(--code-background-color);
|
|
padding: 8px;
|
|
border-radius: 2px;
|
|
overflow-y: auto;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
pre > code {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.no-margin-bottom {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.no-margin {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
#foundation_graphic {
|
|
width: 400px;
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
height: 40px;
|
|
margin-bottom: 2rem;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
min-width: 65%;
|
|
input {
|
|
flex-grow: 1;
|
|
padding: 0.5rem 1rem;
|
|
line-height: 2;
|
|
font-size: 18px;
|
|
border: none;
|
|
border-right: 1px solid var(--transparent-cover);
|
|
background-color: var(--card-footer-color);
|
|
color: var(--base-color-text);
|
|
}
|
|
input::placeholder {
|
|
color: var(--placeholder-text-color);
|
|
}
|
|
.search-bar-btn {
|
|
cursor: pointer;
|
|
border: none;
|
|
width: 3rem;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: var(--pagination-active-color);
|
|
color: var(--primary-color-text-title);
|
|
border-radius: 0;
|
|
img {
|
|
margin: 8px;
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1400px) {
|
|
.container > :first-child {
|
|
padding-left: 0px;
|
|
}
|
|
.container > :last-child:not(a.btn) {
|
|
padding-right: 0px;
|
|
}
|
|
}
|
|
@media (max-width: 1250px) {
|
|
body {
|
|
width: auto;
|
|
}
|
|
|
|
.container {
|
|
width: auto;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.hide-on-mobile {
|
|
display: none;
|
|
}
|
|
|
|
article .content {
|
|
width: 100%;
|
|
}
|
|
|
|
header {
|
|
height: auto;
|
|
}
|
|
header > div {
|
|
flex-direction: column;
|
|
}
|
|
|
|
#logo-link {
|
|
margin: 0;
|
|
}
|
|
#nav_head {
|
|
width: 100%;
|
|
margin-top: 0.25rem;
|
|
}
|
|
#nav_toggle_btn {
|
|
display: block;
|
|
/* Make the navbar toggle button easier to click. */
|
|
padding: 1.25rem;
|
|
margin-top: -0.2rem;
|
|
margin-right: -1rem;
|
|
}
|
|
#nav_toggle_btn:hover {
|
|
background-color: hsla(0, 0%, 50%, 0.15);
|
|
}
|
|
#nav_toggle_btn:active {
|
|
background-color: hsla(0, 0%, 50%, 0.25);
|
|
}
|
|
#nav_toggle_cb:checked ~ header nav {
|
|
display: block;
|
|
}
|
|
#nav {
|
|
display: none;
|
|
}
|
|
#nav ul {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
#nav > ul {
|
|
margin-bottom: 16px;
|
|
}
|
|
#nav ul li {
|
|
padding: 0;
|
|
padding-top: 16px;
|
|
width: 100%;
|
|
}
|
|
#nav ul a {
|
|
width: 100%;
|
|
display: block;
|
|
/* Make links easier to click but still close to each other. */
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
margin-top: -0.4375rem;
|
|
margin-bottom: -0.4375rem;
|
|
}
|
|
a.patreonLink {
|
|
text-decoration: none;
|
|
height: 64px !important;
|
|
margin-left: 0px !important;
|
|
margin-top: 16px;
|
|
}
|
|
a.patreonLink > .patreon {
|
|
height: inherit;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1020px) {
|
|
|
|
#social {
|
|
margin: auto;
|
|
width: 30%;
|
|
min-width: 250px;
|
|
margin-top: 32px;
|
|
}
|
|
#social h4 {
|
|
text-align: center;
|
|
}
|
|
#social > div {
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
a.patreonLink,
|
|
a.patreonLink > .patreon {
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
width: auto;
|
|
overflow: auto;
|
|
flex-direction: column;
|
|
padding: 0px 16px 0px 16px;
|
|
}
|
|
.container.sm-full {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
.container.sm-full:not(.padded) {
|
|
padding: 0px;
|
|
}
|
|
|
|
.padded {
|
|
padding: 32px 8px 32px 8px;
|
|
}
|
|
|
|
.container .padded {
|
|
padding: 32px 0px 32px 0px;
|
|
}
|
|
|
|
p.small {
|
|
width: auto;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.flex.responsive {
|
|
flex-direction: column;
|
|
}
|
|
.flex.eqsize.responsive {
|
|
flex-direction: column;
|
|
}
|
|
.main-image {
|
|
height: 30vh;
|
|
}
|
|
|
|
.full-graphic {
|
|
display: none;
|
|
}
|
|
|
|
.tabs {
|
|
overflow: auto;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
justify-content: normal;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
#sitemap {
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
#foundation_graphic {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.teams-team-section {
|
|
background-color: var(--teams-odd-color);
|
|
padding: 20px 16px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.teams-team-section:nth-of-type(2n) {
|
|
background-color: var(--teams-even-color);
|
|
}
|
|
.teams-team-section + .teams-team-section {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.teams-team-section > h4 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.teams-subteams {
|
|
background-color: var(--teams-subteams-color);
|
|
border-left: 6px solid var(--accent-color);
|
|
padding: 4px 10px;
|
|
margin-top: 30px;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.teams-subteams th {
|
|
padding: 16px;
|
|
border-right: 1px dashed var(--table-divider-color);
|
|
}
|
|
|
|
.teams-subteams td {
|
|
padding: 16px 0 16px 12px;
|
|
}
|
|
|
|
.teams-subteams th,
|
|
.teams-subteams td {
|
|
border-bottom: 1px dashed var(--table-divider-color);
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.teams-subteams tr:last-of-type td,
|
|
.teams-subteams tr:last-of-type th {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.teams-subteam-name {
|
|
text-align: left;
|
|
width: 25%;
|
|
}
|
|
|
|
.teams-subteam-leader:before {
|
|
content: "⭐ ";
|
|
}
|
|
|
|
.teams-subteam-leader {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.teams-subteam-leader,
|
|
.teams-subteam-members {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 0.25rem; /* 4px */
|
|
}
|
|
|
|
.rounded-lg {
|
|
border-radius: 0.5rem; /* 8px */
|
|
}
|
|
|
|
/* Home Page */
|
|
section.hero {
|
|
background-color: var(--dark-color);
|
|
position: relative;
|
|
margin-bottom: -5px;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
section.hero .background-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
opacity: 0.6;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-blend-mode: darken;
|
|
background-size: cover;
|
|
background-color: var(--transparent-cover);
|
|
will-change: transform;
|
|
}
|
|
|
|
section.hero .copy {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-left: 0;
|
|
}
|
|
|
|
section.hero .copy h1 {
|
|
font-size: 60px;
|
|
text-shadow: 0 0 28px #00000080;
|
|
margin-bottom: 20px;
|
|
color: white;
|
|
}
|
|
|
|
section.hero .copy p {
|
|
font-size: 20px;
|
|
line-height: 1.5;
|
|
margin-bottom: 20px;
|
|
text-shadow: 0 0 28px #00000080;
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
section.hero .copy {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
section.hero .copy h1 {
|
|
font-size: 40px;
|
|
}
|
|
section.hero .copy p {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
section.hero .wrapper {
|
|
position: relative;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 180px 20px 100px;
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
section.hero .wrapper {
|
|
padding: 150px 10px 120px;
|
|
}
|
|
}
|
|
|
|
section.hero .credits {
|
|
position: absolute;
|
|
bottom: 14px;
|
|
right: 30px;
|
|
background: var(--hero-text-background-color);
|
|
border-radius: 8px;
|
|
padding: 2px 10px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
section.hero .credits a {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
/* Article card (as seen on the news or home page) */
|
|
article.article-card {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
article.article-card.row {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
article.article-card.row {
|
|
grid-template-columns: 160px 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
article.article-card.row .excerpt {
|
|
display: none;
|
|
}
|
|
article.article-card.row h3 {
|
|
font-size: 19px;
|
|
}
|
|
}
|
|
|
|
article.article-card p.excerpt {
|
|
color: var(--base-color-text);
|
|
font-size: 16px;
|
|
opacity: 0.8;
|
|
margin-top: 0;
|
|
margin-bottom: 6px;
|
|
}
|
|
article.article-card span.date {
|
|
color: var(--base-color-text);
|
|
font-size: 15px;
|
|
opacity: 0.65;
|
|
}
|
|
article.article-card span.date.post-recent-highlight {
|
|
color: var(--post-recent-highlight-color);
|
|
opacity: 1.0;
|
|
}
|
|
article.article-card span.date.post-recent-highlight::after {
|
|
font-size: 80%;
|
|
content: "NEW";
|
|
border: 1px solid var(--post-recent-highlight-color);
|
|
padding: 2px 3px;
|
|
margin-left: 8px;
|
|
}
|
|
article.article-card h3 {
|
|
font-size: 22px;
|
|
margin-bottom: 10px;
|
|
}
|
|
article.article-card .thumbnail {
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: 7px;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-color: var(--card-background-color);
|
|
box-shadow: 0 5px 10px -3px #00000078;
|
|
}
|
|
article.article-card .info {
|
|
display: flex;
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
padding-left: 32px;
|
|
}
|
|
article.article-card .info .avatar {
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
top: -3px;
|
|
left: 0px;
|
|
width: 25px;
|
|
height: 25px;
|
|
background: transparent;
|
|
}
|
|
article.article-card .info span {
|
|
font-size: 14px;
|
|
color: var(--secondary-color-text);
|
|
}
|
|
|
|
/* Article tables */
|
|
article table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
article table thead tr {
|
|
background-color: var(--button-card-background-color);
|
|
background-color: color-mix(in hsl longer hue, var(--button-card-background-color), white 20%);
|
|
}
|
|
|
|
article table tbody tr:nth-of-type(even) {
|
|
background-color: var(--background-color);
|
|
background-color: color-mix(in hsl longer hue, var(--background-color), white 20%);
|
|
}
|
|
article table tbody tr:nth-of-type(odd) {
|
|
background-color: color-mix(in hsl longer hue, var(--base-color), black 1%);
|
|
}
|
|
|
|
article table tbody tr td {
|
|
padding: 0.25em;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
article table thead tr {
|
|
background-color: color-mix(in hsl longer hue, var(--button-card-background-color), black 20%);
|
|
}
|
|
|
|
article table tbody tr:nth-of-type(even) {
|
|
background-color: color-mix(in hsl longer hue, var(--background-color), black 20%);
|
|
}
|
|
article table tbody tr:nth-of-type(odd) {
|
|
background-color: color-mix(in hsl longer hue, var(--base-color), white 1%);
|
|
}
|
|
}
|
|
|
|
figure.article-cover figcaption {
|
|
opacity: 0.8;
|
|
line-height: 1.5
|
|
}
|
|
figure.article-cover figcaption a {
|
|
color: inherit;
|
|
}
|
|
|
|
section.sponsors .grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
section.sponsors .grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
section.sponsors .grid.platinum {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
section.sponsors .grid.gold {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
section.sponsors .grid.silver {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
|
|
.sponsor-card {
|
|
width: 100%;
|
|
display: grid;
|
|
align-items: center;
|
|
padding: 17px;
|
|
border-radius: 7px;
|
|
box-sizing: border-box;
|
|
background-color: white;
|
|
}
|
|
|
|
.sponsor-card img {
|
|
max-width: 100%;
|
|
mix-blend-mode: multiply;
|
|
width: auto;
|
|
max-height: 100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.patron img {
|
|
width: 100%;
|
|
}
|
|
|
|
.platinum img {
|
|
max-height: 80px;
|
|
}
|
|
|
|
.gold img {
|
|
max-height: 60px;
|
|
}
|
|
|
|
.silver img {
|
|
max-height: 40px;
|
|
}
|
|
|
|
.sponsors h3 {
|
|
margin-top: 50px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.sponsors h3 a {
|
|
font-size: 15px;
|
|
opacity: 0.5;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
font-family: var(--default-font-family);
|
|
}
|
|
|
|
.sponsor-empty {
|
|
border: 3px dashed;
|
|
border-radius: 10px;
|
|
padding: 17px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
line-height: 1.4em;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.sponsor-empty:hover {
|
|
background-color: #8484841c;
|
|
}
|
|
|
|
.article-body hr {
|
|
height: 1px;
|
|
background: var(--table-divider-color);
|
|
width: 100%;
|
|
border: none;
|
|
margin: 35px 0;
|
|
}
|
|
|
|
@import 'footer';
|