nav and sidebars styling

_config.yml

@@ -14,7 +14,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 title: I2P Styleguide
-logo: "/assets/images/horizontal_color.png"
+logo: "/assets/images/horizontal_white.png"
 
 description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this

_includes/components/footer.html

@@ -1,4 +1,4 @@
-<div class="page-header mb-4">
+<div id="footer" class="page-header mb-4">
     <h3>Footer</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>

_includes/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
     <img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="40" width="auto" alt=""></img>
   </a>

_includes/navbar_side.html

@@ -1,23 +1,23 @@
 <div class="sidebar {{include.sidebarClassName}}" id="sidebar1">
   <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
-    <li class="list-group-item rb-main-sidebar">
-        <a href="{{site.baseurl}}/" class="sidebar__link__light">About</a>
-    </li>
+		<a href="{{site.baseurl}}/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">About</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="{{site.baseurl}}/getting-started/" class="sidebar__link__light">Getting Started</a>
-    </li>
+		<a href="{{site.baseurl}}/getting-started/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Getting Started</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="{{site.baseurl}}/visuals/" class="sidebar__link__light">Visuals</a>
-    </li>
+		<a href="{{site.baseurl}}/visuals/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Visuals</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="{{site.baseurl}}/components/" class="sidebar__link__light">Components</a>
-    </li>
+		<a href="{{site.baseurl}}/components/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Components</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="{{site.baseurl}}/copywriting/" class="sidebar__link__light">Copywriting</a>
-    </li>
+		<a href="{{site.baseurl}}/copywriting/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Copywriting</li>
+		</a>
   </ul>
 </div>

_includes/sidebar.html

@@ -1,4 +1,4 @@
-<div class="sidebar border-right {{ include.sidebarClassName }}" id="sidebar" style="border-color: $oc-gray-1;">
+<div class="sidebar border-left-right {{ include.sidebarClassName }}" id="sidebar" style="border-color: $oc-gray-1;">
   <ul class="p-0 list-group pt-3 sidebar-fill">
     {% for sidebar_hash in page.sidebar %}
       {% for link in sidebar_hash %}

_includes/visuals/typography.html

@@ -4,27 +4,37 @@
 </div>
 <div class="row">
     <div class="col-12">
-        <p class="text-black small text-muted">H1</p>
+        <p class="text-black small text-muted">H1
 					<h1>Protect communications from monitoring</h1>
-        <p class="text-black small text-muted">H2</p>
+				</p>
+        <p class="text-black small text-muted">H2
 					<h2>Protect communications from monitoring</h2>
-        <p class="text-black small text-muted">H3</p>
+				</p>
+        <p class="text-black small text-muted">H3
 					<h3>Protect communications from monitoring</h3>
-        <p class="text-black small text-muted">H4</p>
+				</p>
+        <p class="text-black small text-muted">H4
 					<h4>Protect communications from monitoring</h4>
-        <p class="text-black small text-muted">H5</p>
+				</p>
+        <p class="text-black small text-muted">H5
 					<h5>Protect communications from monitoring</h5>
-        <p class="text-black small text-muted">H6</p>
+				</p>
+        <p class="text-black small text-muted">H6
 					<h6>Protect communications from monitoring</h6>
+				</p>
 
-        <p class="text-black small pt-5 text-muted">H1 display</p>
+        <p class="text-black small pt-5 text-muted">H1 display
 					<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
-        <p class="text-black small text-muted">H2 display</p>
+				</p>
+        <p class="text-black small text-muted">H2 display
 					<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
-        <p class="text-black small text-muted">H3 display</p>
+				</p>
+        <p class="text-black small text-muted">H3 display
 					<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
-        <p class="text-black small text-muted">H4 display</p>
+				</p>
+        <p class="text-black small text-muted">H4 display
 					<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
+				</p>
     </div>
 </div>
 <div class="row pt-5">

_site/404.html

@@ -13,9 +13,9 @@
 </head>
 
   <body>
-    <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+    <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

_site/assets/javascript/index.js

@@ -16,16 +16,16 @@
 // });
 
 $(document).ready(function () {
-  var listItems = $('.rb-main-sidebar');
+  var listItems = $('.sidebar__link__light');
   $.each(listItems, function (key, litem) {
-      var aElement = $(this).children(litem)[0];
+      var aElement = $(litem)[0];
 
       if(aElement.href == document.URL.split('#')[0]) {
           $(litem).addClass('active');
       }
-	$("#sidebar-left li").click(function() {
+	$("#sidebar-left a li").click(function() {
   // Reset them
-  $("#sidebar-left li").removeClass("active");
+  $("#sidebar-left a li").removeClass("active");
   // Add to the clicked one only
   $(this).addClass("active");
 });

_site/assets/styles/layout.scss

@@ -24,7 +24,7 @@
     background-color: transparent;
     border: 0;
     border-radius: 0 !important;
-    font-size: 1.1rem;
+    font-size: 1rem;
      font-weight: 600 !important;
     padding-left: 1.1rem !important;
     // border-color: $oc-gray-4;
@@ -55,10 +55,10 @@
   margin: auto !important;
 }
 
-.active {
-  background-color: transparent !important;
-	box-shadow: inset 5px 0 $oc-white;
-  color: $secondary !important;
+.active,
+.active:hover {
+  background-color: "transparent"!important;
+	border-left: 5px solid $oc-white;
   font-weight: bold;
 
   & * {
@@ -67,19 +67,18 @@
 }
 
 .rb-sidebar__2 .active {
-	box-shadow: inset 5px 0 $primary;
-	color: $primary !important;
+	border-left: 5px solid $primary;
 }
 
 .rp-navbar__top {
-  background-color: $oc-white;
+  background-color: $primary;
 }
 
 // bootstrap navbar-light class is not working, overwriting classes to fix this
 //TODO fix this issue
 
 .navbar-light .navbar-toggler {
-	border-color: rgba(0,0,0,.5);
+	border-color: rgba(255,255,255,.5);
 }
 
 .navbar-light .navbar-toggler-icon {
@@ -87,10 +86,10 @@
 }
 
 .navbar-light .navbar-nav .nav-link {
-	color: rgba(0,0,0,.5);
+	color: rgba(255,255,255,.5);
 	
 	&:hover {
-		color: $oc-black;
+		color: $oc-white;
 	}
 }
 
@@ -146,15 +145,15 @@
 
 .list-group-item:focus, .list-group-item:hover {
   // background-color: $oc-gray-3 !important;
-	box-shadow: inset 5px 0 $oc-white;
+	border-left: 5px solid $primary;
 }
 
 .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover {
   // background-color: $oc-gray-3 !important;
-	box-shadow: inset 5px 0 $primary;
+	border-left: 5px solid $oc-white;
 }
-.sidebar .list-group-item {
-  width: 74.6%;
+.rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover {
+	border-left: 5px solid $primary;
 }
 
 .rb-sidebar__2 .list-group-item {

_site/assets/styles/main.css

@@ -4,7 +4,7 @@
 
 .sidebar { min-height: 100vh; height: 100%; width: 100%; }
 .sidebar .list-group { position: fixed; }
-.sidebar .list-group-item { background-color: transparent; border: 0; border-radius: 0 !important; font-size: 1.1rem; font-weight: 600 !important; padding-left: 1.1rem !important; }
+.sidebar .list-group-item { background-color: transparent; border: 0; border-radius: 0 !important; font-size: 1rem; font-weight: 600 !important; padding-left: 1.1rem !important; }
 
 .rb-sidebar__2 .list-group-item { color: #212529 !important; }
 
@@ -14,19 +14,19 @@
 
 .row { margin: auto !important; }
 
-.active { background-color: transparent !important; box-shadow: inset 5px 0 #ffffff; color: #60AB60 !important; font-weight: bold; }
-.active * { color: #ffffff !important; }
+.active, .active:hover { background-color: "transparent" !important; border-left: 5px solid #ffffff; font-weight: bold; }
+.active *, .active:hover * { color: #ffffff !important; }
 
-.rb-sidebar__2 .active { box-shadow: inset 5px 0 #4661A9; color: #4661A9 !important; }
+.rb-sidebar__2 .active { border-left: 5px solid #4661A9; }
 
-.rp-navbar__top { background-color: #ffffff; }
+.rp-navbar__top { background-color: #4661A9; }
 
-.navbar-light .navbar-toggler { border-color: rgba(0, 0, 0, 0.5); }
+.navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, 0.5); }
 
 .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
 
-.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.5); }
-.navbar-light .navbar-nav .nav-link:hover { color: #000000; }
+.navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }
+.navbar-light .navbar-nav .nav-link:hover { color: #ffffff; }
 
 .rb-sidebar__1 { background-color: #4661A9; }
 
@@ -49,11 +49,11 @@
 @media screen and (max-width: 991px) { .hidden-sm { display: none !important; } }
 .sidebar-fill { width: 12.45%; }
 
-.list-group-item:focus, .list-group-item:hover { box-shadow: inset 5px 0 #ffffff; }
+.list-group-item:focus, .list-group-item:hover { border-left: 5px solid #4661A9; }
 
-.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { box-shadow: inset 5px 0 #4661A9; }
+.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { border-left: 5px solid #ffffff; }
 
-.sidebar .list-group-item { width: 74.6%; }
+.rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover { border-left: 5px solid #4661A9; }
 
 .rb-sidebar__2 .list-group-item { width: 100%; }
 

_site/components/index.html

@@ -13,9 +13,9 @@
 </head>
 
 <body>
-<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -47,31 +47,31 @@
             <div class="col-md-6 col-sm-16 col-xs-12 p-0">
                 <div class="sidebar rb-sidebar__1" id="sidebar1">
   <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/" class="sidebar__link__light">About</a>
-    </li>
+		<a href="/i2p-styleguide/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">About</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a>
-    </li>
+		<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Getting Started</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a>
-    </li>
+		<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Visuals</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a>
-    </li>
+		<a href="/i2p-styleguide/components/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Components</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a>
-    </li>
+		<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Copywriting</li>
+		</a>
   </ul>
 </div>
 
             </div>
             <div class="col-md-6 col-sm-12 col-xs-3 p-0">
-                <div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
+                <div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
   <ul class="p-0 list-group pt-3 sidebar-fill">
     
       
@@ -303,7 +303,7 @@
 
 			</div>
 			<div class="component-wrapper my-5" id="">
-        <div class="page-header mb-4">
+        <div id="footer" class="page-header mb-4">
     <h3>Footer</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>
@@ -371,7 +371,7 @@
 <div class="bg-light p-5" id="">
 <nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
   <a class="navbar-brand mr-5" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

_site/copywriting/index.html

@@ -13,9 +13,9 @@
 </head>
 
 <body>
-<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -47,31 +47,31 @@
             <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
                 <div class="sidebar rb-sidebar__1" id="sidebar1">
   <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/" class="sidebar__link__light">About</a>
-    </li>
+		<a href="/i2p-styleguide/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">About</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a>
-    </li>
+		<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Getting Started</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a>
-    </li>
+		<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Visuals</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a>
-    </li>
+		<a href="/i2p-styleguide/components/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Components</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a>
-    </li>
+		<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Copywriting</li>
+		</a>
   </ul>
 </div>
 
             </div>
             <div class="col-md-6 col-sm-12 col-xs-2 p-0">
-                <div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
+                <div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
   <ul class="p-0 list-group pt-3 sidebar-fill">
     
       

_site/getting-started/index.html

@@ -13,9 +13,9 @@
 </head>
 
 <body>
-<nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -47,25 +47,25 @@
               <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
                   <div class="sidebar rb-sidebar__1" id="sidebar1">
   <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/" class="sidebar__link__light">About</a>
-    </li>
+		<a href="/i2p-styleguide/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">About</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a>
-    </li>
+		<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Getting Started</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a>
-    </li>
+		<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Visuals</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a>
-    </li>
+		<a href="/i2p-styleguide/components/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Components</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a>
-    </li>
+		<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Copywriting</li>
+		</a>
   </ul>
 </div>
 

_site/index.html

@@ -14,9 +14,9 @@
 
 
 <body>
-  <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+  <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -48,25 +48,25 @@
               <div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md sidebar-fill">
                   <div class="sidebar rb-sidebar__1" id="sidebar1">
   <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/" class="sidebar__link__light">About</a>
-    </li>
+		<a href="/i2p-styleguide/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">About</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a>
-    </li>
+		<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Getting Started</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a>
-    </li>
+		<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Visuals</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a>
-    </li>
+		<a href="/i2p-styleguide/components/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Components</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a>
-    </li>
+		<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Copywriting</li>
+		</a>
   </ul>
 </div>
 

_site/jekyll/update/2018/05/06/welcome-to-jekyll.html

@@ -13,9 +13,9 @@
 </head>
 
   <body>
-    <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+    <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

_site/visuals/index.html

@@ -13,9 +13,9 @@
 </head>
 
   <body>
-    <nav class="navbar navbar-expand-lg navbar-light border-bottom border-black sticky-top rp-navbar__top">
+    <nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top rp-navbar__top">
   <a class="navbar-brand" href="https://geti2p.net/">
-    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+    <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -47,31 +47,31 @@
           <div class="col-md-6 col-sm-6 col-xs-6 p-0">
             <div class="sidebar rb-sidebar__1" id="sidebar1">
   <ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group pt-3 sidebar-fill">
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/" class="sidebar__link__light">About</a>
-    </li>
+		<a href="/i2p-styleguide/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">About</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">Getting Started</a>
-    </li>
+		<a href="/i2p-styleguide/getting-started/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Getting Started</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/visuals/" class="sidebar__link__light">Visuals</a>
-    </li>
+		<a href="/i2p-styleguide/visuals/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Visuals</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/components/" class="sidebar__link__light">Components</a>
-    </li>
+		<a href="/i2p-styleguide/components/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Components</li>
+		</a>
 
-    <li class="list-group-item rb-main-sidebar">
-        <a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">Copywriting</a>
-    </li>
+		<a href="/i2p-styleguide/copywriting/" class="sidebar__link__light">
+			<li class="list-group-item rb-main-sidebar">Copywriting</li>
+		</a>
   </ul>
 </div>
 
           </div>
           <div class="col-md-6 col-sm-6 col-xs-6 p-0">
-            <div class="sidebar border-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
+            <div class="sidebar border-left-right rb-sidebar__2" id="sidebar" style="border-color: $oc-gray-1;">
   <ul class="p-0 list-group pt-3 sidebar-fill">
     
       
@@ -318,27 +318,37 @@
 </div>
 <div class="row">
     <div class="col-12">
-        <p class="text-black small text-muted">H1</p>
+        <p class="text-black small text-muted">H1
 					<h1>Protect communications from monitoring</h1>
-        <p class="text-black small text-muted">H2</p>
+				</p>
+        <p class="text-black small text-muted">H2
 					<h2>Protect communications from monitoring</h2>
-        <p class="text-black small text-muted">H3</p>
+				</p>
+        <p class="text-black small text-muted">H3
 					<h3>Protect communications from monitoring</h3>
-        <p class="text-black small text-muted">H4</p>
+				</p>
+        <p class="text-black small text-muted">H4
 					<h4>Protect communications from monitoring</h4>
-        <p class="text-black small text-muted">H5</p>
+				</p>
+        <p class="text-black small text-muted">H5
 					<h5>Protect communications from monitoring</h5>
-        <p class="text-black small text-muted">H6</p>
+				</p>
+        <p class="text-black small text-muted">H6
 					<h6>Protect communications from monitoring</h6>
+				</p>
 
-        <p class="text-black small pt-5 text-muted">H1 display</p>
+        <p class="text-black small pt-5 text-muted">H1 display
 					<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
-        <p class="text-black small text-muted">H2 display</p>
+				</p>
+        <p class="text-black small text-muted">H2 display
 					<h2 class="header-display color-secondary">I2P Anonymous Network</h2>
-        <p class="text-black small text-muted">H3 display</p>
+				</p>
+        <p class="text-black small text-muted">H3 display
 					<h3 class="header-display color-secondary">I2P Anonymous Network</h3>
-        <p class="text-black small text-muted">H4 display</p>
+				</p>
+        <p class="text-black small text-muted">H4 display
 					<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
+				</p>
     </div>
 </div>
 <div class="row pt-5">

assets/javascript/index.js

@@ -16,16 +16,16 @@
 // });
 
 $(document).ready(function () {
-  var listItems = $('.rb-main-sidebar');
+  var listItems = $('.sidebar__link__light');
   $.each(listItems, function (key, litem) {
-      var aElement = $(this).children(litem)[0];
+      var aElement = $(litem)[0];
 
       if(aElement.href == document.URL.split('#')[0]) {
           $(litem).addClass('active');
       }
-	$("#sidebar-left li").click(function() {
+	$("#sidebar-left a li").click(function() {
   // Reset them
-  $("#sidebar-left li").removeClass("active");
+  $("#sidebar-left a li").removeClass("active");
   // Add to the clicked one only
   $(this).addClass("active");
 });

assets/styles/layout.scss

@@ -24,7 +24,7 @@
     background-color: transparent;
     border: 0;
     border-radius: 0 !important;
-    font-size: 1.1rem;
+    font-size: 1rem;
      font-weight: 600 !important;
     padding-left: 1.1rem !important;
     // border-color: $oc-gray-4;
@@ -55,10 +55,10 @@
   margin: auto !important;
 }
 
-.active {
-  background-color: transparent !important;
-	box-shadow: inset 5px 0 $oc-white;
-  color: $secondary !important;
+.active,
+.active:hover {
+  background-color: "transparent"!important;
+	border-left: 5px solid $oc-white;
   font-weight: bold;
 
   & * {
@@ -67,19 +67,18 @@
 }
 
 .rb-sidebar__2 .active {
-	box-shadow: inset 5px 0 $primary;
-	color: $primary !important;
+	border-left: 5px solid $primary;
 }
 
 .rp-navbar__top {
-  background-color: $oc-white;
+  background-color: $primary;
 }
 
 // bootstrap navbar-light class is not working, overwriting classes to fix this
 //TODO fix this issue
 
 .navbar-light .navbar-toggler {
-	border-color: rgba(0,0,0,.5);
+	border-color: rgba(255,255,255,.5);
 }
 
 .navbar-light .navbar-toggler-icon {
@@ -87,10 +86,10 @@
 }
 
 .navbar-light .navbar-nav .nav-link {
-	color: rgba(0,0,0,.5);
+	color: rgba(255,255,255,.5);
 	
 	&:hover {
-		color: $oc-black;
+		color: $oc-white;
 	}
 }
 
@@ -146,15 +145,15 @@
 
 .list-group-item:focus, .list-group-item:hover {
   // background-color: $oc-gray-3 !important;
-	box-shadow: inset 5px 0 $oc-white;
+	border-left: 5px solid $primary;
 }
 
 .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover {
   // background-color: $oc-gray-3 !important;
-	box-shadow: inset 5px 0 $primary;
+	border-left: 5px solid $oc-white;
 }
-.sidebar .list-group-item {
-  width: 74.6%;
+.rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover {
+	border-left: 5px solid $primary;
 }
 
 .rb-sidebar__2 .list-group-item {