1
Fork 0
holllo-org/source/scss/home/sections.scss

91 lines
1.5 KiB
SCSS

@use "../mixins";
.sections {
@include mixins.responsive-container;
display: grid;
gap: var(--spacing-16);
grid-template-columns: repeat(1, 1fr);
margin-bottom: var(--spacing-16);
@media (min-width: mixins.$medium-breakpoint) {
grid-template-columns: repeat(2, 1fr);
.span-grid {
grid-column: 1 / 3;
}
}
.icons {
align-items: center;
display: flex;
gap: var(--spacing-04);
margin-left: auto;
a {
height: 3rem;
padding: 2px;
text-decoration: none;
&:hover {
background-color: var(--background-1);
outline: 2px dotted var(--foreground-2);
}
}
img {
height: 100%;
}
}
}
h2 {
@include mixins.patterned-shadow(var(--spacing-08));
margin-left: auto;
margin-right: auto;
margin-top: var(--spacing-32);
min-width: 40%;
padding: var(--spacing-16);
width: fit-content;
@media (max-width: mixins.$medium-breakpoint) {
width: 100%;
}
&.libraries-header {
background-color: var(--la-1);
}
&.webextensions-header {
background-color: var(--la-8);
}
}
section {
@include mixins.patterned-shadow(var(--spacing-08));
background-color: var(--background-2);
border: 1px solid var(--foreground-2);
display: flex;
flex-direction: column;
gap: var(--spacing-16);
height: min-content;
padding: var(--spacing-16);
h3 {
align-items: center;
display: inline-flex;
font-size: 3rem;
gap: var(--spacing-08);
img {
width: 3.5rem;
}
}
a {
font-weight: bold;
}
}