improve page navigation styling

docs/src/components/PageNavigation/style.scss

@@ -1,14 +1,16 @@
 .page-navigation {
   display: flex;
   justify-content: space-between;
-  padding: 3rem 0;
+  padding: 2rem 0;
 
   &__link {
-    font-weight: 500;
     color: rgba($colorWhite, 0.6);
+    padding: 0.25rem 0.5rem;
+    border-radius: 5px;
 
     &:hover {
       color: $colorWhite;
+      background-color: rgba($colorWhite, 0.1);
     }
   }
 }

docs/src/layouts/App/index.vue

@@ -126,8 +126,8 @@
           <input class="app__search" type="search" placeholder="Search">
         </div>
       </div>
-      <div class="app__inner">
+      <main class="app__main">
-        <main class="app__main">
+        <div class="app__inner">
           <slot />
           <p>
             <br>
@@ -138,8 +138,12 @@
           <p>
             Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
           </p>
+        </div>
+      </main>
+      <div class="app__page-navigation">
+        <div class="app__inner">
           <page-navigation />
-        </main>
+        </div>
       </div>
     </div>
   </div>

docs/src/layouts/App/style.scss

@@ -1,177 +1,6 @@
 $navHeight: 4.5rem;
 $menuBreakPoint: 750px;
 
-// .app {
-//   display: flex;
-//   flex-direction: column;
-//   min-height: 100%;
-
-//   &__logo {
-//     font-weight: 700;
-//     font-size: 1.4rem;
-//   }
-
-//   &__link-group {
-//     margin-bottom: 2rem;
-//   }
-
-//   &__link-group-title {
-//     font-weight: 700;
-//     letter-spacing: 0.025rem;
-//     font-size: 0.75rem;
-//     text-transform: uppercase;
-//     color: rgba($colorWhite, 0.3);
-//     margin-bottom: 0.5rem;
-//   }
-
-//   &__link-list &__link-list {
-//     display: none;
-//     padding-left: 1rem;
-//     margin-top: 0.5rem;
-//     margin-bottom: 1.5rem;
-//     border-left: 2px solid rgba($colorWhite, 0.1);
-//   }
-
-//   .active + &__link-list {
-//     display: block;
-//   }
-
-//   &__link {
-//     display: block;
-//     padding: 0.1rem 0.5rem;
-//     border-radius: 5px;
-//     font-weight: 500;
-//     color: rgba($colorWhite, 0.6);
-//     margin-bottom: 0.2rem;
-//     margin-left: -0.5rem;
-
-//     &:hover {
-//       color: $colorWhite;
-//     }
-
-//     &.active {
-//       color: $colorWhite;
-//       background-color: rgba($colorWhite, 0.05);
-//     }
-
-//     &--draft {
-//       color: rgba($colorWhite, 0.2);
-//     }
-
-//     &--with-children::after {
-//       content: '→';
-//       color: rgba($colorWhite, 0.2);
-//     }
-//   }
-
-//   &__header {
-//     align-self: center;
-//     position: fixed;
-//     top: 0;
-//     z-index: 2;
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-//     width: 100%;
-//     height: $navHeight;
-//     flex: 0 0 auto;
-//     background-color: rgba($colorBlack, 0.7);
-//     border-bottom: 1px solid rgba($colorWhite, 0.05);
-//     backdrop-filter: blur(10px);
-//   }
-
-//   &__header-inner {
-//     width: 100%;
-//     display: flex;
-//     align-items: center;
-//     justify-content: space-between;
-//     max-width: 62rem;
-//     margin: 0 auto;
-//     padding: 0 1rem;
-
-//     @media (min-width: $menuBreakPoint) {
-//       padding: 0 2rem;
-//     }
-//   }
-
-//   &__content {
-//     position: relative;
-//     z-index: 1;
-//     flex: 1 1 auto;
-//     display: flex;
-//     width: 100%;
-//     max-width: 62rem;
-//     margin: 0 auto;
-//     padding-left: 1rem;
-//     padding-right: 1rem;
-
-//     @media (min-width: $menuBreakPoint) {
-//       padding-left: 2rem;
-//       padding-right: 2rem;
-//     }
-//   }
-
-//   &__menu-icon,
-//   &__close-icon {
-//     border: none;
-//     padding: 0;
-//     background-color: transparent;
-//     margin-left: 1rem;
-
-//     @media (min-width: $menuBreakPoint) {
-//       display: none;
-//     }
-//   }
-
-//   &__sidebar-wrapper {
-//     position: fixed;
-//     z-index: 2;
-//     top: $navHeight;
-//     bottom: 0;
-//     left: 0;
-//     right: 0;
-//     // background-color: $colorBackground;
-//     padding-left: 1rem;
-//     padding-right: 1rem;
-//     visibility: hidden;
-//     opacity: 0;
-
-//     &.is-mobile-visible {
-//       visibility: visible;
-//       opacity: 1;
-//     }
-
-//     @media (min-width: $menuBreakPoint) {
-//       visibility: visible;
-//       opacity: 1;
-//       position: sticky;
-//       flex: 0 0 auto;
-//       align-self: flex-start;
-//       top: 0;
-//       width: 18rem;
-//       height: 100vh;
-//       padding-left: 0;
-//       padding-right: 0;
-//       padding-right: 3rem;
-//       padding-top: $navHeight;
-//     }
-//   }
-
-//   &__sidebar {
-//     overflow: auto;
-//     height: 100%;
-//     padding-top: 2rem;
-//     padding-left: 0.5rem;
-//     margin-left: -0.5rem;
-//   }
-
-//   &__main {
-//     flex: 1 1 auto;
-//     min-width: 0;
-//     padding-top: $navHeight + 2rem;
-//   }
-// }
-
 .app {
   display: flex;
 
@@ -225,7 +54,6 @@ $menuBreakPoint: 750px;
   &__content {
     flex: 1 1 auto;
     min-width: 0;
-    padding: 0 2rem 2rem 2rem;
   }
 
   &__top-bar {
@@ -252,7 +80,8 @@ $menuBreakPoint: 750px;
 
   &__inner {
     margin: 0 auto;
-    max-width: 45rem;
+    max-width: 50rem;
+    padding: 0 2rem;
   }
 
   &__link-group {
@@ -308,6 +137,10 @@ $menuBreakPoint: 750px;
   }
 
   &__main {
-    margin-top: 2rem;
+    padding: 2rem 0;
+  }
+
+  &__page-navigation {
+    border-top: 1px solid rgba($colorWhite, 0.1);
   }
 }