flewkey/flewkey.com
1
0
Fork 0
Code Releases Activity

Stylesheet color improvements

Browse Source 
This is still a huge mess, but so is the rest of this website.
This commit is contained in:
Ryan Fox 2021-11-09 02:22:18 -08:00
parent 17d7b71448
commit ae29fb604f
Signed by: flewkey
GPG Key ID: 94F56ADFD848851E
1 changed files with 34 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
static/style.css
View File

@ -39,8 +39,15 @@
}
:root {
--color-fg-faded: #555;
--color-fg: #111;
--color-fg-faded: #444;
--color-fg-subfaded: #777;
--color-bg: #F8F8F8;
--color-bg-faded: #EEE;
--color-bg-subfaded: #DDD;
--color-link: #0074D9;
--color-border: var(--color-fg-subfaded);
--color-border-faded: #444;
}
body {
@ -49,8 +56,8 @@ body {
line-height: 2;
margin: 0 0 0 0;
padding: 0 0 0 0;
background-color: #F8F8F8;
color: #111111;
background-color: var(--color-bg);
color: var(--color-fg);
}
header {
@ -58,7 +65,7 @@ header {
margin-right: auto;
max-width: 840px;
height: 128px;
border-bottom: solid 2px #AAAAAA;
border-bottom: solid 2px var(--color-border);
padding: 32px 0 32px 0;
margin-bottom: 48px;
}
@ -102,12 +109,12 @@ nav {
}
nav a {
color: #666666;
color: var(--color-fg-subfaded);
display: block;
}
nav a:hover {
color: #333333;
color: var(--color-fg-faded);
}
main {
@ -120,12 +127,12 @@ main {
footer {
text-align: center;
border-top: solid 2px #AAAAAA;
border-top: solid 2px var(--color-border-faded);
padding-top: 16px;
padding-bottom: 16px;
margin-top: 48px;
font-size: 16px;
background-color: #DDDDDD;
background-color: var(--color-bg-subfaded);
}
footer span {
@ -172,8 +179,8 @@ h1.reduced, h2.reduced, h3.reduced, h4.reduced {
line-height: 1.5;
}
p.faded, span.faded {
color: #555555;
.faded {
color: var(--color-fg-faded);
}
div.post-head h1 {
@ -181,21 +188,21 @@ div.post-head h1 {
}
div.post-head span.subtext {
color: #555555;
color: var(--color-fg-faded);
font-weight: normal;
font-size: 20px;
margin-top: 18px;
}
a {
color: #0074D9;
color: var(--color-link);
text-decoration: none;
}
hr {
height: 0;
border: 0;
border-top: 2px solid #AAAAAA;
border-top: 2px solid var(--color-border);
margin-top: 48px;
margin-bottom: 48px;
}
@ -203,7 +210,7 @@ hr {
div.block {
padding-top: 48px;
padding-bottom: 48px;
border-top: solid 2px #AAAAAA;
border-top: solid 2px var(--color-border);
}
div.block-small {
@ -244,12 +251,12 @@ div.article {
div.article:first-of-type {
padding-left: 0;
border-right: solid 2px #AAAAAA;
border-right: solid 2px var(--color-border-faded);
}
div.article:last-of-type {
padding-right: 0;
border-left: solid 2px #AAAAAA;
border-left: solid 2px var(--color-border-faded);
}
div.article h4 {
@ -263,7 +270,7 @@ div.article p.summary {
}
div.article p.extra {
color: #555555;
color: var(--color-fg-faded);
font-size: 14px;
line-height: 1.5;
margin-top: 0;
@ -271,7 +278,7 @@ div.article p.extra {
}
p.openring {
color: #555555;
color: var(--color-fg-faded);
font-size: 14px;
text-align: right;
}
@ -437,49 +444,22 @@ figure figcaption {
@media (prefers-color-scheme: dark) {
:root {
--color-fg: #DDD;
--color-fg-faded: #BBB;
--color-fg-subfaded: #AAA;
--color-bg: #111;
--color-bg-faded: #222;
}
body {
background-color: #111111;
color: #DDDDDD;
}
footer {
border-top: solid 2px #444444;
background-color: #181818;
}
div.article:first-of-type {
border-right: solid 2px #444444;
}
div.article:last-of-type {
border-left: solid 2px #444444;
}
p.faded, span.faded, div.post-head span.subtext, div.article p.extra, p.openring {
color: #BBBBBB;
}
nav a {
color: #AAAAAA;
display: block;
}
nav a:hover {
color: #BBBBBB;
}
a {
color: #4893fd;
--color-bg-subfaded: #181818;
--color-link: #4893fd;
--color-border: var(--color-fg-subfaded);
--color-border-faded: #444;
}
header img {
border: solid 2px #FFFFFF;
border: solid 2px var(--color-fg);
}
audio {
border: solid 1px #AAAAAA;
border: solid 1px var(--color-border);
}
}