commit bb0a836adde69d52027dfd5be19ae2d6b223eca5
parent 15a212f155d13dd4e2c3d71acb53004c7e0bea93
Author: Jonathan Dahan <git@jonathan.is>
Date: Wed, 4 Aug 2021 19:50:24 -0400
Add dark mode
Diffstat:
2 files changed, 188 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
<head>
<link rel="stylesheet" href="sakura.css" type="text/css">
+ <link rel="stylesheet" href="sakura-dark.css" type="text/css">
</head>
<body>
diff --git a/sakura-dark.css b/sakura-dark.css
@@ -0,0 +1,187 @@
+/* $color-text: #dedce5; */
+/* Sakura.css v1.3.1
+ * ================
+ * Minimal css theme.
+ * Project: https://github.com/oxalorg/sakura/
+ */
+/* Body */
+@media (prefers-color-scheme: dark) {
+ html {
+ font-size: 62.5%;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
+
+ body {
+ font-size: 1.8rem;
+ line-height: 1.618;
+ max-width: 38em;
+ margin: auto;
+ color: #c9c9c9;
+ background-color: #222222;
+ padding: 13px; }
+
+ @media (max-width: 684px) {
+ body {
+ font-size: 1.53rem; } }
+
+ @media (max-width: 382px) {
+ body {
+ font-size: 1.35rem; } }
+
+ h1, h2, h3, h4, h5, h6 {
+ line-height: 1.1;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+ font-weight: 700;
+ margin-top: 3rem;
+ margin-bottom: 1.5rem;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-word; }
+
+ h1 {
+ font-size: 2.35em; }
+
+ h2 {
+ font-size: 2.00em; }
+
+ h3 {
+ font-size: 1.75em; }
+
+ h4 {
+ font-size: 1.5em; }
+
+ h5 {
+ font-size: 1.25em; }
+
+ h6 {
+ font-size: 1em; }
+
+ p {
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+ small, sub, sup {
+ font-size: 75%; }
+
+ hr {
+ border-color: #ffffff; }
+
+ a {
+ text-decoration: none;
+ color: #ffffff; }
+ a:hover {
+ color: #c9c9c9;
+ border-bottom: 2px solid #c9c9c9; }
+ a:visited {
+ color: #e6e6e6; }
+
+ ul {
+ padding-left: 1.4em;
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+ li {
+ margin-bottom: 0.4em; }
+
+ blockquote {
+ margin-left: 0px;
+ margin-right: 0px;
+ padding-left: 1em;
+ padding-top: 0.8em;
+ padding-bottom: 0.8em;
+ padding-right: 0.8em;
+ border-left: 5px solid #ffffff;
+ margin-bottom: 2.5rem;
+ background-color: #4a4a4a; }
+
+ blockquote p {
+ margin-bottom: 0; }
+
+ img, video {
+ height: auto;
+ max-width: 100%;
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+ /* Pre and Code */
+ pre {
+ background-color: #4a4a4a;
+ display: block;
+ padding: 1em;
+ overflow-x: auto;
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+ code {
+ font-size: 0.9em;
+ padding: 0 0.5em;
+ background-color: #4a4a4a;
+ white-space: pre-wrap; }
+
+ pre > code {
+ padding: 0;
+ background-color: transparent;
+ white-space: pre; }
+
+ /* Tables */
+ table {
+ text-align: justify;
+ width: 100%;
+ border-collapse: collapse; }
+
+ td, th {
+ padding: 0.5em;
+ border-bottom: 1px solid #4a4a4a; }
+
+ /* Buttons, forms and input */
+ input, textarea {
+ border: 1px solid #c9c9c9; }
+ input:focus, textarea:focus {
+ border: 1px solid #ffffff; }
+
+ textarea {
+ width: 100%; }
+
+ .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+ display: inline-block;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #ffffff;
+ color: #222222;
+ border-radius: 1px;
+ border: 1px solid #ffffff;
+ cursor: pointer;
+ box-sizing: border-box; }
+ .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
+ cursor: default;
+ opacity: .5; }
+ .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
+ background-color: #c9c9c9;
+ border-color: #c9c9c9;
+ color: #222222;
+ outline: 0; }
+
+ textarea, select, input {
+ color: #c9c9c9;
+ padding: 6px 10px;
+ /* The 6px vertically centers text on FF, ignored by Webkit */
+ margin-bottom: 10px;
+ background-color: #4a4a4a;
+ border: 1px solid #4a4a4a;
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box; }
+ textarea:focus, select:focus, input:focus {
+ border: 1px solid #ffffff;
+ outline: 0; }
+
+ input[type="checkbox"]:focus {
+ outline: 1px dotted #ffffff; }
+
+ label, legend, fieldset {
+ display: block;
+ margin-bottom: .5rem;
+ font-weight: 600; }
+}
