Renamed header to navigation. Added scss mixin for desktop and mobile. Separate mobile and desktop navigation elements. Transparent planetposen logos in assets/

frontend/styles/global.scss

@@ -1,3 +1,4 @@
+@import './frontend/styles/variables';
 
 .flex {
   display: flex;
@@ -14,4 +15,16 @@
 .flex-direction-column {
   display: flex;
   flex-direction: column;
+}
+
+@include desktop {
+  .mobile-only {
+    display: none;
+  }
+}
+
+@include mobile {
+  .desktop-only {
+    display: none;
+  }
 }

frontend/styles/variables.scss

@@ -1,3 +1,17 @@
 
 $green: #5cdb95;
-$text-color: #05386B;
+$text-color: #05386B;
+
+$mobile-width: 768px;
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$mobile-width + 1px}) {
+    @content;
+  }
+}