aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDawid Potocki <dawid@dawidpotocki.com>2021-02-01 20:18:57 +1300
committerDawid Potocki <dawid@dawidpotocki.com>2021-02-01 20:18:57 +1300
commit6e4aa761efbd6a4475150cbe8f4694fc4c5767e3 (patch)
treec63ebf43271b61ea106f4394b4ef14756c0c15a7
parent7264e4ba61715cba3e75f6924d8e957be0015c1b (diff)
Add light theme
-rw-r--r--_includes/aside.html2
-rw-r--r--_includes/nav.html4
-rw-r--r--_layouts/default.html6
-rw-r--r--assets/css/_font.scss1
-rw-r--r--assets/css/main.scss27
-rw-r--r--pages/accounts.html4
-rw-r--r--pages/index.html6
-rw-r--r--tailwind.config.js17
8 files changed, 32 insertions, 35 deletions
diff --git a/_includes/aside.html b/_includes/aside.html
index 66fff88..9c858f9 100644
--- a/_includes/aside.html
+++ b/_includes/aside.html
@@ -4,7 +4,7 @@
<div class="flex flex-col items-center md:w-full">
<img
src="/assets/img/logo.svg"
- class="shadow rounded-lg w-24 h-24 sm:w-32 sm:h-32"
+ class="rounded-lg w-24 h-24 sm:w-32 sm:h-32"
alt="Logo, upside down face with horns"
aria-hidden="true" />
<span class="text-2xl mt-2">{{ site.author }}</span>
diff --git a/_includes/nav.html b/_includes/nav.html
index a072314..d5d3aa6 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,5 +1,5 @@
-<nav class="bg-gray-700">
- <div class="flex flex-wrap md:flex-nowrap justify-between md:justify-start max-w-5xl px-6 py-2 mx-auto">
+<nav>
+ <div class="flex flex-wrap md:flex-nowrap justify-between md:justify-start max-w-5xl px-6 py-3 mx-auto">
<a class="nav-link font-bold ml-0" href="/">{{ site.author }}</a>
<input id="hamburger" class="hidden" type="checkbox" />
diff --git a/_layouts/default.html b/_layouts/default.html
index c23b84a..5bbfd3e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -16,9 +16,9 @@
{% seo %}
</head>
- <body class="bg-gray-900 text-gray-100 h-full">
+ <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 h-full">
{% include nav.html %}
- <div id="container" class="p-6 max-w-5xl mx-auto">
+ <div id="container" class="p-6 pt-2 max-w-5xl mx-auto">
<main id="main" class="max-w-5xl">
{% if page.title %}
<h1 class="-mt-2">{{ page.title }}</h1>
@@ -30,7 +30,7 @@
<div
id="clipboard"
- class="bg-gray-700 rounded-lg shadow-lg invisible opacity-0 fixed p-3 m-6 bottom-0 right-0 transition duration-700">
+ class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg invisible opacity-0 fixed p-3 m-6 bottom-0 right-0 transition duration-700">
Copied to clipboard!
</div>
diff --git a/assets/css/_font.scss b/assets/css/_font.scss
index 728074f..9cbafb1 100644
--- a/assets/css/_font.scss
+++ b/assets/css/_font.scss
@@ -141,4 +141,3 @@
url('/assets/font/roboto/roboto-latin-900-italic.woff2') format('woff2'),
url('/assets/font/roboto/roboto-latin-900-italic.woff') format('woff');
}
-
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 2daf1f8..d70db64 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -7,7 +7,7 @@
body { @apply overflow-x-hidden; }
-a, .a { @apply text-blue-400 cursor-pointer; }
+a, .a { @apply text-blue-700 dark:text-blue-400 cursor-pointer; }
h1 { @apply text-4xl; }
h2 { @apply text-3xl; }
h3 { @apply text-2xl; }
@@ -17,18 +17,14 @@ h6 { @apply font-bold; }
h1,h2,h3,h4,h5,h6 { @apply font-medium mt-2; }
table { @apply my-2; }
th, td { @apply border px-2 py-1; }
-th { @apply bg-gray-800; }
+th { @apply bg-gray-100 dark:bg-gray-800; }
ul { @apply list-disc ml-4; }
ol { @apply list-decimal ml-4; }
-code { @apply bg-gray-800; }
-pre { @apply bg-gray-800 border overflow-x-auto p-1; }
+code { @apply bg-gray-100 dark:bg-gray-800; }
+pre { @apply bg-gray-100 dark:bg-gray-800 border overflow-x-auto p-1; }
-*, ::before, ::after { @apply border-gray-500; }
-:target { @apply bg-gray-700; }
-
-body {
- font-family: Roboto, sans-serif, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
+*, ::before, ::after { @apply border-gray-300 dark:border-gray-700; }
+:target { @apply bg-gray-300 dark:bg-gray-700; }
/*
@@ -71,10 +67,13 @@ body {
* Components
*/
-.btn { @apply text-gray-100 rounded no-underline select-none px-3 py-1; }
-.card { @apply bg-gray-700 rounded p-4; }
+.btn { @apply text-white rounded no-underline select-none px-3 py-1 transition duration-100 ease-in-out; }
+.btn-gray { @apply bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-black dark:text-white }
+.btn-blue { @apply bg-blue-500 hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700; }
+.btn-orange { @apply bg-orange-500 hover:bg-orange-600 dark:bg-orange-800 dark:hover:bg-orange-700; }
+.card { @apply bg-gray-200 dark:bg-gray-800 rounded p-4; }
.nav-link {
- @apply text-gray-100 no-underline select-none whitespace-nowrap mx-0 my-1;
+ @apply text-gray-900 dark:text-gray-100 no-underline select-none whitespace-nowrap mx-0 my-1;
@screen md { @apply mx-2; }
}
@@ -84,4 +83,4 @@ body {
*/
@tailwind utilities;
-.text-muted { @apply text-gray-300; }
+.text-muted { @apply text-gray-600 dark:text-gray-300; }
diff --git a/pages/accounts.html b/pages/accounts.html
index adfc040..80e8b42 100644
--- a/pages/accounts.html
+++ b/pages/accounts.html
@@ -12,7 +12,7 @@ These are all the accounts and keys I have, do whatever you want with this infor
<span id="pgp">PGP</span>
</h2>
<span class="onclick-copy personal-mail">[Enable JavaScript]</span> - Main account
-<pre class="bg-gray-800 text-muted overflow-auto rounded-t p-2 mt-1 h-48">
+<pre class="card text-muted overflow-auto rounded-b-none p-2 mt-1 h-48">
-----BEGIN PGP PUBLIC KEY BLOCK-----
mDMEXqOMPhYJKwYBBAHaRw8BAQdAWH14D9pgLhCgn0F3XmBnEW9ObU1WZyiueanC
@@ -28,7 +28,7 @@ p5R+c1AwfdG+y+UoXAD/Z0TyDFsW7sW3iTLDywRVB+LGY1mub+q5yQGkDx2ESwA=
-----END PGP PUBLIC KEY BLOCK-----
</pre>
<a
- class="btn bg-gray-700 hover:bg-gray-600 rounded-t-none flex w-full"
+ class="btn btn-gray rounded-t-none flex w-full"
href="/assets/pgp/publickey.asc" download>
Download PGP key
</a>
diff --git a/pages/index.html b/pages/index.html
index 123e51e..4b2b876 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -32,7 +32,7 @@ pagination:
</div>
<div class="sm:flex justify-end mb-10 sm:-mb-4">
- <a class="btn bg-orange-900 hover:bg-orange-800 rounded-t-none flex justify-center px-6" href="/feed.xml">
+ <a class="btn btn-orange rounded-t-none flex justify-center px-6" href="/feed.xml">
<img
src="/assets/img/layout/rss.svg"
class="inline w-5 mr-2"
@@ -57,14 +57,14 @@ pagination:
<div class="flex mt-6 lg:mb-6">
{% if paginator.previous_page %}
<a
- class="btn bg-blue-900 hover:bg-blue-800"
+ class="btn btn-blue"
href="{{ paginator.previous_page_path | prepend: site.baseurl }}">
&lt; Page {{ paginator.previous_page }}
</a>
{% endif %}
{% if paginator.next_page %}
<a
- class="btn bg-blue-900 hover:bg-blue-800 ml-auto"
+ class="btn btn-blue ml-auto"
href="{{ paginator.next_page_path | prepend: site.baseurl }}">
Page {{ paginator.next_page }} &gt;
</a>
diff --git a/tailwind.config.js b/tailwind.config.js
index 44299de..28aa9c0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,13 @@
const colors = require('tailwindcss/colors')
module.exports = {
+ darkMode: 'media',
purge: ["./_site/**/*.html", "./_site/**/*.js"],
theme: {
+ fontFamily: {
+ "sans": ["Roboto", "sans-serif", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"],
+ "mono": ["DejaVu Sans Mono", "monospace"],
+ },
extend: {
fontSize: {
"3xl": "1.75rem",
@@ -11,15 +16,9 @@ module.exports = {
colors: {
orange: colors.orange,
gray: {
- "50": "#fafafa",
- "100": "#eeeeee",
- "200": "#cccccc",
- "300": "#aaaaaa",
- "400": "#717385",
- "500": "#4e4f5a",
- "600": "#3f414d",
- "700": "#2c2c38",
- "800": "#1a1f24",
+ "600": "#4e4f5a",
+ "700": "#3f414d",
+ "800": "#2c2c38",
"900": "#15191e",
},
},