]> Git in Space - website/commitdiff
Add theme toggle to top right of each page
authorMira Ayre <mi@boxin.space>
Sun, 20 Jun 2021 14:13:24 +0000 (15:13 +0100)
committerMira Ayre <mi@boxin.space>
Sun, 20 Jun 2021 14:13:24 +0000 (15:13 +0100)
Also added pronouns

ssg/blog.sh
www/SUFFIX
www/articles/PREFIX
www/articles/SUFFIX
www/git/SUFFIX
www/git/index.cf
www/index.cf
www/live.cf
www/style.css
www/videos/index.cf

index 8b8a4d9b3a073e64c9e78e74e4c01e8fc21aa788..2985fd6b5f017a99eaaede50fcfce72bc6cafd59 100644 (file)
@@ -2,11 +2,18 @@ function read-time() {
        echo "$(($(wc -l < $THISFILE) / 12)) minute read"
 }
 
+function theme-toggle() {
+       echo '<input type="checkbox" id="theme" name="theme" /><div id="content">'
+}
+
 function t() {
        text="### $@ ###"
        pad=$(( ( ( 80 - ${#text} ) / 2 ) - 1 ))
+       rpad=$(( 80 - ${#text} - $pad - 2 ))
        echo "text '$text' has length '${#text}' and so pad '$pad'" > /dev/stderr
-       printf '<a href="/">~</a>'
+       printf '<a href="/" title="Home">~</a>'
        printf ' %.0s' $(seq 1 $pad)
-       printf "%s\n" "<b>$text</b>"
+       printf "%s" "<b>$text</b>"
+       printf ' %.0s' $(seq 1 $rpad)
+       printf "<label id=\"toggle\" for=\"theme\" title=\"Toggle light/dark theme\">*</label>\n"
 }
index ebec3d7fcf309f32b63205712292bdf09648df4c..e44ef43cf078ff5bc337e256fc7a9c29c0be936e 100644 (file)
@@ -2,4 +2,4 @@
 <b>Page history</b>
 
 ;;git-history
-</pre></body></html>
+</pre></div></body></html>
index d342a3e89d578d03943e561e710399b3b5f54e64..b89944f46dbfe3564b85148ca2b498f12cecd9a7 100644 (file)
@@ -2,4 +2,6 @@
 <html><head>
 ;;titlef "Box in Space - " ""
 <link type="text/css" rel="stylesheet" href="/style.css">
-</head><body><pre>
+</head><body>
+;;theme-toggle
+<pre>
index ebec3d7fcf309f32b63205712292bdf09648df4c..e44ef43cf078ff5bc337e256fc7a9c29c0be936e 100644 (file)
@@ -2,4 +2,4 @@
 <b>Page history</b>
 
 ;;git-history
-</pre></body></html>
+</pre></div></body></html>
index ebec3d7fcf309f32b63205712292bdf09648df4c..e44ef43cf078ff5bc337e256fc7a9c29c0be936e 100644 (file)
@@ -2,4 +2,4 @@
 <b>Page history</b>
 
 ;;git-history
-</pre></body></html>
+</pre></div></body></html>
index 10a48a37467d5032b137e89869d3a1cc760c61be..5464d378fe8a6f8c907890491c8fc7a87571efe1 100644 (file)
@@ -2,7 +2,9 @@
 <html><head>
        <title>Box in Space - git</title>
        <link type="text/css" rel="stylesheet" href="/style.css">
-</head><body><pre>
+</head><body>
+;;theme-toggle
+<pre>
 ;;t GIT PROJECTS
 
 These are my public git projects. If you would like to have a look at one, clone
index ca77ca73f26338a982332e40ac0adaa7ca01800d..92ae98a1ba828ea9d5279d488f9da1ff00dc8547 100644 (file)
@@ -2,7 +2,9 @@
 <html><head>
        <title>Box in Space</title>
        <link type="text/css" rel="stylesheet" href="/style.css">
-</head><body><pre>
+</head><body>
+;;theme-toggle
+<pre>
 ;;t BOX IN SPACE
                                 <span style="color:#404040;">-</span> \
 <span style="color:#dc2566">-</span> \
 <span style="color:#56b7a5">-</span> \
 <span style="color:#f1ebeb">-</span>
 
-'sup, I'm Mi/Mimi/Mira/Daki. I write code, play with computers, own a bass,
-sometimes write some music, very occasionally dabble in conlanging, and spend
-most of my time confused.
+'sup, I'm Mi/Mimi/Mira/Daki (she/they). I write code, play with computers, own a
+bass, sometimes write some music, very occasionally dabble in conlanging, and
+spend most of my time confused.
 
 I'm most accessible on Fedi \
 <a rel="me" href="https://is.nota.live/@miramira">(at) miramira (at) is \
 (dot) not a (dot) live</a>.
-You can also message me on Matrix (at) mi : bad at (dot) dev.
-Or if you absolutely must, you can email me (at) box in (dot) space.
+You can also message me on Matrix \
+<a href="https://matrix.to/#/@mi:badat.dev">(at) mi : bad at (dot) dev</a>.
+Or if you absolutely must, you can email \
+<a href="#">me (at) box in (dot) space</a>.
 I post music on \
 <a href="https://miraonthewall.bandcamp.com">Bandcamp</a> \
 (make sure you're blocking Google Analytics et al)
index 443618aafdb4f0ec128de6c68f0ba4a96936700f..e5c9e815aa3e53e634419d764655a3f71505abb8 100644 (file)
@@ -6,7 +6,9 @@
        <!--<script src="/video.js"></script>-->
        <script src="/dash.js"></script>
        <!--<script src="/videojs-dash.js"></script>-->
-</head><body><pre>
+</head><body>
+;;theme-toggle
+<pre>
 ;;t BOX IN SPACE LIVE
 
 <noscript>\
index 00086d76ead8a3c65e6c9e4d104f5898480e4a73..aa7447ba5f69006214fedd81fbda29305b690878 100644 (file)
@@ -6,21 +6,54 @@
 }
 
 @media ( prefers-color-scheme : dark ) {
-       * {
-               background-color : #000         ;
-               color            : #f1ebeb      ;
-               scrollbar-color  : #f1ebeb #000 ;
+       :root {
+               --b : #000    ;
+               --f : #f1ebeb ;
        }
 }
 
 @media ( prefers-color-scheme : light ) {
-       * {
-               background-color : #f1ebeb      ;
-               color            : #000         ;
-               scrollbar-color  : #000 #f1ebeb ;
+       :root {
+               --b : #f1ebeb ;
+               --f : #000    ;
        }
 }
 
+body {
+       margin  : 0 ;
+       padding : 0 ;
+}
+
+#theme {
+       position : absolute ;
+       left     : -9999px  ;
+}
+
+#theme ~ #content , #theme ~ #content * {
+       background-color : var( --b )            ;
+       color            : var( --f )            ;
+       scrollbar-color  : var( --f ) var( --b ) ;
+}
+
+#theme:checked ~ #content , #theme:checked ~ #content * {
+       background-color : var( --f )            ;
+       color            : var( --b )            ;
+       scrollbar-color  : var( --b ) var( --f ) ;
+}
+
+#content {
+       overflow : scroll ;
+       height   : 100vh  ;
+}
+
+#toggle {
+       text-decoration : underline          ;
+       color           : #55bcce !important ;
+       cursor          : pointer            ;
+}
+
+#toggle:hover { color : #66d9ee !important ; }
+
 @media screen and ( max-width : 82ch ) {
        pre { font-size : 2.2vw ; }
 }
@@ -31,15 +64,15 @@ pre {
        width       : 80ch                  ;
        max-width   : 100%                  ;
        margin      : auto                  ;
-       padding     : 0                     ;
+       padding     : 1ch 0                 ;
        font-family : ComicMono , monospace ;
-       overflow : hidden ;
+       overflow    : hidden                ;
 }
 
-a { color : #55bcce ; }
-a:hover { color : #66d9ee ; }
-a:visited { color : #9358fe ; }
-a:visited:hover { color : #ae82ff ; }
+a { color : #55bcce !important ; }
+a:hover { color : #66d9ee !important ; }
+a:visited { color : #9358fe !important ; }
+a:visited:hover { color : #ae82ff !important ; }
 
 video {
        display   : block ;
index d2aebffb28a6460e870c0fa87c8edca3b497071a..1876701f7ac48f6ea64f18e1511c8a6f0d788cfd 100644 (file)
@@ -2,7 +2,9 @@
 <html><head>
        <title>Box in Space - videos</title>
        <link type="text/css" rel="stylesheet" href="/style.css">
-</head><body><pre>
+</head><body>
+;;theme-toggle
+<pre>
 ;;t VIDEOS
 
 ;;indexh '*.webm'