101 lines
1.4 KiB
CSS
101 lines
1.4 KiB
CSS
body{
|
|
background-color: white;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.logo {
|
|
font-family: monospace;
|
|
font-size: 40px;
|
|
}
|
|
|
|
header, nav {
|
|
background-color: #444444;
|
|
color: #f0f0f0;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
padding: 20px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
header, nav {
|
|
padding: 15px;
|
|
}
|
|
.logo {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
header a {
|
|
color: #f0f0f0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*
|
|
nav {
|
|
display: grid;
|
|
grid-template-colums: auto 1em 1em 1em auto;
|
|
grid-template-areas: ". item1 item2 item3 .";
|
|
}
|
|
|
|
nav a:nth-child(1) {
|
|
grid-area: item1;
|
|
}
|
|
|
|
nav a:nth-child(2) {
|
|
grid-area: item2;
|
|
}
|
|
|
|
nav a:nth-child(3) {
|
|
grid-area: item3;
|
|
}
|
|
nav a {
|
|
color: #f0f0f0;
|
|
padding: 10px;
|
|
font-family: monospace;
|
|
font-size: 20px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav a:hover {
|
|
background-color: #f0f0f0;
|
|
color: black;
|
|
}
|
|
*/
|
|
|
|
div.container {
|
|
margin: auto;
|
|
width: 80%;
|
|
min-height: calc(100vh - 128px);
|
|
|
|
}
|
|
@media (max-width: 640px) {
|
|
div.container {
|
|
width: 95%;
|
|
min-height: calc(100vh - 97px);
|
|
}
|
|
}
|
|
|
|
strong {
|
|
font-family: monospace;
|
|
font-size: 10px;
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background-color: #444444;
|
|
color: #f0f0f0;
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
padding: 1em 0 1em 0;
|
|
}
|
|
|
|
footer span a {
|
|
color: #f0f0f0;
|
|
}
|