character pages

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;
+}