From f663b7057c255369979dbc1702afae7595b4eec3 Mon Sep 17 00:00:00 2001
From: sejo <compudanzas@posteo.net>
Date: Sun, 26 Nov 2023 15:08:26 +0100
Subject: [PATCH] implemented dark/light css theme based on
 prefers-color-scheme

---
 templates/estilo.css         | 108 ++++++++++++++++++++++++++---------
 templates/pagefooter.html    |  10 +++-
 templates/pagefooter_es.html |   8 ++-
 3 files changed, 95 insertions(+), 31 deletions(-)

diff --git a/templates/estilo.css b/templates/estilo.css
index b5e9d3f..de997d0 100644
--- a/templates/estilo.css
+++ b/templates/estilo.css
@@ -1,43 +1,46 @@
-/* colors by https://www.colourlovers.com/palette/1078634/Sentences */
+/* colors by
+ * https://www.colourlovers.com/palette/3025559/Desert_Beauty
+ * */
 /* links externos */
 a[rel^=external]:after{ content: "⭷"; }
-/* gemini headers
-main h1:before{ 
-	content: "#"; 
-	font-size: smaller;
-	padding-right:1em;
-}
-main h2:before{ 
-	content: "##"; 
-	font-size: smaller;
-	padding-right:1em;
-}
-main h3:before{ 
-	content: "###"; 
-	font-size: smaller;
-	padding-right:1em;
-}*/
 a{ 
- color: #C04E43;
+ color: #A00C0A;
 }
 a:visited{
- color: #872645;
+ font-style: italic;
 }
 a.icon{
-/* background-color: #fff; */
+color: #EFD7BB;
 }
 
 a.arrow:before{ content: "⇒ "; }
+
 body{
- color: #563850;
- max-width:36em;
+ color: #030400;
+ background-color: #AA7E4D;
+ max-width:800px;
  margin:0 auto;
  font-size:18px;
  padding: 0 1em;
  font-family:sans-serif;
 }
 
-#header-icon { float:left; padding: 0.5em 1em 0 0em }
+
+main,header,footer{
+ background-color: #EFD7BB;
+ padding: 0.5em 3em 0.5em 3em;
+}
+
+hr{ color: #A00C0A }
+h1,h2,h3{
+ text-shadow: 1px 1px #A00C0A;
+}
+
+.mono-icon{
+ stroke: #030400;
+}
+
+#header-icon { float:left; padding: 1.8em 1em 0 0em }
 
 footer{
  font-size: x-small;
@@ -48,14 +51,14 @@ footer img{
  margin:0;
 }
 
-hr{ color: #872645 }
 
 pre{
- background-color: #F4F6CF;
- color: #872645;
+ background-color: #36030C;
+ color: #EFD7BB;
  padding:1em;
  overflow-x: auto;
  font-family: monospace;
+ box-shadow: 2px 2px #A00C0A;
 }
 
 blockquote{
@@ -103,7 +106,7 @@ table {
 	text-align:left;
     }
 table  th {
-        border-bottom: 1px solid black;
+        border-bottom: 1px solid #36030C;
         padding: 0.1em 1em;
     }
 table  td {
@@ -123,7 +126,10 @@ td.num{
 
 /* desktop */
 @media screen and (min-width: 600px) {
-  nav { float: right; width:30% }
+  nav { 
+    float: right; 
+    width:30%;
+  }
   nav ul { margin-top:0; padding-left: 3em }
   #incoming li{
 	display:inline; 
@@ -132,3 +138,49 @@ td.num{
   nav, #incoming{ font-size:0.7em; }
   img{ max-width: 100%; }
 }
+
+@media (prefers-color-scheme: light) {
+a{ 
+ color: #A00C0A;
+}
+body{
+ color: #030400;
+ background-color: #AA7E4D;
+}
+main,header,footer{
+ background-color: #EFD7BB;
+}
+pre{
+ background-color: #36030C;
+ color: #EFD7BB;
+}
+table  th {
+        border-bottom: 1px solid #36030C;
+}
+}
+
+@media (prefers-color-scheme: dark) {
+a{ 
+ color: #AA7E4D;
+}
+a.icon{
+color: #030400;
+}
+body{
+ color: #EFD7BB;
+ background-color: #36030C;
+}
+main,header,footer{
+ background-color: #030400;
+}
+pre{
+ background-color: #EFD7BB;
+ color: #36030C;
+}
+table  th {
+        border-bottom: 1px solid #A00C0A;
+}
+.mono-icon{
+ stroke: #EFD7BB;
+}
+}
diff --git a/templates/pagefooter.html b/templates/pagefooter.html
index 13e68a0..ca29b5a 100644
--- a/templates/pagefooter.html
+++ b/templates/pagefooter.html
@@ -7,9 +7,15 @@ most recent update:
 </p>
 <hr/>
 <p><a href='./home.html'>home</a> <a href='./about.html'>about</a> <a href='./pages.html'>pages</a> <a href='./contact.html'>contact</a> <a href='./support.html'>support</a> <a href="./log.html">log</a></p>
-<p>
 <p>texts, images, and code are shared with the <a href='https://wiki.p2pfoundation.net/Peer_Production_License' target=_blank rel='external noreferrer noopener' title='Peer Production License'>peer production license</a></p>
-<a href='https://webring.xxiivv.com/#compudanzas' target='_blank' title='webring' class='icon'><img src='./img/icon.black.svg' width='32' height='32' alt='xxiivv webring'/></a>
+<p>
+<a href='https://webring.xxiivv.com/#compudanzas' target='_blank' title='webring' class='icon'>
+<svg class="mono-icon" fill="none" height="30" stroke-linecap="square" stroke-width="28" width="30" xmlns="http://www.w3.org/2000/svg">
+<g transform="scale(0.1)">
+<path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/>
+</g>
+</svg>
+</a>
 <img src='./img/icon_lgbt.png' width='32' height='32' alt='lgbt flag'/>
 </p>
 </footer>
diff --git a/templates/pagefooter_es.html b/templates/pagefooter_es.html
index 19f34e8..84bcf04 100644
--- a/templates/pagefooter_es.html
+++ b/templates/pagefooter_es.html
@@ -9,7 +9,13 @@ actualización más reciente::
 <p><a href='./inicio.html'>inicio</a> <a href='./acerca.html'>acerca</a> <a href='./contacto.html'>contacto</a> <a href='./apoyo.html'>apoyo</a> <a href='./log.html'>log</a></p>
 <p>textos, imágenes y código compartidos bajo la <a href='https://endefensadelsl.org/ppl_deed_es.html' target=_blank rel='external noreferrer noopener' title='licencia de producción de pares'>licencia de producción de pares</a></p>
 <p>
-<a href='https://webring.xxiivv.com/#compudanzas' target='_blank' title='webring' class='icon'><img src='./img/icon.black.svg' width='32' height='32' alt='xxiivv webring'/></a>
+<a href='https://webring.xxiivv.com/#compudanzas' target='_blank' title='webring' class='icon'>
+<svg class="mono-icon" fill="none" height="30" stroke-linecap="square" stroke-width="28" width="30" xmlns="http://www.w3.org/2000/svg">
+<g transform="scale(0.1)">
+<path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/>
+</g>
+</svg>
+</a>
 <img src='./img/icon_lgbt.png' width='32' height='32' alt='lgbt flag'/>
 </p>
 </footer>