Skip to content
Permalink
Browse files

Add dark mode

  • Loading branch information...
sebastiandedeyne committed Oct 9, 2019
1 parent 6b387f0 commit 44079c3be7d1971ad287267597d89dfeb9dea350
Showing with 38 additions and 6 deletions.
  1. +30 −1 assets/css/site.css
  2. +2 −2 layouts/_default/baseof.html
  3. +3 −3 layouts/newsletter/list.html
  4. +3 −0 tailwind.config.js
@@ -2,7 +2,6 @@
@tailwind utilities;

html {
@apply leading-relaxed text-gray-900;
font-size: 18px;
}

@@ -16,6 +15,12 @@ hr {
@apply my-12;
}

@screen dark {
hr {
@apply border-gray-800;
}
}

@screen sm {
hr {
@apply my-20;
@@ -122,6 +127,12 @@ hr {
@apply border;
}

@screen dark {
.markup img.bordered {
@apply border-gray-800;
}
}

.markup figcaption,
.markup img + em,
.markup pre + em {
@@ -132,6 +143,12 @@ hr {
@apply p-6 bg-gray-100;
}

@screen dark {
.markup blockquote {
@apply bg-gray-800;
}
}

@screen sm {
.markup blockquote {
@apply p-12;
@@ -175,6 +192,12 @@ hr {
@apply bg-gray-100 text-inherit p-1;
}

@screen dark {
.markup :not(pre) > code {
@apply bg-gray-800;
}
}

.markup aside {
@apply text-gray-600 text-xs my-12;
}
@@ -187,6 +210,12 @@ hr {
@apply block overflow-x-auto p-6 bg-black text-gray-100 leading-loose;
}

@screen dark {
.markup .highlight pre {
@apply bg-gray-800;
}
}

@screen sm {
.markup .highlight pre {
@apply p-12;
@@ -32,8 +32,8 @@
{{ end }}
</head>

<body class="font-sans">
<header class="header px-6 sm:px-12 lg:px-16 py-6 border-b mb-12 sm:mb-16">
<body class="font-sans leading-relaxed text-gray-900 dark:text-gray-300 dark:bg-gray-900">
<header class="header px-6 sm:px-12 lg:px-16 py-6 border-b dark:border-gray-800 mb-12 sm:mb-16">
<nav class="header-title">
<a href="/" class="font-bold text-xl sm:text-2xl lg:text-base leading-tight">
Sebastian&nbsp;<br class="md:hidden">De Deyne
@@ -21,7 +21,7 @@ <h1 class="h1">Newsletter</h1>
value=""
name="EMAIL"
id="mce-EMAIL"
class="w-full max-w-xs border-l border-t border-b bg-transparent p-2 focus:outline-none focus:bg-teal-100 focus:border-teal-200 focus:text-teal-800"
class="w-full max-w-xs border-l border-t border-b dark:border-gray-700 bg-transparent dark:bg-gray-700 p-2 focus:outline-none focus:bg-teal-100 focus:border-teal-200 focus:text-teal-800"
placeholder="Email"
/>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
@@ -32,11 +32,11 @@ <h1 class="h1">Newsletter</h1>
value="Subscribe"
name="subscribe"
id="mc-embedded-subscribe"
class="bg-black border border-black text-white p-2 focus:outline-none focus:bg-teal-100 focus:border-teal-200 focus:text-teal-800"
class="bg-black dark:bg-gray-800 border border-black dark:border-gray-800 text-white p-2 focus:outline-none focus:bg-teal-100 focus:border-teal-200 focus:text-teal-800"
/>
</div>
</form>
<p class="text-xs text-gray-700">Unsubscribe any time. Pinky swear that I won't use your data for any other purposes than this newsletter. Your email address will be stored on <a href="https://mailchimp.com/legal/privacy/" target="_blank" rel="nofollow">MailChimp's servers</a> and nowhere else.</p>
<p class="text-xs text-gray-600 leading-snug">Unsubscribe any time. Pinky swear that I won't use your data for any other purposes than this newsletter. Your email address will be stored on <a href="https://mailchimp.com/legal/privacy/" target="_blank" rel="nofollow">MailChimp's servers</a> and nowhere else.</p>
</div>
</section>

@@ -20,6 +20,9 @@ module.exports = {
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
]
},
screens: {
dark: { raw: "(prefers-color-scheme: dark)" }
}
}
},

0 comments on commit 44079c3

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