vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 3 Pull requests Activity

redesign blog listing

Browse source
This commit is contained in:
Vri 🌈 2023-03-15 14:06:30 +01:00
parent f608b8d035
commit bdb7436423
Signed by: vrifox
GPG key ID: D40098E5B60B2197
4 changed files with 96 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

64
assets/scss/blog.scss
View file

@ -2,11 +2,71 @@
@import "variables";
@import "main";
// markup
// fonts
@import "fonts/playfair";
// markup
@import "markup/render-image";
// partials
@import "partials/sidebar";
@import "partials/footer";
@import "partials/helpers/icons.scss";
@import "partials/helpers/icons.scss";
#blog-header {
background: var(--vriish-gradient);
font-family: "playfair";
font-size: 2rem;
height: 40vh;
color: var(--vriish-gradient-text);
mask: var(--vriish-waves);
padding: 1rem 1rem 3rem 1rem;
display: flex;
flex-direction: column;
place-content: center;
text-align: center;
@media (max-width: 1140px) {
height: 30vh;
font-size: 1.5rem;
}
h1 {
letter-spacing: 0.3rem;
font-size: 4rem;
margin: 0;
@media (max-width: 1140px) {
font-size: 2.5rem;
}
}
p {
letter-spacing: 0.15rem;
margin: 0;
}
}
#posts-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
gap: 1rem;
justify-content: center;
.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;
}
}
}