mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
51 lines
1008 B
CSS
51 lines
1008 B
CSS
/* #region Custom Styles */
|
|
@container preview (min-width: 0) {
|
|
.hero-background {
|
|
height: 47rem;
|
|
background-color: var(--wa-color-brand-fill-loud);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero-background::after {
|
|
background: url(/assets/images/themer/default/hero.png) 10rem bottom no-repeat;
|
|
background-size: 95%;
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.hero wa-button[variant='brand'] {
|
|
--background: var(--wa-color-neutral-fill-quiet);
|
|
--label-color: var(--wa-color-neutral-on-normal);
|
|
}
|
|
|
|
.project-header {
|
|
color: var(--wa-color-brand-on-loud);
|
|
}
|
|
|
|
.strata.hero {
|
|
height: 26rem;
|
|
}
|
|
|
|
.hero .title {
|
|
margin-inline-end: 40%;
|
|
color: var(--wa-color-brand-on-loud);
|
|
}
|
|
}
|
|
|
|
/* responsive */
|
|
@container preview (min-width: 1040px) {
|
|
.hero-background::after {
|
|
background-position: right bottom;
|
|
background-size: 90%;
|
|
}
|
|
}
|
|
/* #endregion */
|