src/components/layout/TopBar.vue

@@ -1,6 +1,6 @@
 <template>
   <header class="bg-primary" id="topbar">
-    <div class="menu toolbar container fg-light d-block d-flex-sm">
+    <div class="menu toolbar fg-light d-block d-flex-sm">
       <ul>
         <li><router-link to="/" class="menu-item">Home</router-link></li>
         <li><router-link to="/about" class="menu-item">About</router-link></li>

src/styles/custom/_global.scss

@@ -1,25 +1,36 @@
 #topbar {
   position:fixed;
   width:100%;
+  z-index:2;
+  font-size: 0.85rem;
 }
 
 #wrapper {
   padding-top:3rem;
   display:flex;
-  height:100vh;
+  min-height:100vh;
 }
 
 #sidebar {
   padding-top:1rem;
+  padding-left:0.75rem;
   width:18rem;
+  position: fixed;
+  height: calc(100vh - 3rem);
+  overflow: scroll;
   h1 {
     text-align:center;
     padding-bottom:.5rem;
   }
+  .menu-item {
+    margin:3px;
+  }
+  font-size:0.85rem;
 }
 
 #page {
   flex-grow:1;
+  padding-left:18rem;
 }
 
 #content {

src/styles/definitions/_fonts.scss

@@ -1,7 +1,7 @@
 // FONTS
 // Define how looks the text
 
-$fontsize: 4.5mm;
+$fontsize: 4.75mm;
 
 $fontweight_big: 300;
 $fontweight_base: 400;