website/assets/scss/blog.scss

97 lines
1.8 KiB
SCSS
Raw Normal View History

// general
@import "variables";
2023-01-15 00:24:10 +01:00
@import "main";
2023-03-15 14:06:30 +01:00
// fonts
@import "fonts/playfair";
2023-01-15 01:59:37 +01:00
2023-03-15 14:06:30 +01:00
// markup
2023-01-15 01:59:37 +01:00
@import "markup/render-image";
// partials
@import "partials/sidebar";
@import "partials/footer";
2023-03-15 14:06:30 +01:00
@import "partials/helpers/icons.scss";
#blog-header {
background: var(--vriish-gradient);
font-family: "playfair";
2023-03-15 14:29:23 +01:00
font-size: 1.5rem;
2023-03-15 14:06:30 +01:00
height: 40vh;
color: var(--vriish-gradient-text);
mask: var(--vriish-waves);
2023-03-15 19:59:47 +01:00
-webkit-mask: var(--vriish-waves);
2023-03-15 14:29:23 +01:00
padding: 1rem 6rem 3rem 6rem;
2023-03-15 14:06:30 +01:00
display: flex;
flex-direction: column;
place-content: center;
text-align: center;
@media (max-width: 1140px) {
height: 30vh;
2023-03-15 14:29:23 +01:00
font-size: 1rem;
2023-03-15 14:06:30 +01:00
}
h1 {
letter-spacing: 0.3rem;
2023-03-15 14:29:23 +01:00
font-size: 3.5rem;
margin: 0 auto;
max-width: 1000px;
2023-03-15 15:08:49 +01:00
2023-03-15 14:06:30 +01:00
@media (max-width: 1140px) {
font-size: 2.5rem;
}
}
p {
letter-spacing: 0.15rem;
2023-03-15 14:29:23 +01:00
margin: 0 auto;
max-width: 1000px;
2023-03-15 15:08:49 +01:00
}
span:not(:first-of-type)::before {
content: "·";
margin: 0 1rem 0 0.6rem;
2023-03-15 14:06:30 +01:00
}
}
2023-03-15 14:29:23 +01:00
main {
max-width: 800px;
h1, h2, h3, h4, h5, h6 {
margin-top: 2.5rem !important;
}
p {
2023-03-15 14:31:25 +01:00
margin: 0 0 2rem 0;
2023-03-15 14:29:23 +01:00
}
}
// single page
// list
2023-03-15 14:06:30 +01:00
#posts-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
gap: 1rem;
justify-content: center;
2023-03-15 14:07:54 +01:00
margin-top: 2rem;
2023-03-15 14:06:30 +01:00
.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;
}
}
}