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