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 */
|
/* links externos */
|
||||||
a[rel^=external]:after{ content: "⭷"; }
|
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{
|
a{
|
||||||
color: #C04E43;
|
color: #A00C0A;
|
||||||
}
|
}
|
||||||
a:visited{
|
a:visited{
|
||||||
color: #872645;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
a.icon{
|
a.icon{
|
||||||
/* background-color: #fff; */
|
color: #EFD7BB;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.arrow:before{ content: "⇒ "; }
|
a.arrow:before{ content: "⇒ "; }
|
||||||
|
|
||||||
body{
|
body{
|
||||||
color: #563850;
|
color: #030400;
|
||||||
max-width:36em;
|
background-color: #AA7E4D;
|
||||||
|
max-width:800px;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
font-size:18px;
|
font-size:18px;
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
font-family:sans-serif;
|
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{
|
footer{
|
||||||
font-size: x-small;
|
font-size: x-small;
|
||||||
|
@ -48,14 +51,14 @@ footer img{
|
||||||
margin:0;
|
margin:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr{ color: #872645 }
|
|
||||||
|
|
||||||
pre{
|
pre{
|
||||||
background-color: #F4F6CF;
|
background-color: #36030C;
|
||||||
color: #872645;
|
color: #EFD7BB;
|
||||||
padding:1em;
|
padding:1em;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
box-shadow: 2px 2px #A00C0A;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote{
|
blockquote{
|
||||||
|
@ -103,7 +106,7 @@ table {
|
||||||
text-align:left;
|
text-align:left;
|
||||||
}
|
}
|
||||||
table th {
|
table th {
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid #36030C;
|
||||||
padding: 0.1em 1em;
|
padding: 0.1em 1em;
|
||||||
}
|
}
|
||||||
table td {
|
table td {
|
||||||
|
@ -123,7 +126,10 @@ td.num{
|
||||||
|
|
||||||
/* desktop */
|
/* desktop */
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 600px) {
|
||||||
nav { float: right; width:30% }
|
nav {
|
||||||
|
float: right;
|
||||||
|
width:30%;
|
||||||
|
}
|
||||||
nav ul { margin-top:0; padding-left: 3em }
|
nav ul { margin-top:0; padding-left: 3em }
|
||||||
#incoming li{
|
#incoming li{
|
||||||
display:inline;
|
display:inline;
|
||||||
|
@ -132,3 +138,49 @@ td.num{
|
||||||
nav, #incoming{ font-size:0.7em; }
|
nav, #incoming{ font-size:0.7em; }
|
||||||
img{ max-width: 100%; }
|
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>
|
</p>
|
||||||
<hr/>
|
<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><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>
|
<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'/>
|
<img src='./img/icon_lgbt.png' width='32' height='32' alt='lgbt flag'/>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</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><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>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>
|
<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'/>
|
<img src='./img/icon_lgbt.png' width='32' height='32' alt='lgbt flag'/>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
Loading…
Reference in New Issue