add some styling to about page

app/static/css/partials/_ascroll.scss

@@ -9,22 +9,22 @@
     font-size: 20px;
     letter-spacing: 1px;
     font-weight: bold;
-    max-width: 1080px;
+    max-width: var(--container-width);
     margin: auto;
   }
   h2 {
     padding: 4px;
-    max-width: 1080px;
+    max-width: var(--container-width);
     margin: auto;
   }
   .intro {
     padding: 4px;
     padding-bottom: 64px;
-    max-width: 1080px;
+    max-width: var(--container-width);
     margin: auto;
   }
   .vbox {
-    max-width: 1080px;
+    max-width: var(--container-width);
     margin: auto;
   }
   .player {
@@ -32,7 +32,7 @@
     display: none;
     width: 100%;
     height: auto;
-    max-width: 1080px;
+    max-width: var(--container-width);
     margin: auto;
     //transition: opacity 0.4s;
 
@@ -40,7 +40,7 @@
   .annotation {
     min-height: 100vh;
     .frame {
-      max-width: 1080px;
+      max-width: var(--container-width);
       margin: auto;
       img {
         width: 100%;
@@ -53,7 +53,7 @@
       }
     }
     .text {
-      max-width: 1080px;
+      max-width: var(--container-width);
       margin: auto;
       padding: 20px 20px;
       font-size: 22px;

app/static/css/partials/_film.scss

@@ -35,7 +35,7 @@
 
 
 main > .film {
-  max-width: 1080px;
+  max-width: var(--container-width);
   margin: auto;
   .info {
     margin: var(--spacing) var(--spacing-2);

app/static/css/partials/_layout.scss

@@ -6,6 +6,9 @@
 
     --spacing: 8px;
     --spacing-2: calc(var(--spacing) * 2);
+
+    --container-width: 1080px;
+    --container-lg-width: 1380px;
 }
 
 @keyframes background_animation {
@@ -21,8 +24,9 @@
 }
 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;
+    //animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
+    color: #ddd;
 }
 
 body {
@@ -48,3 +52,14 @@ nav {
     display: none;
   }
 }
+
+.row {
+    display: flex;
+    margin-left: calc(var(--spacing-2) * -1);
+    margin-right: calc(var(--spacing-2) * -1);
+}
+
+.col {
+    padding-left: var(--spacing-2);
+    padding-right: var(--spacing-2);
+}

app/static/css/partials/_text.scss

@@ -38,6 +38,9 @@
   font-weight: 700;
 }
 
+strong {
+  font-weight: 700;
+}
 
 main > .texts {
   box-sizing: border-box;
@@ -75,7 +78,6 @@ main > .index {
 
 main > .about {
   line-height: 1.2;
-  margin: 16px;
   p {
     padding-bottom: 24px;
   }

app/static/css/partials/_titleanimation.scss

@@ -13,6 +13,7 @@
   .text {
     //background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
     background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
+    -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     animation: animated_title_animation 60s ease-in-out infinite;

app/static/css/style.scss

@@ -5,3 +5,4 @@
 @import "partials/film";
 @import "partials/text";
 @import "partials/ascroll";
+@import "partials/about";