Fixed: Responsive Project Site

layouts/partials/footer.html

@@ -1,8 +1,4 @@
        <footer class="footer">
-            {{ if .Params.sponsor }}
-            <div class="sponsor_placeholder"></div>
-            {{ end }}
-
             <div class="text">
             <p>Powered by <a href="https://gohugo.io">Hugo</a>. Themed by <a href="https://gitlab.com/fabinfra/fabinfra-theme">FabInfra</a>.</p>
             

layouts/partials/head_meta.html

@@ -3,6 +3,7 @@
         <meta charset="utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="/css/color.css">
+        <link rel="stylesheet" href="/css/size.css">
         <link rel="stylesheet" href="/css/main.css">
         <link rel="stylesheet" href="/css/content.css">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mina">

static/css/content.css

@@ -35,25 +35,34 @@ main .list-project .content {
 }
 
 /* project sites */
-main .header-project .content{
-    display: flex;
-
+main .header-project .content {
     padding-top: 5px;
     margin-top: 10px;
-    max-height: 200px;
+    display: flex;
+
+    flex-direction: row;
+    justify-content: space-between;
 }
 main .header-project .content .logo {
-    width: 200px;
-    margin-left: auto;
-    margin-right: 20px;
+    align-self: center;
+    height: 200px;
 }
 
-main .header-project .content .logo img {
-    width: : 100%;
-}
-
-@media (max-width: 35em) {
-    main .header-project .content .logo {
-        display: none;
+/* Change Grid Structure */
+@media (max-width: 30em) {
+    main .header-project .content {       
+        flex-direction: column-reverse;
+        justify-content: space-between;
     }
+
+    main .header-project .content .logo {
+        align-self: center;
+        width: 200px;
+    }
+}
+
+/* images */
+.text-justify img {
+    display: block;
+    margin: 50px auto;
 }

static/css/main.css

@@ -117,14 +117,6 @@ body {
   top:0;
 }
 
-/* main */
-main {
-  padding: 75px 30px 100px 30px;
-  font-family: Roboto, sans-serif;
-}
-
-/* 48em = 768px @ 16pt font */
-
 @media (min-width: 48em) {
   .header li {
     float: left;
@@ -140,8 +132,18 @@ main {
   .header .menu-icon {
     display: none;
   }
+}
+
+/* main */
+main {
+  padding: 75px 30px 150px 30px;
+  font-family: Roboto, sans-serif;
+}
+
+/* Change Padding for Mobile View */
+@media (min-width: 48em) {
   main {
-  padding: 75px 150px 100px 150px;
+    padding: 75px 150px 100px 150px;
   }
 }
 
@@ -158,24 +160,32 @@ main {
   bottom: 0;
   width: 100%;
   padding: 20px 0px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 20px 100px 10px auto 10px 100px 20px;
 }
 
-.footer .text{
-  margin-right: auto;
-  margin-left: auto;
+.footer .text {
+  grid-column-start: 4;
 }
 
-.footer .sponsor{
-  height: 76px;
-  width: 115px;
-  margin: -15px 30px -15px auto;
+.footer .sponsor {
+  grid-column-start: 6;
+  width: 100%;
 }
 
-.footer .sponsor_placeholder{
-  height: 76px;
-  width: 115px;
-  margin: -15px auto -15px 30px;
+/* Change Grid Structure */
+@media (max-width: 48em) {
+  .footer  {
+    grid-template-columns: 10px auto 10px 100px 10px;
+  }
+
+  .footer .text {
+    grid-column-start: 2;
+  }
+
+  .footer .sponsor {
+    grid-column-start: 4;
+  }
 }
 
 .footer p {

static/css/size.css

@@ -0,0 +1,4 @@
+:root {
+  --size-normal: 48em;
+  --size-small: 35em;
+}