116 lines
2.4 KiB
SCSS
116 lines
2.4 KiB
SCSS
@import '../Style/_variables';
|
|
|
|
$sidebarBreakpoint: $breakpointM;
|
|
|
|
.page {
|
|
display: flex;
|
|
height: 100vh;
|
|
|
|
aside {
|
|
background-color: #f1e7c9;
|
|
width: 0;
|
|
box-shadow: 5px 5px 5px #acacac;
|
|
transition: width 250ms;
|
|
overflow: hidden auto;
|
|
|
|
@media screen and (min-width: #{$sidebarBreakpoint}px) {
|
|
width: 250px;
|
|
min-width: 250px;
|
|
}
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow: hidden auto;
|
|
padding: 60px 10px 10px 10px;
|
|
|
|
@media screen and (min-width: #{$sidebarBreakpoint}px) {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#menu-toggler {
|
|
display: none;
|
|
}
|
|
|
|
#menu-toggler-label {
|
|
|
|
position: fixed;
|
|
top: 15px;
|
|
left: 15px;
|
|
cursor: pointer;
|
|
height: 30px;
|
|
width: calc(100% - 40px);
|
|
z-index: 1;
|
|
|
|
@media screen and (min-width: #{$sidebarBreakpoint}px) {
|
|
display: none;
|
|
}
|
|
|
|
span {
|
|
height: 6px;
|
|
background-color: #64ae24;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
left: 0;
|
|
right: 0;
|
|
width: 30px;
|
|
transition: all 0.25s ease-out;
|
|
|
|
&:nth-child(2) {
|
|
top: 12px;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
top: 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
input:checked ~ aside {
|
|
width: 250px;
|
|
}
|
|
|
|
input:checked ~ #menu-toggler-label span {
|
|
&:nth-child(1) {
|
|
transform: translateY(12px) rotate(45deg);
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
display: none;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
transform: translateY(-12px) rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
|
|
@mixin mediaFont($breakpoint, $fontsize) {
|
|
@media screen and (min-width: #{$breakpoint}px) { font-size: #{$fontsize}; line-height: #{$fontsize}; }
|
|
}
|
|
|
|
::deep {
|
|
h2 {
|
|
font-size: 1.8rem;
|
|
@include mediaFont($breakpointXS, 3.2rem);
|
|
@include mediaFont($breakpointS, 3.8rem);
|
|
@include mediaFont($breakpointM, 3.8rem);
|
|
@include mediaFont($breakpointL, 3.8rem);
|
|
@include mediaFont($breakpointXL, 3.8rem);
|
|
@include mediaFont($breakpointXXL, 3.2rem);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4rem;
|
|
font-weight: 300;
|
|
@include mediaFont($breakpointXS, 2.4rem);
|
|
@include mediaFont($breakpointS, 2.8rem);
|
|
@include mediaFont($breakpointM, 2.8rem);
|
|
@include mediaFont($breakpointL, 2.8rem);
|
|
@include mediaFont($breakpointXL, 2.8rem);
|
|
@include mediaFont($breakpointXXL, 2.4rem);
|
|
}
|
|
} |