michael/blog
1
0
Fork 0
Code Issues 2 Pull requests Releases Packages 1 Wiki Activity

add dark mode

Browse source
This commit is contained in:
Michael Zhang 2020-02-11 21:21:15 -06:00
parent 2de8f368b5
commit dc02a8df97
Signed by: michael
GPG key ID: BDA47A31A3C8EE6B
3 changed files with 71 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
sass/_content.scss Normal file
View file

@ -0,0 +1,54 @@
body {
max-width: 850px;
margin: auto;
min-height: 100%;
padding-bottom: 20px;
font-family: $sansfont;
background-color: $background-color;
color: $text-color;
}
header {
margin: auto 12px;
#header {
border-bottom: 2px solid $link-color;
box-sizing: border-box;
padding: 20px;
margin-bottom: 12px;
#title {
font-size: 2em;
color: $text-color;
&:hover {
text-decoration: none;
}
}
}
}
a {
color: $link-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&.permalink {
color: lighten($link-color, 25%);
font-size: 0.65em;
}
}
#content {
line-height: 1.25em;
}
pre {
padding: 5px;
overflow-x: auto;
font-family: $monofont;
}

64
sass/main.scss
View file

@ -1,56 +1,20 @@
@import "syntax.scss"; @import "syntax";
$sansfont: "Helvetica", "Arial", "Liberation Sans", sans-serif;
$monofont: "Roboto Mono", "Roboto Mono for Powerline", "Inconsolata", "Consolas", monospace; $monofont: "Roboto Mono", "Roboto Mono for Powerline", "Inconsolata", "Consolas", monospace;
html { // colors
background-color: lightskyblue;
@media (prefers-color-scheme: light) {
$background-color: #EADFD4;
$text-color: #15202B;
$link-color: royalblue;
@import "content";
} }
body { @media (prefers-color-scheme: dark) {
max-width: 850px; $background-color: #15202B;
margin: auto; $text-color: #EADFD4;
background-color: white; $link-color: lightskyblue;
min-height: 100%; @import "content";
padding-bottom: 20px;
font-family: sans-serif;
}
#header {
border-bottom: 4px solid lightskyblue;
box-sizing: border-box;
padding: 20px;
margin-bottom: 12px;
#title {
font-size: 2em;
color: black;
&:hover {
text-decoration: none;
}
}
}
a {
color: royalblue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&.permalink {
color: lighten(royalblue, 25%);
font-size: 0.65em;
}
}
#content {
line-height: 1.25em;
}
pre {
padding: 5px;
overflow-x: auto;
font-family: $monofont;
} }

4
templates/layout.html
View file

@ -3,9 +3,11 @@
<html> <html>
<head> <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="/main.css" /> <link rel="stylesheet" href="/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>