bulma/docs/_sass/index/sponsors.scss
2022-12-01 19:02:29 +00:00

120 lines
2.1 KiB
SCSS

$bd-sponsor-padding: $block-spacing;
$bd-sponsor-width: 12rem;
.bd-sponsors {
--bd-sponsors-spacing: #{$block-spacing};
padding: var(--bd-sponsors-spacing);
}
.bd-sponsors-body {
// display: grid;
// grid-gap: var(--bd-index-gap);
}
@include mobile {
.bd-sponsors {
grid-gap: var(--bd-sponsors-spacing);
}
}
.bd-partner-sponsors {
--sponsor-width: #{$bd-sponsor-width - 1rem};
display: grid;
grid-gap: 0;
grid-template-columns: repeat(auto-fill, minmax(var(--sponsor-width), 1fr));
margin-left: -$block-spacing;
margin-right: -$block-spacing;
overflow: hidden;
}
.bd-partner-sponsor {
@extend %center;
@extend %link-before-background;
padding: $bd-sponsor-padding ($bd-sponsor-padding / 2);
strong,
img {
position: relative;
}
img {
border-radius: 0.5em;
height: auto;
max-height: 3rem;
max-width: 8rem;
width: auto;
}
}
@include touch {
.bd-sponsors {
padding: var(--bd-index-vertical);
}
}
@include desktop {
.bd-sponsors {
// padding-bottom: var(--bd-index-vertical);
// padding-top: var(--bd-index-vertical);
}
.bd-sponsors-body {
align-items: center;
grid-gap: 0;
grid-template-columns:
var(--bd-index-gap) 1fr calc(
calc(var(--container-width) - var(--bd-index-gap)) / 2
)
var(--bd-index-gap) calc(
calc(var(--container-width) - var(--bd-index-gap)) / 2
)
1fr var(--bd-index-gap);
}
.bd-sponsors-content {
align-items: flex-start;
display: flex;
font-size: 1.125rem;
grid-column: 3 / span 1;
max-width: none;
.content {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.button {
flex-shrink: 0;
}
}
.bd-sponsors-list {
grid-column: 4 / span 4;
}
}
@include widescreen {
.bd-sponsors {
--bd-sponsors-spacing: 6rem;
}
.bd-sponsors-content {
font-size: 1.25rem;
}
.bd-partner-sponsors {
--sponsor-width: #{$bd-sponsor-width};
}
}
@include fullhd {
// .bd-sponsors {
// --bd-sponsors-spacing: 9rem;
// }
.bd-sponsors-content {
font-size: 1.5rem;
}
}