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

Changed colors columns

main
Anxhelo Lushka 6 years ago
parent
4dce7f936c
commit
7314ce68ab
No known key found for this signature in database GPG Key ID: 86086158C83770F8
2 changed files with 22 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      _includes/design/colors.html
  2. 6
      _site/assets/main.css

35
_includes/design/colors.html
View File

@ -2,62 +2,65 @@
<h2>Colors</h2> <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 main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-primary text-white small">#4661A9</div> <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> <h6 class="pt2 text-left">Primary Color</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-secondary text-white small">#60AB60</div> <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> <h6 class="pt2 text-left">Secondary color</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-warning text-white small">#FFC434</div> <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> <h6 class="pt2 text-left">Warning</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-danger text-white small">#E15647</div> <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> <h6 class="pt2 text-left">Danger</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> </div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div> <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> <h6 class="pt2 text-left">Gray 0</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div> <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> <h6 class="pt2 text-left">Gray 1</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div> <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> <h6 class="pt2 text-left">Gray 2</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div> <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> <h6 class="pt2 text-left">Gray 3</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div> <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> <h6 class="pt2 text-left">Gray 4</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div> <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> <h6 class="pt2 text-left">Gray 5</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-6 text-white small">#868e96</div> <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> <h6 class="pt2 text-left">Gray 6</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-7 text-white small">#495057</div> <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> <h6 class="pt2 text-left">Gray 7</h6>
</div> </div>
</div> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="row">
<div class="col-xs-12 col-sm-1 col-md-1 pl-1">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div> <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> <h6 class="pt2 text-left">Gray 8</h6>
</div> </div>
<div class="col-xs-12 col-sm-1 col-md-1 pl-1"> <div class="col-xs-12 col-sm-2 col-md-2">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div> <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> <h6 class="pt2 text-left">Gray 9</h6>
</div> </div>

6
_site/assets/main.css
View File

@ -2,7 +2,7 @@
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
/** Basic styling */ /** Basic styling */
body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; } body { font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
/** Set `margin-bottom` to maintain vertical rhythm */ /** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; } h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
@ -78,7 +78,7 @@ table td { border: 1px solid #e8e8e8; }
@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; } @media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
.site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; } .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
.site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; } .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
.site-nav .menu-icon > svg path { fill: #424242; } .site-nav .menu-icon > svg { fill: #424242; }
.site-nav input ~ .trigger { clear: both; display: none; } .site-nav input ~ .trigger { clear: both; display: none; }
.site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; } .site-nav input:checked ~ .trigger { display: block; padding-bottom: 5px; }
.site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; } .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; }
@ -105,7 +105,7 @@ table td { border: 1px solid #e8e8e8; }
.footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } } @media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
/** Page content */ /** Page content */
.page-content { padding: 30px 0; } .page-content { padding: 30px 0; flex: 1; }
.page-heading { font-size: 32px; } .page-heading { font-size: 32px; }

Write Preview
Loading…
Cancel
Save