oc grid

src/static/css/index.css

@@ -4,6 +4,8 @@
     font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
     background-color: black;
 }
+html, body {padding:0; margin:0; height:100%;}
+footer{position: absolute; bottom: 0; left: 0; right: 0;}
 
 a {
     text-decoration: none;
@@ -110,6 +112,7 @@ a {
     .navlink {
         font-size: 110%;
         font-weight: bold;
+        color: #E6E8EF;
     }
     .navlink a:link {
         color: #E6E8EF;

src/static/css/me.css

@@ -4,6 +4,15 @@
     font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif;
     background-color: black;
 }
+/*html, body {padding:0; margin:0; height:100%;}*/
+.footer{
+    position: relative; bottom: 0px; left: 0px; right: 0px;
+    color: white;
+    padding-top: 5px;
+    text-align: right;
+    overflow: hidden;
+    box-shadow: 0 100vh 0 100vh black;  
+}
 
 a {
     text-decoration: none;
@@ -110,6 +119,7 @@ a {
     .navlink {
         font-size: 110%;
         font-weight: bold;
+        color: #E6E8EF;
     }
     .navlink a:link {
         color: #E6E8EF;
@@ -144,13 +154,13 @@ a {
         grid-area: 1 / 2 / 2 / 3;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
-        grid-template-rows: 1fr 2fr repeat(2, 1fr);
+        grid-template-rows: auto auto auto auto;
         grid-column-gap: 0px;
         grid-row-gap: 0px; 
         margin-right: 25%;
     }
         .intro, .rpg, .petsite, .projects, .ocs {
-            background-color: #815f81;
+            background-color: #C0AAC0;
             padding: 5%;
             text-align: justify;
         }
@@ -158,29 +168,35 @@ a {
         .rpg { grid-area: 2 / 1 / 3 / 2;}
         .petsite { grid-area: 2 / 2 / 3 / 3;}
         .projects { grid-area: 3 / 1 / 4 / 3;}
-        .ocs { grid-area: 4 / 1 / 5 / 3;} 
+        .ocs { grid-area: 4 / 1 / 5 / 3; text-align:left;} 
+            .ocs-nav {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+            }
+            .ocs img {
+                width: 10em;
+                border-radius: 5%;
+            }
+            .ocs-btn {
+            }
 
-    .content-right h1, h2, ul, li, b, i, p {
-        background-color: #815f81; 
+    .content-right h1, h2, ul, li, b, i, p, img, a {
+        background-color: #C0AAC0; 
     }
     p {
         text-indent: 2em;
     }
     .content-right a:link {
-        color: black;
-        background-color: #815f81; 
+        color: #305285;
     }
     .content-right a:visited {
-        color: black;
-        background-color: #815f81; 
+        color: #305285;
     }
     .content-right a:hover {
-        color: #F9B3D7;
-        background-color: #815f81; 
+        color: #9092ca;
     }
     .content-right a:active {
-        color: #f463ad;
-        background-color: #815f81; 
+        color: #9092ca;
     }
     .content-right ul {
         list-style-type: none;
@@ -189,10 +205,10 @@ a {
         padding-left: 5%;
     }
 
-.footer-content {
+/*.footer-content {
     color: white;
     padding-top: 5px;
     text-align: right;
     overflow: hidden;
     box-shadow: 0 100vh 0 100vh black;  
-}
+}*/