website/public/assets/css/pages/examples.css
vlw 7a8fc36ec0 feat: new website design and update to Vegvisir 3.1 (#2)
Brand new design for the website following the new design language I used for [version 2.0 of my personal website](https://codeberg.org/vlw/vlw.se/releases/tag/2.0.0).

Reviewed-on: https://codeberg.org/vegvisir/website/pulls/2
Co-authored-by: vlw <victor@vlw.se>
Co-committed-by: vlw <victor@vlw.se>
2025-03-05 11:16:54 +00:00

56 lines
No EOL
757 B
CSS

vv-shell {
gap: var(--padding);
padding: var(--padding);
}
/* # Sections */
/* ## Heading */
section.heading {
text-align: center;
}
/* ## Grid */
section.grid {
gap: var(--padding);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
section.grid button {
width: 100%;
flex-direction: column;
justify-content: space-between;
}
section.grid button img {
width: 100%;
border-radius: 6px;
}
section.grid button > div {
display: flex;
text-align: right;
gap: var(--padding);
align-items: center;
}
section.grid button p {
color: black;
}
/* # Size queries */
@media (max-width: 1000px) {
section.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 550px) {
section.grid {
grid-template-columns: 1fr;
}
}