103 lines
1.5 KiB
CSS
103 lines
1.5 KiB
CSS
.page {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
.page aside {
|
|
background-color: #f1e7c9;
|
|
width: 0;
|
|
box-shadow: 5px 5px 5px #acacac;
|
|
transition: width 250ms;
|
|
overflow: hidden auto;
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
.page aside {
|
|
width: 250px;
|
|
min-width: 250px;
|
|
}
|
|
}
|
|
|
|
.page main {
|
|
flex: 1;
|
|
width: 100%;
|
|
overflow: hidden auto;
|
|
padding: 60px 10px 10px 10px;
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
.page main {
|
|
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: 992px) {
|
|
#menu-toggler-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#menu-toggler-label span {
|
|
height: 6px;
|
|
background-color: #64ae24;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
left: 0;
|
|
right: 0;
|
|
transition: all 0.25s ease-out;
|
|
}
|
|
|
|
#menu-toggler-label span:nth-child(2) {
|
|
top: 12px;
|
|
}
|
|
|
|
#menu-toggler-label span:nth-child(3) {
|
|
top: 24px;
|
|
}
|
|
|
|
input:checked ~ aside {
|
|
width: 250px;
|
|
}
|
|
|
|
input:checked ~ #menu-toggler-label span:nth-child(1) {
|
|
transform: translateY(12px) rotate(45deg);
|
|
}
|
|
|
|
input:checked ~ #menu-toggler-label span:nth-child(2) {
|
|
display: none;
|
|
}
|
|
|
|
input:checked ~ #menu-toggler-label span:nth-child(3) {
|
|
transform: translateY(-12px) rotate(-45deg);
|
|
}
|
|
|
|
::deep h2 {
|
|
font-size: 7.8vw;
|
|
}
|
|
|
|
@media screen and (min-width: 576px) {
|
|
::deep h2 {
|
|
font-size: 4.8vw;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 576px) {
|
|
::deep h2 {
|
|
font-size: 3.6vw;
|
|
}
|
|
}
|