Minor tweaks, added some comments to the css

This commit is contained in:
2019-02-14 20:24:01 +01:00
parent 5731a97ee3
commit cf6dc48b23

View File

@@ -1,3 +1,4 @@
/* common */
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -17,13 +18,16 @@ header {
padding-bottom: 0; padding-bottom: 0;
} }
h1 {font-size: 1.7em;}
a:link {color: #1e527e;} a:link {color: #1e527e;}
a:hover {color: #2c7abc;} a:hover {color: #2c7abc;}
a:visited {color: #371e7e;} a:visited {color: #371e7e;}
a:visited {color: #574882;} a:visited {color: #574882;}
img {max-width: 100%;}
pre { pre {
overflow-x: auto; overflow-x: auto;
padding: 0.3em;
} }
.caption { .caption {
@@ -45,8 +49,7 @@ p.screenshot a img {
margin: auto; margin: auto;
} }
h1 {font-size: 1.7em;} /* logo */
header h1 a { header h1 a {
font-family: "DejaVu Sans", sans-serif; font-family: "DejaVu Sans", sans-serif;
text-shadow: 0 4px 4px #666; text-shadow: 0 4px 4px #666;
@@ -60,11 +63,12 @@ header h1 a {
color: black; color: black;
font-size: 1.8em; font-size: 1.8em;
} }
header h1 a:link {text-decoration: none;}
header h1 a:link {text-decoration: none;}
header h1 a span.second {color: white;} header h1 a span.second {color: white;}
header h1 a span.first {color: black;} header h1 a span.first {color: black;}
/* wrapper decorations */
#minimize, #close { #minimize, #close {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -163,12 +167,19 @@ header h1 a span.first {color: black;}
border-right: 1px solid #555555; border-right: 1px solid #555555;
} }
/* main content */
article { article {
padding: 1em; padding: 1em;
} }
/* 64 * 2 + width of the wrapper (800) == 928 + margin */ /*
* size specific styles
*/
/* large screens. size: 64 * 2 + width of the wrapper (800) == 928 + margin */
@media screen and (min-width: 940px) { @media screen and (min-width: 940px) {
/* menu as a vertical dock */
aside { aside {
position: fixed; position: fixed;
right: 0; right: 0;
@@ -241,6 +252,7 @@ article {
} }
/* small screens */
@media screen and (max-width: 939px) { @media screen and (max-width: 939px) {
#wrapper { #wrapper {
@@ -249,6 +261,7 @@ article {
border: 0; border: 0;
} }
/* menu as a horizontal, scrollable icon list */
article { article {
width: auto; width: auto;
} }
@@ -322,28 +335,11 @@ article {
} }
/* very small - usually mobile phone screens */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#wrapper {
width: 100%;
margin: 0;
border: 0;
}
#header {
height: auto;
}
header h1 a { header h1 a {
font-size: 1.5em font-size: 1.5em
} }
.image-left {
float: none;
}
article {
width: auto;
float: none;
} }
} }