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