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

Addressing some comments

pull/6/head
Anxhelo Lushka 5 years ago
parent
223637ff49
commit
526fc8f9f6
No known key found for this signature in database GPG Key ID: C86D6CF1F7FAAA35
6 changed files with 306 additions and 80 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. 259
      _includes/design/colors.html
  2. 10
      _includes/design/typography.html
  3. 53
      assets/styles/components.scss
  4. 4
      assets/styles/layout.scss
  5. 10
      assets/styles/main.scss
  6. 50
      assets/styles/vars.scss

259
_includes/design/colors.html
View File

@ -615,34 +615,237 @@
</div>
</div>
</div>
</div>
<div class="color-palette row col-md-12 p-0">
<div class="night col col-xs-12 mb-3">
<h5 class="pb-3">Dark</h5>
<div class="red col col-xs-12 mb-4">
<h5 class="pb-3">Red</h5>
<div class="distributed palette">
<div class="colors">
<div class="color-overview background-night-50 p-2">
<span class="variable">$night-50</span>
<span class="hex f-small">#EBF3FA</span>
<div class="color-overview background-red-100 p-2">
<span class="variable">$red-100</span>
<span class="hex f-small">#fbe5e1</span>
</div>
<div class="color-details border-red-100 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-100 border-red-100 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-100 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-100 border-red-100 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-100 pl-1 pr-1 fail">Fail</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-100 border-red-100 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-100 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-100 border-red-100 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-100 pl-1 pr-1 fail">Fail</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-200 p-2">
<span class="variable">$red-200</span>
<span class="hex f-small">#f2b4a9</span>
</div>
<div class="color-details border-red-200 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-200 border-red-200 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-200 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-200 border-red-200 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-200 pl-1 pr-1 fail">Fail</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-200 border-red-200 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-200 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-200 border-red-200 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-200 pl-1 pr-1 fail">Fail</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-300 p-2">
<span class="variable">$red-300</span>
<span class="hex f-small">#ea8271</span>
</div>
<div class="color-details border-red-300 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-300 border-red-300 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-300 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-300 border-red-300 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-300 pl-1 pr-1 fail">Fail</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-300 border-red-300 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-300 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-300 border-red-300 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-300 pl-1 pr-1 fail">Fail</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-400 p-2">
<span class="variable contrast-red">$red-400</span>
<span class="hex f-small contrast-red">#e05842</span>
</div>
<div class="color-details border-red-400 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-400 border-red-400 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-400 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-400 border-red-400 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-400 pl-1 pr-1 fail">Fail</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-400 border-red-400 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-400 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-400 border-red-400 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-400 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-priority color-overview background-red-500 p-2">
<span class="variable inverted">$red-500</span>
<span class="hex f-small inverted">#db3b21</span>
</div>
<div class="color-details border-red-500 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-500 border-red-500 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-500 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-500 border-red-500 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-500 pl-1 pr-1 pass">Pass</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-500 border-red-500 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-500 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-red-500 border-red-500 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-500 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-600 p-2">
<span class="variable inverted">$red-600</span>
<span class="hex f-small inverted">#c0341d</span>
</div>
<div class="color-details border-night-50 p-3">
<div class="color-details border-red-600 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-night-50 border-night-50 pl-1 pr-1">AA</div>
<div class="d-inline-block border-night-50 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-night-50 border-night-50 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-night-50 pl-1 pr-1 fail">Fail</div>
<div class="d-inline-block background-red-600 border-red-600 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-600 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-600 border-red-600 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-600 pl-1 pr-1 pass">Pass</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-night-50 border-night-50 pl-1 pr-1">AA</div>
<div class="d-inline-block border-night-50 pl-1 pr-1 pass">Pass</div>
<div class="inverted d-inline-block background-night-50 border-night-50 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-night-50 pl-1 pr-1 fail">Fail</div>
<div class="d-inline-block background-red-600 border-red-600 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-600 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-600 border-red-600 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-600 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-700 p-2">
<span class="variable inverted">$red-700</span>
<span class="hex f-small inverted">#a62d19</span>
</div>
<div class="color-details border-red-700 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-700 border-red-700 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-700 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-700 border-red-700 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-700 pl-1 pr-1 pass">Pass</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-700 border-red-700 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-700 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-700 border-red-700 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-700 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-800 p-2">
<span class="variable inverted">$red-800</span>
<span class="hex f-small inverted">#8b2615</span>
</div>
<div class="color-details border-red-800 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-800 border-red-800 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-800 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-800 border-red-800 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-800 pl-1 pr-1 pass">Pass</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-800 border-red-800 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-800 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-800 border-red-800 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-800 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-900 p-2">
<span class="variable inverted">$red-900</span>
<span class="hex f-small inverted">#711e11</span>
</div>
<div class="color-details border-red-900 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-red-900 border-red-900 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-900 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-900 border-red-900 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-900 pl-1 pr-1 pass">Pass</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-red-900 border-red-900 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-900 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-900 border-red-900 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-900 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-red-950 p-2">
<span class="variable inverted">$red-950</span>
<span class="hex f-small inverted">#4b140b</span>
</div>
<div class="color-details border-red-950 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal Normal</div>
<div class="d-inline-block background-red-950 border-red-950 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-950 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-950 border-red-950 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-950 pl-1 pr-1 pass">Pass</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal Normal</div>
<div class="d-inline-block background-red-950 border-red-950 pl-1 pr-1">AA</div>
<div class="d-inline-block border-red-950 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-red-950 border-red-950 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-red-950 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="color-palette row col-md-12 p-0">
<div class="night col col-xs-12 mb-3">
<h5 class="pb-3">Dark</h5>
<div class="distributed palette">
<div class="colors">
<div class="color-overview background-night-100 p-2">
<span class="variable">$night-100</span>
@ -841,28 +1044,6 @@
</div>
</div>
</div>
<div class="colors">
<div class="color-overview background-night-950 p-2">
<span class="variable inverted">$night-950</span>
<span class="hex f-small inverted">#0E171F</span>
</div>
<div class="color-details border-night-950 p-3">
<div class="color-details--section">
<div class="bold m-b-2">WCAG Normal</div>
<div class="d-inline-block background-night-950 border-night-950 pl-1 pr-1">AA</div>
<div class="d-inline-block border-night-950 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-night-950 border-night-950 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-night-950 pl-1 pr-1 pass">Pass</div>
</div>
<div class="color-details--section">
<div class="bold m-b-2">WCAG Large</div>
<div class="d-inline-block background-night-950 border-night-950 pl-1 pr-1">AA</div>
<div class="d-inline-block border-night-950 pl-1 pr-1 fail">Fail</div>
<div class="inverted d-inline-block background-night-950 border-night-950 pl-1 pr-1 m-l-3">AA</div>
<div class="d-inline-block border-night-950 pl-1 pr-1 pass">Pass</div>
</div>
</div>
</div>
</div>
<p class="text-muted pt-3">The dark palette is primarily used for interfaces that are adapting a night theme. Shades of it can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.</p>
</div>

10
_includes/design/typography.html
View File

@ -1,6 +1,6 @@
<div id="typography" class="col page-header mb-4 mt-5">
<h2>Typography</h2>
<p class="text-muted">I2P's main fonts are Source Sans Pro and Source Code Pro, made by Adobe.</p>
<p class="text-muted">I2P's main fonts are Nunito and Inter.</p>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 mb-4">
@ -115,7 +115,7 @@
</div>
</div>
<div class="typography__headers__item">
<!-- <div class="typography__headers__item">
<p class="text-black small pt-5 text-muted">H1 display</p>
<h1 class="header-display color-secondary">I2P Anonymous Network</h1>
</div>
@ -130,14 +130,14 @@
<div class="typography__headers__item">
<p class="text-black small text-muted">H4 display</p>
<h4 class="header-display color-secondary">I2P Anonymous Network</h4>
</div>
</div> -->
</div>
</div>
<div class="row pt-5">
<div class="col-md-5">
<p class="text-black small">
<span class="text-left color-gray-2 rb-isBold">Paragraph</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Source Sans Pro Regular</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Inter</span>
</p>
<p>
I2P is an anonymous network, exposing a simple layer that applications can use to anonymously and securely send messages to each other.
@ -147,7 +147,7 @@
<div class="col-md-6">
<p class="text-black small">
<span class="text-left color-gray-2 rb-isBold">Code Snippet</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Source Code Pro</span>
<span class="text-right color-primary rb-isBold" style="float: right;">Inter</span>
</p>
<pre class="bg-light p-2 prettyprint rb-code" style="border: none;">
$('.i2p-sidebar').on('click', 'a',function() {

53
assets/styles/components.scss
View File

@ -111,10 +111,6 @@
// Other color backgrounds
.background-gray-50 {
background-color: $gray-50;
}
.background-gray-100 {
background-color: $gray-100;
}
@ -259,8 +255,40 @@
background-color: $orange-900;
}
.background-night-50 {
background-color: $night-50;
.background-red-100 {
background-color: $red-100;
}
.background-red-200 {
background-color: $red-200;
}
.background-red-300 {
background-color: $red-300;
}
.background-red-400 {
background-color: $red-400;
}
.background-red-500 {
background-color: $red-500;
}
.background-red-600 {
background-color: $red-600;
}
.background-red-700 {
background-color: $red-700;
}
.background-red-800 {
background-color: $red-800;
}
.background-red-900 {
background-color: $red-900;
}
.background-night-100 {
@ -299,10 +327,6 @@
background-color: $night-900;
}
.background-night-950 {
background-color: $night-950;
}
// Text colors
.color-primary {
@ -444,10 +468,11 @@
}
.btn-link {
color: $primary !important;
color: var(--link) !important;
font-family: "Nunito", sans-serif;
&:hover {
color: $secondary !important;
color: var(--link-hover) !important;
}
}
@ -557,9 +582,9 @@
}
.rb-link {
color: $primary !important;
color: var(--link) !important;
&:hover {
color: $secondary !important;
color: var(--link-hover) !important;
}
}

4
assets/styles/layout.scss
View File

@ -8,6 +8,7 @@
height: 100%;
width: 100%;
background-color: var(--sidebar-inner-bg);
font-family: "Nunito", sans-serif;
// position: fixed;
@ -76,6 +77,7 @@
.navbar__top {
background-color: var(--navbar-bg);
font-family: "Nunito", sans-serif;
}
// bootstrap navbar-light class is not working, overwriting classes to fix this
@ -248,7 +250,7 @@
flex-basis: 50%;
.pass { color: $indigo-700; }
.fail { color: $orange-500; }
.fail { color: $red-800; }
}
}

10
assets/styles/main.scss
View File

@ -37,7 +37,7 @@ a:hover {
--logo-text-color: #{$indigo-900};
--header-text: #{$gray-900};
--sidebar-bg: #{$gray-100};
--sidebar-inner-bg: #{$gray-50};
--sidebar-inner-bg: #{$gray-100};
--sidebar-text: #{$gray-800};
--navbar-bg: #{$indigo-500};
--hover: #{$black};
@ -69,14 +69,14 @@ html[data-theme="light"] {
--secondary-2nd: #{$orange-400};
--body: #{$white};
--text: #{$gray-900};
--link: #{$teal-500};
--link: #{$indigo-600};
--link-hover: #{$teal-600};
--logo-text-color: #{$indigo-900};
--header-text: #{$gray-900};
--sidebar-bg: #{$gray-100};
--sidebar-inner-bg: #{$gray-50};
--sidebar-inner-bg: #{$gray-100};
--sidebar-text: #{$gray-800};
--navbar-bg: #{$indigo-500};
--navbar-bg: #{$indigo-600};
--hover: #{$black};
--border: #{$gray-300};
--card-bg: #{$gray-100};
@ -113,7 +113,7 @@ html[data-theme="dark"] {
--sidebar-bg: #{$night-800};
--sidebar-inner-bg: #{$night-800};
--sidebar-text: #{$gray-100};
--navbar-bg: #{$night-800};
--navbar-bg: #{$indigo-900};
--hover: #{$gray-200};
--border: #{$night-600};
--card-bg: #{$night-800};

50
assets/styles/vars.scss
View File

@ -13,19 +13,17 @@ $black: #000000;
// Gray
$gray-list: (
"50": #f8f9fa,
"100": #f1f3f5,
"200": #e9ecef,
"300": #dee2e6,
"400": #ced4da,
"500": #adb5bd,
"600": #868e96,
"700": #495057,
"800": #343a40,
"900": #212529
"100": #F7FAFC,
"200": #EDF2F7,
"300": #E2E8F0,
"400": #CBD5E0,
"500": #A0AEC0,
"600": #718096,
"700": #4A5568,
"800": #2D3748,
"900": #1A202C
);
$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");
@ -39,7 +37,6 @@ $gray-900: map-get($gray-list, "900");
// Night
$night-list: (
"50": #EBF3FA,
"100": #D1DAE6,
"200": #B1BFCF,
"300": #8A9CB3,
@ -48,11 +45,9 @@ $night-list: (
"600": #374B61,
"700": #2E3D4F,
"800": #212D3B,
"900": #15212D,
"950": #0E171F
"900": #15212D
);
$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");
@ -62,7 +57,6 @@ $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: (
@ -133,6 +127,30 @@ $orange-700: map-get($orange-list, "700");
$orange-800: map-get($orange-list, "800");
$orange-900: map-get($orange-list, "900");
// Red
$red-list: (
"100": #FFF5F5,
"200": #FED7D7,
"300": #FEB2B2,
"400": #FC8181,
"500": #F56565,
"600": #E53E3E,
"700": #C53030,
"800": #9B2C2C,
"900": #742A2A
);
$red-100: map-get($red-list, "100");
$red-200: map-get($red-list, "200");
$red-300: map-get($red-list, "300");
$red-400: map-get($red-list, "400");
$red-500: map-get($red-list, "500");
$red-600: map-get($red-list, "600");
$red-700: map-get($red-list, "700");
$red-800: map-get($red-list, "800");
$red-900: map-get($red-list, "900");
// Mixins
//
// .header-display :before size and position

Write Preview
Loading…
Cancel
Save