81 lines
1.2 KiB
CSS
81 lines
1.2 KiB
CSS
:root {
|
|
--background-color: #111;
|
|
--border-color: #222;
|
|
--text-color: #fb5;
|
|
--link-color: #f70;
|
|
--link-highlight-color: #f20;
|
|
--header-color: #ccc;
|
|
}
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
display: block;
|
|
}
|
|
@media screen and (min-width: 800px) {
|
|
body {
|
|
width: 800px;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1000px) {
|
|
body {
|
|
margin: auto;
|
|
display: grid;
|
|
width: 1000px;
|
|
grid-template-columns: 200px auto 200px;
|
|
grid-template-areas:
|
|
'head head head'
|
|
'nav main .'
|
|
'foot foot foot';
|
|
}
|
|
body > header {
|
|
grid-area: head;
|
|
}
|
|
body > nav {
|
|
grid-area: nav;
|
|
position: sticky;
|
|
top: 0;
|
|
height: min-content;
|
|
}
|
|
body > main {
|
|
grid-area: main;
|
|
}
|
|
body > footer {
|
|
grid-area: foot;
|
|
}
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--header-color);
|
|
}
|
|
body > header {
|
|
text-align: center;
|
|
}
|
|
a {
|
|
color: var(--link-color);
|
|
font-weight: bold;
|
|
}
|
|
a:hover {
|
|
color: var(--link-highlight-color);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
.icon {
|
|
background-color: #aaa;
|
|
padding: 5px;
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
pre {
|
|
background-color: var(--border-color);
|
|
color: var(--header-color);
|
|
max-width: min-content;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
}
|
|
footer {
|
|
margin: 20px 0px 200px 0px;
|
|
text-align: center;
|
|
}
|
|
|