mirror of
https://github.com/zadam/trilium.git
synced 2025-11-03 20:06:08 +01:00
refactor(website): use nested CSS
This commit is contained in:
Elian Doran
@@ -7,14 +7,14 @@ a.button {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
|
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
|
||||||
}
|
|
||||||
|
|
||||||
a.button.outline {
|
&.outline {
|
||||||
border: 1px solid var(--brand-1);
|
border: 1px solid var(--brand-1);
|
||||||
color: var(--brand-1);
|
color: var(--brand-1);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.button .text {
|
.text {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,11 +1,13 @@
|
|||||||
.download-button .platform {
|
.download-button {
|
||||||
font-size: 0.75em;
|
&.big {
|
||||||
opacity: 0.75;
|
padding: 1em 2em;
|
||||||
}
|
margin: 1em 0;
|
||||||
|
}
|
||||||
.download-button.big {
|
|
||||||
padding: 1em 2em;
|
.platform {
|
||||||
margin: 1em 0;
|
font-size: 0.75em;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 720px) {
|
@media (min-width: 720px) {
|
||||||
|
|||||||
@@ -4,26 +4,26 @@ footer {
|
|||||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
|
||||||
|
|
||||||
footer .content-wrapper {
|
.content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-buttons {
|
.social-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
.social-buttons a.social-button {
|
a.social-button {
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
|
transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
|
||||||
|
|
||||||
.social-buttons a.social-button:hover {
|
&:hover {
|
||||||
color: var(--brand-1);
|
color: var(--brand-1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -8,53 +8,56 @@ header {
|
|||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
--gap: 1.25em;
|
--gap: 1.25em;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
gap: var(--gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&:hover { text-decoration: none;}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img+span {
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: var(--gap);
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: var(--brand-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header .content-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: center;
|
|
||||||
gap: var(--gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
header a.banner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > .content-wrapper,
|
header > .content-wrapper,
|
||||||
section.hero-section > .content-wrapper {
|
section.hero-section > .content-wrapper {
|
||||||
min-width: 80vw;
|
min-width: 80vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
header img {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header img+span {
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
header nav {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: var(--gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
header nav a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
header nav a.active {
|
|
||||||
color: var(--brand-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 719px) {
|
@media (max-width: 719px) {
|
||||||
:root {
|
:root {
|
||||||
--header-height: 35px;
|
--header-height: 35px;
|
||||||
@@ -67,41 +70,41 @@ header nav a.active {
|
|||||||
right: 0;
|
right: 0;
|
||||||
min-height: var(--header-height);
|
min-height: var(--header-height);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-toggle {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
flex-direction: column;
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 200ms ease-in;
|
||||||
|
|
||||||
|
&.mobile-shown {
|
||||||
|
display: flex;
|
||||||
|
max-height: 100vh;
|
||||||
|
padding: 2em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header + main {
|
header + main {
|
||||||
margin-top: var(--header-height);
|
margin-top: var(--header-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
header .content-wrapper {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
header .first-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
header .menu-toggle {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
header nav {
|
|
||||||
flex-direction: column;
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 200ms ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
header nav.mobile-shown {
|
|
||||||
display: flex;
|
|
||||||
max-height: 100vh;
|
|
||||||
padding: 2em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header nav a {
|
header nav a {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
@@ -111,14 +114,14 @@ header nav a.active {
|
|||||||
header .social-buttons {
|
header .social-buttons {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
header .social-buttons a {
|
a {
|
||||||
border-bottom: unset;
|
border-bottom: unset;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -126,10 +129,10 @@ header nav a.active {
|
|||||||
@media (min-width: 720px) {
|
@media (min-width: 720px) {
|
||||||
header {
|
header {
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
|
||||||
|
|
||||||
header img {
|
img {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -6,30 +6,42 @@
|
|||||||
grid-column: 1 / 4;
|
grid-column: 1 / 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-card h3 {
|
.download-card {
|
||||||
color: var(--accent-color);
|
h3 {
|
||||||
font-size: 1.5em;
|
color: var(--accent-color);
|
||||||
position: relative;
|
font-size: 1.5em;
|
||||||
}
|
position: relative;
|
||||||
|
|
||||||
.download-card h3 a.more-info {
|
a.more-info {
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.download-card h3 a.more-info .bx {
|
.bx {
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.download-card .card-content-inner {
|
.card-content-inner {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-card a:not(.button) {
|
a:not(.button) {
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
text-decoration: none;
|
}
|
||||||
|
|
||||||
|
.quick-start {
|
||||||
|
border: 1px solid var(--muted-color);
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
code {
|
||||||
|
text-wrap: wrap;
|
||||||
|
color: var(--muted-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-options {
|
.download-options {
|
||||||
@@ -39,74 +51,69 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
.recommended-options {
|
||||||
|
align-self: stretch;
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
|
||||||
|
a.recommended {
|
||||||
|
display: block;
|
||||||
|
background: var(--accent-color);
|
||||||
|
color: var(--brand-foreground-color);
|
||||||
|
border-radius: calc(infinity * 1px);
|
||||||
|
margin: 1em 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.other-options {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5em 1em;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-options .recommended-options {
|
.download-desktop {
|
||||||
align-self: stretch;
|
.download-card:first-of-type { --accent-color: var(--brand-1); }
|
||||||
display: flex;
|
.download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
|
||||||
gap: 1em;
|
.download-card:last-of-type { --accent-color: var(--brand-3); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-options a.recommended {
|
|
||||||
display: block;
|
|
||||||
background: var(--accent-color);
|
|
||||||
color: var(--brand-foreground-color);
|
|
||||||
border-radius: calc(infinity * 1px);
|
|
||||||
margin: 1em 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-options .other-options {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5em 1em;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-desktop .download-card:first-of-type { --accent-color: var(--brand-1); }
|
|
||||||
.download-desktop .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
|
|
||||||
.download-desktop .download-card:last-of-type { --accent-color: var(--brand-3); }
|
|
||||||
|
|
||||||
.download-server .download-card {
|
.download-server .download-card {
|
||||||
--accent-color: var(--foreground-color);
|
--accent-color: var(--foreground-color);
|
||||||
--brand-foreground-color: var(--background-color);
|
--brand-foreground-color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-card .quick-start {
|
|
||||||
border: 1px solid var(--muted-color);
|
|
||||||
padding: 0.5em;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-card .quick-start code {
|
|
||||||
text-wrap: wrap;
|
|
||||||
color: var(--muted-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.architecture-switch {
|
.architecture-switch {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
}
|
|
||||||
|
|
||||||
.architecture-switch a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: var(--card-background-color);
|
background: var(--card-background-color);
|
||||||
padding: 0.25em 0.5em;
|
padding: 0.25em 0.5em;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
|
||||||
|
|
||||||
.architecture-switch .toggle-wrapper {
|
&.active {
|
||||||
border-radius: calc(infinity * 1px);
|
background-color: var(--brand-1);
|
||||||
overflow: hidden;
|
color: var(--brand-foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.architecture-switch a.active {
|
&:hover {
|
||||||
background-color: var(--brand-1);
|
text-decoration: none;
|
||||||
color: var(--brand-foreground-color);
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-wrapper {
|
||||||
|
border-radius: calc(infinity * 1px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,127 +1,113 @@
|
|||||||
section.hero-section {
|
section.hero-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: linear-gradient(135deg, var(--light-bg-start), var(--light-bg-end));
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero-section.dark {
|
&::before {
|
||||||
color: var(--text-on-dark);
|
content: "";
|
||||||
background: radial-gradient(circle at top left, #0e141b, var(--bg-dark) 70%), linear-gradient(135deg, #0a0e14, #141c24);
|
position: absolute;
|
||||||
}
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%),
|
||||||
|
radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%),
|
||||||
|
radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%),
|
||||||
|
radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%),
|
||||||
|
radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%);
|
||||||
|
|
||||||
/* Extra colored spots */
|
@media (prefers-color-scheme: dark) {
|
||||||
section.hero-section::before {
|
background:
|
||||||
content: "";
|
radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%),
|
||||||
position: absolute;
|
radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%),
|
||||||
inset: 0;
|
radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%),
|
||||||
pointer-events: none;
|
radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%);
|
||||||
background:
|
}
|
||||||
radial-gradient(40vmax 40vmax at 15% 25%, rgba(228, 123, 25, 0.25), transparent 70%),
|
}
|
||||||
radial-gradient(35vmax 35vmax at 75% 20%, rgba(79, 165, 43, 0.22), transparent 70%),
|
&::after {
|
||||||
radial-gradient(28vmax 28vmax at 60% 75%, rgba(227, 63, 59, 0.22), transparent 70%),
|
|
||||||
radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.18), transparent 70%),
|
|
||||||
radial-gradient(15vmax 15vmax at 40% 50%, rgba(79, 165, 43, 0.15), transparent 70%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
/* Soft vignette for focus */
|
|
||||||
section.hero-section::after {
|
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
|
background: radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
section.hero-section::before {
|
content: "";
|
||||||
background:
|
position: absolute;
|
||||||
radial-gradient(40vmax 40vmax at 20% 30%, rgba(228, 123, 25, 0.25), transparent 70%),
|
inset: 0;
|
||||||
radial-gradient(30vmax 30vmax at 75% 25%, rgba(79, 165, 43, 0.25), transparent 70%),
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||||
radial-gradient(25vmax 25vmax at 60% 75%, rgba(227, 63, 59, 0.25), transparent 70%),
|
opacity: 0.04;
|
||||||
radial-gradient(20vmax 20vmax at 85% 65%, rgba(228, 123, 25, 0.15), transparent 70%);
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&>.content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Subtle noise for depth */
|
.title-section {
|
||||||
section.hero-section::after {
|
flex-basis: 40%;
|
||||||
content: "";
|
color: var(--muted-color);
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
h1 {
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
line-height: 1.1;
|
||||||
opacity: 0.04;
|
font-weight: 100;
|
||||||
pointer-events: none;
|
color: var(--foreground-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
section.hero-section > .content-wrapper {
|
.screenshot {
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
width: 100%;
|
||||||
justify-content: center;
|
height: auto;
|
||||||
flex-direction: column;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.hero-section .title-section {
|
.download-wrapper {
|
||||||
flex-basis: 40%;
|
display: flex;
|
||||||
color: var(--muted-color);
|
flex-direction: column;
|
||||||
}
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
section.hero-section .title-section h1 {
|
.download-button {
|
||||||
line-height: 1.1;
|
margin-bottom: 0.25em;
|
||||||
font-weight: 100;
|
}
|
||||||
color: var(--foreground-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero-section .screenshot {
|
.more-download-options {
|
||||||
position: relative;
|
display: inline-block;
|
||||||
width: 100%;
|
color: var(--brand-1);
|
||||||
height: auto;
|
font-size: 0.8em;
|
||||||
margin-bottom: 0;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.hero-section .download-wrapper {
|
.additional-options {
|
||||||
display: flex;
|
margin-top: 1em;
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
align-content: center;
|
gap: 1em;
|
||||||
}
|
font-size: 0.85em;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
section.hero-section .download-button {
|
a {
|
||||||
margin-bottom: 0.25em;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
section.hero-section .more-download-options {
|
|
||||||
display: inline-block;
|
|
||||||
color: var(--brand-1);
|
|
||||||
font-size: 0.8em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero-section .additional-options {
|
|
||||||
margin-top: 1em;
|
|
||||||
display: flex;
|
|
||||||
gap: 1em;
|
|
||||||
font-size: 0.85em;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.hero-section .additional-options a {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 719px) {
|
@media (max-width: 719px) {
|
||||||
section.hero-section {
|
section.hero-section {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
|
||||||
|
.content-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
section.hero-section .content-wrapper {
|
.title-section {
|
||||||
width: 100%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.hero-section .title-section {
|
.screenshot {
|
||||||
max-width: 90%;
|
margin-top: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.hero-section .screenshot {
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -152,93 +138,96 @@ section:not(.accented) + section:not(.accented) {
|
|||||||
section.final-cta {
|
section.final-cta {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 6em 0;
|
padding: 6em 0;
|
||||||
}
|
|
||||||
|
|
||||||
section.final-cta h2 {
|
h2 {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.final-cta p {
|
p {
|
||||||
color: var(--muted-color);
|
color: var(--muted-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1em;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 2em;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 0.75em 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
section.final-cta .buttons {
|
section.final-cta .buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
gap: 2em;
|
||||||
gap: 1em;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.final-cta .buttons .button {
|
|
||||||
padding: 0.75em 2em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-with-screenshot {
|
.list-with-screenshot {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 2em;
|
gap: 2em;
|
||||||
}
|
|
||||||
|
ul {
|
||||||
.list-with-screenshot ul {
|
list-style-type: none;
|
||||||
list-style-type: none;
|
margin: 0;
|
||||||
margin: 0;
|
padding: 0;
|
||||||
padding: 0;
|
|
||||||
}
|
li {
|
||||||
|
margin-bottom: 1em;
|
||||||
.list-with-screenshot ul li {
|
|
||||||
margin-bottom: 1em;
|
&:last-of-type {
|
||||||
}
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
.list-with-screenshot ul li .card {
|
|
||||||
border: 1px solid transparent;
|
.card {
|
||||||
}
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
.list-with-screenshot ul li.selected .card {
|
|
||||||
border: 1px solid var(--brand-1);
|
&.selected .card {
|
||||||
}
|
border: 1px solid var(--brand-1);
|
||||||
|
}
|
||||||
.list-with-screenshot ul li:last-of-type {
|
}
|
||||||
margin-bottom: 0;
|
}
|
||||||
}
|
|
||||||
|
.details {
|
||||||
.list-with-screenshot .details {
|
flex-basis: 50%;
|
||||||
flex-basis: 50%;
|
flex-shrink: 0;
|
||||||
flex-shrink: 0;
|
}
|
||||||
}
|
|
||||||
|
&.horizontal {
|
||||||
.list-with-screenshot.horizontal {
|
flex-direction: column-reverse;
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
ul {
|
||||||
|
display: grid;
|
||||||
.list-with-screenshot.horizontal ul {
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
display: grid;
|
gap: 1em;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
}
|
||||||
gap: 1em;
|
|
||||||
}
|
li {
|
||||||
|
margin: 0;
|
||||||
.list-with-screenshot.horizontal li {
|
}
|
||||||
margin: 0;
|
|
||||||
}
|
.card {
|
||||||
|
height: 100%;
|
||||||
.list-with-screenshot.horizontal .card {
|
}
|
||||||
height: 100%;
|
|
||||||
}
|
h3 {
|
||||||
|
color: var(--brand-1);
|
||||||
|
}
|
||||||
.list-with-screenshot.horizontal h3 {
|
|
||||||
color: var(--brand-1);
|
.details {
|
||||||
}
|
max-height: 35vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
.list-with-screenshot.horizontal .details {
|
flex-direction: column;
|
||||||
max-height: 35vh;
|
|
||||||
overflow: hidden;
|
img {
|
||||||
display: flex;
|
height: 100%;
|
||||||
flex-direction: column;
|
width: auto;
|
||||||
}
|
object-fit: contain;
|
||||||
|
}
|
||||||
.list-with-screenshot.horizontal .details img {
|
}
|
||||||
height: 100%;
|
}
|
||||||
width: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,23 +1,21 @@
|
|||||||
section.donate {
|
section.donate {
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
}
|
|
||||||
|
|
||||||
section.donate ul.donate-buttons {
|
ul.donate-buttons {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
|
||||||
|
|
||||||
section.donate h3 {
|
@media (min-width: 720px) {
|
||||||
font-size: 1.5em;
|
gap: 0 1em;
|
||||||
color: var(--brand-1);
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 720px) {
|
h3 {
|
||||||
section.donate ul {
|
font-size: 1.5em;
|
||||||
gap: 0 1em;
|
color: var(--brand-1);
|
||||||
flex-direction: row;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
section.section-404 {
|
section.section-404 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
}
|
|
||||||
|
|
||||||
section.section-404 h2 {
|
h2 {
|
||||||
color: var(--brand-3);
|
color: var(--brand-3);
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -45,10 +45,10 @@ body {
|
|||||||
a {
|
a {
|
||||||
color: var(--brand-3);
|
color: var(--brand-3);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
|
|
||||||
a:not(.button):hover {
|
&:not(.button):hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
@@ -61,18 +61,18 @@ section {
|
|||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
|
||||||
|
|
||||||
section.fill {
|
&.fill {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
section h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
@@ -88,44 +88,44 @@ img {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
|
||||||
|
|
||||||
.card-content {
|
h3 {
|
||||||
margin: 0;
|
font-size: 1.1rem;
|
||||||
padding: 1em;
|
font-weight: 300;
|
||||||
color: var(--muted-color);
|
margin: 0;
|
||||||
display: flex;
|
color: var(--brand-1);
|
||||||
flex-direction: column;
|
margin-bottom: 0.5em;
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content .more-info-container {
|
&> span {
|
||||||
margin-top: 0.5em;
|
vertical-align: middle;
|
||||||
flex-grow: 1;
|
}
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-content .more-info {
|
&> .image {
|
||||||
font-size: 0.9em;
|
height: 200px;
|
||||||
}
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
.card h3 {
|
.card-content {
|
||||||
font-size: 1.1rem;
|
margin: 0;
|
||||||
font-weight: 300;
|
padding: 1em;
|
||||||
margin: 0;
|
color: var(--muted-color);
|
||||||
color: var(--brand-1);
|
display: flex;
|
||||||
margin-bottom: 0.5em;
|
flex-direction: column;
|
||||||
}
|
flex-grow: 1;
|
||||||
|
|
||||||
.card-content h3 > span {
|
.more-info-container {
|
||||||
vertical-align: middle;
|
margin-top: 0.5em;
|
||||||
}
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
.card > .image {
|
flex-direction: column;
|
||||||
height: 200px;
|
justify-content: flex-end;
|
||||||
object-fit: cover;
|
|
||||||
|
.more-info {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bx {
|
.bx {
|
||||||
@@ -133,10 +133,10 @@ img {
|
|||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
|
||||||
|
|
||||||
.bx svg {
|
svg {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 719px) {
|
@media (max-width: 719px) {
|
||||||
@@ -153,11 +153,11 @@ img {
|
|||||||
@media (min-width: 720px) {
|
@media (min-width: 720px) {
|
||||||
section {
|
section {
|
||||||
padding: 3em 0;
|
padding: 3em 0;
|
||||||
}
|
|
||||||
|
|
||||||
section h2 {
|
h2 {
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.grid-4-cols {
|
.grid-4-cols {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|||||||
Reference in New Issue
Block a user