95 lines
No EOL
1.5 KiB
CSS
95 lines
No EOL
1.5 KiB
CSS
body {
|
|
background: url('/images/pic1.webp');
|
|
background-position: center;
|
|
background-size: cover;
|
|
padding: 0;
|
|
}
|
|
|
|
.title {
|
|
height: 200px;
|
|
width: 600px;
|
|
margin: calc((100vh - 200px) / 2) auto;
|
|
text-align: center;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 1rem black;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
column-gap: 1em;
|
|
}
|
|
|
|
.title h1, .title h2 {
|
|
font-size: 3rem;
|
|
margin: 0;
|
|
align-self: end;
|
|
}
|
|
.title h1 {
|
|
text-align: left;
|
|
}
|
|
.title h2 {
|
|
text-align: right;
|
|
}
|
|
|
|
.title nav {
|
|
font-variant: small-caps;
|
|
font-size: 1.5rem;
|
|
grid-column: 1 / 3;
|
|
padding: .5em;
|
|
align-self: center;
|
|
line-height: 2em;
|
|
}
|
|
.title nav a {
|
|
border: 0px solid #484848de;
|
|
border-width: .1em 0;
|
|
padding: 0 .5em;
|
|
margin: .5em;
|
|
transition: border-color 250ms, background-color 250ms, color 250ms;
|
|
}
|
|
.title nav a:hover {
|
|
background-color: #242424de;
|
|
border-color: #242424de;
|
|
color: #ffffffde;
|
|
}
|
|
.title nav a:active {
|
|
border-color: #121212de;
|
|
background-color: #121212de;
|
|
color: #dededede;
|
|
}
|
|
|
|
footer {
|
|
background: white;
|
|
margin: 0;
|
|
padding: 1em;
|
|
text-align: center;
|
|
}
|
|
footer>p>* {
|
|
padding: 1em;
|
|
line-height: 3em;
|
|
}
|
|
footer>p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
footer>.author {
|
|
font-family: 'IBM Plex Serif';
|
|
font-weight: 300;
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.title {
|
|
width: auto;
|
|
height: 300px;
|
|
margin: calc((100vh - 300px) / 2) 1em;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr 1fr 2fr;
|
|
}
|
|
.title h1, .title h2 {
|
|
text-align: center;
|
|
}
|
|
.title h1 {
|
|
align-self: start;
|
|
}
|
|
.title nav {
|
|
grid-column: 1;
|
|
}
|
|
} |