zola-water/sass/style.scss

87 lines
1.5 KiB
SCSS

@import 'widgets';
// Override water.css
body {
max-width: none;
margin: 0 auto;
padding: 0;
}
@media (max-width: 48em) {
// water.css applies padding to the whole page, i think
// it's fine but only on mobile view, and should apply to
// individual blocks rather than whole page
main {
padding: 0 10px;
}
// Reduce main title sizes on mobile view
h1 { font-size: 1.8rem; line-height: 1.2; }
}
header {
text-align: center;
font-weight: bold;
}
article > div:first-child > h1, section > h1:first-child {
text-align: center;
font-size: 2.6em;
@media screen and (max-width: 48em) {
font-size: 1.3em;
}
}
article > div:first-child {
text-align: center;
}
.read-more {
text-align: center;
display: block;
font-weight: bold;
}
.pagination {
margin-top: 1rem;
text-align: center;
> a {
font-weight: bolder;
font-variant: small-caps;
padding: 0 2rem;
}
}
main {
margin: 1rem auto;
}
.source {
text-align: center;
font-weight: bold;
}
pre {
overflow-x: auto;
}
footer {
padding: 0.5rem 0;
// WTF water.css doesn't have good contrast here?
color: var(--text-bright);
font-size: 1.2rem;
text-align: center;
.altnames {
word-wrap: anywhere;
> p > img {
width: 1rem;
height: 1rem;
}
}
}
// center images in articles
.h-entry img {
margin: auto;
display: block;
}