section buttons layou

This commit is contained in:
Yuri Zamyatin 2024-12-08 20:14:08 +00:00
parent 6654b9665c
commit 8681ac60cc

View File

@ -91,30 +91,27 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
.section-item { .section-item {
flex: 1;
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
box-shadow: 0 0 0.25rem rgba(0,0,0,0.5); box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
border-radius: 1rem;
border: 1px solid $color-fg-op-m;
&:hover { &:hover {
border: 1px solid $color-fg-accent; border: 1px solid $color-fg-accent;
} }
display: block; display: flex;
flex: 1 0 30%; justify-content: center;
border: 1px solid $color-fg-op-m; align-items: center;
border-radius: 1rem;
text-align: center;
padding: 1rem;
.icon { .icon {
height: 2.5rem; height: 2.5rem;
width: 2.5rem; width: 2.5rem;
vertical-align: middle;
color: $color-fg-op-m; color: $color-fg-op-m;
} }
.label { .label {
font-size: 1.3rem; font-size: 1.3rem;
font-weight: bold; font-weight: bold;
color: $color-fg-dark; color: $color-fg-dark;
vertical-align: middle;
margin: 0 0 0 0.75rem;
} }
} }
} }
@ -133,6 +130,18 @@
flex-basis: 100%; flex-basis: 100%;
} }
} }
.home-layout-container .content.home .section-list {
.section-item {
flex-wrap: wrap;
padding: 0.75rem;
.icon {
flex-basis: 100%;
}
.label {
margin: 0.25rem 0 0 0;
}
}
}
} }
@mixin media--home-content-about_vert_middle { @mixin media--home-content-about_vert_middle {
.home-layout-container { .home-layout-container {
@ -143,8 +152,12 @@
} }
} }
.home-layout-container .content.home .section-list { .home-layout-container .content.home .section-list {
.section-item .label { .section-item {
font-size: 1.6rem; padding: 1rem;
.label {
margin: 0 0 0 0.75rem;
font-size: 1.6rem;
}
} }
} }
} }