Added colors to Design page

_includes/components/alerts.html

@@ -1,5 +1,5 @@
-<div class="page-header mb-4">
-    <h2 id="alerts">Alerts</h2>
+<div id="alerts" class="col page-header mb-4">
+    <h2>Alerts</h2>
     <p class="text-muted">Some Description about alerts.</p>
 </div>
 <div class="row p-5 bg-light">

_includes/components/badges.html

@@ -1,4 +1,4 @@
-<div class="page-header mb-4">
+<div class="col page-header mb-4">
     <h2 id="badges">Badges</h2>
     <!--p class="text-muted">Some Description about badges.</p-->
 </div>

_includes/components/buttons.html

@@ -1,4 +1,4 @@
-<div id="buttons" class="mb-4">
+<div id="buttons" class="col mb-4">
     <h2>Buttons</h2>
     <!--p class="text-muted">Some Description about buttons.</p-->
 </div>

_includes/components/cards.html

@@ -1,4 +1,4 @@
-<div class="mb-4" id="cards">
+<div class="col mb-4" id="cards">
     <h2>Cards</h2>
     <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
         <div class="col-md-6 col-sm-12 col-xs-12">

_includes/components/footer.html

@@ -1,4 +1,4 @@
-<div id="footer" class="page-header mb-4">
+<div id="footer" class="col page-header mb-4">
     <h3>Footer</h3>
 </div>
 

_includes/components/forms.html

@@ -1,4 +1,4 @@
-<div class="page-header mb-4" id="forms">
+<div class="col page-header mb-4" id="forms">
     <h2>Forms</h2>
     <!--p class="text-muted">Some Description about Forms.</p-->
 </div>

_includes/components/jumbotron.html

@@ -1,4 +1,4 @@
-<div class="mb-4" id="jumbotron">
+<div class="col mb-4" id="jumbotron">
 	<h2  >Jumbotron</h2>
 	<div class="bg-light p-md-5 p-sm-3">
 		<div class="jumbotron bg-primary text-white">

_includes/components/navbar.html

@@ -1,4 +1,4 @@
-<div id="header" class="mb-4">
+<div id="header" class="col mb-4">
     <h2>Header</h2>
     <!--p class="text-muted">Some Description about buttons.</p-->
 </div>

_includes/components/paginate.html

@@ -1,4 +1,4 @@
-<div class="page-header mb-4 " id="pagination">
+<div class="col page-header mb-4 " id="pagination">
     <h2>Pagination</h2>
     <!--p class="text-muted">Some Description about pagination.</p-->
 </div>

_includes/components/scrollspy.html

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

_includes/components/tables.html

@@ -1,4 +1,4 @@
-<div class="page-header mb-4" id="tables">
+<div class="col page-header mb-4" id="tables">
     <h2>Tables</h2>
 </div>
     <div class="row bg-light p-5">

_includes/design/assets.html

@@ -1,88 +0,0 @@
-<div id="assets" class="page-header mb-4 mt-5">
-    <h2>Identity Assets</h2>
-    <p class="text-muted">The I2P brand assets are included here. Use them responsibly.</p>
-</div>
-<div class="row">
-    <div class="col-xs-6 col-sm-3">
-        <div class="image border p-5">
-            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_color.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">Default</span>
-            <span class="text-right color-primary rb-isBold" style="float: right;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_1.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-        </p>
-
-    </div>
-
-    <div class="col-xs-6 col-sm-3">
-        <div class="image border p-5 bg-dark">
-            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">White</span>
-            <span class="text-right color-primary rb-isBold" style="float: right;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_3.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-        </p>
-    </div>
-</div>
-
-
-    <div class="row pt-3">
-    	    <div class="col-md-2 col-sm-2">
-        <div class="image border p-5">
-            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_color.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">Default</span>
-            <div class="row">
-            <span class="text-right color-primary rb-isBold" style="float: left;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_5.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-            </div>
-        </p>
-    </div>
-    
-        <div class="col-md-2 col-sm-2">
-        <div class="image border p-5 bg-dark">
-            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_white.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">White</span>
-            <div class="row">
-            <span class="text-right color-primary rb-isBold" style="float: left;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_7.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-            </div>
-        </p>
-    </div>
-    </div>
-
-
-<div class="row mt-5">
-    <div class="col-md-6">
-        <div class="bg-box p-5 mb-3">
-            <h6>I2P repo</h6>
-            <p class="m-0">Download SVG and PNG files</p>
-            <a class="btn btn-lg btn-link p-0" title="I2P Repo"
-               href="https://github.com/uracreative/works/tree/master/I2P" target="_blank">Visit Repo</a></div>
-    </div>
-    <div class="col-md-6">
-        <div class="bg-box p-5 text-left">
-            <h6>Styleguide Mirror on Identihub</h6>
-            <p class="m-0">Identihub Project</p>
-            <a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/i2p"
-               target="_blank">Visit Project Page</a>
-        </div>
-    </div>
-</div>

_includes/design/grid.html

@@ -1,4 +1,4 @@
-<div id="grid" class="page-header mb-4 mt-5">
+<div id="grid" class="col page-header mb-4 mt-5">
     <h2>Grid</h2>
     <p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p>
 </div>

_includes/design/icons.html

@@ -1,23 +0,0 @@
-<div class="mt-5" id="icons">
-    <h2>Icons</h2>
-        <span>I2P uses the following <a href="../assets/fonts/i2p-iconfont.zip">icons</a> in its interface.</span>
-    <div class="mt-3">
-        <div class="mt-3">
-            <div class="row">
-                {% for icons_hash in page.icons %}
-                {% for icon in icons_hash %}
-                <div class="col-1 col-sm-1 text-center pt-1 pb-1">
-                    <div class="">
-                        <span class="{{ icon[1] }} text-muted" style="font-size:2rem;"></span>
-                    </div>
-                    <div class="mb-1 text-center">
-                        <span style="font-size: 0.7rem">{{icon[0]}}</span>
-                    </div>
-                </div>
-                {% endfor %}
-                {% endfor %}
-
-            </div>
-        </div>
-    </div>
-</div>

_includes/design/typography.html

@@ -1,4 +1,4 @@
-<div id="typography" class="page-header mb-4 mt-5">
+<div id="typography" class="col page-header mb-4 mt-5">
     <h2>Typography</h2>
     <p class="text-muted">I2P's main fonts are Source Sans Pro and Source Code Pro, made by Adobe.</p>
 </div>

_layouts/brand.html

@@ -14,7 +14,7 @@
           </div>
         </div>
       </div>
-        <div class="col-lg-9 pt-5 pl-sm-5">
+        <div class="col-lg-9 py-5 pl-sm-5">
           {% include brand/colors.html %}
           {% include brand/typography.html %}
           {% include brand/logo.html %}

_layouts/components.html

@@ -4,48 +4,26 @@
 <body>
 {% include navbar.html %}
 <div class="row">
-    <div class="col-md-3 hidden-sm p-0">
+    <div class="col-md-3 col-sm-5 hidden-sm p-0">
         <div class="row" style="height: 100%">
-            <div class="col-md-6 col-sm-16 col-xs-12 p-0">
+            <div class="col-md-6 col-sm-6 col-xs-6 p-0">
                 {% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
             </div>
-            <div class="col-md-6 col-sm-12 col-xs-3 p-0">
+            <div class="col-md-6 col-sm-6 col-xs-6 p-0">
                 {% include sidebar.html sidebarClassName="rb-sidebar__2" %}
             </div>
         </div>
     </div>
-    <div class="col-lg-9 pt-0 pl-sm-5">
-        <!--{{ content }}-->
-			<div class="component-wrapper my-5" id="">
+    <div class="col-lg-9 py-5 pl-sm-5">
         {% include components/alerts.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/badges.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/buttons.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/cards.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/footer.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/forms.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/navbar.html %}
-			</div>
-			<!--div class="component-wrapper my-5" id="">
-        {% include components/jumbotron.html %}
-			</div-->
-			<div class="component-wrapper my-5" id="">
         {% include components/paginate.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/tables.html %}
-			</div>
     </div>
 </div>
 {% include scripts.html %}

_layouts/design.html

@@ -14,13 +14,11 @@
           </div>
         </div>
       </div>
-        <div class="col-lg-9 pt-3 pl-sm-5">
+        <div class="col-lg-9 py-5 pb-5 pl-sm-5">
           {{ content }}
           {% include design/colors.html %}
           {% include design/grid.html %}
           {% include design/typography.html %}
-          {% include design/icons.html %}
-          {% include design/assets.html %}
           {% include scripts.html %}
       </div>
     </div>

_layouts/writing.html

@@ -14,7 +14,7 @@
             </div>
         </div>
     </div>
-    <div class="col-md-7 col-xs-12 col-sm-12 pl-sm-5">
+    <div class="col-md-7 py-5 pl-sm-5">
         {% include writing/personality.html %}
         {% include writing/language.html %}
     </div>

assets/styles/components.scss

@@ -259,6 +259,50 @@
   background-color: $orange-900;
 }
 
+.background-night-50 {
+  background-color: $night-50;
+}
+
+.background-night-100 {
+  background-color: $night-100;
+}
+
+.background-night-200 {
+  background-color: $night-200;
+}
+
+.background-night-300 {
+  background-color: $night-300;
+}
+
+.background-night-400 {
+  background-color: $night-400;
+}
+
+.background-night-500 {
+  background-color: $night-500;
+}
+
+.background-night-600 {
+  background-color: $night-600;
+}
+
+.background-night-700 {
+  background-color: $night-700;
+}
+
+.background-night-800 {
+  background-color: $night-800;
+}
+
+.background-night-900 {
+  background-color: $night-900;
+}
+
+.background-night-950 {
+  background-color: $night-950;
+}
+
 // Text colors
 
 .color-primary {
@@ -548,6 +592,7 @@ img {
 .theme-toggle {
   display: inline-flex;
   position: absolute;
+  cursor: pointer;
   top: 36px;
   right: 36px;
 }
@@ -561,7 +606,7 @@ img {
 }
 
 .dropdown-menu {
-  background-color: var(--box-bg);
+  background-color: var(--box) !important;
 }
 
 .dropdown-item {

assets/styles/layout.scss

@@ -198,4 +198,91 @@
   object-fit: contain;
   overflow: hidden;
   text-align: center;
+}
+
+// Colors
+
+.colors {
+  &:first-child {
+    .color-overview {
+      border-top-right-radius: $border-radius;
+      border-top-left-radius: $border-radius;
+    }
+  }
+
+  &:last-child {
+    .color-overview {
+      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:hover {
+      .color-overview {
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  .color-overview {
+    transition: .1s linear;
+    display: flex;
+
+    .variable {
+      flex-grow: 2;
+      color: $gray-900;
+    }
+
+    .hex {
+      transition: .15s linear;
+      opacity: 0;
+      color: $gray-900;
+    }
+  }
+
+  .color-details {
+    display: none;
+    flex-wrap: wrap;
+
+    .color-details--section {
+      flex-grow: 2;
+      flex-basis: 50%;
+
+      .pass { color: $indigo-700; }
+      .fail { color: $orange-500; }
+    }
+  }
+
+  // color-overview height + color-details height
+  .color-priority {
+    height: 128px;
+  }
+
+  &:hover {
+    .color-overview {
+      margin: 0 -8px 0 0;
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      transition: .15s linear;
+    }
+
+    > .color-details {
+      display: flex;
+    }
+
+  }
+}
+
+.palette {
+  &:hover {
+    .color-priority {
+      height: auto;
+    }
+    .hex {
+      opacity: 1;
+    }
+  }
+}
+
+.inverted {
+  color: $white !important;
 }

assets/styles/vars.scss

@@ -4,6 +4,7 @@ $warning: #FFC434;
 $danger: #E15647;
 $body-font: 'Inter', sans-serif !important;
 $header-font: 'Nunito', sans-serif !important;
+$border-radius: 5px;
 
 //  General
 

design.md

@@ -7,28 +7,4 @@
    - colors: Colors
    - grid: Grid
    - typography: Typography
-   - icons: Icons
-   - assets: Assets
- 
-  icons:
-    - Help: icon-i2p-help
-    - Mail: icon-i2p-mail
-    - Plugin: icon-i2p-plugin
-    - Router: icon-i2p-router
-    - Dashboard: icon-i2p-dashboard
-    - Bandwidth: icon-i2p-bandwidth
-    - Server: icon-i2p-server
-    - Paste: icon-i2p-paste
-    - Bug: icon-i2p-bug
-    - Docs: icon-i2p-docs
-    - Address Book: icon-i2p-address
-    - Wiki: icon-i2p-wiki
-    - Sync: icon-i2p-sync
-    - Power: icon-i2p-power
-    - Directory: icon-i2p-directory
-    - Fingerprint: icon-i2p-fingerprint
-    - Alert: icon-i2p-alert
-    - Valid: icon-i2p-valid
-    - Fast: icon-i2p-fast
-    - Anonymous: icon-i2p-anon
 ---