Damillora/Shian
1
0
Fork 0
mirror of https://github.com/Damillora/Shian.git synced 2024-11-22 09:27:32 +00:00
Code Issues Projects Releases Wiki Activity

feat(shian): dynamic page header size depending on content

Browse Source
This commit is contained in:
Damillora 2021-04-22 16:40:07 +07:00
parent 912be0730e
commit c4540bfe26
2 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/sass/common/_base.scss
View File

@ -75,6 +75,7 @@ body {
h5, h5,
h6 { h6 {
font-weight: 300; font-weight: 300;
color: var(--accent-color);
} }
h1 { h1 {
font-size: $text-4xl; font-size: $text-4xl;

49
src/sass/components/_pageheader.scss
View File

@ -1,37 +1,56 @@
.page-header { .page-header {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 200px; min-height: 50vh;
height: 70vh;
color: $white;
font-weight: 300; font-weight: 300;
min-height: 300px; overflow: hidden;
height: 70vh; @include screen(md) {
min-height: 70vh;
}
display: flex;
align-items: flex-end;
&__background { &__background {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -10;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&__overlay { &__overlay {
z-index: -10;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.5); background-color: rgba(0, 0, 0, 0.5);
} }
&__contents { &__contents {
position: absolute; z-index: 1;
bottom: 0; padding-top: 3rem;
left: 0; @include screen(md) {
right: 0; padding-top: 4rem;
@include py(0.5rem); }
a { color: $white;
a,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white; color: $white;
} }
} }
&__icon { &__icon {
width: 6rem; width: 3rem;
height: 6rem; height: 3rem;
@include screen(md) {
width: 4rem;
height: 4rem;
}
} }
} }