first pass at dark theme
This commit is contained in:
flupe
parent
ad60b7eff2
commit
53eefddc2e
|
|
@ -3,22 +3,40 @@
|
||||||
--lighter: #fff;
|
--lighter: #fff;
|
||||||
--light: #fff;
|
--light: #fff;
|
||||||
--mild: #d8dee9;
|
--mild: #d8dee9;
|
||||||
--dark: #4c566a;
|
/* --dark: #4c566a; */
|
||||||
--darker: #434c5e;
|
--darker: #434c5e;
|
||||||
--black: #3b4252;
|
--black: #3b4252;
|
||||||
--blacker: #2e3440;
|
--blacker: #2e3440;
|
||||||
--yellow: #f8c325;
|
--yellow: #f8c325;
|
||||||
--red: #ee4242;
|
--red: #ee4242;
|
||||||
--pink: #de59a8;
|
--pink: #de59a8;
|
||||||
|
|
||||||
|
--background: #eee;
|
||||||
|
--text-strong: #434c5e;
|
||||||
|
--text: #4c566a;
|
||||||
|
--dark: #d8dee9;
|
||||||
|
--darker: #4c566a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background: #3b4252;
|
||||||
|
--dark: #3b4252;
|
||||||
|
--darker: #000;
|
||||||
|
--text-strong: #fff;
|
||||||
|
--text: #d8dee9;
|
||||||
|
--text-faded: #9ea6b5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font: 16px Inter, sans-serif, "é";
|
font: 16px "Inter UI", sans-serif;
|
||||||
line-height: 1.54;
|
line-height: 1.54;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
color: var(--dark);
|
color: var(--text);
|
||||||
background: var(--light);
|
background: var(--background);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
|
|
@ -26,6 +44,10 @@ body {
|
||||||
counter-reset: section;
|
counter-reset: section;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {font-weight: 300}
|
||||||
|
}
|
||||||
|
|
||||||
main span.draft {
|
main span.draft {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -37,19 +59,15 @@ main span.draft {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 { color: var(--darker) }
|
h1, h2, h3 { color: var(--darkr) }
|
||||||
|
|
||||||
main > section {
|
main > section { counter-reset: subsection }
|
||||||
counter-reset: subsection;
|
main :first-child { margin-top: 0 }
|
||||||
}
|
|
||||||
|
|
||||||
main :first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main ::selection {
|
main ::selection {
|
||||||
background: var(--yellow);
|
background: var(--yellow);
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.footnote-ref sup::before { content: '[' }
|
a.footnote-ref sup::before { content: '[' }
|
||||||
|
|
@ -70,26 +88,26 @@ a.footnote-ref sup::after { content: ']' }
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--blacker);
|
color: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-decoration: none
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {text-decoration: underline}
|
a:hover {text-decoration: underline}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: none;
|
border: none;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: var(--mild);
|
background: var(--dark);
|
||||||
margin: 2.5em 0;
|
margin: 2.5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pidx { list-style: none }
|
#pidx { list-style: none; padding: 0 }
|
||||||
#pidx li {line-height: 1.6em}
|
#pidx li {line-height: 1.6em}
|
||||||
#pidx li > span {
|
#pidx li > span {
|
||||||
font: 13px monospace;
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
margin-right: 1em;
|
margin-right: 1em;
|
||||||
padding: .1em .5em;
|
opacity: 0.7;
|
||||||
border-radius: 3px;
|
|
||||||
background: #eaeaef;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
details summary {
|
details summary {
|
||||||
|
|
@ -98,9 +116,14 @@ details summary {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {color: var(--darker)}
|
strong {
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
#hd {background: var(--dark) }
|
#hd {
|
||||||
|
margin: 1em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
#hd > section {
|
#hd > section {
|
||||||
max-width: var(--width);
|
max-width: var(--width);
|
||||||
|
|
@ -120,7 +143,6 @@ strong {color: var(--darker)}
|
||||||
|
|
||||||
#hd nav a {
|
#hd nav a {
|
||||||
margin: 0 0 0 1.2rem;
|
margin: 0 0 0 1.2rem;
|
||||||
color: var(--light);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -133,7 +155,12 @@ main, #ft, .breadcrumb {
|
||||||
max-width: var(--width);
|
max-width: var(--width);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0em auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 0 1em;
|
||||||
|
margin: 2em auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
p > span.display {
|
p > span.display {
|
||||||
|
|
@ -145,7 +172,6 @@ p > span.display {
|
||||||
main {flex-grow: 1 }
|
main {flex-grow: 1 }
|
||||||
|
|
||||||
h1, h2, h3, h4 { font-weight: 500 }
|
h1, h2, h3, h4 { font-weight: 500 }
|
||||||
strong {font-weight:600}
|
|
||||||
|
|
||||||
main header h1 {margin: 0}
|
main header h1 {margin: 0}
|
||||||
main header p {margin: 0}
|
main header p {margin: 0}
|
||||||
|
|
@ -154,34 +180,42 @@ main header {margin: 0 0 2em}
|
||||||
main ul li { padding: 0 0 0 0 }
|
main ul li { padding: 0 0 0 0 }
|
||||||
main ul { padding: 0 0 0 1.5em }
|
main ul { padding: 0 0 0 1.5em }
|
||||||
|
|
||||||
|
main ul.projects a { text-decoration: none }
|
||||||
|
|
||||||
main ul.projects {
|
main ul.projects {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 2.5em 0 0;
|
margin: 2.5em 0 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
grid-gap: 1em;
|
grid-gap: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
main ul.projects li {
|
main ul.projects li {
|
||||||
background: #fafafb;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main ul.projects > li > a {
|
main ul.projects > li > a {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
padding: .5em 1em 1em;
|
|
||||||
transition: .2s background
|
transition: .2s background
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.projects li a p { font-weight: 400 }
|
main ul.projects li a p {
|
||||||
|
font-weight: 300;
|
||||||
|
opacity: 0.7;
|
||||||
|
font-size: .9em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
main ul.projects > li img {
|
main ul.projects > li img {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
margin: .5em 1em 0 0;
|
margin: .5em 1em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main ul.projects > li h2 { margin: 0; font-size: 1em }
|
||||||
|
|
||||||
|
|
||||||
header.project { display: flex }
|
header.project { display: flex }
|
||||||
header.project img {
|
header.project img {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
|
@ -194,27 +228,10 @@ header.project ul li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .3em .5em;
|
padding: .3em .5em;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
background: #eceff4;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
margin: 0 1em 0 0;
|
margin: 0 1em 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
main ul.projects > li a:hover { background: #f2f4f7; text-decoration: none }
|
|
||||||
main ul.projects > li h2 { margin: 0; font-size: 1.3em; color: var(--black) }
|
|
||||||
main ul.projects > li p { margin: 0 }
|
|
||||||
main ul.projects li ul { padding: .5em 0 }
|
|
||||||
main ul.projects li ul li {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 13px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 3px;
|
|
||||||
list-style: none;
|
|
||||||
line-height: 2em;
|
|
||||||
padding: 0 .5em;
|
|
||||||
}
|
|
||||||
main ul.projects li ul li+li { margin: 0 0 0 1em }
|
|
||||||
|
|
||||||
main blockquote {
|
main blockquote {
|
||||||
font: 16px serif;
|
font: 16px serif;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
@ -238,7 +255,6 @@ pre.Agda a {font-weight: inherit; text-decoration: none}
|
||||||
pre.Agda a[href]:hover { background: var(--yellow) }
|
pre.Agda a[href]:hover { background: var(--yellow) }
|
||||||
|
|
||||||
code, pre.sourceCode, pre.Agda {
|
code, pre.sourceCode, pre.Agda {
|
||||||
background: #eceff4;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -249,14 +265,6 @@ code {
|
||||||
|
|
||||||
pre > code {display: block}
|
pre > code {display: block}
|
||||||
|
|
||||||
#ft svg {
|
|
||||||
margin-left: .6em;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
#ft svg:hover {opacity:1}
|
|
||||||
|
|
||||||
pre.sourceCode {
|
pre.sourceCode {
|
||||||
margin:2em 0;
|
margin:2em 0;
|
||||||
padding: .8em 0;
|
padding: .8em 0;
|
||||||
|
|
@ -308,7 +316,7 @@ section.visual.tiny {
|
||||||
}
|
}
|
||||||
|
|
||||||
section.visual figure { margin: 0 }
|
section.visual figure { margin: 0 }
|
||||||
section.visual.tiny figure { margin: 0; border-radius: 5px; overflow: hidden; }
|
section.visual.tiny figure { margin: 0; overflow: hidden; }
|
||||||
figure img {
|
figure img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -374,10 +382,13 @@ table.books tr td {
|
||||||
table.books tr td:first-child {
|
table.books tr td:first-child {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
color: var(--blacker);
|
color: var(--text-faded);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table.books tr td:nth-child(3),
|
||||||
|
table.books tr td:last-child {text-align: center;color: var(--yellow)}
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
|
|
@ -389,9 +400,8 @@ table.books tr td:first-child {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
main > header h1 {line-height: 1.3}
|
main > header h1 {line-height: 1.3 }
|
||||||
main > header p {font-style: italic; padding-left: .5em; margin: .2em 0 0 }
|
main > header time {
|
||||||
main > header time {font-weight: 500 }
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
table.books tr td:nth-child(3),
|
|
||||||
table.books tr td:last-child {text-align: center;color: var(--yellow)}
|
|
||||||
|
|
|
||||||
|
|
@ -130,11 +130,8 @@ renderPost :: UTCTime -> Text -> Text -> Html ()
|
||||||
renderPost date title content =
|
renderPost date title content =
|
||||||
outerWith def { Config.title = title, Config.route = PostRoute } do
|
outerWith def { Config.title = title, Config.route = PostRoute } do
|
||||||
header_ do
|
header_ do
|
||||||
|
p_ do time_ $ toHtml (showDate date)
|
||||||
h1_ $ toHtml title
|
h1_ $ toHtml title
|
||||||
p_ do
|
|
||||||
"Posted on "
|
|
||||||
time_ $ toHtml (showDate date)
|
|
||||||
"."
|
|
||||||
toHtmlRaw content
|
toHtmlRaw content
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -153,7 +150,6 @@ renderIndex imgs posts content =
|
||||||
|
|
||||||
p_ [class_ "right"] $ a_ [href_ "/visual.html"] "→ View more visual work"
|
p_ [class_ "right"] $ a_ [href_ "/visual.html"] "→ View more visual work"
|
||||||
|
|
||||||
h2_ "Latest posts"
|
|
||||||
ul_ [ id_ "pidx" ] $ forM_ posts \post ->
|
ul_ [ id_ "pidx" ] $ forM_ posts \post ->
|
||||||
li_ do
|
li_ do
|
||||||
span_ $ fromString $ showDate (postDate post)
|
span_ $ fromString $ showDate (postDate post)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue