Make better header for visual essay

ubyssey · Mar 14, 2024 · f38847c · f38847c
1 parent 62f379a
commit f38847c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 47 deletions.
diff --git a/navigation/templates/navigation/headers/visual-essay-header.html b/navigation/templates/navigation/headers/visual-essay-header.html
@@ -7,12 +7,11 @@
       <a class="home-link" href="{% url 'wagtail_serve' '' %}">
         <div class="top-logo ubyssey_small_logo light-logo" style="background-image: url('{% static 'ubyssey/images/ubyssey-logo-small.svg' %}')" alt=""></div>
         <div class="top-logo ubyssey_small_logo dark-logo"  style="background-image: url('{% static 'ubyssey/images/ubyssey-logo 1.svg' %}')" alt=""></div>
-    </a>
+      </a>
     </div>
-    <nav class="visual-essay row">
-      <ul class="sections">
-        {% main_menu %}
-      </ul>
-    </nav>
+    <p class="section">From<a href="{{self.get_parent.full_url}}">{{self.get_parent.title}}</a></p>
+  </div>
+<div class="darkmode-toggle">
+  {% include 'article/objects/darkmode_button.html' with id="topbar" %}
 </div>
 </header>
diff --git a/ubyssey/static_src/src/styles/modules/_header.scss b/ubyssey/static_src/src/styles/modules/_header.scss
@@ -208,7 +208,7 @@ header.visual-essay{
   .logo-area {
     margin-top: 20px;
     margin-bottom: 20px;
-    height: 50px;
+    height: 35px;
     overflow: hidden;
 
     div.top-logo {
@@ -222,48 +222,23 @@ header.visual-essay{
     }  
   }
 
-  nav.visual-essay {
-
-    ul {
-      list-style-type: none;
-      padding: 0;
-      display: flex;
-      justify-content: space-between;
-      width: fit-content;
-      margin: auto;
-      gap: 2px;
-      background-color: var(--header_color);
-      li {
-        display: inline-block;
-      }
-
-      &.sections {
-        li {
-          font-family: "noto-sans","Helvetica Neue","Helvetica","Arial",sans-serif;
-          font-weight: 600;
-          color: var(--header_color);
-          text-transform: uppercase;
-          background-color: var(--background);
-          padding-left: 10px;
-          padding-right: 10px;
-          font-size: .875em;
-
-          &.current {
-            color: #0071C9;
-          }
-
-          @media($bp-smaller-than-phablet){
-            &:not(.current) {
-              display: none;
-            }
-            &.current {
-              color: white;
-            }
-          }        
-        }
-      }
+  .section {
+    margin-top: 0;
+    text-align: center;
+    font-family: nota-serif;
+    a {
+      margin-left: 0.2em;
+      font-family: nota-serif;
+      font-size: 2em;
+      vertical-align: sub;
+      text-decoration: underline;
     }
   }
+  .darkmode-toggle {
+    position: absolute;
+    right: 1em;
+    top: 1em;
+  }
 }
 
 // Mobile & topbar header