Merge pull request #4 from hawkina/main

trying to fix Layout and dark mode
IntEL4CoRo · Feb 27, 2024 · 54495e7 · 54495e7
2 parents 5e1e7b7 + 7d0c390
commit 54495e7
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 38 deletions.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -16,34 +16,30 @@
       </div>
 
       <div class="flex-item-center">
-
-        <!-- <div class="flex-container"> -->
-
-          <!-- <div class="flex-item-right"> -->
-            {{ end }}
-
-            <!-- {{ block "header" . }}{{ partial "header.html" . }}{{ end }} -->
-            <!-- <div class="intro-header big-img" style="background-image: url('img/ViB_banner_Uni_Rot.png')"> -->
-            <img src="img/ViB_banner_Uni_Rot.png" width="80%" style="margin-top: 50px; padding: 15px;">
-
+        <div style="margin: 0; flex-base: 80vw;">
+            {{ end }}          
+            {{ block "header" . }}{{ partial "header.html" . }}{{ end }}
             {{ block "main" . }}{{ end }}
+
 
             {{ if isset .Site.Params "rightsideimg" }}
-          <!-- </div> -->
+        </div>  
       </div>
 
-      <div class="flex-item-right" style="background-color: rgb(135, 161, 172, 0.09);">
+      <!-- item on the right side with all the logos-->
+      <div class="flex-item-right">
+
         <!-- <div style="position: relative; left: 85%; top: 20%; overflow: hidden; margin-right: 2%;"></div> -->
         <div style="position: relative;">
-            <div style="position: fixed; top: 45px; overflow-y: scroll;">
+            <div style="top: 45px; overflow-y: scroll;">
               <a href="https://www.uni-bremen.de/">
-                <img src='{{"img/UHB_Logo_Web_RGB.png" | absURL }}' style="padding: 30%;">
+                <img src='{{"img/UHB_Logo_Web_RGB.png" | absURL }}' style="padding: 20%; margin-top: 45px">
               </a>
               <a href="https://ai.uni-bremen.de/">
-                <img src='{{"img/Logo - IAI Schrift.png" | absURL }}' style="padding: 25%; margin-top: -15%;">
+                <img src='{{"img/Logo - IAI Schrift.png" | absURL }}' style="padding: 10%;">
               </a>
               <a id="myImageURL" href="">
-                <img id="myImage" src='{{"img/bmbf.png" | absURL }}' style="padding: 25%; margin-top: -10%;">
+                <img id="myImage" src='{{"img/bmbf.png" | absURL }}' style="padding: 10%;">
               </a>
             </div>
         </div>

diff --git a/static/css/main.css b/static/css/main.css
@@ -3,16 +3,16 @@
 body {
   font-family: 'Lora', 'Times New Roman', serif;
   font-size: 18px;
-  color: #404040;
+  color: #3b3b3b;
   position: relative;
-  background: #FFF;
+  /*background: #FFF;*/
   display: flex;
   flex-flow: column;
   height: 100vh;
 }
 @media (prefers-color-scheme: dark) {
   body {
-    background: black;
+    background: rgb(44, 44, 44);
     color: white;
   }
 }
@@ -924,13 +924,26 @@ h4.see-also {
     color: #ccc;
   }
   .well {
-    background-color: #444;
+    background-color: #3b3b3b;
   }
   .panel {
-    background-color: #222;
+    background-color: #3b3b3b;
   }
   .list-group-item {
-    background-color: #333;
+    background-color: #3b3b3b;
+  }
+  .div {
+    background-color: #3b3b3b;
+  }
+  .body {
+    background-color: #3b3b3b;
+    color: #808080;
+  }
+  .flex-container {
+    background-color: #303030;
+  }
+  .flex-item-right {
+    background-color: #3b3b3b;
   }
 
   pre.chroma {
@@ -954,6 +967,24 @@ h4.see-also {
   }
 }
 
+
+/* Light mode */
+@media (prefers-color-scheme: light) {
+  .div {
+    background-color: #ffffff;
+  }
+  .well {
+    background-color: #ffffff;
+  }
+  .body {
+    background-color: #ffffff;
+    color: #181818;
+  }
+  .flex-container {
+    background-color: #ffffff;
+  }
+}
+
 /* --- Make long KaTeX equations scrollable in the x-axis --- */
 .katex-display>.katex {
     overflow-x: auto;

diff --git a/static/css/override.css b/static/css/override.css
@@ -43,29 +43,49 @@ div.post-entry param.hidde-after-preview + *, div.post-entry div.hidde-after-pre
 /* right side image*/
 .flex-container {
   display: flex;
-  flex-direction: row;
   flex-wrap: nowrap;
+  flex-direction: row;
 }
 .flex-item-left {
-  flex: 30%;
-  justify-content: center;
+  /*flex-basis: 10%;*/
+  min-width: 200px;
+  min-height: 100px;
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 2;
+  aspect-ratio: 1;
+  flex-basis: 10vw;
 }
 .flex-item-center {
-  flex: 60%;
-  justify-content: center;
-  align-content: center;
-  overflow-y: auto;
+  overflow-y: hidden;
+  /*flex-basis: 100%; */
+  flex-grow: 2;
+  flex-shrink: 1;
+  /*width: fit-content;*/
+  /*min-width: fit-content; */
+  min-width: fit-content;
+  flex-basis: 70vw;
 }
-
 .flex-item-right {
-  flex: 10%;
-}
-
-@media only screen and (max-width: 1280px) and (max-height: 900px) { /* remove left side image when screen to small */
-  .flex-item-left {
-    display: none;
+  /*flex-basis: 25%; */
+  max-width: 200px;
+  flex-grow: 1;
+  flex-shrink: 2;
+  overflow-y: hidden;
+  min-width: 200px;
+  /*width: 200px;*/
+  flex-basis: 10vw;
+}
+/* item with the logos */
+/* @media only screen and (max-width: 1280px) and (max-height: 900px) { /* remove left side image when screen to small */
+/*  .flex-item-right {
+    flex-basis: 200px;
+    max-width: 200px;
+    flex-grow: 2;
+    flex-shrink: 2;
+    overflow-y: hidden;
   }
-}
+} 
 
 @media only screen and (max-width: 1280px) { /* remove left side image when screen to small */
   .flex-item-right {
@@ -78,6 +98,7 @@ div.main-well-flex-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  /*background-color: #3b3b3b; */
 }
 div.left-main-well-flex {
   flex: 50%;
@@ -150,7 +171,7 @@ div.right-main-well-flex {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: white;
+  /*background-color: #3b3b3b; */
   border: none;
   box-shadow: none;
 }