grid for new index; nav buttons wonky

src/static/css/index.css

@@ -2,7 +2,8 @@
     padding:0;
     margin:0;
     font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
-    color: #F9B3D7;
+    background-color: black;
+    color: gray;
 }
 
 a {
@@ -11,78 +12,65 @@ a {
 
 .grid {
     display: grid;
-    grid-template-columns: auto 75px 400px 25px 225px 75px auto;
-    grid-template-rows: 25px 90px 457px auto;
+    grid-template-columns: auto 60% auto;
+    grid-template-rows: 5% 15% 50% 20%;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }
 
-.whitespace {
-    grid-area: 1 / 1 / 2 / 8;
+.top-row { 
+    grid-area: 1 / 1 / 2 / 4; 
     display: flex;
     flex-direction:column;
     justify-content:center;
     align-items: center;
-    background-color: #900C3F;
+    background-color: red;
+}
+.nav-row { 
+    grid-area: 2 / 1 / 3 / 4; 
+    background-color: orange;
+}
+.content-row {
+    grid-area: 3 / 1 / 4 / 4; 
+    background-color: yellow;
+}
+.latest-row { 
+    grid-area: 4 / 1 / 5 / 4; 
+    background-color: green;
 }
 
-.blessfrey-logo { 
-    grid-area: 1 / 3 / 2 / 6; 
+.logo { 
+    grid-area: 1 / 2 / 2 / 3; 
     padding-top: 5px;
     color: #FBDAEC;
 }
-
-/* navigation pane */
-
-.nav-row {
-    grid-area: 2 / 1 / 3 / 8; 
-    background-color: #900C3F;
-}
-
 .nav-grid { 
-    grid-area: 2 / 2 / 3 / 7; 
+    grid-area: 2 / 2 / 3 / 3; 
     display: flex;
     flex-direction:row;
     justify-content:flex-end;
     display: grid;
-    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-columns: auto repeat(5, 1fr) auto;
     grid-template-rows: 90px;
     grid-column-gap: 17px;
     grid-row-gap: 0px; 
     align-items: end;
     justify-items: center;
 }
-.nav-bar {
-    grid-area: 1 / 1 / 2 / 7;
-    background-image: url(../img/ele/navbar.png);
-    height: 86px;
-    width: 800px;
-}
-.nav-index { 
-    grid-area: 1 / 2 / 2 / 3; 
-    padding-bottom: 3px;
-    position: relative;
-}
-.nav-game { 
-    grid-area: 1 / 3 / 2 / 4;
-    padding-bottom: 3px;
-    position: relative;
-}
-.nav-diary { 
-    grid-area: 1 / 4 / 2 / 5; 
-    padding-bottom: 3px;
-    position: relative;
-}
-.nav-presskit { 
-    grid-area: 1 / 5 / 2 / 6; 
-    padding-bottom: 3px;
-    position: relative;
-}
+    .nav-home { 
+        grid-area: 1 / 2 / 2 / 3;
+        padding-bottom: 3px;
+        position: relative; 
+    }
+    .nav-blessfrey { grid-area: 1 / 3 / 2 / 4; }
+    .nav-lemonland { grid-area: 1 / 4 / 2 / 5; }
+    .nav-diary { grid-area: 1 / 5 / 2 / 6; }
+    .nav-about { grid-area: 1 / 6 / 2/ 7; } 
 .nav-link {
-    position: absolute;
+    /*position: absolute;
     top: 45%;
     left: 50%;
-    transform: translate(-50%, -50%)
+    transform: translate(-50%, -50%)*/
 }
 .nav-link a {
     font-size: 21px;
@@ -99,48 +87,35 @@ a {
         -1px  0   1px black;
 }
 
-/* Body */
-
-.body-row {
-    grid-area: 3 / 1 / 4 / 8; 
-    background-color: #080410;
-}
-
-.social {
-    grid-area: 3 / 6 / 4 / 7;
-    justify-content: center;
-}
-
-.bg {
-    grid-area: 3 / 3 / 4 / 6; 
-    background-color:;
+.content-grid { 
+    grid-area: 3 / 2 / 4 / 3;
+    background-color: black;
     background-image: url(../img/bg/homeBG.png);
-    width: 650px;
-    height: 457px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
 }
-
-.footer-row {
-    grid-area: 4 / 1 / 5 / 8; 
-    background-color: #900C3F;
-}
-
-
-.headline {
-    margin-right: 0px;
-    margin-left: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px; 
-    padding-top: 3px;
-    padding-right: 1px;
-    padding-bottom: 3px;
-    padding-left: 1px;
-}
-
+    .content-left {
+        grid-area: 1 / 1 / 2 / 2; 
+    }
+    .content-right { 
+        grid-area: 1 / 2 / 2 / 3; 
+    } 
+.latest-grid { 
+    grid-area: 4 / 2 / 5 / 3; 
+} 
 .footer-content {
-    background-color: #581845; 
+    background-color: blue; 
     color: #F9B3D7;
     padding-top: 5px;
     text-align: right;
     overflow: hidden;
-    box-shadow: 0 100vh 0 100vh #581845;  
+    box-shadow: 0 100vh 0 100vh black;  
+}
+
+#poltics {
+    height: auto;
+    width: 100%;
 }