dark mode

matsim-vsp · Dec 8, 2024 · 5f6bc25 · 5f6bc25
1 parent 98d2a74
commit 5f6bc25
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 24 deletions.
diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -17,15 +17,17 @@
     <h1 class="page-title">{{ page.title }}</h1>
   </div>
 
+  {{ content }}
+
   <ul class="blog-list">
     {% for post in sorted %}
     <li>
-      <h2 class="post-title">
-        <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-      </h2>
       <small class="post-meta"
         >{% include i18n/date date=post.date format="long" %}</small
       >
+      <h2 class="post-title">
+        <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+      </h2>
     </li>
     {% endfor %}
   </ul>

diff --git a/_pages_en/index.md b/_pages_en/index.md
@@ -31,7 +31,7 @@ VSP maintains project websites for many of our research topics:
 
 **Covid:**
 
-- [COVID-Sim.info](https://covid-sim.info) <br> COVID-19 Simulation Portal
+- [COVID-Sim.info](https://covid-sim.info) - COVID-19 Simulation Portal
 
 ### Some further information
 
@@ -51,7 +51,7 @@ Transport Systems Planning and Transport Telematics<br/>
 Email: <mailto:[email protected]><br/>
 Tel: +49-30-314-23308
 
-Building: KAI, Raum 5210
+Building: KAI, Room 5210
 
 **Address:**<br/>
 Kaiserin-Augusta-Allee 104<br/>

diff --git a/_pages_en/updates.md b/_pages_en/updates.md
@@ -2,3 +2,9 @@
 title: Updates
 layout: blog
 ---
+
+<h3 style="margin: 0">If there are any timely VSP-related news or info items, they will be shared here.</h3>
+
+<p style="margin: 0 !important">In the past, we've used this page for IT/server downtime issues, etc.</p>
+
+---
diff --git a/_sass/_cobalt.scss b/_sass/_cobalt.scss
@@ -257,7 +257,7 @@ $link-hover-color: darken($link-color, 10%) !default;
 $link-active-color: darken($link-color, 20%) !default;
 
 // Borders
-$base-border-color: $light-gray !default;
+$base-border-color: #80808080 !default;
 $base-border-width: 1px !default;
 $base-border: $base-border-width solid $base-border-color !default;
 $base-border-radius: 0.25em !default;

diff --git a/_sass/_page.scss b/_sass/_page.scss
@@ -1,5 +1,5 @@
 .page-header {
-  border-bottom: 1px solid;
+  // border-bottom: 1px solid;
   padding-bottom: $box-padding;
   margin-bottom: $box-padding;
 }
@@ -20,7 +20,6 @@ $headline-max-size: 10em;
 
 .banner {
   position: relative;
-  background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/_sass/main.scss b/_sass/main.scss
@@ -8,7 +8,6 @@
 @import 'page';
 @import 'grid';
 @import 'highlight';
-// @import 'debug';
 
 // VSP Settings
 @font-face {
@@ -72,7 +71,7 @@ a.filter-link:active {
 }
 
 .paper-row:nth-child(odd) {
-  background-color: #efeff4;
+  background-color: var(--table-row-odd);
 }
 
 
@@ -164,7 +163,7 @@ header {
   position: sticky;
   top: 0;
   // Very opaque, for unsupported browsers. Overwritten in the feature queries below.
-  background: #d8d8ecf4; // hsl(0deg, 0%, 100%, 0.95);
+  background: var(--frosted-1); // hsl(0deg, 0%, 100%, 0.95);
   z-index: 2;
 }
 
@@ -174,7 +173,7 @@ header {
   (-webkit-backdrop-filter: blur(16px))
 {
   header {
-    background: #c8c8e470; // hsl(0deg, 0%, 0%, 0.5);
+    background: var(--frosted-2); // hsl(0deg, 0%, 0%, 0.5);
   }
 
   .frosty-backdrop {
@@ -185,11 +184,10 @@ header {
     backdrop-filter: blur(16px);
     background: linear-gradient(
       to bottom,
-      #d8d8e4,
+      var(--frosted-3),
       transparent 50%
     );
     pointer-events: none;
-    // #d8d8e4
   }
 }
   // This code gets applied for browsers that support mask-image.
@@ -220,8 +218,7 @@ header {
 // ---------------------------------------
 body {
   max-width: unset;
-  background-color: #eeeef4;
-
+  // background-color: #eeeef4;
 }
 
 h1,h2,h3,h4,h5,h6 {
@@ -307,7 +304,17 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 footer {
-  background-color: #eeeef4;
+  background-color: var(--frosted-1);
+}
+
+.post-title {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.post-meta {
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .frontpage {
@@ -332,12 +339,12 @@ footer {
 }
 
 .banner img {
-  filter: sepia(15%) hue-rotate(201deg) brightness(98%);
+  filter: var(--banner-image-filter);
 }
 
 @include media(max-width 60rem) {
   .header-container {
-    height: 6.5rem;
+    height: 7rem;
   }
   .navigation {
     margin-top: 0;
@@ -387,3 +394,53 @@ footer {
     font-size: 13px;
   }
 }
+
+
+// DARK MODE -------------------------------------
+/* Default (light) mode */
+:root {
+  --background-color: white;
+  --text-color: black;
+  --link-color: #26267e;
+  --frosted-1: #d8d8ecf4;
+  --frosted-2: #c8c8e470;
+  --frosted-3: #d8d8e4;
+  --banner-image-filter: sepia(15%) hue-rotate(201deg) brightness(98%);
+  --table-row-odd: #efeff4;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #121314; // 31719;
+    --text-color: #c0c0c0;
+    --link-color: #4d9aff;
+    --frosted-1: #222630f4;
+    --frosted-2: #26323470;
+    --frosted-3: #232632;
+    --banner-image-filter: brightness(97%) invert(100%) hue-rotate(-25deg);
+    --table-row-odd: #1e1f24;
+  }
+}
+
+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 */
+body, main, a {
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.invert-images img {
+  filter: invert(100%) hue-rotate(0deg);
+}
diff --git a/projects/freight.md b/projects/freight.md
@@ -4,6 +4,8 @@ title: Freight at VSP
 
 {% include i18n/i18n %}
 
+<div class="invert-images" markdown=1>
+
 ![Example Tour Planning for food/grocery transport in Berlin](/assets/images/berlin-freight-depots.jpg)
 _Example Tour Planning for depot-based food/grocery transport in Berlin_
 
@@ -38,17 +40,18 @@ All simulation runs for the scenario examining limited battery capacity are belo
 
 ### Food retailing scenarios: freight carrier visualizations
 
-<span style="color: green; font-weight: 500;">Without Range Constraints</span> assumes that battery capacity is not an issue for tour planning, e.g. due to recharging while loading/unloading.
+<span style="color: #158055; font-weight: 500;">Without Range Constraints</span> assumes that battery capacity is not an issue for tour planning, e.g. due to recharging while loading/unloading.
 
-<span style="color: green; font-weight: 500;">With Range Constraints</span>  assumes that battery capacity limits the tour length/duration: there is _no recharging possible_ during the tour.
+<span style="color: #158055; font-weight: 500;">With Range Constraints</span>  assumes that battery capacity limits the tour length/duration: there is _no recharging possible_ during the tour.
 
-| <span style="color: green; font-weight: 500;">Without Range Constraints:</span> | <span style="color: green; font-weight: 500;">With Range Constraints:</span> |
-|===|===|
+| <span style="color: #158055; font-weight: 500;">Without Range Constraints:</span> | <span style="color: #158055; font-weight: 500;">With Range Constraints:</span> |
+|---|---|
 | [![No Diesel CO2 Tax](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_wo_rangeConstraint/71_ICEVBEV_NwCE_BVWP_10000it_DCoff_noTax/viz-carriers.yaml)<br/>No Diesel Tax | [![No Diesel CO2 Tax](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_with_rangeConstraint/21_ICEVBEV_NwCE_BVWP_10000it_DC_noTax/viz-carriers.yaml)<br/>No Diesel Tax |
 | [![50 € per ton CO2](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_wo_rangeConstraint/73_ICEVBEV_NwCE_BVWP_10000it_DCoff_Tax50/viz-carriers.yaml)<br/>50 € per ton CO2 | [![50 € per ton CO2](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_with_rangeConstraint/23_ICEVBEV_NwCE_BVWP_10000it_DC_Tax50/viz-carriers.yaml)<br/>50 € per ton CO2 |
 |[![150 € per ton CO2](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_wo_rangeConstraint/75_ICEVBEV_NwCE_BVWP_10000it_DCoff_Tax150/viz-carriers.yaml)<br/>150 € per ton CO2 | [![50 € per ton CO2](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_with_rangeConstraint/25_ICEVBEV_NwCE_BVWP_10000it_DC_Tax150/viz-carriers.yaml)<br/>150 € per ton CO2 |
 | [![300 € per ton CO2](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_wo_rangeConstraint/78_ICEVBEV_NwCE_BVWP_10000it_DCoff_Tax300/viz-carriers.yaml)<br/>300 € per ton CO2 | [![300 € per ton CO2](/assets/images/freight-thumbnail.jpg)](https://vsp.berlin/simwrapper/public/de/berlin/projects/freight/foodRetailing_with_rangeConstraint/28_ICEVBEV_NwCE_BVWP_10000it_DC_Tax300/viz-carriers.yaml)<br/>300 € per ton CO2 |
-|---|---|
+
+</div>
 
 For both, we run multiple simulation runs with increasing variable costs per distance for the diesel trucks.
 

diff --git a/updates.md b/updates.md
@@ -2,3 +2,9 @@
 title: Neuigkeiten
 layout: blog
 ---
+
+<h3 style="margin: 0">Wenn es aktuelle VSP-bezogene Neuigkeiten oder Informationen gibt, werden sie hier veröffentlicht.</h3>
+
+<p style="margin: 0 !important">In der Vergangenheit haben wir diese Seite für IT-/Server-Ausfallzeiten usw. genutzt.</p>
+
+---