Layout updates

src/app/app.vue

@@ -1,20 +1,27 @@
 <template>
   <div id="app">
-    <aside class="menu">
+    <header class="app-header">
       <router-link :to="{ path: '/' }">
-        <img class="menu-logo" :src="euromatLogo" width="140" height="140" />
+        <img :src="euromatLogo" width="90" height="90" />
       </router-link>
-      <app-menu
-        :main="topMenu"
-        :sub="subMenu"
-        :languages="languages"
-        :socialMedia="socialMedia" />
-    </aside>
+
+      <app-menu :main="topMenu" :languages="languages" />
+    </header>
 
     <main>
       <router-view></router-view>
     </main>
 
+    <footer>
+      <ul>
+        <li v-for="item of subMenu">
+          <router-link tag="a" class="btn btn-small btn-txt" :to="item.router">
+            {{ item.label }}
+          </router-link>
+        </li>
+      </ul>
+    </footer>
+
     <div class="app-background">
       <svgicon
         name="european-stars"
@@ -158,6 +165,7 @@
 
   h1 {
     margin: 0;
+    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
   }
 
   p {
@@ -173,29 +181,32 @@
   }
 
   #app {
-    max-width: $app-width;
-    width: 95vw;
+    width: 100vw;
     display: flex;
-    align-items: flex-start;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     position: relative;
-    margin: $base-gap * 3 0;
-
-    aside {
-      margin-right: $base-gap * 2;
-      position: relative;
-      flex: 0 0 140px;
-    }
 
     main {
       background: transparentize($background-primary, 0.5);
       width: 100%;
+      max-width: 900px;
       position: relative;
       z-index: 1;
     }
+
+    header,
+    footer {
+      width: 100%;
+    }
   }
 
-  .menu-logo {
-    margin-bottom: $small-gap;
+  .app-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $small-gap $small-gap 0 $small-gap;
   }
 
   .app-background {

src/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="app-menu">
     <ul class="top-menu">
       <li v-for="item of main">
         <router-link tag="a" :to="item.route">
@@ -17,38 +17,16 @@
         {{ lang.label }}
       </button>
     </div>
-
-    <ul class="sub-menu">
-      <li v-for="item of sub">
-        <router-link tag="a" class="btn btn-small btn-txt" :to="item.route">
-          {{ item.label }}
-        </router-link>
-      </li>
-    </ul>
-
-    <ul style="display:none;">
-      <li v-for="item of socialMedia">
-        <button>
-          {{ item.label }}
-        </button>
-      </li>
-    </ul>
   </div>
 </template>
 
 <script>
-  const getDefaultMenu = () => (
-    { label: 'Index', route: { path: '/' } }
-  )
-
   export default {
     name: 'Menu',
 
     props: {
-      main: { type: Array, default: () => [getDefaultMenu()] },
-      sub: { type: Array, default: () => [getDefaultMenu()] },
-      languages: { type: Array, default: () => [] },
-      socialMedia: { type: Array, default: () => [] }
+      main: { type: Array, default: () => [{ label: 'Index', route: { path: '/' } }] },
+      languages: { type: Array, default: () => [] }
     },
 
     methods: {
@@ -64,17 +42,20 @@
   @import "~styles/colors";
   @import "~styles/layout";
 
+  .app-menu {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
   ul {
     list-style: none;
   }
 
   .top-menu {
     text-align: right;
-    background: $background-secondary;
-    border-radius: $border-radius;
-    padding: 4px;
     width: 100%;
-    box-shadow: 0 0 22px $dark-blue;
+    display: flex;
 
     li:not(:last-child) {
       margin-bottom: 3px;
@@ -84,42 +65,18 @@
   a {
     text-decoration: none;
     font-weight: 600;
-    color: $blue;
-    border: 3px solid $blue;
+    border: 3px solid $button-background;
     border-radius: $border-radius;
     padding: 10px 20px;
     display: block;
   }
 
-  .sub-menu {
-    margin-top: $base-gap / 2;
-    color: $text-color-base;
-    font-weight: 500;
-    font-size: 85%;
-    text-align: center;
-
-    li:not(:last-child) {
-      margin-bottom: $small-gap;
-    }
-
-    a:hover {
-      color: $text-color-special !important;
-    }
-  }
-
   .menu-language {
-    margin-top: $base-gap / 2;
-    background: $dark-blue;
-    padding: 5px;
-    border-radius: $border-radius;
     display: flex;
     justify-content: space-around;
 
     button {
-      padding: 10px;
       font-size: 25px;
-      display: flex;
-      align-items: center;
     }
   }
 </style>

src/components/progress.vue

@@ -34,8 +34,9 @@
     }
 
     &::-webkit-progress-value {
-      background: $yellow;
+      background: linear-gradient(90deg, $yellow, $orange);
       border-radius: $border-radius;
+      box-shadow: 0 5px 34px transparentize($yellow, 0.6);
     }
   }
 </style>

src/styles/colors.scss

@@ -1,6 +1,7 @@
-$blue: #0828cc;
+$blue: #1e35d5;
 $dark-blue: #06069d;
-$yellow: #ffda00;
+$yellow: #fadc2a;
+$orange: #fa742a;
 
 $background-primary: $blue;
 $background-secondary: white;