mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
132 lines
2.3 KiB
SCSS
132 lines
2.3 KiB
SCSS
@use "sass/utilities/mixins" as mx;
|
|
|
|
.bd-home-section {
|
|
--spacing: 3rem;
|
|
--bd-section-vertical: var(--bulma-block-spacing);
|
|
--bd-section-horizontal: var(--bulma-block-spacing);
|
|
|
|
background-color: var(--bulma-body-background-color);
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
hsla(var(--theme-h), var(--theme-s), var(--theme-l), 0.1),
|
|
transparent calc(var(--spacing) * 3)
|
|
);
|
|
background-repeat: repeat-x;
|
|
padding: calc(3 * var(--spacing)) var(--spacing) calc(3 * var(--spacing));
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing);
|
|
align-items: stretch;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
|
|
.bd-tw {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 28em;
|
|
}
|
|
|
|
&.is-support {
|
|
background: var(--bulma-background);
|
|
padding: 4.5rem 3rem;
|
|
gap: 1.5rem;
|
|
|
|
.title,
|
|
strong {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
&.theme-dark {
|
|
background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 9%);
|
|
min-height: 70vh;
|
|
justify-content: center;
|
|
|
|
.container {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.bd-nav-item {
|
|
padding: 0.5em 0.75em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bd-heading {
|
|
--side-width: 13.5em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
font-size: 1.25em;
|
|
text-align: center;
|
|
column-gap: var(--spacing);
|
|
row-gap: calc(0.5 * var(--spacing));
|
|
grid-template-columns: 14rem 1fr 14rem;
|
|
|
|
.bd-heading-icon,
|
|
.bd-heading-button {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--side-width);
|
|
}
|
|
|
|
.bd-heading-icon .icon {
|
|
color: var(--theme-color);
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.title {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--theme-color);
|
|
font-size: 1.25em;
|
|
|
|
strong {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
font-size: 0.875em;
|
|
}
|
|
}
|
|
|
|
.bd-home-themes {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.bd-home-theme-preview {
|
|
display: flex;
|
|
gap: 3rem;
|
|
justify-content: center;
|
|
overflow: auto;
|
|
|
|
> * {
|
|
flex-basis: auto;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
@include mx.desktop {
|
|
.bd-heading {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
@include mx.widescreen {
|
|
.bd-heading {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|