Default layout, Responsive sidebar

FoodsharingSiegen.Server/Shared/DefaultLayout.razor.css

@@ -0,0 +1,102 @@
+.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;
+  }
+}