responsive and sidebar styles

Author: cwaring

docs/.vuepress/theme/components/Breadcrumbs.vue

@@ -46,16 +46,19 @@ export default {
 nav
   border-bottom 1px solid #eaecef
   font-size 0.9em
-  padding: 2em 0
-  margin: 0 2.5em
+  padding: 1.5rem 2rem
+
+  @media (min-width: $MQMobile)
+    padding: 1.5rem 0
+    margin: 0 2.5em
+
   &.fixed
     position fixed
-    z-index 10
+    z-index 5
     background-color #fff
     width 100%
     max-width 740px
     display flex
-
 .breadcrumb
   margin-right: 0.5em
   &:not(:first-child)::before

docs/.vuepress/theme/styles/index.styl

@@ -7,7 +7,12 @@
 
 // stop sidebar taking up horizontal width and adjusting layout position
 html {
-	margin-left: calc(100vw - 100%);
+	@media (min-width: $MQMobile) {
+		margin-left: calc(100vw - 100%);
+	}
+
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 // apply scrolling by default excluding firefox due to trigger issues

docs/.vuepress/theme/styles/sidebar.styl

@@ -21,27 +21,16 @@ header.navbar .nav-links {
 	}
 
 	.sidebar-heading {
-		font-weight: 700 !important;
+		font-weight: bold !important;
 	}
 
 	.sidebar-group.is-sub-group a.sidebar-link {
 		margin-bottom: 0.2rem;
 	}
 
-	.sidebar-group.is-sub-group {
-		margin-bottom: 0.5rem;
-	}
-
-	.sidebar-links.sidebar-group-items li:last-child .sidebar-group.is-sub-group {
-		margin-bottom: 0;
-	}
-
 	.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
-		opacity: 1;
-		font-weight: bold;
 		text-transform: uppercase;
 		font-size: 0.8rem;
-		letter-spacing: 0.05em;
 		line-height: 2em;
 	}
 }
@@ -80,6 +69,13 @@ header.navbar .nav-links {
 		overflow: hidden;
 
 		> .sidebar-links {
+			opacity: 0.5;
+			transition: opacity 0.5s;
+
+			&:hover {
+				opacity: 1;
+			}
+
 			overflow: auto;
 			padding-bottom: 6em;
 		}
@@ -95,7 +91,6 @@ header.navbar .nav-links {
 		.nav-item > a:not(.external) {
 			&:hover, &.router-link-active {
 				margin-bottom: 0px;
-				// background: lighten($accentColor, 95%);
 				border-bottom: none;
 				color: $accentColor;
 			}