character pages

src/static/css/all.css

@@ -1,7 +1,7 @@
 * {
     padding:0;
     margin:0;
-    font-family: verdana, trebuchet ms, arial, calibri, candara, sans-serif;
+    font-family: verdana, "trebuchet ms", arial, calibri, candara, sans-serif;
     background-color: black;
 }
 html, body {padding:0; margin:0; height:100%;}
@@ -64,7 +64,7 @@ pre,code {
     width: 100vw;
     display: grid;
     position: relative;
-    grid-template-columns: 1fr 60% 1fr;
+    grid-template-columns: 20% 60% 20%;
     grid-template-rows: 2em 9.515625em auto 12.6875em;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
@@ -73,10 +73,6 @@ pre,code {
 
 .top-row { 
     grid-area: 1 / 1 / 2 / 4; 
-    display: flex;
-    flex-direction:column;
-    justify-content:center;
-    align-items: center;
 }
 .nav-row { 
     grid-area: 2 / 1 / 3 / 4; 
@@ -86,7 +82,7 @@ pre,code {
     display: flex;
     flex-direction: row;
     display: grid;
-    grid-template-columns: minmax(0%,10%) repeat(5, minmax(7ch,96px)) minmax(0%,10%);
+    grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
     justify-items: center;
@@ -117,7 +113,7 @@ pre,code {
         grid-row-gap: 0px; 
         flex-direction: column;
     }
-    .nav-diary { grid-area: 1 / 4 / 2 / 5;
+    .nav-fashion { grid-area: 1 / 4 / 2 / 5;
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: 80% 20%;
@@ -125,7 +121,7 @@ pre,code {
         grid-row-gap: 0px; 
         flex-direction: column;
     }
-    .nav-fashion { grid-area: 1 / 5 / 2 / 6;
+    .nav-art {
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: 80% 20%;
@@ -133,7 +129,15 @@ pre,code {
         grid-row-gap: 0px; 
         flex-direction: column;
     }
-    .nav-about { grid-area: 1 / 6 / 2/ 7;
+    .nav-diary { grid-area: 1 / 5 / 2 / 6;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .nav-about { grid-area: 1 / 6 / 2 / 7;
         display: grid;
         grid-template-columns: 100%;
         grid-template-rows: 80% 20%;
@@ -206,7 +210,6 @@ pre,code {
         padding-bottom: 1em;
     }
 
-    }
     .about-box {
         grid-area: 1 / 1 / 2 / 2;
     }

src/static/css/char.css

@@ -1,9 +1,36 @@
 .content-grid { 
-    width: 1fr;
+    display: grid;
+    grid-template-columns: 16ch 50ch 1fr;
+    grid-template-rows: 5em repeat(2, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
     color: white;
-    margin: auto;
 }
 
+.title { 
+    grid-area: 1 / 1 / 2 / 3;
+    padding-left: 5ch;
+}
+.ocs-nav { grid-area: 2 / 1 / 4 / 2;}
+.profile { 
+    grid-area: 2 / 2 / 3 / 3;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(5, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 1.5em; 
+    padding-bottom: 1.5em; 
+}
+.portrait { grid-area: 1 / 3 / 3 / 4;
+    width: 100%;}
+.gallery-div { grid-area: 3 / 2 / 4 / 4; }
+
+.name { grid-area: 1 / 1 / 2 / 2; }
+.label { grid-area: 2 / 1 / 3 / 2; }
+.basics { grid-area: 3 / 1 / 4 / 2; }
+.story { grid-area: 4 / 1 / 5 / 2; }
+.desc { grid-area: 5 / 1 / 6 / 2; } 
+
 .gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, 200px);
@@ -14,5 +41,22 @@
 
 .gallery img {
     height: 200px;
+    width: 200px;
     border-radius: 5%;
 }
+
+.galitem {
+  position: relative;
+    height: 200px;
+    width: 200px;
+}
+
+.subtitle {
+  color: white;
+    width: 200px;
+  position: absolute;
+  background: rgba(0,0,0,0.7);
+  text-align: center;
+    overflow: hidden;
+    bottom: 0em;
+}