simple-blog/source/_assets/css/main.css
2022-05-22 10:05:29 +02:00

152 lines
2 KiB
CSS

/* Sectioning */
@font-face {
font-family: 'Custom';
src: url("/assets/fonts/JetBrainsMono[wght].ttf");
}
* {
font-family: 'Custom', monospace;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
border-bottom: thin solid;
}
header h1 {
max-width: 950px;
font-weight: 650;
padding: 1rem;
margin: 0 auto;
text-align: right;
}
nav {
overflow-x: auto;
white-space: nowrap;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
max-width: 950px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 1rem;
text-decoration: none;
}
header nav ul li a {
color: unset;
}
nav ul li[aria-current] a {
padding-bottom: .8rem;
border-bottom: .2rem solid;
}
main {
max-width: 950px;
margin: 0 auto;
padding: 0 1rem;
}
article section {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
article section h2 {
margin: 0;
}
article section a {
color: blue;
}
article section:first-of-type {
margin-top: 4rem;
}
article section p {
margin: 2rem 0;
}
main hr {
width: 75%;
}
main hr:last-of-type {
display: none;
}
section.paginationNavigation {
margin-top: 1rem;
display: flex;
justify-content: center;
}
section.paginationNavigation a {
color: blue;
}
footer {
margin-top: 4rem;
border-top: thin solid;
}
footer div {
max-width: 950px;
margin: 0 auto;
padding: 1rem;
display: flex;
gap: 3rem;
}
footer div section:first-child {
flex: 1;
}
footer div section:last-child {
flex: .8;
}
footer div section p {
font-size: .8rem;
margin: .2rem 0;
}
@media (max-width: 500px) {
footer div {
display: block;
}
footer div section:last-child {
margin-top: 1rem;
}
}
@media (max-width: 750px) {
article section {
display: block;
}
article section h2 {
padding-bottom: .5rem;
}
}