change to light theme

a lot of css variables
lipu-tenpo · Aug 26, 2024 · 3a41ba7 · 3a41ba7
1 parent 0ba3852
commit 3a41ba7
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 28 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -180,7 +180,8 @@ module.exports = function (eleventyConfig) {
       b += str.charCodeAt(i) * (i + 1);
     }
     function cap(x) {
-      return 100 + (x % 156);
+      // make sure all RGB values are below 156 to keep colours dark
+      return x % 156;
     }
     return `rgb(${cap(r)}, ${cap(g)}, ${cap(b)})`;
   });

diff --git a/public/stylesheet-index.css b/public/stylesheet-index.css
@@ -159,7 +159,7 @@
   font-weight: bold;
 }
 .lipuwan .date {
-  color: gray;
+  color: var(--text-subtle);
 }
 .lipuwan a:hover {
   text-decoration: underline;
@@ -186,9 +186,9 @@
   font-size: 1.7rem;
 }
 #lipu-nanpa-lon .lipuwan img {
-  margin-top: .7rem;
+  margin-top: 0.7rem;
   max-width: 12rem;
 }
 #lipu-nanpa-lon .jan-pali {
-  padding: 0 .5rem;
+  padding: 0 0.5rem;
 }
diff --git a/public/stylesheet-lipu.css b/public/stylesheet-lipu.css
@@ -39,7 +39,7 @@ h2 {
 }
 .pdfs li a {
   flex: 1 0;
-  border: 3px solid var(--logo-secondary-dark);
+  border: 3px solid var(--colour-kiwen-pimeja);
   background-color: var(--logo-primary-dark);
   padding: 1rem;
   border-radius: 1.5rem;
@@ -127,7 +127,6 @@ h2 {
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  color: var(--text-colour);
 }
 .article .nimi-suli {
   font-size: 1rem;
@@ -167,7 +166,10 @@ h2 {
   background-color: var(--logo-primary-dark);
   border-radius: 1rem;
   text-decoration: none;
-  color: var(--logo-secondary);
+  color: var(--text-contrast);
+}
+.prevnext a:hover {
+  color: var(--text-contrast-subtle);
 }
 .prevnext .disabled {
   color: var(--text-subtle);

diff --git a/public/stylesheet-sona.css b/public/stylesheet-sona.css
@@ -22,8 +22,6 @@
 .esun-tawa-ni img.icon {
   height: 2rem;
   width: auto;
-  filter: invert(100%) sepia(7%) saturate(0%) hue-rotate(112deg)
-    brightness(106%) contrast(109%);
 }
 
 .ni-li-seme {
@@ -105,10 +103,10 @@
   border-radius: var(--blob-border-radius-01);
 }
 .jan-pali .jan {
-  color: var(--colour-pimeja-lili);
+  color: var(--text-subtle);
 }
 .jan-pali .active {
-  color: var(--logo-secondary);
+  color: var(--colour-loje-pimeja);
 }
 .jan-pali .lists {
   display: flex;

diff --git a/public/stylesheet-toki.css b/public/stylesheet-toki.css
@@ -130,7 +130,6 @@ search > input {
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  color: var(--text-colour);
 }
 
 .article.hidden {

diff --git a/public/stylesheet.css b/public/stylesheet.css
@@ -8,7 +8,7 @@
   --logo-secondary: #fffd96;
   --logo-secondary-dark: #e0c880;
 
-  --background: #1e2122;
+  --background: #eeeef6;
 
   --primary-100: #e3e3ff;
   --primary-200: #aaacff;
@@ -20,8 +20,10 @@
   --primary-800: #000255;
   --primary-900: #00011c;
 
-  --text: white;
-  --text-subtle: #ddd;
+  --text: #000;
+  --text-subtle: #666;
+  --text-contrast: #fff;
+  --text-contrast-subtle: #ddd;
 
   /* generated with ../scripts/gpl-to-css.sh */
   --colour-walo-taso: #ffffff;
@@ -79,6 +81,30 @@ body {
   background-color: var(--background);
 }
 
+/* "paper" look */
+body {
+  --col: rgba(0, 0, 0, 0.01);
+  /* thickness of thin and thick lines */
+  --small-thickness: 1px;
+  --big-thickness: 2px;
+  /* gap between thin and thick lines */
+  --small-gap: 10px;
+  --big-gap: 50px;
+
+  --st: var(--small-thickness);
+  --bt: var(--big-thickness);
+  --nst: calc(-1 * var(--st));
+  --nbt: calc(-1 * var(--bt));
+  background-image: linear-gradient(var(--col) var(--bt), transparent var(--bt)),
+    linear-gradient(90deg, var(--col) var(--bt), transparent var(--bt)),
+    linear-gradient(var(--col) var(--st), transparent var(--st)),
+    linear-gradient(90deg, var(--col) var(--st), var(--background) var(--st));
+  background-size: var(--big-gap) var(--big-gap), var(--big-gap) var(--big-gap),
+    var(--small-gap) var(--small-gap), var(--small-gap) var(--small-gap);
+  background-position: var(--nbt) var(--nbt), var(--nbt) var(--nbt),
+    var(--nst) var(--nst), var(--nst) var(--nst);
+}
+
 h2,
 h3,
 h4,
@@ -121,7 +147,7 @@ header h1 {
   text-align: left;
 }
 header h1 a {
-  color: white;
+  color: var(--text);
   text-decoration: none;
 }
 header .subtitle {
@@ -157,20 +183,14 @@ header nav li a {
 header nav li.active a {
   background-color: var(--colour-unu-walo);
 }
-header nav li.active a {
-  color: var(--primary-700);
-}
-header nav li.active .sitelen-tu::before {
-  color: var(--primary-700);
-}
 header nav a {
-  color: white;
+  color: var(--text);
   font-size: 1.4rem;
   text-align: left;
   text-decoration: none;
 }
 .sitelen-tu::before {
-  color: var(--primary-200);
+  color: var(--text);
   content: attr(data-text);
   display: inline-block;
   font-family: "sitelen seli kiwen", sans-serif;
@@ -194,12 +214,13 @@ main a {
   color: var(--primary-300);
 }
 main a:hover {
-  color: var(--primary-200);
+  color: var(--primary-400);
 }
 
 footer {
   font-family: "Andika", sans-serif;
   background-color: var(--logo-primary);
+  color: var(--text-contrast);
   padding: 1rem;
   margin-top: auto;
   position: relative;
@@ -236,7 +257,7 @@ footer a img.icon {
 }
 footer a {
   font-family: "BogFace", sans-serif;
-  color: white;
+  color: var(--text-contrast);
   text-decoration: none;
   font-size: 1.2rem;
   text-align: center;

diff --git a/sona.hbs b/sona.hbs
@@ -12,8 +12,7 @@ css:
 <section class="esun-tawa-ni">
     <p>
         <a href="https://www.patreon.com/liputenpo">
-            <img class="icon" src="/icons/patreon.svg" alt="patreon icon" />
-            esun tawa mi! (Patreon)
+            esun tawa mi! (<img class="icon" src="/icons/patreon.svg" alt="patreon icon" /> Patreon)
         </a>
     </p>
 </section>