website/assets/scss/blog.scss

98 lines
No EOL
1.9 KiB
SCSS

// general
@import "variables";
@import "main";
// fonts
@import "fonts/playfair";
// markup
@import "markup/render-image";
// partials
@import "partials/sidebar";
@import "partials/footer";
@import "partials/moreposts";
@import "partials/helpers/icons.scss";
#blog-header {
background: var(--vriish-gradient);
font-family: "playfair";
font-size: 1.5rem;
height: 40vh;
color: var(--vriish-gradient-text);
mask: var(--vriish-waves);
-webkit-mask: var(--vriish-waves);
padding: 1rem 6rem 3rem 6rem;
display: flex;
flex-direction: column;
place-content: center;
text-align: center;
@media (max-width: 1140px) {
height: 30vh;
font-size: 1rem;
}
h1 {
letter-spacing: 0.3rem;
font-size: 3.5rem;
margin: 0 auto;
max-width: 1000px;
@media (max-width: 1140px) {
font-size: 2.5rem;
}
}
p {
letter-spacing: 0.15rem;
margin: 0 auto;
max-width: 1000px;
}
span:not(:first-of-type)::before {
content: "·";
margin: 0 1rem 0 0.6rem;
}
}
main {
max-width: 800px;
h1, h2, h3, h4, h5, h6 {
margin-top: 2.5rem !important;
}
p {
margin: 0 0 2rem 0;
}
}
// single page
// list
#posts-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
gap: 1rem;
justify-content: center;
margin-top: 2rem;
.post-wrapper {
hyphens: auto;
padding: 1rem;
color: var(--vriish-gradient-text);
background: var(--vriish-gradient);
border-radius: .5em;
display: flex;
flex-direction: column;
scroll-snap-align: start;
text-decoration: none;
min-height: 10rem;
justify-content: space-between;
p {
margin: 0;
}
}
}