new page structure

app/static/css/partials/_layout.scss

@@ -6,12 +6,10 @@
     margin: auto;
 }
 
-
-
 p {
 }
 
-#intro {
+#about, #imprint {
   max-width: 800px;
   margin: auto;
   line-height: 1.33em;
@@ -27,10 +25,6 @@ p {
     margin-top: 64px;
   }
 
-  img {
-    width: 100%;
-    margin: auto;
-  }
   .row {
     display: flex;
     flex-direction: row;
@@ -40,16 +34,24 @@ p {
     }
   }
 }
+#about {
+  img {
+    width: 100%;
+    margin: auto;
+  }
+}
 
 #contact {
   .content {
-    padding-top: 5%;
+    padding-top: 64px;
     width: 640px;
+    max-width: calc(100% - 16px);
     height: 480px;
     margin: auto;
   }
   input, textarea {
     width: 600px;
+    max-width: 100%;
     border-radius: 4px;
     border: 1px solid black;
   }
@@ -57,7 +59,7 @@ p {
     background: none;
   }
   input[type="submit"]:hover {
-    background: red;
+    font-weight: bold;
     cursor: pointer;
   }
   textarea {
@@ -124,3 +126,91 @@ p {
     flex-direction: column-reverse;
   }
 }
+
+
+.page {
+  display: none;
+}
+.page.active {
+  display: inherit;
+}
+
+#title {
+  background-image: url("/media/image/birds_medium.jpg");
+  background-size: cover;
+  &.active {
+    display: flex;
+  }
+
+  .content {
+    margin: auto;
+    padding-bottom: 128px;
+    .start {
+      font-size: 36px;
+      display: block;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  .credit {
+    position: fixed;
+    left: 5px;
+    bottom: 5px;
+    color: #000;
+  }
+}
+@media screen and (max-width: 799px) {
+  #title {
+    display: block;
+    .content {
+      padding-top: 64px;
+    }
+  }
+}
+
+#contact {
+  background-image: url("/media/image/birds_medium.jpg");
+  background-size: cover;
+  input, textarea {
+    background: transparent;
+    color: #fff;
+  }
+}
+
+#menu {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 101;
+}
+
+#menu-overlay {
+  z-index: 100;
+  position: fixed;
+  display: none;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  background: #fff;
+  background-image: url("/media/image/birds_medium.jpg");
+  background-size: cover;
+  &.active {
+    display: flex;
+  }
+  ul {
+    margin: auto;
+    margin-right: 16px;
+    margin-top: 64px;
+    text-align: right;
+    list-style-type: none;
+    padding: 0;
+    li {
+      line-height: 1.5em;
+      font-size: 36px;
+      a, a:visited, a:active, a:hover {
+      }
+    }
+  }
+}