add back templates for index/about, move background animation into class, use clip color for assembly background

app/static/css/partials/_ascroll.scss

@@ -1,22 +1,31 @@
 #ascroll {
-  font-family: "Noton Sans";
+  font-family: "noto_sans";
   width: 100%;
-  max-width: 1080px;
-  margin: auto;
+  color: #333;
 
   h1 {
-    margin: 4px;
-    margin-top: 32px;
-    font-size: 24px;
+    padding: 4px;
+    padding-top: 32px;
+    font-size: 20px;
     letter-spacing: 1px;
     font-weight: bold;
+    max-width: 1080px;
+    margin: auto;
   }
   h2 {
-    margin: 4px;
+    padding: 4px;
+    max-width: 1080px;
+    margin: auto;
   }
   .intro {
-    margin: 4px;
-    margin-bottom: 64px;
+    padding: 4px;
+    padding-bottom: 64px;
+    max-width: 1080px;
+    margin: auto;
+  }
+  .vbox {
+    max-width: 1080px;
+    margin: auto;
   }
   .player {
     position: absolute;
@@ -31,6 +40,8 @@
   .annotation {
     min-height: 100vh;
     .frame {
+      max-width: 1080px;
+      margin: auto;
       img {
         width: 100%;
         height: auto;
@@ -42,7 +53,9 @@
       }
     }
     .text {
-      margin: 20px 20px;
+      max-width: 1080px;
+      margin: auto;
+      padding: 20px 20px;
       font-size: 22px;
       line-height: 26px;
     }

app/static/css/partials/_layout.scss

@@ -19,10 +19,13 @@
         color: #000;
     }
 }
-body {
+body.animated {
     background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
     animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
+}
+
+body {
     color: #ddd;
     font-family: "noto_sans", sans-serif;
     font-size: 20px;

app/static/css/partials/_text.scss

@@ -63,3 +63,21 @@ main > .texts {
     }
   }
 }
+
+
+main > .index {
+  text-align: center;
+  padding-top: 48px;
+  font-size: 26px;
+  line-height: 1.3;
+
+}
+
+main > .about {
+  line-height: 1.2;
+  margin: 16px;
+  p {
+    padding-bottom: 24px;
+  }
+
+}