fixed nav grid resizing differenly at low res (links with longer link text shrunk more slowly); added gallery to character pages

src/static/css/all.css

@@ -0,0 +1,151 @@
+* {
+    padding:0;
+    margin:0;
+    font-family: verdana, trebuchet ms, arial, calibri, gill sans, helvetica neue, candara, geneva, sans-serif;
+    background-color: black;
+}
+html, body {padding:0; margin:0; height:100%;}
+footer{
+    position: absolute; bottom: 0; right: 0;
+    color: #df85a5;
+    background-color: transparent;
+    padding-top: 2em;
+    margin-right: 1em;
+    margin-bottom: 1em;
+    text-align: right;
+    overflow: hidden;
+}
+
+a, a:link, a:visited, a:hover, a:active, b {
+    text-decoration: none;
+    background-color: transparent; 
+}
+a:link, a:visited {
+    color: #305285;
+}
+a:hover, a:active {
+    color: #9092ca; 
+}
+p {
+    text-indent: 2em;
+}
+ul {
+    list-style-type: none;
+}
+li {
+    padding-left: 2em;
+}
+
+.center { 
+    width: 60%;
+    padding: 2em;
+    margin: auto;
+}
+
+.grid {
+    height: auto;
+    width: 100vw;
+    display: grid;
+    position: relative;
+    grid-template-columns: 1fr 60% 1fr;
+    grid-template-rows: 2em 9.515625em auto 12.6875em;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    box-sizing: border-box;
+}
+
+.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; 
+}
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 3;  
+    display: flex;
+    flex-direction: row;
+    display: grid;
+    grid-template-columns: minmax(0%,10%) repeat(5, minmax(7ch,96px)) minmax(0%,10%);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+    justify-items: center;
+    text-align: center;
+    margin: auto;
+}
+    .nav-left { 
+        grid-area: 1 / 1 / 2 / 2;
+    } 
+    .nav-right { 
+        grid-area: 1 / 7 / 2 / 8;
+    }
+    .nav-home { 
+        grid-area: 1 / 2 / 2 / 3;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .nav-blessfrey { 
+        grid-area: 1 / 3 / 2 / 4;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .nav-lemonland { grid-area: 1 / 4 / 2 / 5;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 80% 20%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .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%;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px; 
+        flex-direction: column;
+    }
+    .navlink {
+        font-size: 110%;
+        font-weight: bold;
+        color: #E6E8EF;
+    }
+    .navlink a:link {
+        color: #E6E8EF;
+    }
+    .navlink a:visited {
+        color: #E6E8EF;
+    }
+    .navlink a:hover {
+        color: #f463ad;
+    }
+    .navlink a:active {
+        color: #f463ad;
+    }
+    .nav-grid img {
+        height: 100%;
+        width: 100%;
+    }
+    .content-grid {
+        min-height: 60vh;
+        min-width: 50vw;
+    }

src/static/css/char.css

@@ -2,3 +2,14 @@
     margin: auto;
     color: white;
 }
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    margin: auto;
+}
+
+.gallery img {
+    height: 200px;}

src/static/css/index.css

@@ -1,65 +1,45 @@
 .content-grid { 
     grid-area: 3 / 1 / 4 / 4; 
     display: grid;
-    grid-template-columns: repeat(2, 50%);
-    grid-template-rows: 1fr 5em;
+    grid-template-columns: 40% 60%;
+    grid-template-rows: 1fr 9.5em;
     grid-column-gap: 0px;
     grid-row-gap: 0px; 
 }
     .content-left {
         grid-area: 1 / 1 / 2 / 2;
             background-image: url(../img/prom/BlessFREY_logo.png);
-            background-size: 70%;
+            background-size: 20em;
             background-repeat: no-repeat;
-            background-position: right;
+            background-position: center;
         }
     .content-right { 
-        grid-area:  1 / 2 / 2 / 3;
+        grid-area:  1 / 2 / 3 / 3;
         background-image: url(../img/prom/runebless.png);
         background-size: contain;/*80% auto;*/
         background-repeat: no-repeat;
-        background-position: center;
+        background-position: left;
         }
-    .latest, .latest-grid {
-        background-color: #C0AAC0;
-    border: 2px solid #df85a5; 
-    }
-    .latest-grid a, ul, li, b {
-        background-color: #C0AAC0;
-    border: 2px solid #df85a5; 
-    }
-
     .latest {
-    border: 2px solid #df85a5;
-        color: black;
+        background-color: #C0AAC0; 
+    }
+    .latest-title {
+        position: absolute;
+        width: 20em;
+        background-color: #C0AAC0; 
+        text-align: center;
+    }
+    .latest-centered {
+        text-align: center;
+        background-color: #C0AAC0; 
+    }
+    .latest-grid {
+        word-break: break-word;
+        width: 20em;
+        grid-area:  2 / 1 / 3 / 2;
         overflow-y: scroll; 
-    }
-    .latest-grid { 
-    border: 2px solid #df85a5;
-        width: 50%;
-        grid-area:  2 / 1 / 3 / 3;
-    } 
-    .latest-grid a:link {
-        color: #305285;
+        color: black;
         background-color: #C0AAC0; 
-    }
-    .latest-grid a:visited {
-        color: #305285;
-        background-color: #C0AAC0; 
-    }
-    .latest-grid a:hover {
-        color: #9092ca;
-        background-color: #C0AAC0; 
-    }
-    .latest-grid a:active {
-        color: #9092ca;
-        background-color: #C0AAC0; 
-    }
-    .latest-grid ul {
-    border: 2px solid #df85a5;
-        list-style-type: none;
-    }
-    .latest-grid li {
-    border: 2px solid #df85a5;
-        padding-left: 5%;
+        margin-left: auto;
+        margin-right: auto;
     }