96 lines
1.8 KiB
SCSS
96 lines
1.8 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: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#menu-toggler {
|
|
display: none;
|
|
}
|
|
|
|
#menu-toggler-label {
|
|
|
|
position: fixed;
|
|
top: 15px;
|
|
left: 15px;
|
|
cursor: pointer;
|
|
height: 30px;
|
|
width: 30px;
|
|
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;
|
|
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);
|
|
}
|
|
}
|
|
|
|
|
|
::deep {
|
|
h2 {
|
|
font-size: 7.8vw;
|
|
@media screen and (min-width: #{$breakpointXS}px) { font-size: 4.8vw; }
|
|
@media screen and (min-width: #{$breakpointXS}px) { font-size: 3.6vw; }
|
|
}
|
|
} |