clean up margins, centering for different screen sizes

matsim-vsp · Dec 8, 2024 · 1207597 · 1207597
1 parent d609e9a
commit 1207597
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 37 deletions.
diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -12,7 +12,7 @@
 
 {% assign sorted = site[posts_collection] | sort: 'date' | reverse %}
 
-<div class="blog wrapper">
+<div class="blog wrapper text-wrapper">
   <div class="page-header">
     <h1 class="page-title">{{ page.title }}</h1>
   </div>

diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -5,18 +5,17 @@
 {% include i18n/i18n %}
 
 {% if page.banner_image or default_page.banner_image %}
-<div class="banner">
-  <img
-    src="{{ page.banner_image | default: default_page.banner_image | prepend: site.baseurl }}"
-    alt=""
-  />
-  {% endif %}
-  {% if page.headline %}
-    <h1 class="headline">{{ page.headline }}</h1>
-  {% endif %}
-</div>
+  <div class="banner">
+    <img src="{{ page.banner_image | default: default_page.banner_image | prepend: site.baseurl }}" alt="" />
+    {% if page.headline %}
+        <h1 class="headline">{{ page.headline }}</h1>
+    {% endif %}
+  </div>
+{% endif %}
+
+<div class="page wrapper text">
+<div class="homepage-wrapper">
 
-<div class="page wrapper text text-wrapper">
   {% if locale.lang == 'de-DE' %}
   <h3 style="margin: 0; color: #cf0017">Technische Universität Berlin</h3>
   <h2 style="margin: 0 !important;">Verkehrssystemplanung und Verkehrstelematik (VSP)</h2>
@@ -27,8 +26,9 @@ <h2 style="margin: 0 !important;">Transport Systems Planning and Transport Telem
     <hr style="margin: 2rem 0 0 0" />
   {% endif %}
 
+  <div class="frontpage">
+      {{ content }}
+  </div>
 
-    <div class="frontpage">
-        {{ content }}
-    </div>
+</div>
 </div>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -4,14 +4,14 @@
 
 {% include i18n/i18n %}
 
-<div class="page wrapper">
-  
+<div class="page wrapper text text-wrapper">
+
   <div class="page-header">
     <h1 class="page-title">{{ page.title }}</h1>
   </div>
-  
+
   <div class="page-content text text-wrapper">
     {{ content }}
   </div>
-  
+
 </div>
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -25,8 +25,8 @@ $include-form-styles: true;
 
 $text-spacing: 1em; // for localized spacing based on font-size
 $box-padding: 2rem; // for unified padding in layout elements
-$text-max-width: 48em; // maximum width for text elements
-$page-max-width: 68rem; // maximum width for page layout
+$text-max-width: 54rem; // maximum width for text elements
+$page-max-width: 72rem; // maximum width for page layout
 
 // Colors
 // -----------------------------------------------------------------------------

diff --git a/_sass/main.scss b/_sass/main.scss
@@ -218,7 +218,6 @@ header {
 // ---------------------------------------
 body {
   max-width: unset;
-  // background-color: #eeeef4;
 }
 
 h1,h2,h3,h4,h5,h6 {
@@ -230,10 +229,24 @@ h1,h2,h3,h4,h5,h6 {
   font-weight: 300;
 }
 
+.page-header {
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #80808080;
+}
+
+.homepage-wrapper {
+  max-width: $page-max-width;
+  margin: 0 auto;
+}
+
 .frontpage-content > ul {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid */
   gap: 20px;
+
+  @include media($large-screen-up) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 /* Optional: Remove default list styling */
@@ -254,10 +267,6 @@ h1,h2,h3,h4,h5,h6 {
   max-width: unset;
 }
 
-.page.wrapper {
-  max-width: 68rem;
-}
-
 .text img {
   border-radius: 10px;
 }
@@ -322,20 +331,26 @@ footer {
 }
 
 .frontpage {
+  font-weight: 300;
   display: flex;
   flex-direction: row;
-  gap: 4rem;
+  gap: 8rem;
 }
 
 .frontpage-content {
   flex: 1;
 }
 
 .frontpage-sidebar {
-  width: 14rem;
+  width: 16rem;
   font-size: 13px;
   line-height: 1.1rem;
   margin-top: 2rem;
+  margin-left: auto;
+
+  img {
+    width: 10rem;
+  }
 }
 
 .header-logo-image {
@@ -389,6 +404,7 @@ footer {
     flex-direction: column;
   }
   .frontpage-sidebar {
+    margin-left: unset;
     width: unset;
   }
 }
@@ -420,31 +436,33 @@ footer {
     --text-color: #c0c0c0;
     --link-color: #4d9aff;
     --frosted-1: #222630f4;
-    --frosted-2: #27303670;
+    --frosted-2: #27303660;
     --frosted-3: #232632;
     --banner-image-filter: brightness(97%) invert(100%) hue-rotate(-25deg);
     --table-row-odd: #1e1f24;
   }
+
+  .invert-images img {
+    filter: invert(100%) hue-rotate(0deg);
+  }
+
+  h3 {
+    color: #b34343;
+  }
+
 }
 
 body, main, thead {
   background-color: var(--background-color);
   color: var(--text-color);
 }
 
-h3 {
-  color: rgb(179, 67, 67);
-}
-
 a {
   color: var(--link-color);
 }
 
-/* Optional: Smooth transition between modes */
+// Smooth transition between modes
 body, main, a {
   transition: background-color 0.3s, color 0.3s;
 }
 
-.invert-images img {
-  filter: invert(100%) hue-rotate(0deg);
-}