Damillora
/
Shian
mirror of https://github.com/Damillora/Shian.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

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,
h6 {
font-weight: 300;
color: var(--accent-color);
}
h1 {
font-size: $text-4xl;

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

@ -1,37 +1,56 @@
.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%;
min-height: 200px;
height: 70vh;
height: 100%;
}
&__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;
font-weight: 300;
min-height: 300px;
height: 70vh;
a,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white;
}
}
&__background {
width: 100%;
height: 100%;
}
&__overlay {
width: 100%;
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;
&__icon {
width: 3rem;
height: 3rem;
@include screen(md) {
width: 4rem;
height: 4rem;
}
}
}