Fix/logo size (#444)

* Fix logo alignment in webshop * Fix header in event view
WISVCH · Oct 2, 2023 · 2c87a4e · 2c87a4e
1 parent e2a4ba9
commit 2c87a4e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/src/main/resources/static/css/wisvch-header.css b/src/main/resources/static/css/wisvch-header.css
@@ -47,15 +47,38 @@ body.menu-open .page-header {
     background-color: #ffffff;
 }
 
-@media (max-width: 991px){
-    .navbar-collapse {
-        padding-top: 3rem;
+.navbar-brand {
+    transform: translateY(30px);
+    margin-top: -30px;
+    margin-left: .5rem;
+}
+
+.navbar-brand img{
+    max-height: 4rem;
+}
+
+@media screen and (max-width: 500px) {
+    .navbar-brand {
+        transform: translateY(0);
+        margin-top: 0;
+        margin-left: 0;
+    }
+
+    .navbar-brand img{
+        max-height: 3rem;
+    }
+}
+
+@media screen and (max-width: 370px) {
+    .navbar-brand img{
+        max-height: 2rem;
     }
 }
 
-.navbar .logo img {
-    margin: .5rem;
-    height: 4rem;
+@media screen and (max-width: 1200px) and (min-width: 500px) {
+    .navbar-collapse {
+        padding-top: 2.5rem;
+    }
 }
 
 .wisv-header.header-left {

diff --git a/src/main/resources/templates/webshop/event.html b/src/main/resources/templates/webshop/event.html
@@ -38,10 +38,10 @@
 
     <!-- Top Bar -->
     <div class="wisv-header header-left">
-        <nav class="navbar navbar-expand-lg navbar-light wisv-header-bg">
-            <a class="logo" href="https://ch.tudelft.nl/">
-                <img src="https://ch.tudelft.nl/wp-content/themes/rechallenge/assets/images/ch-logo.png"
-                     alt="W.I.S.V. 'Christiaan Huygens'">
+        <nav class="navbar navbar-expand-xl navbar-light wisv-header-bg">
+            <a class="navbar-brand" href="https://ch.tudelft.nl/">
+                <img th:src=@{'/images/ch-logo.png'}
+                     alt="W.I.S.V. 'Christiaan Huygens'" >
             </a>
 
             <button class="navbar-toggler btn btn-secondary" type="button" data-toggle="collapse"

diff --git a/src/main/resources/templates/webshop/fragments/header.html b/src/main/resources/templates/webshop/fragments/header.html
@@ -5,10 +5,10 @@
 <header class="page-header" th:fragment="header (title, image)">
     <!-- Top Bar -->
     <div class="wisv-header header-left">
-        <nav class="navbar navbar-expand-lg navbar-light wisv-header-bg">
-            <a class="logo" href="https://ch.tudelft.nl/">
+        <nav class="navbar navbar-expand-xl navbar-light wisv-header-bg">
+            <a class="navbar-brand" href="https://ch.tudelft.nl/">
                 <img th:src=@{'/images/ch-logo.png'}
-                     alt="W.I.S.V. 'Christiaan Huygens'" style="position: absolute; top: 10px;">
+                     alt="W.I.S.V. 'Christiaan Huygens'" >
             </a>
 
             <button class="navbar-toggler btn btn-secondary" type="button" data-toggle="collapse"