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;

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

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