mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
2fa65521ee
This PR replaces the current CMS website with a static version of it built using Jekyll. - Everything should be working 1 to 1 with the same permalinks except for the `/news` page (not articles) which was renamed as `/blog` (old links will redirect to new ones). - The showcase entries on the home page now redirect to their showcase page in our site so that the user can choose which store front or page to visit next. - I also changed the first link from the nav bar to go to the showcase page since the features one is still pretty outdated. Co-authored-by: Yuri Sizov <yuris@humnom.net>
1385 lines
25 KiB
CSS
1385 lines
25 KiB
CSS
:root {
|
|
--transparent-cover: rgb(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: #8a9cc2;
|
|
--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;
|
|
--accent-color: #f57389;
|
|
|
|
--secondary-color-text: #546b99;
|
|
|
|
--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);
|
|
--footer-link-color: rgb(200, 210, 250);
|
|
--footer-link-underline-color: rgba(200, 210, 250, 0.3);
|
|
--tab-active-color: var(--primary-color);
|
|
|
|
--fund-color: #ef6767;
|
|
--fund-color-hl: #e53e3e;
|
|
|
|
--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;
|
|
--footer-color: rgb(175, 180, 220);
|
|
--footer-background-color: #414d69;
|
|
|
|
--code-background-color: #dcdfe2;
|
|
--codeblock-background-color: #282b2e;
|
|
--codeblock-color: #e0e2e4;
|
|
|
|
--sponsor-background-color: #dcdcdc;
|
|
--sponsor-platinum-background-color: #cfdbe4;
|
|
--sponsor-gold-background-color: #e0dfd4;
|
|
--sponsor-silver-background-color: #e3e3e3;
|
|
|
|
--platform-code-background-color: #e5ebf1;
|
|
|
|
--digital-store-background-color: #2d4c74;
|
|
|
|
--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);
|
|
}
|
|
|
|
.nav-logo.dark-logo {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--transparent-cover: rgb(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;
|
|
--accent-color: #5b5491;
|
|
|
|
--secondary-color-text: #a6a6a6;
|
|
|
|
--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%);
|
|
--footer-link-color: hsla(0, 0%, 100%, 0.85);
|
|
--footer-link-underline-color: hsla(0, 0%, 100%, 0.25);
|
|
--tab-active-color: white;
|
|
|
|
--fund-color: #ef6767;
|
|
--fund-color-hl: #e53e3e;
|
|
|
|
--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;
|
|
--footer-color: hsla(0, 0%, 100%, 0.625);
|
|
--footer-background-color: #333639;
|
|
|
|
--code-background-color: #333639;
|
|
--codeblock-background-color: #333639;
|
|
--codeblock-color: hsla(0, 0%, 100%, 0.9);
|
|
|
|
--sponsor-background-color: #ffffff;
|
|
--sponsor-platinum-background-color: #e2ebfa;
|
|
--sponsor-gold-background-color: #efece2;
|
|
|
|
--platform-code-background-color: #282b2e;
|
|
|
|
--digital-store-background-color: #2d4c74;
|
|
|
|
--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);
|
|
}
|
|
|
|
/* 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 Bold */
|
|
@font-face {
|
|
font-family: "Montserrat";
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url("../fonts/Montserrat-Bold.woff2") format("woff2"),
|
|
url("../fonts/Montserrat-Bold.woff") format("woff");
|
|
}
|
|
|
|
/* Montserrat ExtraBold */
|
|
@font-face {
|
|
font-family: "Montserrat";
|
|
font-weight: 800;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2"),
|
|
url("../fonts/Montserrat-ExtraBold.woff") format("woff");
|
|
}
|
|
|
|
*:focus {
|
|
/* More visible outline for better keyboard navigation. */
|
|
outline: 0.125rem solid hsl(220, 100%, 62.5%);
|
|
/* 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
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);
|
|
text-decoration-thickness: 0.125rem;
|
|
/* 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: "Montserrat", sans-serif;
|
|
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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
header > div.container {
|
|
width: 100%;
|
|
}
|
|
|
|
header .container {
|
|
overflow: initial;
|
|
}
|
|
|
|
.only-on-mobile {
|
|
display: none;
|
|
}
|
|
|
|
#logo-link {
|
|
margin-right: 36px;
|
|
/* Make the logo's clickable area as tall as for other navigation links. */
|
|
padding: 0.2rem 0.5rem;
|
|
margin-top: 0.25rem;
|
|
margin-left: -0.5rem;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
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: bold;
|
|
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 li.fund > a {
|
|
color: var(--fund-color);
|
|
}
|
|
nav li.fund > a:hover {
|
|
color: var(--fund-color-hl);
|
|
}
|
|
nav li.fund.active > a {
|
|
color: var(--fund-color-hl);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
footer {
|
|
background-color: var(--footer-background-color);
|
|
color: var(--footer-color);
|
|
font-size: 0.9em;
|
|
margin-top: 64px;
|
|
padding-top: 32px;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
footer ul {
|
|
list-style: none;
|
|
margin: 0px;
|
|
float: left;
|
|
overflow-wrap: break-word;
|
|
margin-left: 32px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--footer-link-color);
|
|
text-decoration-color: var(--footer-link-underline-color);
|
|
}
|
|
#copyright {
|
|
flex: 2;
|
|
}
|
|
#copyright > p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
#sitemap {
|
|
flex: 3;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
}
|
|
#sitemap li {
|
|
line-height: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
#sitemap strong {
|
|
color: var(--footer-link-color);
|
|
}
|
|
#social {
|
|
flex: 1;
|
|
margin-left: 32px;
|
|
}
|
|
|
|
.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: hsl(220, 100%, 62.5%);
|
|
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;
|
|
}
|
|
.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-download {
|
|
background-color: white;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
.btn.btn-download > .download-title {
|
|
color: var(--dark-color);
|
|
display: inline-block;
|
|
padding: 16px 32px 16px 32px;
|
|
}
|
|
.btn.btn-download > .download-hint {
|
|
background-color: var(--primary-color);
|
|
color: var(--primary-color-text-title);
|
|
display: inline-block;
|
|
padding: 16px 16px 16px 16px;
|
|
}
|
|
|
|
.date-big {
|
|
font-size: 64px;
|
|
color: #b6bfd1;
|
|
}
|
|
.date-small {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #8f9db9;
|
|
}
|
|
|
|
.author {
|
|
color: var(--base-color-text-subtitle);
|
|
text-transform: none;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.author .date {
|
|
color: var(--base-color-text-subtitle-date);
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.tags {
|
|
margin-top: -3rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.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: "Montserrat", sans-serif;
|
|
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);
|
|
}
|
|
|
|
.card .footer {
|
|
background-color: var(--card-footer-color);
|
|
}
|
|
|
|
a.card {
|
|
text-decoration: none;
|
|
display: flex;
|
|
}
|
|
.steam-download:hover {
|
|
color: hsla(0, 0%, 100%);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
#sfc_graphic {
|
|
width: 400px;
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
height: 40px;
|
|
margin-bottom: 2rem;
|
|
box-shadow: var(--base-shadow);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
.search-bar 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-background-color);
|
|
color: var(--base-color-text);
|
|
}
|
|
.search-bar .search-bar-btn {
|
|
cursor: pointer;
|
|
border: none;
|
|
width: 3rem;
|
|
padding: 0;
|
|
margin: 0;
|
|
/* background-color: hsl(220, 100%, 62.5%); */
|
|
background-color: var(--primary-color);
|
|
color: var(--primary-color-text-title);
|
|
}
|
|
.search-bar .search-bar-btn 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;
|
|
}
|
|
|
|
.only-on-mobile {
|
|
display: initial;
|
|
}
|
|
|
|
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: 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;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
}
|
|
#sitemap {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
margin-left: 0;
|
|
}
|
|
#sitemap .sitemap-group {
|
|
margin-top: 32px;
|
|
margin-left: 0;
|
|
}
|
|
#social {
|
|
margin: auto;
|
|
width: 30%;
|
|
min-width: 250px;
|
|
margin-top: 32px;
|
|
}
|
|
#social h4 {
|
|
text-align: center;
|
|
}
|
|
#social > div {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.tabs {
|
|
overflow: auto;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
justify-content: normal;
|
|
}
|
|
|
|
.author .date {
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
@media (max-width: 500px) {
|
|
#sfc_graphic {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.showcase-card {
|
|
/* Display a placeholder color while the card's background image is loading. */
|
|
background-color: #607080 !important;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
color: hsl(0, 0%, 100%);
|
|
height: 16rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.showcase-cards a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.showcase-card:hover {
|
|
filter: brightness(110%);
|
|
}
|
|
|
|
.showcase-card:active {
|
|
filter: brightness(90%);
|
|
}
|
|
|
|
.showcase-card-title {
|
|
font-size: 180%;
|
|
font-weight: 700;
|
|
/* Compensate for the platform icon margins. */
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
text-align: center;
|
|
text-shadow: 0.125rem 0.125rem 0.125rem hsl(0, 0%, 0%);
|
|
}
|
|
|
|
.showcase-card-icons {
|
|
filter: invert(100%);
|
|
text-align: center;
|
|
opacity: 0.75;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.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;
|
|
max-width: 670px;
|
|
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;
|
|
max-width: 550px;
|
|
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: 50px;
|
|
}
|
|
section.hero .copy p {
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
section.hero .wrapper {
|
|
position: relative;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 220px 0px 120px;
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
section.hero .wrapper {
|
|
padding: 150px 0px 120px;
|
|
}
|
|
}
|
|
|
|
section.hero .credits {
|
|
position: absolute;
|
|
bottom: 14px;
|
|
right: 30px;
|
|
background: #1a1a1a7a;
|
|
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;
|
|
}
|
|
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;
|
|
}
|
|
article.article-card .info span {
|
|
font-size: 14px;
|
|
color: var(--secondary-color-text);
|
|
}
|