agaric/patternlibrary
10
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Pop heroes up with negative margin to avoid top gap

Browse source
This commit is contained in:
dave onion 2025-12-17 15:52:37 -05:00
parent 952aeedba6
commit 872c74de66
1 changed files with 45 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

88
agaric/sass/agaric/_component.hero.scss
View file

@ -17,6 +17,7 @@
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-top: -4rem;
&::before {
position: absolute;
display: block;
@ -25,8 +26,6 @@
left: 0;
height: 11em;
content: "";
background: -webkit-linear-gradient(top, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
background: -moz-linear-gradient(top, rgba(13,30,52,1) 25%, rgba(13,30,52,0) 100%);
background: linear-gradient(to bottom, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
}
a .icon {
@ -137,55 +136,58 @@
// Project
.hero-project .container {
.hero-body {
.title {
color: currentColor;
font-size: $size-3;
line-height: 1em;
}
.subtitle {
color: currentColor;
font-family: $family-monospace;
font-size: $size-5;
line-height: 1.4em;
}
.title + .subtitle {
margin-top: 1em;
}
}
@include tablet {
display: flex;
flex-direction: row;
.hero-image {
width: 50%;
img {
display: block;
}
}
.hero-project {
margin-top: -6rem;
.container {
.hero-body {
padding: 2rem 2rem 2rem 1rem;
z-index: +1;
width: 50%;
.title {
margin-top: 0.25em;
margin-left: -1.25em;
max-width: 12em;
color: currentColor;
font-size: $size-3;
line-height: 1em;
}
.subtitle {
color: currentColor;
font-family: $family-monospace;
font-size: $size-5;
line-height: 1.4em;
}
.title + .subtitle {
margin-top: 1em;
}
}
}
@include desktop {
.hero-body {
padding: 3rem 3rem 3rem 1.5rem;
.title {
margin-top: 0.25em;
font-size: $size-2;
@include tablet {
display: flex;
flex-direction: row;
.hero-image {
width: 50%;
img {
display: block;
}
}
.subtitle {
font-size: $size-4;
.hero-body {
padding: 2rem 2rem 2rem 1rem;
z-index: +1;
width: 50%;
.title {
margin-top: 0.25em;
margin-left: -1.25em;
max-width: 12em;
}
.subtitle {
font-size: $size-5;
}
}
}
@include desktop {
.hero-body {
padding: 3rem 3rem 3rem 1.5rem;
.title {
margin-top: 0.25em;
font-size: $size-2;
}
.subtitle {
font-size: $size-4;
}
}
}
}