UPDATE - redesign - new nav bar, new organization, new main pages, new art page, study page (no content yet), games page with STTMT, update to me; new diary entry

src/static/css/all.css

@@ -35,10 +35,10 @@
 html, body {padding:0; margin:0; height:100%;}
 footer {
     position: fixed; bottom: 0; left: 0;
-    color: #C0AAC0;
     background-color: transparent;
     width: 100vw;
 }
+
 a, a:link, a:visited, a:hover, a:active, b, p {
     text-decoration: none;
     background-color: transparent; 

src/static/css/art.css

@@ -0,0 +1,40 @@
+.content-grid {  
+    color: white;
+    margin: 2em;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 200px);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    border: 2px solid #C0AAC0;
+    margin-bottom: 5em;
+}
+
+.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;
+}
+
+.cats {
+    display: block;
+    text-align: center;
+}

src/static/css/demo.css

@@ -1,27 +0,0 @@
-.content-grid {  
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(3, auto);
-    grid-column-gap: 0px;
-    grid-row-gap: 0em;
-    color: white;
-}
-
-.edition { 
-    grid-area: 1 / 1 / 2 / 2; 
-    }
-
-.demo { grid-area: 2 / 1 / 3 / 2; } 
-   
-.demo iframe {
-    border: 2px solid #df85a5;
-    padding: 10px;
-    display: block;
-    margin: auto;
-}
-.guide {
-    grid-area: 3 / 1 / 4 / 2;
-    width: 80%;
-    padding: 2em;
-    margin: auto;
-}

src/static/css/diary.css

@@ -58,6 +58,7 @@
     .diary-dir-numbers {
         height: 0em;
         display: inline-block;
+        vertical-align: middle;
         white-space: nowrap;
         margin-left: .3em;
         margin-right: .3em;
@@ -65,6 +66,7 @@
     .diary-dir-number {
         background-color: #886488; 
         display: inline-block;
+        vertical-align: middle;
         white-space: nowrap;
         border-radius: .3em;
         padding-left: .3em;

src/static/css/games.css

@@ -0,0 +1,11 @@
+.content-grid {  
+    color: white;
+}
+
+   
+iframe {
+    border: 2px solid #df85a5;
+    padding: 10px;
+    display: block;
+    margin: auto;
+}

src/static/css/nav.css

@@ -1,112 +1,22 @@
-/*set heart and star to 0px if viewport too small*/
-
-@media (max-width: 625px) {
-    .heart {
-    width: auto;
-    }
-}
-.heart { 
-    grid-area: 1 / 1 / 2 / 2;
-    background-color: transparent;
-    background-image: url(../img/nav/heart.png); 
-    background-repeat: no-repeat;
-    background-position: bottom right;
-    background-size: contain;
-}
-.nav-grid {
-    grid-area: 1 / 2 / 2 / 3;
-    background-color: transparent;
-    background-image: url(../img/nav/field.png);
-    background-repeat: no-repeat;
-    background-position: bottom center;
-    background-size: contain;
-    display: grid;
-    grid-template-columns: auto; 
-    grid-template-rows: repeat(4, auto);
-    /*grid-template-columns: minmax(0%,10%) repeat(6, minmax(7ch,96px)) minmax(0%,10%);*/
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    align-items: center;
-}
-.star { 
-    grid-area: 1 / 3 / 2 / 4;
-    background-color: transparent;
-    background-image: url(../img/nav/star.png); 
-    background-repeat: no-repeat;
-    background-position: bottom left;
-    background-size: contain;
-} 
-
-.nav-diary { 
-    grid-area: 1 / 1 / 2 / 2;
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 80% 20%;
-    grid-column-gap: 0px;
-    grid-row-gap: 0px; 
-    flex-direction: column;
-    min-width: 48px;
-}
-.nav-play { 
-    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;
-    min-width: 48px;
-}
-.nav-about {
-    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;
-    min-width: 48px;
-}
-.nav-dev {
-    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;
-    min-width: 48px;
-}
-.navlink {
-    font-size: 110%;
-    font-weight: bold;
+footer { 
     color: #C0AAC0;
-    text-align: center;
-}
-.navlink a:link {
-    color: #C0AAC0;
-}
-.navlink a:visited {
-    color: #C0AAC0;
-}
-.navlink a:hover {
-    color: #E1B9E6;
-}
-.navlink a:active {
-    color: #C0AAC0;
-}
-.nav-grid img {
-    height: auto;
-    width: 100%;
-}
-.links { 
-    grid-area: 2 / 1 / 3 / 2;
-    background-color: black; 
+    background-color: #404164; 
     width: 100vw;
     text-align: center;
     padding-top: 0.5em;
     padding-bottom: 1em;
 }
-.links a {
+footer a:link {
     color: #C0AAC0;
-} 
+}
+footer a:visited {
+    color: #C0AAC0;
+}
+footer a:hover {
+    color: #E1B9E6;
+    font-family: 'mitochondriaregular', sans-serif;
+}
+footer a:active {
+    color: #C0AAC0;
+    font-family: 'mitochondriaregular', sans-serif;
+}

src/static/css/sidebar.css

@@ -39,21 +39,20 @@
     .about-box {
         grid-area: 1 / 1 / 2 / 2;
     }
-    .twitter-box {
+    .social-box {
         grid-area: 2 / 1 / 3 / 2;
     }
     .latest {
         grid-area: 3 / 1 / 4 / 2;
     }
-    .latest-text {
-        text-align: left;
-        padding: 0em;
-        background-color: #A88AA8; 
-    }
     .wordcloud {
         grid-area: 4 / 1 / 5 / 2;
     }
     .disclosure {
         grid-area: 5 / 1 / 6 / 2;
     }
-
+    .diary-box ul {
+        text-align: left;
+        padding: 0em;
+        background-color: #A88AA8; 
+    }