Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-23 16:49:58 +01:00
Code Issues Packages Projects Releases Activity

refactor(website): use nested CSS

Browse Source
This commit is contained in:
Elian Doran
2025-09-27 21:02:23 +03:00
parent fb7453f7b0
commit 2df0763141
9 changed files with 430 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/website/src/components/Button.css
View File

@@ -7,14 +7,14 @@ a.button {
text-decoration: none;
text-align: center;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}
a.button.outline {
border: 1px solid var(--brand-1);
color: var(--brand-1);
background-color: transparent;
}
&.outline {
border: 1px solid var(--brand-1);
color: var(--brand-1);
background-color: transparent;
}
a.button .text {
vertical-align: middle;
.text {
vertical-align: middle;
}
}

18
apps/website/src/components/DownloadButton.css
View File

@@ -1,11 +1,13 @@
.download-button .platform {
font-size: 0.75em;
opacity: 0.75;
}
.download-button.big {
padding: 1em 2em;
margin: 1em 0;
.download-button {
&.big {
padding: 1em 2em;
margin: 1em 0;
}
.platform {
font-size: 0.75em;
opacity: 0.75;
}
}
@media (min-width: 720px) {

28
apps/website/src/components/Footer.css
View File

@@ -4,26 +4,26 @@ footer {
border-top: 1px solid rgba(0, 0, 0, 0.3);
color: var(--muted-color);
font-size: 0.8em;
}
footer .content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
.content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.social-buttons {
display: flex;
gap: 1em;
}
.social-buttons a.social-button {
color: var(--muted-color);
transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
opacity: 0.7;
}
a.social-button {
color: var(--muted-color);
transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
opacity: 0.7;
.social-buttons a.social-button:hover {
color: var(--brand-1);
opacity: 1;
&:hover {
color: var(--brand-1);
opacity: 1;
}
}
}

161
apps/website/src/components/Header.css
View File

@@ -8,53 +8,56 @@ header {
z-index: 1000;
--gap: 1.25em;
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,
section.hero-section > .content-wrapper {
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) {
:root {
--header-height: 35px;
@@ -67,41 +70,41 @@ header nav a.active {
right: 0;
min-height: var(--header-height);
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 {
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 {
font-size: 1.25em;
padding: 0.5em 0;
@@ -111,14 +114,14 @@ header nav a.active {
header .social-buttons {
justify-content: space-between;
padding-top: 1em;
}
header .social-buttons a {
border-bottom: unset;
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
a {
border-bottom: unset;
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
}
}
}
@@ -126,10 +129,10 @@ header nav a.active {
@media (min-width: 720px) {
header {
font-size: inherit;
}
header img {
width: 48px;
height: 48px;
img {
width: 48px;
height: 48px;
}
}
}