171 lines
2.4 KiB
CSS
171 lines
2.4 KiB
CSS
/* colors by
|
|
* https://www.colourlovers.com/palette/3025559/Desert_Beauty
|
|
* */
|
|
/* links externos */
|
|
a[rel^=external]:after{ content: "⭷"; }
|
|
a{
|
|
color: #A00C0A;
|
|
}
|
|
a:visited{
|
|
font-style: italic;
|
|
}
|
|
a.icon{
|
|
color: #EFD7BB;
|
|
}
|
|
|
|
a.arrow:before{ content: "⇒ "; }
|
|
|
|
body{
|
|
color: #030400;
|
|
background-color: #AA7E4D;
|
|
max-width:800px;
|
|
margin:0 auto;
|
|
font-size:18px;
|
|
padding: 0 1em;
|
|
font-family:sans-serif;
|
|
}
|
|
|
|
|
|
main,header,footer{
|
|
background-color: #EFD7BB;
|
|
padding: 0.5em 1em 0.5em 1em;
|
|
}
|
|
nav{
|
|
background-color: #EFD7BB;
|
|
}
|
|
|
|
hr{ color: #A00C0A }
|
|
h1,h2,h3{
|
|
text-shadow: 1px 1px #A00C0A;
|
|
}
|
|
|
|
.mono-icon{
|
|
stroke: #030400;
|
|
color: #030400;
|
|
}
|
|
|
|
#header-icon { float:left; padding: 1.8em 1em 0 0em }
|
|
|
|
footer{
|
|
font-size: small;
|
|
padding-top:2em;
|
|
}
|
|
|
|
footer img{
|
|
margin:0;
|
|
}
|
|
|
|
|
|
pre{
|
|
background-color: #36030C;
|
|
color: #EFD7BB;
|
|
padding:1em;
|
|
overflow-x: auto;
|
|
font-family: monospace;
|
|
box-shadow: 2px 2px #A00C0A;
|
|
}
|
|
|
|
blockquote{
|
|
font-style: italic;
|
|
}
|
|
|
|
main h1{
|
|
margin-top: 2em;
|
|
font-size: xx-large;
|
|
}
|
|
main h2{
|
|
font-size: x-large;
|
|
margin-left:0.3em;
|
|
}
|
|
main h3{
|
|
font-size: larger;
|
|
margin-left:0.6em;
|
|
}
|
|
|
|
gallery{
|
|
display:flex;
|
|
flex-direction:row;
|
|
flex-wrap:wrap;
|
|
justify-content:space-evenly;
|
|
align-content:center;
|
|
}
|
|
img{
|
|
margin:10px;
|
|
border-radius:5px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
nav { float: none }
|
|
|
|
nav li, #incoming li{ padding:0.2em; }
|
|
main li, #incoming li{ padding:0.5em; }
|
|
#incoming h1 { font-size: x-large }
|
|
|
|
table {
|
|
font-size: smaller;
|
|
max-width: 90%;
|
|
border-collapse: collapse;
|
|
margin: 1em auto;
|
|
text-align:left;
|
|
}
|
|
table th {
|
|
border-bottom: 1px solid #36030C;
|
|
padding: 0.1em 1em;
|
|
}
|
|
table td {
|
|
padding: 0.1em 1em;
|
|
}
|
|
td.num{
|
|
text-align:right;
|
|
}
|
|
#translation{
|
|
font-size: smaller;
|
|
font-style: italic;
|
|
margin-left: 2em;
|
|
}
|
|
|
|
|
|
/* desktop */
|
|
@media screen and (min-width: 600px) {
|
|
nav {
|
|
float: right;
|
|
width:30%;
|
|
}
|
|
nav ul { margin-top:0; padding-left: 3em }
|
|
#incoming li{
|
|
display:inline;
|
|
padding: 0.5em 1em 0.5em 0;
|
|
}
|
|
img{ max-width: 100%; }
|
|
main,header,footer{
|
|
padding: 0.5em 3em 0.5em 3em;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
a{
|
|
color: #AA7E4D;
|
|
}
|
|
a.icon{
|
|
color: #030400;
|
|
}
|
|
body{
|
|
color: #EFD7BB;
|
|
background-color: #36030C;
|
|
}
|
|
main,header,footer,nav{
|
|
background-color: #030400;
|
|
}
|
|
pre{
|
|
background-color: #EFD7BB;
|
|
color: #36030C;
|
|
}
|
|
table th {
|
|
border-bottom: 1px solid #A00C0A;
|
|
}
|
|
.mono-icon{
|
|
stroke: #EFD7BB;
|
|
color: #EFD7BB;
|
|
}
|
|
}
|