From 57cb728c55057e9cb4d2203c04e37e8575f98140 Mon Sep 17 00:00:00 2001
From: eupiteco <eupiteco@gmail.com>
Date: Sun, 26 Aug 2018 00:54:27 -0300
Subject: [PATCH] wider main section for visuals and components

---
 _includes/components/footer.html    |  6 +--
 _includes/components/navbar.html    |  2 +-
 _layouts/components.html            |  6 +--
 _layouts/visuals.html               |  2 +-
 _site/assets/styles/components.scss | 11 ++----
 _site/assets/styles/main.css        |  9 ++---
 _site/components/index.html         | 60 ++++++++++++++---------------
 _site/visuals/index.html            |  2 +-
 assets/styles/components.scss       | 11 ++----
 9 files changed, 51 insertions(+), 58 deletions(-)

diff --git a/_includes/components/footer.html b/_includes/components/footer.html
index df4c0a7..edacb48 100644
--- a/_includes/components/footer.html
+++ b/_includes/components/footer.html
@@ -4,7 +4,7 @@
 </div>
 
 <div class="footer col-12 p-5 background-primary text-white">
-	<div class="footer__wrapper col-lg-10 col-md-12 mx-auto" id="<++>">
+	<div class="footer__wrapper col-lg-11 col-md-12 mx-auto" >
 		<div class="row" id="footer-lists">
 			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
 				<span>I2P</span>
@@ -30,13 +30,13 @@
 			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
 				<span>Follow us</span>
 				<div class="footer__social-media" >
-					<li class="footer__social-media-icon " ></li>
+					<li class="footer__social-media-icon" ></li>
 					<li class="footer__social-media-icon" ></li>
 					<li class="footer__social-media-icon" ></li>
 			</div>
 			</ul>
 		</div>
-		<div class="spacer col-12" id=""></div>
+		<div class="spacer col-12" ></div>
 		<div class="footer-extras row">
 			<div class="col-lg-2 col-md-4 col-sm-6" >
 				<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
diff --git a/_includes/components/navbar.html b/_includes/components/navbar.html
index 48f70d9..03948b5 100644
--- a/_includes/components/navbar.html
+++ b/_includes/components/navbar.html
@@ -3,7 +3,7 @@
     <!--p class="text-muted">Some Description about buttons.</p-->
 </div>
 <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">
+<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end py-3" id="styleguide-nav" "style=background: $oc-white">
   <a class="navbar-brand mr-5" href="https://geti2p.net/">
     <img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="40" width="auto" alt=""></img>
   </a>
diff --git a/_layouts/components.html b/_layouts/components.html
index e87b842..0b4a572 100644
--- a/_layouts/components.html
+++ b/_layouts/components.html
@@ -14,7 +14,7 @@
             </div>
         </div>
     </div>
-    <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+    <div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
         <!--{{ content }}-->
 			<div class="component-wrapper my-5" id="">
         {% include components/alerts.html %}
@@ -29,10 +29,10 @@
         {% include components/cards.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">
-        {% include components/forms.html %}
+        {% include components/footer.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">
-        {% include components/footer.html %}
+        {% include components/forms.html %}
 			</div>
 			<div class="component-wrapper my-5" id="">
         {% include components/navbar.html %}
diff --git a/_layouts/visuals.html b/_layouts/visuals.html
index 1807065..f5c72ec 100644
--- a/_layouts/visuals.html
+++ b/_layouts/visuals.html
@@ -14,7 +14,7 @@
           </div>
         </div>
       </div>
-        <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+        <div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
           {{ content }}
           {% include /visuals/colors.html participants=site.data.profiles %}
           {% include /visuals/grid.html participants=site.data.profiles %}
diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss
index bd635fc..8103391 100644
--- a/_site/assets/styles/components.scss
+++ b/_site/assets/styles/components.scss
@@ -363,6 +363,7 @@
 			width: 75px;
 			height: 75px;
 			margin-right: 1rem;
+			margin-bottom: 1rem;
 			background-color: rgba(255,255,255,0.5);
 			border-radius: 75px;
 		}
@@ -381,16 +382,12 @@
 	}
 }
 #styleguide-nav {
-  background-color: $oc-gray-0 !important;
+  background-color: $primary !important;
 	.nav-item:hover {
-		box-shadow: inset 0 -5px $primary;
-
-		& .nav-link {
-			color: $primary;
-		}
+		box-shadow: inset 0 -5px $oc-white;
 	}
 	.nav-link {
-		color: $oc-gray-9;
+		color: $oc-white;
 	}
 
 	.show {
diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css
index f38f1e0..9c8ce9a 100644
--- a/_site/assets/styles/main.css
+++ b/_site/assets/styles/main.css
@@ -190,14 +190,13 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 .footer ul a { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
 .footer ul a:hover { color: #ffffff; }
 .footer__social-media { display: flex; }
-.footer__social-media-icon { content: " "; width: 75px; height: 75px; margin-right: 1rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 75px; }
+.footer__social-media-icon { content: " "; width: 75px; height: 75px; margin-right: 1rem; margin-bottom: 1rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 75px; }
 .footer-extras ul li { margin: 0 0.5rem; }
 .footer .spacer { content: " "; height: 2rem; }
 
-#styleguide-nav { background-color: #f8f9fa !important; }
-#styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; }
-#styleguide-nav .nav-item:hover .nav-link { color: #4661A9; }
-#styleguide-nav .nav-link { color: #212529; }
+#styleguide-nav { background-color: #4661A9 !important; }
+#styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #ffffff; }
+#styleguide-nav .nav-link { color: #ffffff; }
 #styleguide-nav .show .nav-item:hover { box-shadow: 0 0; }
 
 .rb-link { color: #4661A9 !important; }
diff --git a/_site/components/index.html b/_site/components/index.html
index d2b1d51..1de5a0a 100644
--- a/_site/components/index.html
+++ b/_site/components/index.html
@@ -140,7 +140,7 @@
             </div>
         </div>
     </div>
-    <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+    <div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
         <!--<p>This is the components page</p>
 -->
 			<div class="component-wrapper my-5" id="">
@@ -276,31 +276,6 @@
     </div>
 </div>
 
-			</div>
-			<div class="component-wrapper my-5" id="">
-        <div class="page-header mb-4" id="forms">
-    <h2>Forms</h2>
-    <!--p class="text-muted">Some Description about Forms.</p-->
-</div>
-<div class="row">
-    <form class="bg-light p-5 col-sm-6">
-        <div class="form-group">
-            <label for="exampleInputEmail1">Email address</label>
-            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
-        </div>
-        <div class="form-group">
-            <label for="exampleInputPassword1">Password</label>
-            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-        </div>
-        <div class="form-check">
-						<input type="checkbox" class="form-check-input" id="check_me_out">
-            <label for="check_me_out" class="form-check-label ml-2 mt-1">Check me out</label>
-        </div>
-        <button type="submit" class="btn btn-medium btn-pill mt-4" onclick="return false;">Submit</button>
-    </form>
-</div>
-
 			</div>
 			<div class="component-wrapper my-5" id="">
         <div id="footer" class="page-header mb-4">
@@ -309,7 +284,7 @@
 </div>
 
 <div class="footer col-12 p-5 background-primary text-white">
-	<div class="footer__wrapper col-lg-10 col-md-12 mx-auto" id="<++>">
+	<div class="footer__wrapper col-lg-11 col-md-12 mx-auto" >
 		<div class="row" id="footer-lists">
 			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="footer-i2p-menu">
 				<span>I2P</span>
@@ -335,13 +310,13 @@
 			<ul class="col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-5" id="footer-socialMedia-menu">
 				<span>Follow us</span>
 				<div class="footer__social-media" >
-					<li class="footer__social-media-icon " ></li>
+					<li class="footer__social-media-icon" ></li>
 					<li class="footer__social-media-icon" ></li>
 					<li class="footer__social-media-icon" ></li>
 			</div>
 			</ul>
 		</div>
-		<div class="spacer col-12" id=""></div>
+		<div class="spacer col-12" ></div>
 		<div class="footer-extras row">
 			<div class="col-lg-2 col-md-4 col-sm-6" >
 				<img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="img-fluid" />
@@ -362,6 +337,31 @@
 	</div>
 </div>
 
+			</div>
+			<div class="component-wrapper my-5" id="">
+        <div class="page-header mb-4" id="forms">
+    <h2>Forms</h2>
+    <!--p class="text-muted">Some Description about Forms.</p-->
+</div>
+<div class="row">
+    <form class="bg-light p-5 col-sm-6">
+        <div class="form-group">
+            <label for="exampleInputEmail1">Email address</label>
+            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+        </div>
+        <div class="form-group">
+            <label for="exampleInputPassword1">Password</label>
+            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+        </div>
+        <div class="form-check">
+						<input type="checkbox" class="form-check-input" id="check_me_out">
+            <label for="check_me_out" class="form-check-label ml-2 mt-1">Check me out</label>
+        </div>
+        <button type="submit" class="btn btn-medium btn-pill mt-4" onclick="return false;">Submit</button>
+    </form>
+</div>
+
 			</div>
 			<div class="component-wrapper my-5" id="">
         <div id="header" class="mb-4">
@@ -369,7 +369,7 @@
     <!--p class="text-muted">Some Description about buttons.</p-->
 </div>
 <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">
+<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end py-3" id="styleguide-nav" "style=background: $oc-white">
   <a class="navbar-brand mr-5" href="https://geti2p.net/">
     <img src="/i2p-styleguide/assets/images/horizontal_white.png" class="my-2" height="40" width="auto" alt=""></img>
   </a>
diff --git a/_site/visuals/index.html b/_site/visuals/index.html
index b788116..9f33d35 100644
--- a/_site/visuals/index.html
+++ b/_site/visuals/index.html
@@ -104,7 +104,7 @@
           </div>
         </div>
       </div>
-        <div class="col-md-9 col-xl-7 col-sm-12 col-xs-12 pt-3 pl-5">
+        <div class="col-md-9 col-sm-12 col-xs-12 pt-3 pl-5">
           
 
           <div id="colors" class="page-header mb-4">
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index bd635fc..8103391 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -363,6 +363,7 @@
 			width: 75px;
 			height: 75px;
 			margin-right: 1rem;
+			margin-bottom: 1rem;
 			background-color: rgba(255,255,255,0.5);
 			border-radius: 75px;
 		}
@@ -381,16 +382,12 @@
 	}
 }
 #styleguide-nav {
-  background-color: $oc-gray-0 !important;
+  background-color: $primary !important;
 	.nav-item:hover {
-		box-shadow: inset 0 -5px $primary;
-
-		& .nav-link {
-			color: $primary;
-		}
+		box-shadow: inset 0 -5px $oc-white;
 	}
 	.nav-link {
-		color: $oc-gray-9;
+		color: $oc-white;
 	}
 
 	.show {