Skip to content
Permalink
Browse files

Dark mode

Signed-off-by: Brian Donohue <brian@bthdonohue.com>
  • Loading branch information
Donohue committed Sep 29, 2019
1 parent 72e8055 commit 68ada5cbc9bd1c36ac0c1412a54764eaafdfed30
Showing with 49 additions and 0 deletions.
  1. +49 −0 css/main.css
@@ -1,3 +1,32 @@
:root {
--background-color: white;
--info-background-color: white;
--info-border-color: rgb(205, 205, 205);
--info-text-color: black;
--headline-color: black;
--text-color: black;
--link-color: #0074bf;
--fin-color: rgb(220, 220, 220);
--image-opacity: 1;
--code-background-color: rgb(240, 240, 240);
}

@media (prefers-color-scheme:dark) {
:root {
--background-color: rgb(17, 17, 17);
--info-background-color: black;
--info-border-color: black;
--info-text-color: rgb(235, 235, 235);
--headline-color: white;
--text-color: rgb(170, 170, 170);
--link-color: rgb(125, 164, 178);
--fin-color: rgb(77, 77, 77);
--image-opacity: 0.8;
--code-background-color: rgb(50, 50, 50);
}
}


@font-face {
font-family: 'TiemposText';
font-weight: normal;
@@ -19,6 +48,7 @@
body {
margin: 0;
font-family: 'TiemposText', 'Georgia', sans-serif;
background-color: var(--background-color);
}

h1 {
@@ -34,6 +64,7 @@ h3 {

a, a:visited {
color: #0074bf;
color: var(--link-color);
text-decoration: none;
}

@@ -43,6 +74,7 @@ a:hover {

h1 a, h1 a:visited, h1 a:hover, h3 a, h3 a:visited, h3 a:hover {
color: black;
color: var(--headline-color);
text-decoration: none;
}

@@ -59,6 +91,7 @@ pre {
line-height: 1.4;
font-size: 16px;
background-color: rgb(240, 240, 240);
background-color: var(--code-background-color);
padding: 15px 20px;
}

@@ -94,6 +127,7 @@ blockquote {
.header .container:nth-child(2) {
height: 34vh;
border-bottom: 1px solid rgb(205, 205, 205);
border-bottom: 1px solid var(--info-border-color);
}

.home, .post {
@@ -104,6 +138,8 @@ blockquote {
max-width: 640px;
margin-left: auto;
margin-right: auto;
color: black;
color: var(--text-color);
}

h4 {
@@ -117,6 +153,12 @@ p {

p img {
width: 100%;
transition: all 200ms ease-out;
opacity: var(--image-opacity);
}

p img:hover, p img:active {
opacity: 1;
}

.post-list .post p:last-of-type {
@@ -132,6 +174,7 @@ figcaption {

.fin {
color: rgb(220, 220, 220);
color: var(--fin-color);
font-size: 30px;
width:90%;
text-align: center;
@@ -184,6 +227,11 @@ a.block:hover {

#info {
background-color: white;
background-color: var(--info-background-color);
}

#info .text {
color: var(--info-text-color);
}

.text_container {
@@ -200,6 +248,7 @@ a.block:hover {
margin-left: auto;
margin-right: auto;
color: black;
color: var(--text-color);
padding-bottom: 20px;
}

0 comments on commit 68ada5c

Please sign in to comment.
You can’t perform that action at this time.