From 7314ce68abf093985841f854bc7d991f24f58e10 Mon Sep 17 00:00:00 2001
From: Anxhelo Lushka <anxhelo1995@gmail.com>
Date: Sun, 28 Oct 2018 11:52:33 +0100
Subject: [PATCH] Changed colors columns

---
 _includes/design/colors.html | 35 +++++++++++++++++++----------------
 _site/assets/main.css        |  6 +++---
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/_includes/design/colors.html b/_includes/design/colors.html
index 3321dc1..d26d202 100644
--- a/_includes/design/colors.html
+++ b/_includes/design/colors.html
@@ -2,62 +2,65 @@
   <h2>Colors</h2>
   <p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
 </div>
+
 <div class="row">
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-primary text-white small">#4661A9</div>
     <h6 class="pt2 text-left">Primary Color</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-secondary text-white small">#60AB60</div>
     <h6 class="pt2 text-left">Secondary color</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-warning text-white small">#FFC434</div>
     <h6 class="pt2 text-left">Warning</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-danger text-white small">#E15647</div>
     <h6 class="pt2 text-left">Danger</h6>
   </div>
-    <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+</div>
+
+
+<div class="row">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
     <h6 class="pt2 text-left">Gray 0</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
     <h6 class="pt2 text-left">Gray 1</h6>
   </div>
-    <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
     <h6 class="pt2 text-left">Gray 2</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
     <h6 class="pt2 text-left">Gray 3</h6>
   </div>
-    <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
     <h6 class="pt2 text-left">Gray 4</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
     <h6 class="pt2 text-left">Gray 5</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
     <h6 class="pt2 text-left">Gray 6</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
     <h6 class="pt2 text-left">Gray 7</h6>
   </div>
-</div>
-<div class="row">
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
     <h6 class="pt2 text-left">Gray 8</h6>
   </div>
-  <div class="col-xs-12 col-sm-1 col-md-1 pl-1">
+  <div class="col-xs-12 col-sm-2 col-md-2">
     <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
     <h6 class="pt2 text-left">Gray 9</h6>
   </div>
diff --git a/_site/assets/main.css b/_site/assets/main.css
index 55e099d..83b9124 100644
--- a/_site/assets/main.css
+++ b/_site/assets/main.css
@@ -2,7 +2,7 @@
 body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
 
 /** Basic styling */
-body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }
+body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
 
 /** Set `margin-bottom` to maintain vertical rhythm */
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
@@ -78,7 +78,7 @@ table td { border: 1px solid #e8e8e8; }
 @media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
   .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
   .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
-  .site-nav .menu-icon > svg path { fill: #424242; }
+  .site-nav .menu-icon > svg { fill: #424242; }
   .site-nav input ~ .trigger { clear: both; display: none; }
   .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
   .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; }
@@ -105,7 +105,7 @@ table td { border: 1px solid #e8e8e8; }
   .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
 @media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
 /** Page content */
-.page-content { padding: 30px 0; }
+.page-content { padding: 30px 0; flex: 1; }
 
 .page-heading { font-size: 32px; }