From b77215813ab70778c414721b73460b205a4c80f0 Mon Sep 17 00:00:00 2001
From: TheJoKlLa <thejoklla@gmail.com>
Date: Fri, 25 Sep 2020 22:24:06 +0200
Subject: [PATCH] Fixed: Responsive Project Site

---
 layouts/partials/footer.html    |  4 ---
 layouts/partials/head_meta.html |  1 +
 static/css/content.css          | 37 ++++++++++++++---------
 static/css/main.css             | 52 ++++++++++++++++++++-------------
 static/css/size.css             |  4 +++
 5 files changed, 59 insertions(+), 39 deletions(-)
 create mode 100644 static/css/size.css

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 4f3fb8e..2d6c388 100644
--- a/layouts/partials/footer.html
+++ b/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>
             
diff --git a/layouts/partials/head_meta.html b/layouts/partials/head_meta.html
index e6d18ce..8c4f313 100644
--- a/layouts/partials/head_meta.html
+++ b/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">
diff --git a/static/css/content.css b/static/css/content.css
index 6bb9999..6aaede7 100644
--- a/static/css/content.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 134c520..a5bcbcf 100644
--- a/static/css/main.css
+++ b/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 {
diff --git a/static/css/size.css b/static/css/size.css
new file mode 100644
index 0000000..20af409
--- /dev/null
+++ b/static/css/size.css
@@ -0,0 +1,4 @@
+:root {
+  --size-normal: 48em;
+  --size-small: 35em;
+}
\ No newline at end of file