Added dark theme, draft variables and branding page

_config.yml

@@ -1,5 +1,5 @@
 title: I2P Styleguide
-logo: "/assets/images/horizontal_white.png"
+logo: "/assets/images/logo-white.svg"
 
 description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this

_includes/brand/colors.html

@@ -1,67 +1,54 @@
-<div id="colors" class="page-header mb-4">
+<div id="colors" class="col page-header mb-4">
   <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>
+  <p class="text-muted">The I2P brand currently consists of 2 primary colors and 2 secondary colors.</p>
 </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-primary text-white small">#4661A9</div>
-    <h6 class="pt2 text-left">Primary Color</h6>
+<div class="row pt-1 p-0">
+  <div class="col-md-6 col-xs-12 mb-3">
+    <h5 class="pb-3">Primary</h5>
+    <div class="bg-smallest">
+      <div class="row no-gutters">
+        <div class="col-md-6 col-sm-6">
+          <div class="row">
+            <div class="col-md-12 py-3">
+              <div class="curved background-indigo-600 mr-3"></div>
+                <span><strong>Free Speech Blue</strong><br>#526BCE<br>R82 G107 B206</span>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 col-sm-6">
+          <div class="row">
+            <div class="col-md-12 py-3">
+              <div class="curved background-indigo-900 mr-3"></div>
+              <span><strong>Deep Komaru</strong><br>#363A68<br>R54 G58 B104</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-  <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-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-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>
 
-
-<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-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-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-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-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-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-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-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 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-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>
-</div>
+  <div class="col-md-6 col-xs-12">
+    <h5 class="pb-3">Secondary</h5>
+    <div class="bg-smallest">
+      <div class="row no-gutters">
+        <div class="col-md-6 col-sm-6">
+          <div class="row">
+            <div class="col-md-12 col-sm-6 pt-3 mb-3">
+              <div class="curved background-teal-400 mr-3"></div>
+              <span><strong>Medium Torquoise</strong><br>#A6F8F8<br>R166 G248 B248</span>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 col-sm-6">
+          <div class="row">
+            <div class="col-md-12 py-3">
+              <div class="curved background-orange-400 mr-3"></div>
+              <span><strong>Sandy Brown</strong><br>#EF9252<br>R246 G173 B85</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

_includes/brand/logo.html

@@ -0,0 +1,231 @@
+<div id="logo" class="col page-header mb-5 mt-5">
+    <h2>Logo</h2>
+</div>
+
+<div class="row">
+    <div class="col-md-6 col-sm-12 mb-3">
+        <h5 class="pb-3">Composition (Horizontal)</h5>
+        <div class="bg-box text-center p-5">
+            <img src="{{ site.baseurl }}/assets/images/composition-horizontal.svg" alt="I2P Horizontal Composition">
+        </div>
+    </div>
+    <div class="col-md-6 col-sm-12">
+        <h5 class="pb-3">Composition (Vertical)</h5>
+        <div class="bg-box text-center p-5">
+            <img src="{{ site.baseurl }}/assets/images/composition-vertical.svg" alt="I2P Vertical Composition">
+        </div>
+    </div>
+</div>
+
+<div class="row my-5">
+    <div class="col-md-6 col-sm-12 mb-3">
+        <h5 class="pb-3">Safe Space (Horizontal)</h5>
+        <div class="bg-box text-center p-5">
+            <img src="{{ site.baseurl }}/assets//images/safespace-horizontal.svg" alt="I2P Safe Space Horizontal">
+        </div>
+    </div>
+    <div class="col-md-6 col-sm-12">
+        <h5 class="pb-3">Safe Space (Vertical)</h5>
+        <div class="bg-box text-center p-5">
+            <img src="{{ site.baseurl }}/assets//images/safespace-vertical.svg" alt="I2P Safe Space Vertical">
+        </div>
+    </div>
+</div>
+
+<div id="assets" class="col mb-4 mt-5">
+    <h4>Download Logo Assets</h4>
+</div>
+<div class="row mb-5">
+    <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
+        <div class="image flexing border p-4">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_color.png" alt="I2P Horizontal color logo">
+        </div>
+        <p class="mb-0 mt-2 caption">Horizontal Color Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_horizontal_color.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_horizontal_color.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
+        <div class="image flexing border p-4">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_black.png" alt="I2P Horizontal black logo">
+        </div>
+        <p class="mb-0 mt-2 caption">Horizontal Black Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_horizontal_black.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_horizontal_black.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
+        <div class="image flexing border p-4 background-indigo-600">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_white.png" alt="I2P Horizontal color logo with light background">
+        </div>
+        <p class="mb-0 mt-2 caption">Horizontal Color Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_horizontal_color_bg.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_horizontal_color_bg.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-12 col-md-3 col-sm-3 mb-4">
+        <div class="image flexing border p-4 background-black">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_horizontal_white.png" alt="I2P Horizontal white logo with black background">
+        </div>
+        <p class="mb-0 mt-2 caption">Horizontal White Black Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_horizontal_white_bg.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_horizontal_white_bg.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row pt-2">
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-4">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_color.png" alt="I2P Vertical color logo">
+        </div>
+        <p class="mb-0 mt-2 caption">Vertical Color Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_vertical_color.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_vertical_color.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-4">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_black.png" alt="I2P Vertical black logo">
+        </div>
+        <p class="mb-0 mt-2 caption">Vertical Black Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_vertical_black.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_vertical_black.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-4 background-indigo-600">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_white.png" alt="I2P Vertical color logo with light background">
+        </div>
+        <p class="mb-0 mt-2 caption">Vertical Color Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_vertical_color_bg.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_vertical_color_bg.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-4 background-black">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_vertical_white.png" alt="I2P Vertical white logo with black background">
+        </div>
+        <p class="mb-0 mt-2 caption">Vertical White Black Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_vertical_white_bg.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_vertical_white_bg.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row mb-5">
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-5">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_color.png" alt="I2P icon color logo">
+        </div>
+        <p class="mb-0 mt-2 caption">Icon Color Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_icon_color.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_icon_color.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-5">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_black.png" alt="I2P icon black logo">
+        </div>
+        <p class="mb-0 mt-2 caption">Icon Black Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_icon_black.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_icon_black.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-5 background-indigo-600">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_white.png" alt="I2P icon color logo with light background">
+        </div>
+        <p class="mb-0 mt-2 caption">Icon Color Light Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_icon_color_bg.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_icon_color_bg.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-sm-12 col-md-3 col-sm-3">
+        <div class="image border p-5 background-black">
+            <img class="rb-contain" src="{{ site.baseurl }}/assets/images/i2p_icon_white.png" alt="I2P icon white logo with black background">
+        </div>
+        <p class="mb-0 mt-2 caption">Icon White Black Background</p>
+        <div class="dropdown mb-5">
+            <button class="button btn btn-default-dropdown dropdown-toggle mt-2" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Download
+                          </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="/images/i2p_icon_white_bg.png" download>PNG</a>
+                <a class="dropdown-item" href="/images/i2p_icon_white_bg.svg" download>SVG</a>
+            </div>
+        </div>
+    </div>
+</div>