styling

tumi8 · Jan 31, 2024 · aca346f · aca346f
1 parent 38a68cc
commit aca346f
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 70 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,32 +1,27 @@
-<header class="container">
-  <div class="row">
-    <div class="twelve columns">
-      <div class="logo-bar">
-        <div class="logo-bar__inner">
+<div class="logo-bar">
+  <div class="logo-bar__inner">
 
-          <div class="logo-bar__word-mark-link">
-          <a href="http://www.net.in.tum.de/" title="Chair of Network Architectures and Services" target="_self" class="logo-bar__link">
-            Chair of Network Architectures and Services
-          </a><br>
+    <div class="logo-bar__word-mark-link">
+    <a href="http://www.net.in.tum.de/" title="Chair of Network Architectures and Services" target="_self" class="logo-bar__link">
+      Chair of Network Architectures and Services
+    </a><br>
 
-          <a href="http://www.cit.tum.de/" title="TUM School of Computation, Information and Technology" target="_self" class="logo-bar__link">
-            TUM School of Computation, Information and Technology
-          </a><br>
-          <a href="http://www.tum.de/" title="TUM School of Computation, Information and Technology" target="_self" class="logo-bar__link">
-            Technical University of Munich
-          </a>
-          </div>
+    <a href="http://www.cit.tum.de/" title="TUM School of Computation, Information and Technology" target="_self" class="logo-bar__link">
+      TUM School of Computation, Information and Technology
+    </a><br>
+    <a href="http://www.tum.de/" title="TUM School of Computation, Information and Technology" target="_self" class="logo-bar__link">
+      Technical University of Munich
+    </a>
+    </div>
 
-          <a href="http://www.tum.de" title="Startseite" target="_self" class="logo-bar__link logo-bar__logo-link">
-            <object type="image/svg+xml" data="{{site.baseurl}}/assets/images/tum_logo.svg" class="logo-bar__img">
-              <img src="{{site.baseurl}}/assets/images/tum_logo.png" width="73" height="38" alt="TUM – ">
-            </object>
-          </a>
-          </ul>
+    <a href="http://www.tum.de" title="Startseite" target="_self" class="logo-bar__link logo-bar__logo-link">
+      <object type="image/svg+xml" data="{{site.baseurl}}/assets/images/tum_logo.svg" class="logo-bar__img">
+        <img src="{{site.baseurl}}/assets/images/tum_logo.png" width="73" height="38" alt="TUM – ">
+      </object>
+    </a>
+    </ul>
 
-          <span class="main-nav-toggle js-main-nav-toggle">Menü</span>
-        </div>
-      </div>
-    </div>
+    <span class="main-nav-toggle js-main-nav-toggle">Menü</span>
   </div>
-</header>
+</div>
+
diff --git a/_includes/nav_main.html b/_includes/nav_main.html
@@ -1,14 +1,19 @@
-
-<nav class="main-nav js-main-nav" style="margin-bottom: 0">
+<nav class="main-nav js-main-nav">
   <ul class="main-nav__list clearfix js-main-nav-list">
 
-    {% assign pages = site.pages | where_exp: 'item', 'item.toc != nil' | sort: 'order' %}
-    {% for item in pages %}
+    <div class="container">
+      <div class="row">
+
+        {% assign pages = site.pages | where_exp: 'item', 'item.toc != nil' | sort: 'order' %}
+        {% for item in pages %}
+
 
-    <li class="main-nav__item-1-level main-nav__item-1-level--hover js-main-nav-item-1-level">
-      <a href="{{ item.url  | relative_url }}" class="{% if item.url == page.url %}main-nav__link--current{% endif %} main-nav__link js-main-nav-link main-nav__link--1-level">{{ item.toc }}</a>
-    </li>
+        <li class="main-nav__item-1-level main-nav__item-1-level--hover js-main-nav-item-1-level">
+          <a href="{{ item.url  | relative_url }}" class="{% if item.url == page.url %}main-nav__link--current{% endif %} main-nav__link js-main-nav-link main-nav__link--1-level">{{ item.toc }}</a>
+        </li>
 
-    {%- endfor -%}
+        {%- endfor -%}
+      </div>
+    </div>
   </ul>
 </nav>
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -3,11 +3,11 @@
 
     {%- include head.html -%}
 
-    <body class="">
+    <body>
 
         {%- include header.html -%}
 
-        <main class="container">
+        <main>
             {{ content }}
         </main>
 

diff --git a/_layouts/main.html b/_layouts/main.html
@@ -2,41 +2,40 @@
 layout: base
 ---
 
-<div class="row">
-  {%- include nav_main.html -%}
-</div>
-
-{% if page.image %}
-  <div class="csc-textpic-imagewrap">
-    <dl class="csc-textpic-image csc-textpic-last">
-      <img src="{{site.baseurl}}/{{page.image.url}}" alt="{{page.image.title}}" title="{{page.image.title}}" >
-      <dd class="csc-textpic-caption">{{page.image.title}}<span class="imagecopyright">{{page.image.copyright}}</span></dd>
-    </dl>
-  </div>
-{% endif %}
-
+{%- include nav_main.html -%}
+
+<div class="page-body">
+  {% if page.image %}
+    <div class="csc-textpic-imagewrap">
+      <dl class="csc-textpic-image csc-textpic-last">
+        <img src="{{site.baseurl}}/{{page.image.url}}" alt="{{page.image.title}}" title="{{page.image.title}}" >
+        <dd class="csc-textpic-caption">{{page.image.title}}<span class="imagecopyright">{{page.image.copyright}}</span></dd>
+      </dl>
+    </div>
+  {% endif %}
 
-  <div class="row">
-    <div class="twelve columns">
-      <div class="content">
-        <article>
+  <div class="container">
+    <div class="row">
+      <div class="twelve columns">
+        <div class="content">
+          <article>
 
-          <h1>
-            {{ page.title | default: site.title |escape }}
-          </h1>
+            <h1>
+              {{ page.title | default: site.title |escape }}
+            </h1>
 
-          {% if page.description %}
-          <p class="lead-text">
-            {{ page.description | escape }}
+            {% if page.description %}
+            <p class="lead-text">
+              {{ page.description | escape }}
 
-          </p>
-          {% endif %}
+            </p>
+            {% endif %}
 
-          {{content}}
+            {{content}}
 
-        </article>
+          </article>
+        </div>
       </div>
     </div>
   </div>
-
-
+</div>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -2,11 +2,11 @@
 layout: base
 ---
 
-<div class="page-body">
+<div class="show-on-mobile">
+  {%- include nav_main.html -%}
+</div>
 
-  <div class="show-on-mobile">
-    {%- include nav_main.html -%}
-  </div>
+<div class="container page-body">
 
   <div class="row">
     <div class="two columns hide-on-mobile">

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -36,9 +36,27 @@ footer {
   border-top: 1px solid $gainsboro;
 }
 
+.main-nav {
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.logo-bar {
+  margin: 0 auto;
+  max-width: 1150px;
+  width: 96%;
+}
+
+@media (max-width: 799px) {
+  .logo-bar {
+    padding: 26px 0 18px 0;
+  }
+}
+
 .logo-bar__link {
   color: #3070b3 !important;
   text-decoration: none;
+  font-size: 13px;
 }
 
 .sitefooter {