implemented dark/light css theme based on prefers-color-scheme
This commit is contained in:
parent
ebf9f808d4
commit
f663b7057c
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue