uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Added dark theme, draft variables and branding page

main
Anxhelo Lushka 5 years ago
parent
16702ba1cd
commit
fc86b36751
No known key found for this signature in database GPG Key ID: C86D6CF1F7FAAA35
42 changed files with 767 additions and 168 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      _config.yml
  2. 79
      _includes/brand/colors.html
  3. 231
      _includes/brand/logo.html
  4. 26
      _includes/brand/typography.html
  5. 67
      _includes/head.html
  6. 7
      _includes/navbar.html
  7. 2
      _includes/navbar_side.html
  8. 1
      _includes/scripts.html
  9. 4
      _includes/sidebar.html
  10. 4
      _includes/sidebar_2.html
  11. 4
      _layouts/brand.html
  12. 4
      _layouts/components.html
  13. 2
      _layouts/default.html
  14. 4
      _layouts/design.html
  15. 2
      _layouts/getting-started.html
  16. 2
      _layouts/home.html
  17. 6
      _layouts/writing.html
  18. 18
      assets/images/composition-horizontal.svg
  19. 19
      assets/images/composition-vertical.svg
  20. BIN
      assets/images/horizontal_color.png
  21. 5
      assets/images/i2p-wordmark.svg
  22. BIN
      assets/images/i2p_horizontal_black.png
  23. BIN
      assets/images/i2p_horizontal_color.png
  24. 0
      assets/images/i2p_horizontal_white.png
  25. BIN
      assets/images/i2p_icon_black.png
  26. BIN
      assets/images/i2p_icon_color.png
  27. BIN
      assets/images/i2p_icon_white.png
  28. BIN
      assets/images/i2p_vertical_black.png
  29. BIN
      assets/images/i2p_vertical_color.png
  30. BIN
      assets/images/i2p_vertical_white.png
  31. BIN
      assets/images/icon_color.png
  32. BIN
      assets/images/icon_white.png
  33. 6
      assets/images/logo-white.svg
  34. BIN
      assets/images/vertical_color.png
  35. BIN
      assets/images/vertical_white.png
  36. 19
      assets/javascript/index.js
  37. 4
      assets/javascript/popper.min.js
  38. 90
      assets/styles/components.scss
  39. 74
      assets/styles/layout.scss
  40. 118
      assets/styles/main.scss
  41. 91
      assets/styles/vars.scss
  42. 6
      assets/styles/visuals.scss

2
_config.yml
View File

@ -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

79
_includes/brand/colors.html
View File

@ -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 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-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="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 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="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-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 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 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 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 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>

231
_includes/brand/logo.html
View File

@ -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>

26
_includes/brand/typography.html
View File

@ -0,0 +1,26 @@
<div id="typography" class="col page-header mb-4 mt-5">
<h2>Typography</h2>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="bg-box">
<p class="font-20 pt-2">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
<p class="font-20">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p class="font-20 mb-2">0 1 2 3 4 5 6 7 8 9</p>
</div>
<p class="pt-3">All marketing materials use the Nunito typeface for the headers and the Inter typeface by Rasmus Andersson for the text body. Both fonts are licensed under the Open Font License v1.1</p>
</div>
<div class="col-md-6 col-sm-12">
<div class="bg-box text-center p-5">
<svg width="174" height="94" viewBox="0 0 174 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="logo-text-switch" d="M87.4654 73.5123H64.1721V72.9798L72.7713 65.8169C93.691 48.417 99.0216 39.3755 99.0216 28.7667C99.0216 11.6782 85.0013 0.486816 63.0055 0.486816C45.3444 0.486816 32.8026 8.58401 29.0009 22.287C27.7034 26.9785 31.1934 31.6299 36.0713 31.6299H45.2639C48.4321 31.6299 51.1778 29.5805 52.2338 26.6068C53.843 22.086 57.7956 19.6348 63.0055 19.6348C69.8647 19.6348 74.7426 23.8843 74.7426 30.9066C74.7426 37.3964 70.5788 41.5957 63.8101 47.1914L37.7308 68.7403C32.5713 72.9999 29.5842 79.339 29.5842 86.0298C29.5842 90.0884 32.873 93.3735 36.9363 93.3735H92.6551C96.7184 93.3735 100.007 90.0884 100.007 86.0298C100.007 79.118 94.385 73.5123 87.4654 73.5123Z"/>
<path class="logo-text-switch" d="M15.2519 1.74268C7.66846 1.74268 0.939941 7.88087 0.939941 15.4657V86.5221C0.939941 90.3095 4.0075 93.3736 7.7992 93.3736H14.9099C18.7116 93.3736 21.7893 90.2995 21.7893 86.502V67.3139V41.2441V27.2197V8.26263C21.7792 4.6661 18.8525 1.74268 15.2519 1.74268Z"/>
<path class="logo-text-switch" d="M139.955 1.74268H127.585H127.575H120.474C112.891 1.74268 106.735 7.88087 106.735 15.4657V86.5221C106.735 90.3095 109.803 93.3736 113.595 93.3736H120.705C124.507 93.3736 127.585 90.2995 127.585 86.502V71.2319V67.3139C127.585 66.681 128.098 66.1686 128.731 66.1686H139.06C159.98 66.1686 174 53.8621 174 34.1315C174 14.6319 160.342 1.74268 139.955 1.74268ZM137.622 46.8499H135.53H133.991H129.184C128.319 46.8499 127.615 46.1667 127.585 45.3028V27.2197C127.585 24.1255 130.451 21.614 133.991 21.614H137.612C147.589 21.614 153.583 26.2653 153.583 34.1415C153.583 41.9675 147.599 46.8499 137.622 46.8499Z"/>
</svg>
</div>
<div class="alert alert-warning mt-3" role="alert">
A modified <a class="underline" href="https://www.fontsquirrel.com/fonts/sinkin-sans" target="_blank" rel="noopener">Nunito</a> font is used for the I2P wordmark. Its use is limited to the I2P logo exclusively and should not be used elsewhere.
</div>
</div>
</div>

67
_includes/head.html
View File

@ -7,3 +7,70 @@
<link href="{{'/assets/fonts/i2p.css' | prepend: site.baseurl}}" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script> // Theme check on load
(function () {
var theme = window.localStorage.getItem("theme");
if (theme) {
document.documentElement.dataset.theme = theme;
}
}());
</script>
<script> // Detect media preference changes such as changing themes in browser/system
(function() {
var mqDark = window.matchMedia('(prefers-color-scheme: dark)');
var mqLight = window.matchMedia('(prefers-color-scheme: light)');
var theme = window.localStorage.getItem('theme');
function checkTheme(event) {
if (event.matches) {
if (event.media.includes('dark')) {
document.documentElement.dataset.theme = 'dark';
}
if (event.media.includes('light')) {
document.documentElement.dataset.theme = 'light';
}
}
}
if (!theme) {
try {
mqDark.addEventListener('change', checkTheme);
mqLight.addEventListener('change', checkTheme);
} catch (maybeSafari) {
try {
mqDark.addListener(checkTheme);
mqLight.addListener(checkTheme);
} catch (dontknow) {
// not supported…
}
}
}
}());
</script>
<script> // Asks on first time if you want to check out the dark theme
(function() {
var theme = window.localStorage.getItem('theme');
function revokeTheme() {
if (!window.confirm('Do you want to stay with that theme?')) {
window.localStorage.removeItem('theme');
document.documentElement.dataset.theme = null;
}
}
if (!theme) {
if (window.confirm('This page offers a "dark" theme, you want to try it?')) {
window.localStorage.setItem('theme', 'dark');
document.documentElement.dataset.theme = 'dark';
window.setTimeout(revokeTheme, 3000);
} else {
window.localStorage.setItem('theme', 'light');
document.documentElement.dataset.theme = 'light';
}
}
}())
</script>

7
_includes/navbar.html
View File

@ -1,7 +1,10 @@
<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-black sticky-top navbar__top">
<nav class="navbar navbar-expand-lg navbar-dark sticky-top navbar__top">
<a class="navbar-brand" href="{{ site.baseurl }}/">
<img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="50" width="auto" alt=""></img>
<img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="60px" width="auto" alt="I2P logo"></img>
</a>
<span class="theme-toggle unselectable">
<svg id="themer" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</span>
<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>
</button>

2
_includes/navbar_side.html
View File

@ -1,5 +1,5 @@
<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">
<ul id="sidebar-left" class="col-md-2 col-sm-16 col-xs-12 p-0 list-group sidebar-fill">
<a href="{{site.baseurl}}/getting-started/" class="sidebar__link__light">
<li class="list-group-item rb-main-sidebar">Getting Started</li>
</a>

1
_includes/scripts.html
View File

@ -1,4 +1,5 @@
<!--<script src="{{'/assets/javascript/modernizr.min.js' | prepend: site.baseurl}}"></script>-->
<script src="{{'/assets/javascript/jquery-3.4.1.slim.min.js' | prepend: site.baseurl}}"></script>
<script src="{{'/assets/javascript/popper.min.js' | prepend: site.baseurl}}"></script>
<script src="{{'/assets/javascript/bootstrap.min.js' | prepend: site.baseurl}}"></script>
<script type="text/javascript" src="{{'/assets/javascript/index.js' | prepend: site.baseurl}}"></script>

4
_includes/sidebar.html
View File

@ -1,5 +1,5 @@
<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">
<div class="sidebar {{ include.sidebarClassName }}" id="sidebar">
<ul class="p-0 list-group sidebar-fill">
{% for sidebar_hash in page.sidebar %}
{% for link in sidebar_hash %}
<a class="sidebar__link__light" href="#{{ link[0] }}"><li class="list-group-item rb-sidebar">

4
_includes/sidebar_2.html
View File

@ -1,5 +1,5 @@
<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">
<div class="sidebar {{ include.sidebarClassName }}" id="sidebar">
<ul class="p-0 list-group sidebar-fill">
{% for sidebar_hash in page.sidebar %}
{% for link in sidebar_hash %}
<a class="sidebar__link__light" href="{{ link[0] }}"><li class="list-group-item rb-sidebar">

4
_layouts/brand.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" data-theme="light">
{% include head.html %}
<body>
{% include navbar.html %}
@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="col-lg-9 pt-3 pl-5">
<div class="col-lg-9 pt-5 pl-sm-5">
{% include brand/colors.html %}
{% include brand/typography.html %}
{% include brand/logo.html %}

4
_layouts/components.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" data-theme="light">
{% include head.html %}
<body>
{% include navbar.html %}
@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="col-lg-9 pt-0 pl-5">
<div class="col-lg-9 pt-0 pl-sm-5">
<!--{{ content }}-->
<div class="component-wrapper my-5" id="">
{% include components/alerts.html %}

2
_layouts/default.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" data-theme="light">
{% include head.html %}
<body>
{% include navbar.html %}

4
_layouts/design.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" data-theme="light">
{% include head.html %}
<body>
{% include navbar.html %}
@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="col-lg-9 pt-3 pl-5">
<div class="col-lg-9 pt-3 pl-sm-5">
{{ content }}
{% include design/colors.html %}
{% include design/grid.html %}

2
_layouts/getting-started.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" data-theme="light">
{% include head.html %}
<body>
{% include navbar.html %}

2
_layouts/home.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" data-theme="light">
{% include head.html %}
<body>

6
_layouts/writing.html
View File

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<html lang="en" dir="ltr" data-theme="light">
{% include head.html %}
<body>
{% include navbar.html %}
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-4 p-0">
<div class="col-md-3 col-sm-4 hidden-sm col-xs-4 p-0">
<div class="row" style="height: 100%">
<div class="col-md-6 col-sm-6 col-xs-6 p-0 display-md">
{% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="col-md-7 col-xs-12 col-sm-12 pl-4 pr-4">
<div class="col-md-7 col-xs-12 col-sm-12 pl-sm-5">
{% include writing/personality.html %}
{% include writing/language.html %}
</div>

18
assets/images/composition-horizontal.svg
View File

@ -0,0 +1,18 @@
<svg width="522" height="386" viewBox="0 0 522 386" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M352.006 19H353.653L356.04 10.6193H356.21L358.597 19H360.244L363.568 8.09091H361.807L359.449 16.4148H359.335L357.034 8.09091H355.244L352.915 16.4432H352.801L350.443 8.09091H348.682L352.006 19ZM369.845 19.2273C372.799 19.2273 374.788 16.983 374.788 13.6023C374.788 10.1932 372.799 7.94886 369.845 7.94886C366.89 7.94886 364.902 10.1932 364.902 13.6023C364.902 16.983 366.89 19.2273 369.845 19.2273ZM369.845 17.7216C367.6 17.7216 366.578 15.7898 366.578 13.6023C366.578 11.4148 367.6 9.45455 369.845 9.45455C372.089 9.45455 373.112 11.4148 373.112 13.6023C373.112 15.7898 372.089 17.7216 369.845 17.7216ZM377.347 19H379.023V12.0966C379.023 10.6193 380.188 9.53977 381.778 9.53977C382.226 9.53977 382.688 9.625 382.801 9.65341V7.94886C382.609 7.93466 382.169 7.92045 381.92 7.92045C380.614 7.92045 379.477 8.65909 379.08 9.73864H378.966V8.09091H377.347V19ZM388.575 19.2273C390.678 19.2273 391.388 17.9205 391.757 17.3239H391.956V19H393.575V4.45455H391.899V9.82386H391.757C391.388 9.25568 390.734 7.94886 388.604 7.94886C385.848 7.94886 383.945 10.1364 383.945 13.5739C383.945 17.0398 385.848 19.2273 388.575 19.2273ZM388.803 17.7216C386.7 17.7216 385.621 15.875 385.621 13.5455C385.621 11.2443 386.672 9.45455 388.803 9.45455C390.848 9.45455 391.928 11.1023 391.928 13.5455C391.928 16.017 390.82 17.7216 388.803 17.7216ZM396.878 19H398.554V12.1818C398.554 10.5838 399.719 9.45455 401.026 9.45455C402.297 9.45455 403.185 10.2855 403.185 11.5284V19H404.889V11.8977C404.889 10.4915 405.77 9.45455 407.304 9.45455C408.497 9.45455 409.52 10.0866 409.52 11.6989V19H411.196V11.6989C411.196 9.13494 409.818 7.94886 407.872 7.94886C406.31 7.94886 405.166 8.66619 404.605 9.79545H404.491C403.952 8.63068 403 7.94886 401.565 7.94886C400.145 7.94886 399.094 8.63068 398.639 9.79545H398.497V8.09091H396.878V19ZM417.471 19.2557C419.374 19.2557 420.369 18.233 420.71 17.5227H420.795V19H422.471V11.8125C422.471 8.34659 419.829 7.94886 418.437 7.94886C416.789 7.94886 414.914 8.51705 414.062 10.5057L415.653 11.0739C416.022 10.2784 416.896 9.42614 418.494 9.42614C420.035 9.42614 420.795 10.2429 420.795 11.642V11.6989C420.795 12.5085 419.971 12.4375 417.982 12.6932C415.958 12.956 413.749 13.4034 413.749 15.9034C413.749 18.0341 415.397 19.2557 417.471 19.2557ZM417.727 17.75C416.391 17.75 415.425 17.1534 415.425 15.9886C415.425 14.7102 416.59 14.3125 417.897 14.142C418.607 14.0568 420.511 13.858 420.795 13.517V15.0511C420.795 16.4148 419.715 17.75 417.727 17.75ZM425.53 19H427.206V12.0966C427.206 10.6193 428.371 9.53977 429.962 9.53977C430.409 9.53977 430.871 9.625 430.985 9.65341V7.94886C430.793 7.93466 430.353 7.92045 430.104 7.92045C428.797 7.92045 427.661 8.65909 427.263 9.73864H427.15V8.09091H425.53V19ZM432.972 19H434.648V14.9162L435.82 13.8295L439.903 19H442.034L437.084 12.75L441.693 8.09091H439.619L434.847 12.9489H434.648V4.45455H432.972V19Z" fill="#363A68"/>
<path d="M0.790039 30.03H215.63" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M258.42 30.03H521.21" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.790039 30.03V39.71" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M215.63 30.03V39.71" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M258.42 30.03V39.71" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M521.21 30.03V39.71" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.799805 356.07H521.21" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.799805 346.39V356.07" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M521.21 346.39V356.07" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M89.5341 19H91.2102V8.09091H89.5341V19ZM90.3864 6.27273C91.0398 6.27273 91.5795 5.76136 91.5795 5.13636C91.5795 4.51136 91.0398 4 90.3864 4C89.733 4 89.1932 4.51136 89.1932 5.13636C89.1932 5.76136 89.733 6.27273 90.3864 6.27273ZM98.712 19.2273C101.127 19.2273 102.718 17.75 103.002 15.8182H101.326C101.013 17.0114 100.019 17.7216 98.712 17.7216C96.7234 17.7216 95.445 16.0739 95.445 13.5455C95.445 11.0739 96.7518 9.45455 98.712 9.45455C100.189 9.45455 101.07 10.3636 101.326 11.358H103.002C102.718 9.3125 100.985 7.94886 98.6836 7.94886C95.729 7.94886 93.7688 10.2784 93.7688 13.6023C93.7688 16.8693 95.6438 19.2273 98.712 19.2273ZM109.884 19.2273C112.838 19.2273 114.827 16.983 114.827 13.6023C114.827 10.1932 112.838 7.94886 109.884 7.94886C106.929 7.94886 104.941 10.1932 104.941 13.6023C104.941 16.983 106.929 19.2273 109.884 19.2273ZM109.884 17.7216C107.64 17.7216 106.617 15.7898 106.617 13.6023C106.617 11.4148 107.64 9.45455 109.884 9.45455C112.128 9.45455 113.151 11.4148 113.151 13.6023C113.151 15.7898 112.128 17.7216 109.884 17.7216ZM119.062 12.4375C119.062 10.5341 120.241 9.45455 121.846 9.45455C123.401 9.45455 124.346 10.4702 124.346 12.1818V19H126.022V12.0682C126.022 9.28409 124.538 7.94886 122.329 7.94886C120.681 7.94886 119.658 8.6875 119.147 9.79545H119.005V8.09091H117.386V19H119.062V12.4375Z" fill="#363A68"/>
<path d="M243.21 366.455H241.534V381H243.21V366.455ZM250.712 381.227C253.667 381.227 255.655 378.983 255.655 375.602C255.655 372.193 253.667 369.949 250.712 369.949C247.757 369.949 245.769 372.193 245.769 375.602C245.769 378.983 247.757 381.227 250.712 381.227ZM250.712 379.722C248.468 379.722 247.445 377.79 247.445 375.602C247.445 373.415 248.468 371.455 250.712 371.455C252.956 371.455 253.979 373.415 253.979 375.602C253.979 377.79 252.956 379.722 250.712 379.722ZM262.617 385.318C265.231 385.318 267.333 384.125 267.333 381.312V370.091H265.714V371.824H265.543C265.174 371.256 264.492 369.949 262.362 369.949C259.606 369.949 257.702 372.136 257.702 375.489C257.702 378.898 259.691 380.83 262.333 380.83C264.464 380.83 265.146 379.58 265.515 378.983H265.657V381.199C265.657 383.017 264.379 383.841 262.617 383.841C260.636 383.841 259.94 382.797 259.492 382.193L258.157 383.131C258.839 384.274 260.181 385.318 262.617 385.318ZM262.56 379.324C260.458 379.324 259.379 377.733 259.379 375.46C259.379 373.244 260.43 371.455 262.56 371.455C264.606 371.455 265.685 373.102 265.685 375.46C265.685 377.875 264.577 379.324 262.56 379.324ZM274.833 381.227C277.788 381.227 279.776 378.983 279.776 375.602C279.776 372.193 277.788 369.949 274.833 369.949C271.879 369.949 269.89 372.193 269.89 375.602C269.89 378.983 271.879 381.227 274.833 381.227ZM274.833 379.722C272.589 379.722 271.566 377.79 271.566 375.602C271.566 373.415 272.589 371.455 274.833 371.455C277.077 371.455 278.1 373.415 278.1 375.602C278.1 377.79 277.077 379.722 274.833 379.722Z" fill="#363A68"/>
<path d="M182.048 117.804C162.016 97.7947 135.384 86.7759 107.059 86.7759C78.7348 86.7759 52.1027 97.7947 32.0709 117.804C12.039 137.813 1.00769 164.415 1.00769 192.707C1.00769 216.236 8.65425 238.565 22.7319 256.93L5.2233 274.419C-0.407766 280.044 -0.407766 289.157 5.2233 294.781C10.8544 300.406 19.9779 300.406 25.609 294.781L43.1637 277.247C61.4724 291.124 83.6889 298.639 107.075 298.639C135.399 298.639 162.032 287.62 182.063 267.611C202.095 247.602 213.126 221 213.126 192.707C213.111 164.415 202.08 137.813 182.048 117.804ZM128.461 249.108C128.445 249.123 128.445 249.123 128.43 249.139C117.106 260.434 98.7051 260.434 87.3814 249.139C76.0578 237.828 76.0578 219.448 87.3814 208.137C93.0433 202.481 100.474 199.654 107.906 199.654C115.337 199.654 122.768 202.481 128.43 208.137C139.738 219.432 139.753 237.797 128.461 249.108ZM68.8882 189.649C50.6103 207.906 47.8717 235.891 60.6416 257.084C57.026 254.855 53.6566 252.197 50.5795 249.123C29.1169 227.685 29.1169 192.8 50.5795 171.361C61.3186 160.634 75.4116 155.286 89.5046 155.286C103.598 155.286 117.706 160.65 128.43 171.361C131.507 174.435 134.153 177.816 136.384 181.412C115.183 168.656 87.1661 171.392 68.8882 189.649ZM163.555 249.139C161.631 251.06 159.631 252.858 157.57 254.548C166.124 241.485 170.74 226.225 170.74 210.242C170.74 188.573 162.293 168.195 146.954 152.874C119.322 125.303 76.6116 121.784 45.1331 142.3C46.8409 140.226 48.641 138.213 50.5795 136.292C65.6726 121.216 85.7352 112.917 107.059 112.917C128.384 112.917 148.462 121.216 163.555 136.292C178.648 151.367 186.956 171.392 186.956 192.707C186.956 214.023 178.632 234.063 163.555 249.139Z" fill="#526BCE"/>
<path d="M388.735 233.54H353.102V232.725L366.257 221.768C398.258 195.151 406.413 181.32 406.413 165.091C406.413 138.95 384.965 121.83 351.317 121.83C324.301 121.83 305.115 134.217 299.299 155.179C297.314 162.355 302.653 169.471 310.115 169.471H324.177C329.024 169.471 333.224 166.336 334.84 161.787C337.301 154.871 343.348 151.121 351.317 151.121C361.81 151.121 369.272 157.622 369.272 168.364C369.272 178.292 362.903 184.716 352.548 193.276L312.654 226.24C304.761 232.756 300.192 242.453 300.192 252.688C300.192 258.897 305.223 263.922 311.438 263.922H396.674C402.889 263.922 407.92 258.897 407.92 252.688C407.92 242.115 399.32 233.54 388.735 233.54Z" fill="#363A68"/>
<path d="M278.268 123.751C266.667 123.751 256.374 133.141 256.374 144.744V253.442C256.374 259.235 261.067 263.923 266.867 263.923H277.744C283.56 263.923 288.268 259.22 288.268 253.411V224.058V184.178V162.724V133.725C288.253 128.223 283.775 123.751 278.268 123.751Z" fill="#363A68"/>
<path d="M469.031 123.751H450.107H450.092H439.23C427.629 123.751 418.213 133.141 418.213 144.744V253.442C418.213 259.235 422.906 263.923 428.706 263.923H439.584C445.399 263.923 450.107 259.22 450.107 253.411V230.052V224.058C450.107 223.09 450.892 222.306 451.861 222.306H467.662C499.664 222.306 521.111 203.48 521.111 173.298C521.111 143.468 500.218 123.751 469.031 123.751ZM465.462 192.753H462.262H459.908H452.554C451.23 192.753 450.153 191.708 450.107 190.387V162.724C450.107 157.991 454.492 154.149 459.908 154.149H465.447C480.709 154.149 489.879 161.264 489.879 173.313C489.879 185.285 480.724 192.753 465.462 192.753Z" fill="#363A68"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

19
assets/images/composition-vertical.svg
View File

@ -0,0 +1,19 @@
<svg width="808" height="555" viewBox="0 0 808 555" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.00568 472.436H5.65341L8.03977 464.055H8.21023L10.5966 472.436H12.2443L15.5682 461.527H13.8068L11.4489 469.851H11.3352L9.03409 461.527H7.24432L4.91477 469.879H4.80114L2.44318 461.527H0.681818L4.00568 472.436ZM21.8448 472.663C24.7994 472.663 26.788 470.419 26.788 467.038C26.788 463.629 24.7994 461.385 21.8448 461.385C18.8903 461.385 16.9016 463.629 16.9016 467.038C16.9016 470.419 18.8903 472.663 21.8448 472.663ZM21.8448 471.157C19.6005 471.157 18.5778 469.226 18.5778 467.038C18.5778 464.851 19.6005 462.89 21.8448 462.89C24.0891 462.89 25.1119 464.851 25.1119 467.038C25.1119 469.226 24.0891 471.157 21.8448 471.157ZM29.3466 472.436H31.0227V465.532C31.0227 464.055 32.1875 462.976 33.7784 462.976C34.2259 462.976 34.6875 463.061 34.8011 463.089V461.385C34.6094 461.37 34.169 461.356 33.9205 461.356C32.6136 461.356 31.4773 462.095 31.0795 463.174H30.9659V461.527H29.3466V472.436ZM40.5753 472.663C42.6776 472.663 43.3878 471.356 43.7571 470.76H43.956V472.436H45.5753V457.89H43.8991V463.26H43.7571C43.3878 462.691 42.7344 461.385 40.6037 461.385C37.848 461.385 35.9446 463.572 35.9446 467.01C35.9446 470.476 37.848 472.663 40.5753 472.663ZM40.8026 471.157C38.7003 471.157 37.6207 469.311 37.6207 466.981C37.6207 464.68 38.6719 462.89 40.8026 462.89C42.848 462.89 43.9276 464.538 43.9276 466.981C43.9276 469.453 42.8196 471.157 40.8026 471.157ZM48.8778 472.436H50.554V465.618C50.554 464.02 51.7188 462.89 53.0256 462.89C54.2969 462.89 55.1847 463.721 55.1847 464.964V472.436H56.8892V465.334C56.8892 463.927 57.7699 462.89 59.304 462.89C60.4972 462.89 61.5199 463.522 61.5199 465.135V472.436H63.196V465.135C63.196 462.571 61.8182 461.385 59.8722 461.385C58.3097 461.385 57.1662 462.102 56.6051 463.231H56.4915C55.9517 462.066 55 461.385 53.5653 461.385C52.1449 461.385 51.0938 462.066 50.6392 463.231H50.4972V461.527H48.8778V472.436ZM69.4709 472.691C71.3743 472.691 72.3686 471.669 72.7095 470.959H72.7947V472.436H74.4709V465.248C74.4709 461.782 71.8288 461.385 70.4368 461.385C68.7891 461.385 66.9141 461.953 66.0618 463.941L67.6527 464.51C68.022 463.714 68.8956 462.862 70.4936 462.862C72.0348 462.862 72.7947 463.679 72.7947 465.078V465.135C72.7947 465.944 71.9709 465.873 69.9822 466.129C67.9581 466.392 65.7493 466.839 65.7493 469.339C65.7493 471.47 67.397 472.691 69.4709 472.691ZM69.7266 471.186C68.3913 471.186 67.4254 470.589 67.4254 469.424C67.4254 468.146 68.5902 467.748 69.897 467.578C70.6072 467.493 72.5107 467.294 72.7947 466.953V468.487C72.7947 469.851 71.7152 471.186 69.7266 471.186ZM77.5302 472.436H79.2063V465.532C79.2063 464.055 80.3711 462.976 81.962 462.976C82.4094 462.976 82.8711 463.061 82.9847 463.089V461.385C82.793 461.37 82.3526 461.356 82.104 461.356C80.7972 461.356 79.6609 462.095 79.2631 463.174H79.1495V461.527H77.5302V472.436ZM84.9716 472.436H86.6477V468.352L87.8196 467.265L91.9034 472.436H94.0341L89.0838 466.186L93.6932 461.527H91.6193L86.8466 466.385H86.6477V457.89H84.9716V472.436Z" fill="#363A68"/>
<path d="M154.018 343.253L154.018 0.860473" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M155.202 554.139L155.202 383.535" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M154.018 343.253L164.68 343.253" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M154.018 0.860596L164.68 0.860595" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M155.202 554.139L167.05 554.139" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M155.202 383.535L167.05 383.535" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M725.067 554.139L725.067 0.860616" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M713.22 554.139L725.067 554.139" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M713.22 0.86084L725.067 0.860839" stroke="#38ADC2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M65.7594 176.248H67.4356V165.338H65.7594V176.248ZM66.6117 163.52C67.2651 163.52 67.8049 163.009 67.8049 162.384C67.8049 161.759 67.2651 161.248 66.6117 161.248C65.9583 161.248 65.4185 161.759 65.4185 162.384C65.4185 163.009 65.9583 163.52 66.6117 163.52ZM74.9373 176.475C77.3521 176.475 78.943 174.998 79.2271 173.066H77.551C77.2385 174.259 76.2442 174.969 74.9373 174.969C72.9487 174.969 71.6703 173.321 71.6703 170.793C71.6703 168.321 72.9771 166.702 74.9373 166.702C76.4146 166.702 77.2953 167.611 77.551 168.606H79.2271C78.943 166.56 77.2101 165.196 74.9089 165.196C71.9544 165.196 69.9942 167.526 69.9942 170.85C69.9942 174.117 71.8692 176.475 74.9373 176.475ZM86.1092 176.475C89.0638 176.475 91.0524 174.231 91.0524 170.85C91.0524 167.441 89.0638 165.196 86.1092 165.196C83.1547 165.196 81.166 167.441 81.166 170.85C81.166 174.231 83.1547 176.475 86.1092 176.475ZM86.1092 174.969C83.8649 174.969 82.8422 173.037 82.8422 170.85C82.8422 168.662 83.8649 166.702 86.1092 166.702C88.3535 166.702 89.3763 168.662 89.3763 170.85C89.3763 173.037 88.3535 174.969 86.1092 174.969ZM95.2871 169.685C95.2871 167.782 96.4661 166.702 98.0712 166.702C99.6266 166.702 100.571 167.718 100.571 169.429V176.248H102.247V169.316C102.247 166.532 100.763 165.196 98.5542 165.196C96.9064 165.196 95.8837 165.935 95.3724 167.043H95.2303V165.338H93.611V176.248H95.2871V169.685Z" fill="#363A68"/>
<path d="M762.636 267.145H760.959V281.69H762.636V267.145ZM770.137 281.918C773.092 281.918 775.08 279.673 775.08 276.293C775.08 272.884 773.092 270.639 770.137 270.639C767.183 270.639 765.194 272.884 765.194 276.293C765.194 279.673 767.183 281.918 770.137 281.918ZM770.137 280.412C767.893 280.412 766.87 278.48 766.87 276.293C766.87 274.105 767.893 272.145 770.137 272.145C772.382 272.145 773.404 274.105 773.404 276.293C773.404 278.48 772.382 280.412 770.137 280.412ZM782.042 286.009C784.656 286.009 786.758 284.815 786.758 282.003V270.781H785.139V272.514H784.969C784.599 271.946 783.917 270.639 781.787 270.639C779.031 270.639 777.128 272.827 777.128 276.179C777.128 279.588 779.116 281.52 781.758 281.52C783.889 281.52 784.571 280.27 784.94 279.673H785.082V281.889C785.082 283.707 783.804 284.531 782.042 284.531C780.061 284.531 779.365 283.487 778.917 282.884L777.582 283.821C778.264 284.965 779.606 286.009 782.042 286.009ZM781.986 280.014C779.883 280.014 778.804 278.423 778.804 276.151C778.804 273.935 779.855 272.145 781.986 272.145C784.031 272.145 785.111 273.793 785.111 276.151C785.111 278.565 784.003 280.014 781.986 280.014ZM794.258 281.918C797.213 281.918 799.202 279.673 799.202 276.293C799.202 272.884 797.213 270.639 794.258 270.639C791.304 270.639 789.315 272.884 789.315 276.293C789.315 279.673 791.304 281.918 794.258 281.918ZM794.258 280.412C792.014 280.412 790.991 278.48 790.991 276.293C790.991 274.105 792.014 272.145 794.258 272.145C796.503 272.145 797.525 274.105 797.525 276.293C797.525 278.48 796.503 280.412 794.258 280.412Z" fill="#363A68"/>
<path d="M334.806 539.998C334.806 527.565 340.349 515.778 349.934 507.847L398.385 467.764C410.95 457.357 418.695 449.536 418.695 437.475C418.695 424.406 409.625 416.508 396.896 416.508C387.212 416.508 379.861 421.065 376.882 429.467C374.91 435.01 369.816 438.811 363.934 438.811H346.867C337.807 438.811 331.311 430.157 333.721 421.427C340.776 395.947 364.098 380.884 396.907 380.884C437.767 380.884 463.816 401.687 463.816 433.477C463.816 453.206 453.914 470.01 415.047 502.38L399.043 515.701V516.698H442.324C455.195 516.698 465.624 527.126 465.624 539.998C465.624 547.535 459.511 553.647 451.975 553.647H348.455C340.918 553.647 334.806 547.535 334.806 539.998Z" fill="#363A68"/>
<path d="M320.291 430.586V395.334C320.291 388.641 314.858 383.208 308.164 383.208C294.066 383.208 281.567 394.633 281.567 408.732V540.897C281.567 547.941 287.274 553.648 294.318 553.648H307.529C314.584 553.648 320.302 547.93 320.302 540.875V505.186V456.679V430.586H320.291Z" fill="#363A68"/>
<path d="M516.857 512.461H516.868V383.21H516.857V512.461Z" fill="#363A68"/>
<path d="M539.851 383.208H503.657C489.559 383.208 478.133 394.633 478.133 408.732V540.897C478.133 547.941 483.841 553.648 490.884 553.648H504.095C511.15 553.648 516.868 547.93 516.868 540.875V505.186C516.868 504.003 517.821 503.05 519.004 503.05H538.197C577.063 503.05 603.113 480.166 603.113 443.457C603.102 407.176 577.72 383.208 539.851 383.208ZM535.513 467.097H531.635H528.787H519.848C518.194 467.097 516.857 465.761 516.857 464.106V446.612C516.857 446.579 516.868 446.536 516.868 446.503V430.586C516.868 424.835 522.203 420.168 528.776 420.168H535.502C554.048 420.168 565.167 428.822 565.167 443.468C565.177 458.027 554.048 467.097 535.513 467.097Z" fill="#363A68"/>
<path d="M564.722 50.943C532.388 18.6463 489.402 0.86084 443.683 0.86084C397.964 0.86084 354.977 18.6463 322.644 50.943C290.311 83.2396 272.505 126.178 272.505 171.845C272.505 209.822 284.847 245.864 307.57 275.506L279.309 303.735C270.22 312.814 270.22 327.523 279.309 336.602C288.399 345.681 303.125 345.681 312.214 336.602L340.549 308.299C370.101 330.699 405.961 342.828 443.708 342.828C489.426 342.828 532.413 325.043 564.747 292.746C597.08 260.45 614.886 217.511 614.886 171.845C614.861 126.178 597.055 83.2396 564.722 50.943ZM478.226 262.881C478.202 262.905 478.202 262.905 478.177 262.93C459.899 281.162 430.198 281.162 411.921 262.93C393.643 244.673 393.643 215.006 411.921 196.749C421.06 187.621 433.054 183.057 445.049 183.057C457.043 183.057 469.038 187.621 478.177 196.749C496.429 214.981 496.454 244.624 478.226 262.881ZM382.071 166.908C352.569 196.377 348.148 241.548 368.76 275.755C362.924 272.158 357.486 267.866 352.519 262.905C317.876 228.302 317.876 171.993 352.519 137.39C369.853 120.076 392.6 111.443 415.348 111.443C438.095 111.443 460.868 120.101 478.177 137.39C483.143 142.351 487.415 147.808 491.016 153.613C456.795 133.024 411.573 137.439 382.071 166.908ZM534.872 262.93C531.768 266.031 528.539 268.933 525.212 271.662C539.019 250.577 546.469 225.945 546.469 200.148C546.469 165.172 532.835 132.28 508.076 107.549C463.475 63.048 394.537 57.3676 343.728 90.4828C346.484 87.1341 349.39 83.8846 352.519 80.7839C376.881 56.4498 409.264 43.0549 443.683 43.0549C478.102 43.0549 510.51 56.4498 534.872 80.7839C559.234 105.118 572.644 137.439 572.644 171.845C572.644 206.25 559.209 238.596 534.872 262.93Z" fill="#526BCE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/images/horizontal_color.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

5
assets/images/i2p-wordmark.svg
View File

@ -0,0 +1,5 @@
<svg width="174" height="94" viewBox="0 0 174 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M87.4654 73.5123H64.1721V72.9798L72.7713 65.8169C93.691 48.417 99.0216 39.3755 99.0216 28.7667C99.0216 11.6782 85.0013 0.486816 63.0055 0.486816C45.3444 0.486816 32.8026 8.58401 29.0009 22.287C27.7034 26.9785 31.1934 31.6299 36.0713 31.6299H45.2639C48.4321 31.6299 51.1778 29.5805 52.2338 26.6068C53.843 22.086 57.7956 19.6348 63.0055 19.6348C69.8647 19.6348 74.7426 23.8843 74.7426 30.9066C74.7426 37.3964 70.5788 41.5957 63.8101 47.1914L37.7308 68.7403C32.5713 72.9999 29.5842 79.339 29.5842 86.0298C29.5842 90.0884 32.873 93.3735 36.9363 93.3735H92.6551C96.7184 93.3735 100.007 90.0884 100.007 86.0298C100.007 79.118 94.385 73.5123 87.4654 73.5123Z" fill="#363A68"/>
<path d="M15.2519 1.74268C7.66846 1.74268 0.939941 7.88087 0.939941 15.4657V86.5221C0.939941 90.3095 4.0075 93.3736 7.7992 93.3736H14.9099C18.7116 93.3736 21.7893 90.2995 21.7893 86.502V67.3139V41.2441V27.2197V8.26263C21.7792 4.6661 18.8525 1.74268 15.2519 1.74268Z" fill="#363A68"/>
<path d="M139.955 1.74268H127.585H127.575H120.474C112.891 1.74268 106.735 7.88087 106.735 15.4657V86.5221C106.735 90.3095 109.803 93.3736 113.595 93.3736H120.705C124.507 93.3736 127.585 90.2995 127.585 86.502V71.2319V67.3139C127.585 66.681 128.098 66.1686 128.731 66.1686H139.06C159.98 66.1686 174 53.8621 174 34.1315C174 14.6319 160.342 1.74268 139.955 1.74268ZM137.622 46.8499H135.53H133.991H129.184C128.319 46.8499 127.615 46.1667 127.585 45.3028V27.2197C127.585 24.1255 130.451 21.614 133.991 21.614H137.612C147.589 21.614 153.583 26.2653 153.583 34.1415C153.583 41.9675 147.599 46.8499 137.622 46.8499Z" fill="#363A68"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/images/i2p_horizontal_black.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
assets/images/i2p_horizontal_color.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

0
assets/images/horizontal_white.png → assets/images/i2p_horizontal_white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
assets/images/i2p_icon_black.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
assets/images/i2p_icon_color.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
assets/images/i2p_icon_white.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
assets/images/i2p_vertical_black.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
assets/images/i2p_vertical_color.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
assets/images/i2p_vertical_white.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
assets/images/icon_color.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.6 KiB

BIN
assets/images/icon_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

6
assets/images/logo-white.svg
View File

@ -0,0 +1,6 @@
<svg width="340" height="140" viewBox="0 0 340 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M118.352 20.855C105.257 7.77487 87.8477 0.571777 69.3317 0.571777C50.8158 0.571777 33.4062 7.77487 20.3112 20.855C7.21629 33.935 0.00502883 51.3249 0.00502883 69.8199C0.00502883 85.2005 5.00363 99.7976 14.2063 111.803L2.7608 123.235C-0.920266 126.912 -0.920266 132.87 2.7608 136.546C6.44186 140.223 12.406 140.223 16.0871 136.546L27.5627 125.084C39.5312 134.155 54.0543 139.068 69.3418 139.068C87.8577 139.068 105.267 131.865 118.362 118.785C131.457 105.705 138.668 88.3148 138.668 69.8199C138.658 51.3249 131.447 33.935 118.352 20.855ZM83.3218 106.689C83.3117 106.699 83.3117 106.699 83.3017 106.709C75.8993 114.093 63.8705 114.093 56.4681 106.709C49.0658 99.3154 49.0658 87.3002 56.4681 79.9062C60.1693 76.2092 65.0271 74.3607 69.8849 74.3607C74.7427 74.3607 79.6005 76.2092 83.3017 79.9062C90.694 87.2901 90.704 99.2953 83.3218 106.689ZM44.3789 67.8207C32.4306 79.7555 30.6403 98.0496 38.9881 111.903C36.6246 110.447 34.422 108.709 32.4105 106.699C18.3802 92.6849 18.3802 69.8802 32.4105 55.8658C39.4306 48.8536 48.6433 45.3575 57.8561 45.3575C67.0688 45.3575 76.2915 48.8636 83.3017 55.8658C85.3132 57.875 87.0431 60.0852 88.5014 62.436C74.6421 54.0977 56.3273 55.8859 44.3789 67.8207ZM106.263 106.709C105.006 107.965 103.698 109.141 102.351 110.246C107.943 101.706 110.96 91.7305 110.96 81.2825C110.96 67.1175 105.438 53.7963 95.4109 43.7803C77.3476 25.7575 49.4278 23.4569 28.8501 36.8685C29.9665 35.5123 31.1432 34.1962 32.4105 32.9405C42.2769 23.0852 55.392 17.6603 69.3317 17.6603C83.2715 17.6603 96.3966 23.0852 106.263 32.9405C116.13 42.7957 121.561 55.8859 121.561 69.8199C121.561 83.7539 116.119 96.8541 106.263 106.709Z" fill="white"/>
<path d="M253.465 96.5123H230.172V95.9798L238.771 88.8169C259.691 71.417 265.022 62.3755 265.022 51.7667C265.022 34.6782 251.001 23.4868 229.005 23.4868C211.344 23.4868 198.803 31.584 195.001 45.287C193.703 49.9785 197.193 54.6299 202.071 54.6299H211.264C214.432 54.6299 217.178 52.5805 218.234 49.6068C219.843 45.086 223.796 42.6348 229.005 42.6348C235.865 42.6348 240.743 46.8843 240.743 53.9066C240.743 60.3964 236.579 64.5957 229.81 70.1914L203.731 91.7403C198.571 95.9999 195.584 102.339 195.584 109.03C195.584 113.088 198.873 116.374 202.936 116.374H258.655C262.718 116.374 266.007 113.088 266.007 109.03C266.007 102.118 260.385 96.5123 253.465 96.5123Z" fill="white"/>
<path d="M181.252 24.7427C173.668 24.7427 166.94 30.8809 166.94 38.4657V109.522C166.94 113.31 170.008 116.374 173.799 116.374H180.91C184.712 116.374 187.789 113.299 187.789 109.502V90.3139V64.2441V50.2197V31.2626C187.779 27.6661 184.852 24.7427 181.252 24.7427Z" fill="white"/>
<path d="M305.955 24.7427H293.585H293.575H286.474C278.891 24.7427 272.735 30.8809 272.735 38.4657V109.522C272.735 113.31 275.803 116.374 279.595 116.374H286.705C290.507 116.374 293.585 113.299 293.585 109.502V94.2319V90.3139C293.585 89.681 294.098 89.1686 294.731 89.1686H305.06C325.98 89.1686 340 76.8621 340 57.1315C340 37.6319 326.342 24.7427 305.955 24.7427ZM303.622 69.8499H301.53H299.991H295.184C294.319 69.8499 293.615 69.1667 293.585 68.3028V50.2197C293.585 47.1255 296.451 44.614 299.991 44.614H303.612C313.589 44.614 319.583 49.2653 319.583 57.1415C319.583 64.9675 313.599 69.8499 303.622 69.8499Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
assets/images/vertical_color.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/images/vertical_white.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

19
assets/javascript/index.js
View File

@ -47,3 +47,22 @@ $('.rb-sidebar').on('click',function() {
$('.rb-sidebar.active').removeClass('active');
$(this).addClass('active');
});
// Theme Toggle
var toggle1 = document.getElementById("themer");
var toggle2 = document.getElementById("themer2");
toggle1.addEventListener('click', changeTheme);
toggle2.addEventListener('click', changeTheme);
function changeTheme() {
if (document.documentElement.dataset.theme == 'dark') {
document.documentElement.dataset.theme = 'light';
window.localStorage.setItem('theme', 'light');
}
else if (document.documentElement.dataset.theme == 'light') {
document.documentElement.dataset.theme = 'dark';
window.localStorage.setItem('theme', 'dark');
}
}

4
assets/javascript/popper.min.js
View File

File diff suppressed because one or more lines are too long

90
assets/styles/components.scss
View File

@ -30,16 +30,16 @@
}
}
&-secondary {
color: $gray-7;
background-color: $gray-2;
border-color: $gray-6;
color: $gray-700;
background-color: $gray-200;
border-color: $gray-600;
& hr {
border-top-color: $gray-6;
border-top-color: $gray-600;
}
& .alert-link {
color: $gray-8;
color: $gray-800;
}
}
&-success {
@ -111,44 +111,44 @@
// Other color backgrounds
.background-gray-0 {
background-color: $gray-0;
.background-gray-50 {
background-color: $gray-50;
}
.background-gray-1 {
background-color: $gray-1;
.background-gray-100 {
background-color: $gray-100;
}
.background-gray-2 {
background-color: $gray-2;
.background-gray-200 {
background-color: $gray-200;
}
.background-gray-3 {
background-color: $gray-3;
.background-gray-300 {
background-color: $gray-300;
}
.background-gray-4 {
background-color: $gray-4;
.background-gray-400 {
background-color: $gray-400;
}
.background-gray-5 {
background-color: $gray-5;
.background-gray-500 {
background-color: $gray-500;
}
.background-gray-6 {
background-color: $gray-6;
.background-gray-600 {
background-color: $gray-600;
}
.background-gray-7 {
background-color: $gray-7;
.background-gray-700 {
background-color: $gray-700;
}
.background-gray-8 {
background-color: $gray-8;
.background-gray-800 {
background-color: $gray-800;
}
.background-gray-9 {
background-color: $gray-9;
.background-gray-900 {
background-color: $gray-900;
}
.background-indigo-100 {
@ -270,7 +270,7 @@
}
.color-gray-9 {
color: $gray-9;
color: $gray-900;
}
.rb-code {
@ -529,14 +529,46 @@
}
.pagination .page-link {
color: $gray-9;
color: $gray-900;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: $gray-3 !important;
background-color: $gray-300 !important;
}
.mark, mark {
background-color: $gray-3 !important;
background-color: $gray-300 !important;
padding: .2em !important;
}
img {
max-width: 100%;
}
.theme-toggle {
display: inline-flex;
position: absolute;
top: 36px;
right: 36px;
}
@media screen and (max-width: 991px) {
.theme-toggle {
display: inline-flex;
position: absolute;
right: 96px;
}
}
.dropdown-menu {
background-color: var(--box-bg);
}
.dropdown-item {
color: var(--primary) !important;
&:hover {
color: var(--text);
background-color: var(--sidebar-inner-bg);
}
}

74
assets/styles/layout.scss
View File

@ -3,16 +3,11 @@
font-family: $header-font;
}
.border-left-right {
// z-index: 99;
border-right: 1px solid $gray-3 !important;
}
.sidebar {
min-height: 100vh;
height: 100%;
width: 100%;
border-right: 1px solid $gray-3 !important;
background-color: var(--sidebar-inner-bg);
// position: fixed;
@ -25,18 +20,26 @@
background-color: transparent;
border: 0;
border-radius: 0 !important;
padding: 1.25rem 1.5rem !important;
font-size: 1rem;
font-weight: 400 !important;
padding-left: 1.1rem !important;
&:hover {
background-color: var(--sidebar-bg);
}
&.active {
background-color: var(--sidebar-bg);
}
}
}
.sidebar-wrapper {
background-color: $gray-3;
background-color: $gray-300;
}
.sidebar__link__light {
color: $gray-7 !important;
color: var(--sidebar-text) !important;
&:hover {
color: $black !important;
@ -46,13 +49,15 @@
transition-duration: .3s;
}
&:active {
color: $primary;
&.active {
color: var(--primary-2nd);
background-color: var(--sidebar-bg);
}
}
.rb-sidebar__2 {
background-color: #F8F9FA !important;
background-color: var(--sidebar-inner-bg) !important;
color: var(--sidebar-text) !important;
}
.row {
@ -70,22 +75,22 @@
}
.navbar__top {
background-color: $primary;
background-color: var(--navbar-bg);
}
// bootstrap navbar-light class is not working, overwriting classes to fix this
//TODO fix this issue
.navbar-light .navbar-toggler {
border-color: rgba(255,255,255,.5);
.navbar-dark .navbar-toggler {
border-color: rgba(255,255,255,.75) !important;
}
.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(255,255,255,.5);
.navbar-nav .nav-item .nav-link {
color: rgba(255,255,255,.75) !important;
&:hover {
color: $white;
@ -93,7 +98,6 @@
}
.rb-contain {
width: 100%;
height: auto;
max-height: 100%;
}
@ -135,18 +139,20 @@
.list-group-item:focus,
.list-group-item:hover {
// background-color: $gray-2 !important;
& * {
color: $primary;
}
}
.list-group-item.active {
color: $primary;
}
.bg-box {
background-color: #f1f3f5 !important;
border: 1px solid var(--box);
background: var(--box-bg);
padding: 20px;
}
.bg {
@ -165,3 +171,31 @@
.typo-text {
display: inline-block;
}
.curved {
border-radius: 10px;
width: 75px;
height: 75px;
display: inline-block;
vertical-align: bottom;
float: left;
}
.bg-smallest {
padding: 15px;
border: 1px solid var(--box);
background: var(--box-bg);
box-sizing: border-box;
}
.font-20 {
font-size: 20px;
}
.image {
max-height: 160px;
height: 100%;
object-fit: contain;
overflow: hidden;
text-align: center;
}

118
assets/styles/main.scss
View File

@ -10,11 +10,127 @@
body {
color: $gray-9;
color: var(--text) !important;
background-color: var(--body) !important;
font-family: $body-font;
font-size: 1rem;
}
a {
text-decoration: none !important;
color: var(--link) !important;
}
a:hover {
color: var(--link-hover) !important;
}
:root {
--primary: #{$indigo-600};
--primary-2nd: #{$indigo-900};
--secondary: #{$teal-400};
--secondary-2nd: #{$orange-400};
--body: #{$white};
--text: #{$gray-900};
--link: #{$teal-500};
--link-hover: #{$teal-600};
--logo-text-color: #{$indigo-900};
--header-text: #{$gray-900};
--sidebar-bg: #{$gray-100};
--sidebar-inner-bg: #{$gray-50};
--sidebar-text: #{$gray-800};
--navbar-bg: #{$indigo-500};
--hover: #{$black};
--border: #{$gray-300};
--card-bg: #{$gray-100};
--bg-hover: #{$gray-200};
--navtop-color: #{$white};
--navtop-hover: #{$black};
--muted: #6c757d;
--box: #{$gray-200};
--box-bg: transparent;
--box-buttons-bg: transparent;
--default-bg: #{$gray-200};
--default-hover: #{$gray-300};
--default-pressed: #{$gray-500};
--default-disabled: #{$gray-200};
--alert-generic: #{$gray-100};
--alert-success: #{$indigo-200};
--alert-warning: #{$orange-200};
--alert-warning-text: #{$gray-900};
--alert-warning-icon: #{$orange-800};
--alert-tip: #{$teal-100};
}
html[data-theme="light"] {
--primary: #{$indigo-600};
--primary-2nd: #{$indigo-900};
--secondary: #{$teal-400};
--secondary-2nd: #{$orange-400};
--body: #{$white};
--text: #{$gray-900};
--link: #{$teal-500};
--link-hover: #{$teal-600};
--logo-text-color: #{$indigo-900};
--header-text: #{$gray-900};
--sidebar-bg: #{$gray-100};
--sidebar-inner-bg: #{$gray-50};
--sidebar-text: #{$gray-800};
--navbar-bg: #{$indigo-500};
--hover: #{$black};
--border: #{$gray-300};
--card-bg: #{$gray-100};
--bg-hover: #{$gray-200};
--navtop-color: #{$white};
--navtop-hover: #{$black};
--muted: #6c757d;
--box: #{$gray-200};
--box-bg: transparent;
--box-buttons-bg: transparent;
--default-bg: #{$gray-200};
--default-hover: #{$gray-300};
--default-pressed: #{$gray-500};
--default-disabled: #{$gray-200};
--alert-generic: #{$gray-100};
--alert-success: #{$indigo-200};
--alert-warning: #{$orange-200};
--alert-warning-text: #{$gray-900};
--alert-warning-icon: #{$orange-800};
--alert-tip: #{$teal-100};
}
html[data-theme="dark"] {
--primary: #{$night-200};
--primary-2nd: #{$night-200};
--secondary: #{$night-300};
--secondary-2nd: #{$night-300};
--body: #{$night-900};
--text: #{$white};
--link: #{$white};
--link-hover: #{$gray-200};
--logo-text-color: #{$white};
--header-text: #{$gray-900};
--sidebar-bg: #{$night-800};
--sidebar-inner-bg: #{$night-800};
--sidebar-text: #{$gray-100};
--navbar-bg: #{$night-800};
--hover: #{$gray-200};
--border: #{$night-600};
--card-bg: #{$night-800};
--bg-hover: #{$night-900};
--navtop-color: #{$white};
--navtop-hover: #{$gray-600};
--muted: #{$white};
--box: #{$night-700};
--box-bg: #{$night-800};
--default-bg: rgba(255, 255, 255, 0.1);
--default-hover: rgba(255, 255, 255, 0.05);
--default-pressed: rgba(0, 0, 0, 0.2);
--default-disabled: rgba(255, 255, 255, 0.025);
--alert-generic: #{$night-700};
--alert-success: #{$night-700};
--alert-warning: #{$orange-800};
--alert-warning-text: #{$orange-500};
--alert-warning-icon: #{$orange-200};
--alert-tip: #{$teal-800};
}

91
assets/styles/vars.scss
View File

@ -1,5 +1,5 @@
$primary: #526BCE;
$secondary: #EF9252;
$primary: var(--primary);
$secondary: var(--secondary-2nd);
$warning: #FFC434;
$danger: #E15647;
$body-font: 'Inter', sans-serif !important;
@ -12,40 +12,68 @@ $black: #000000;
// Gray
$gray-list: (
"0": #f8f9fa,
"1": #f1f3f5,
"2": #e9ecef,
"3": #dee2e6,
"4": #ced4da,
"5": #adb5bd,
"6": #868e96,
"7": #495057,
"8": #343a40,
"9": #212529
"50": #f8f9fa,
"100": #f1f3f5,
"200": #e9ecef,
"300": #dee2e6,
"400": #ced4da,
"500": #adb5bd,
"600": #868e96,
"700": #495057,
"800": #343a40,
"900": #212529
);
$gray-0: map-get($gray-list, "0");
$gray-1: map-get($gray-list, "1");
$gray-2: map-get($gray-list, "2");
$gray-3: map-get($gray-list, "3");
$gray-4: map-get($gray-list, "4");
$gray-5: map-get($gray-list, "5");
$gray-6: map-get($gray-list, "6");
$gray-7: map-get($gray-list, "7");
$gray-8: map-get($gray-list, "8");
$gray-9: map-get($gray-list, "9");
$gray-50: map-get($gray-list, "50");
$gray-100: map-get($gray-list, "100");
$gray-200: map-get($gray-list, "200");
$gray-300: map-get($gray-list, "300");
$gray-400: map-get($gray-list, "400");
$gray-500: map-get($gray-list, "500");
$gray-600: map-get($gray-list, "600");
$gray-700: map-get($gray-list, "700");
$gray-800: map-get($gray-list, "800");
$gray-900: map-get($gray-list, "900");
// Night
$night-list: (
"50": #EBF3FA,
"100": #D1DAE6,
"200": #B1BFCF,
"300": #8A9CB3,
"400": #657D99,
"500": #435B77,
"600": #374B61,
"700": #2E3D4F,
"800": #212D3B,
"900": #15212D,
"950": #0E171F
);
$night-50: map-get($night-list, "50");
$night-100: map-get($night-list, "100");
$night-200: map-get($night-list, "200");
$night-300: map-get($night-list, "300");
$night-400: map-get($night-list, "400");
$night-500: map-get($night-list, "500");
$night-600: map-get($night-list, "600");
$night-700: map-get($night-list, "700");
$night-800: map-get($night-list, "800");
$night-900: map-get($night-list, "900");
$night-950: map-get($night-list, "950");
// Indigo
$indigo-list: (
"100": #E5FFFE,
"200": #A6F8F8,
"300": #7EE4E8,
"400": #50CEDA,
"500": #38ADC2,
"600": #3190A8,
"700": #2B758D,
"800": #245C70,
"900": #1E4C5E
"100": #ECF3FF,
"200": #C6D9FE,
"300": #A4BEFB,
"400": #7E9DF4,
"500": #6280E6,
"600": #546BD2,
"700": #4456B7,
"800": #3C468A,
"900": #363A68
);
$indigo-100: map-get($indigo-list, "100");
@ -81,7 +109,6 @@ $teal-700: map-get($teal-list, "700");
$teal-800: map-get($teal-list, "800");
$teal-900: map-get($teal-list, "900");
// Orange
$orange-list: (
"100": #FFFAF0,

6
assets/styles/visuals.scss
View File

@ -48,7 +48,7 @@ h4.header-display {
.icon {
font-size: 20px;
background-color: $gray-9;
background-color: $gray-900;
padding: 20px;
}
@ -58,3 +58,7 @@ h4.header-display {
margin-bottom: 0.5rem !important;
}
}
.logo-text-switch {
fill: var(--logo-text-color);
}
Write Preview
Loading…
Cancel
Save