VSP 2025 layout update

matsim-vsp · Dec 7, 2024 · e6cdb8e · e6cdb8e
1 parent 557d30b
commit e6cdb8e
Show file tree

Hide file tree

Showing 26 changed files with 325 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -34,9 +34,10 @@ The Publications page is now a separate javascript app built with more interacti
 
 Source code for this is in the `_publications_app` folder.  It gets built separately there, and then the built outputs are copied into the `publications` folder.
 
-To build update the publications-app:
+### To build/update the publications-app:
 
-- Install Node 20.x from https://node.dev
+- Install Node LTS 20.x from https://node.dev
+  - If you are in the future and recent Node versions don't work, use [nvm: node version manager](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) and run `nvm install 20` and `nvm use 20` to get version 20 specifically.
 - cd into `_publications_app`
 - run `npm ci` to install node project dependencies
 - now you can run `npm run dev` to get a hot-reload dev server.

diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,5 @@
 ---
-title: VSP / TU Berlin
+title: VSP • TU Berlin
 url: https://vsp.berlin
 #url: http://127.0.0.1:4000/
 baseurl: ""

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -6,11 +6,7 @@
       &copy; 2024 TU Berlin. <a href="/impressum">Impressum</a>
     </p>
 
-    <!--
-    <p>
-      <a class="github-button" href="https://github.com/{{ site.repository }}" data-size="large" aria-label="View {{ site.repository }} on GitHub">View on GitHub</a>
-    </p>
-  --></div>
+  </div>
 </footer>
 
-<script async defer src="https://buttons.github.io/buttons.js"></script>
+<!-- <script async defer src="https://buttons.github.io/buttons.js"></script> -->
diff --git a/_includes/head.html b/_includes/head.html
@@ -9,13 +9,6 @@
 
   <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css" />
 
-  <!-- fonts -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap"
-    rel="stylesheet"
-  />
-
   <!-- Favicon -->
   <link
     rel="shortcut icon"

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,12 +1,23 @@
-<header class="site-header" role="banner">
-  <div class="wrapper">
-
-    <a class="site-title" href="{{ site.baseurl }}{{ locale.baseurl }}/">{{ site.title | escape }}</a>
-
-    <div class="navigation">
-      {% include site-nav.html %}
-      {% include lang-switcher.html %}
+<header role="banner">
+  <div class="header-container">
+      <div class="wrapper site-header">
+
+        <div class="site-header-logo">
+            <a class="site-title" href="{{ site.baseurl }}{{ locale.baseurl }}/"><img class="header-logo-image" width=210 src="/assets/images/vsp-logo-2024-red-fulltext.png"></a>
+        </div>
+        <div class="site-header-links">
+            <div class="navigation">
+              {% include site-nav.html %}
+            </div>
+        </div>
+        <div class="site-header-lang navigation">
+            {% include lang-switcher.html %}
+        </div>
+
     </div>
-    
+
   </div>
+
+  <div class="frosty-backdrop"></div>
+
 </header>
diff --git a/_includes/site-nav.html b/_includes/site-nav.html
@@ -1,20 +1,14 @@
 <nav class="site-nav">
   <ul>
-    {% assign current_url = page.url %}
-    {% assign pages_collection = "pages" | append: page.collection_suffix %}
-    {% assign pages = site[pages_collection] %}
-    {% for document_id in site.navigation %}
-      {% for page in pages %}
+    {% assign current_url = page.url %}{% assign pages_collection = "pages" | append: page.collection_suffix %}{% assign pages = site[pages_collection] %}
+    {% for document_id in site.navigation %}{% for page in pages %}
         {% include i18n/document_id obj=page %}
         {% if obj_document_id == document_id %}
         <li>
           <a href="{{ page.url | prepend: site.baseurl }}" {% if page.url == current_url %}aria-current="page"{% endif %}>
             {{ page.title | escape }}
           </a>
         </li>
-        {% break %}
-        {% endif %}
-      {% endfor %}
-    {% endfor %}
+        {% break %}{% endif %}{% endfor %}{% endfor %}
   </ul>
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -15,8 +15,6 @@
       {{ content }}
     </main>
 
-    <!-- {% include i18n/debug.html %} -->
-
     {% include footer.html %}
 
   </div>

diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -4,24 +4,31 @@
 
 {% include i18n/i18n %}
 
+{% if page.banner_image or default_page.banner_image %}
 <div class="banner">
-  {% if page.banner_image or default_page.banner_image %}
   <img
     src="{{ page.banner_image | default: default_page.banner_image | prepend: site.baseurl }}"
     alt=""
   />
   {% endif %}
-  <h1 class="headline">{{ page.headline }}</h1>
+  {% if page.headline %}
+    <h1 class="headline">{{ page.headline }}</h1>
+  {% endif %}
 </div>
 
-<div class="page wrapper">
-  <div class="home-column-container">
-    <div class="logo-column">
-      <img src="/assets/images/vsp-logo.png" />
-    </div>
+<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>
+    <hr style="margin: 2rem 0 0 0" />
+  {% else %}
+    <h3 style="margin: 0; color: #cf0017">Technische Universität Berlin</h3>
+    <h2 style="margin: 0 !important;">Transport System Planning and Transport Telematics (VSP)</h2>
+    <hr style="margin: 2rem 0 0 0" />
+  {% endif %}
+
 
-    <div class="page-content text text-wrapper" style="flex: 1">
-      {{ content }}
+    <div class="frontpage">
+        {{ content }}
     </div>
-  </div>
 </div>
diff --git a/_pages_en/index.md b/_pages_en/index.md
@@ -1,24 +1,12 @@
 ---
 layout: homepage
 title: Home
-headline: VSP
+banner_image: /assets/images/banner-berlin-traffic.jpg
+# headline: VSP
 ---
 
-<h1 style="margin: 3rem 0 0 0;">VSP: Transport Systems Planning and Transport Telematics</h1>
-
-<h3 style="margin: 0.25rem 0; color: #cf0017">Technische Universität Berlin</h3>
-
----
-
-<!--
-<div style="background-color: yellow; padding: 1rem 1rem; border: 2px solid red; border-left: 1rem solid #cf0017;">
-
-<p><b>01 Jun 2021</b> - The TU Berlin exchange email server was attacked at the end of April, but email service has now been restored.</p>
-
-<p>If you have been trying to contact us, we apologize. Email should be back in operation now. Please resend any messages if you have not heard from of us.</p>
-
-</div>
--->
+<!-- MAIN CONTENT BEGINS HERE -- don't remove this! -->
+<div class="frontpage-content" markdown="1">
 
 ### VSP Project websites
 
@@ -43,14 +31,17 @@ Covid:
 
 - [COVID-Sim.info](https://covid-sim.info) - COVID-19 Simulation Portal
 
----
-
 ### Some further information
 
 - [Reading list](/readinglist)
 - [Interesting links](/interestinglinks)
 
----
+
+<!-- ----- SIDEBAR BEGINS HERE --- don't remove this! -->
+</div>
+<div class="frontpage-sidebar" markdown="1">
+
+![VSP Logo](/assets/images/vsp-logo.png)
 
 ### Contact Us
 
@@ -68,9 +59,8 @@ D-10553 Berlin
 10:00-16:00 Mondays<br/>
 15:00-18:00 Thursdays
 
-For office hour appointments, please arrange beforehand via E-mail:<br/>
-<mailto:[email protected]> or <mailto:[email protected]>
-
+For office hour appointments, please arrange beforehand via email:<br/>
+<mailto:[email protected]><br/> or <mailto:[email protected]>
 
 
 

diff --git a/_sass/_header-footer.scss b/_sass/_header-footer.scss
@@ -16,22 +16,22 @@
 }
 
 .navigation {
-  font-weight: 500;
+  font-weight: 300;
   margin-top: $box-padding;
   nav {
     padding: $box-padding * 0.5 0;
-    border-top: 1px solid $blue;
+    // border-top: 1px solid $blue;
   }
   @include media($large-screen-up) {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin-top: $box-padding * 0.5;
-    
+
     nav {
       padding: 0;
       border-top: none;
-      
+
       & + nav {
         margin-left: $box-padding * 2;
       }
@@ -49,10 +49,10 @@
   }
   a {
     padding: 0.125em 0;
-    
+
     &[aria-current],
     &[href]:hover {
-      border-bottom: 2px solid;
+      border-bottom: 1px solid;
     }
   }
   a.not-available {

diff --git a/_sass/_page.scss b/_sass/_page.scss
@@ -15,7 +15,7 @@
   margin: 1em 0 0;
 }
 
-$banner-max-height: 20em;
+$banner-max-height: 15em;
 $headline-max-size: 10em;
 
 .banner {
@@ -24,7 +24,7 @@ $headline-max-size: 10em;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 15em;
+  height: 10em;
 
   img {
     width: 100%;
@@ -67,16 +67,16 @@ $headline-max-size: 10em;
 }
 .home-column-container {
   display: flex;
+  gap: 4rem;
   flex-direction: column;
   @include media($large-screen-up) {
-    flex-direction: row;
+    flex-direction: row-reverse;
   }
 }
 
 .logo-column {
-  padding-top: 3rem;
-  margin-right: 4rem;
-  width: 12rem;
+  padding-top: 0rem;
+  width: 10rem;
 }
 
 .vsp-table {

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -40,7 +40,7 @@ $dark-gray: mix($black-gray, $white-gray, 75%);
 $medium-gray: mix($black-gray, $white-gray, 50%);
 $light-gray: mix($black-gray, $white-gray, 25%);
 
-$blue: cornflowerblue;
+$blue: rgb(63, 115, 209);
 
 // Add custom colors here...
 
@@ -54,8 +54,8 @@ $body-background-color: #efefef;
 $main-background-color: white;
 
 // Typography
-$base-font-family: "Lato";
-$heading-font-family: "Lato";
+$base-font-family: Outfit,Arial,Helvetica,sans-serif;
+$heading-font-family: Outfit,Arial,Helvetica,sans-serif;
 $base-line-height: null;
 $heading-line-height: null;
 $h1-font-size: null;
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,8 +15,6 @@ @@
           {{ content }}
         </main>
-        <!-- {% include i18n/debug.html %} -->
         {% include footer.html %}
       </div>
@@ Expand Down @@