ayo/threads
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: reuse variables.css

Browse source
This commit is contained in:
Ayo Ayco 2024-05-20 18:18:02 +02:00
parent 51405c3c14
commit e7125a54aa
2 changed files with 34 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/variables.css
View file

@ -6,7 +6,7 @@
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-border: hsl(17, 24%, 90%); --color-border: hsl(17, 24%, 90%);
--color-link: var(--color-brand-blue-3); --color-link: var(--color-brand-blue-5);
--color-brand-blue-1: #3054bf; --color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880; --color-brand-blue-2: #203880;
@ -17,8 +17,10 @@
--color-brand-complement: orange; --color-brand-complement: orange;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff); --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: black; --text-color-dark: #232323;
--text-color-dark-faded: #555;
--text-color-light: #f8f9fa; --text-color-light: #f8f9fa;
--text-color-light-faded: #999;
--bg-dark: #343a40; --bg-dark: #343a40;
--bg-darker: #212529; --bg-darker: #212529;

64
templates/threads.html
View file

@ -32,15 +32,21 @@
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
color: var(--text-color-dark); color: var(--text-color-dark);
font-size: var(--font-size-base);
a {
color: var(--color-link);
}
} }
header, footer, main { header, footer, main {
padding: 1em; padding: 1em;
} }
header, footer { header, footer {
background: linear-gradient(45deg, #3054bf, #416fff); background: var(--ayo-gradient);
color: white; color: var(--text-color-light);
& a { & a {
color: white; color: var(--text-color-light);
} }
} }
@ -122,12 +128,11 @@
} }
& .media:hover, & .link_card:hover { & .media:hover, & .link_card:hover {
color: blue; color: var(--color-link);
text-decoration-color: blue; text-decoration-color: var(--color-link);
border-color: blue; border-color: var(--color-link);
} }
& p { & p {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
@ -145,10 +150,10 @@
text-align: right; text-align: right;
& a{ & a{
color: var(--text-color-dark); color: var(--text-color-dark-faded);
&:hover { &:hover {
color: blue; color: var(--color-link);
} }
} }
} }
@ -156,7 +161,7 @@
& .author a { & .author a {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: #232323; color: var(--text-color-dark);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -166,30 +171,17 @@
} }
& .meta {
margin-bottom: 5px;
& a {
font-size: small;
color: #555;
}
& a:hover {
color: blue;
}
}
& .action { & .action {
color: blue; color: var(--color-link);
margin: 1em 0; margin: 1em 0;
cursor: pointer; cursor: pointer;
margin-top: 1em; margin-top: 1em;
} }
& .link_card { & .link_card {
color: #555; color: var(--text-color-dark-faded);
text-decoration: underline; text-decoration: underline;
text-decoration-color: #888; text-decoration-color: var(--text-color-light-faded);
& strong, & small { & strong, & small {
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
@ -208,7 +200,7 @@
} }
main a { main a {
color: orange; color: var(--color-brand-complement);
} }
main.thread { main.thread {
@ -218,13 +210,17 @@
} }
.card_content { .card_content {
& .action { & .action {
color: orange; color: var(--color-brand-complement);
} }
& .heading .author a { & .heading .author a {
color: #f8f9fa; color: #f8f9fa;
} }
& .heading .right_menu a:hover { & .heading .right_menu a{
color: orange; color: var(--text-color-light-faded);
&:hover {
color: var(--color-brand-complement);
}
} }
& .body { & .body {
code { code {
@ -233,12 +229,12 @@
} }
& .media, & .link_card { & .media, & .link_card {
border: 1px solid rgba(197, 209, 222, 0.15); border: 1px solid rgba(197, 209, 222, 0.15);
color: #888; color: var(--text-color-light-faded);
} }
& .media:hover, & .link_card:hover { & .media:hover, & .link_card:hover {
color: orange; color: var(--color-brand-complement);
text-decoration-color: orange; text-decoration-color: var(--color-brand-complement);
border-color: orange; border-color: var(--color-brand-complement);
} }
} }
} }