From fc86b36751d595497ab042e56964c54295a2d3c1 Mon Sep 17 00:00:00 2001 From: Anxhelo Lushka Date: Mon, 4 May 2020 22:00:14 +0200 Subject: [PATCH] Added dark theme, draft variables and branding page --- _config.yml | 2 +- _includes/brand/colors.html | 111 ++++----- _includes/brand/logo.html | 231 ++++++++++++++++++ _includes/brand/typography.html | 26 ++ _includes/head.html | 67 +++++ _includes/navbar.html | 7 +- _includes/navbar_side.html | 2 +- _includes/scripts.html | 1 + _includes/sidebar.html | 4 +- _includes/sidebar_2.html | 4 +- _layouts/brand.html | 4 +- _layouts/components.html | 4 +- _layouts/default.html | 2 +- _layouts/design.html | 4 +- _layouts/getting-started.html | 2 +- _layouts/home.html | 2 +- _layouts/writing.html | 6 +- assets/images/composition-horizontal.svg | 18 ++ assets/images/composition-vertical.svg | 19 ++ assets/images/horizontal_color.png | Bin 11234 -> 0 bytes assets/images/i2p-wordmark.svg | 5 + assets/images/i2p_horizontal_black.png | Bin 0 -> 6895 bytes assets/images/i2p_horizontal_color.png | Bin 0 -> 8156 bytes ...tal_white.png => i2p_horizontal_white.png} | Bin assets/images/i2p_icon_black.png | Bin 0 -> 4860 bytes assets/images/i2p_icon_color.png | Bin 0 -> 5064 bytes assets/images/i2p_icon_white.png | Bin 0 -> 3946 bytes assets/images/i2p_vertical_black.png | Bin 0 -> 6923 bytes assets/images/i2p_vertical_color.png | Bin 0 -> 7518 bytes assets/images/i2p_vertical_white.png | Bin 0 -> 5713 bytes assets/images/icon_color.png | Bin 9825 -> 0 bytes assets/images/icon_white.png | Bin 7004 -> 0 bytes assets/images/logo-white.svg | 6 + assets/images/vertical_color.png | Bin 10461 -> 0 bytes assets/images/vertical_white.png | Bin 9626 -> 0 bytes assets/javascript/index.js | 19 ++ assets/javascript/popper.min.js | 4 + assets/styles/components.scss | 90 ++++--- assets/styles/layout.scss | 74 ++++-- assets/styles/main.scss | 120 ++++++++- assets/styles/vars.scss | 95 ++++--- assets/styles/visuals.scss | 6 +- 42 files changed, 767 insertions(+), 168 deletions(-) create mode 100644 assets/images/composition-horizontal.svg create mode 100644 assets/images/composition-vertical.svg delete mode 100644 assets/images/horizontal_color.png create mode 100644 assets/images/i2p-wordmark.svg create mode 100644 assets/images/i2p_horizontal_black.png create mode 100644 assets/images/i2p_horizontal_color.png rename assets/images/{horizontal_white.png => i2p_horizontal_white.png} (100%) create mode 100644 assets/images/i2p_icon_black.png create mode 100644 assets/images/i2p_icon_color.png create mode 100644 assets/images/i2p_icon_white.png create mode 100644 assets/images/i2p_vertical_black.png create mode 100644 assets/images/i2p_vertical_color.png create mode 100644 assets/images/i2p_vertical_white.png delete mode 100644 assets/images/icon_color.png delete mode 100644 assets/images/icon_white.png create mode 100644 assets/images/logo-white.svg delete mode 100644 assets/images/vertical_color.png delete mode 100644 assets/images/vertical_white.png create mode 100644 assets/javascript/popper.min.js diff --git a/_config.yml b/_config.yml index 2bb5696..83b9dd8 100644 --- a/_config.yml +++ b/_config.yml @@ -1,5 +1,5 @@ title: I2P Styleguide -logo: "/assets/images/horizontal_white.png" +logo: "/assets/images/logo-white.svg" description: >- # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this diff --git a/_includes/brand/colors.html b/_includes/brand/colors.html index d26d202..ee92fbf 100644 --- a/_includes/brand/colors.html +++ b/_includes/brand/colors.html @@ -1,67 +1,54 @@ -
+

Colors

-

The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.

+

The I2P brand currently consists of 2 primary colors and 2 secondary colors.

-
-
-
#4661A9
-
Primary Color
+
+
+
Primary
+
+
+
+
+
+
+ Free Speech Blue
#526BCE
R82 G107 B206 +
+
+
+
+
+
+
+ Deep Komaru
#363A68
R54 G58 B104 +
+
+
+
+
-
-
#60AB60
-
Secondary color
-
-
-
#FFC434
-
Warning
-
-
-
#E15647
-
Danger
-
-
- -
-
-
#f8f9fa
-
Gray 0
-
-
-
#f1f3f5
-
Gray 1
-
-
-
#e9ecef
-
Gray 2
-
-
-
#dee2e6
-
Gray 3
-
-
-
#ced4da
-
Gray 4
-
-
-
#adb5bd
-
Gray 5
-
-
-
#868e96
-
Gray 6
-
-
-
#495057
-
Gray 7
-
-
-
#343a40
-
Gray 8
-
-
-
#212529
-
Gray 9
-
-
+
+
Secondary
+
+
+
+
+
+
+ Medium Torquoise
#A6F8F8
R166 G248 B248 +
+
+
+
+
+
+
+ Sandy Brown
#EF9252
R246 G173 B85 +
+
+
+
+
+
+
\ No newline at end of file diff --git a/_includes/brand/logo.html b/_includes/brand/logo.html index e69de29..dff0755 100644 --- a/_includes/brand/logo.html +++ b/_includes/brand/logo.html @@ -0,0 +1,231 @@ + + +
+
+
Composition (Horizontal)
+
+ I2P Horizontal Composition +
+
+
+
Composition (Vertical)
+
+ I2P Vertical Composition +
+
+
+ +
+
+
Safe Space (Horizontal)
+
+ I2P Safe Space Horizontal +
+
+
+
Safe Space (Vertical)
+
+ I2P Safe Space Vertical +
+
+
+ +
+

Download Logo Assets

+
+
+
+
+ I2P Horizontal color logo +
+

Horizontal Color Light Background

+
+ +
+ PNG + SVG +
+
+
+ +
+
+ I2P Horizontal black logo +
+

Horizontal Black Light Background

+
+ +
+ PNG + SVG +
+
+
+ +
+
+ I2P Horizontal color logo with light background +
+

Horizontal Color Light Background

+
+ +
+ PNG + SVG +
+
+
+
+
+ I2P Horizontal white logo with black background +
+

Horizontal White Black Background

+
+ +
+ PNG + SVG +
+
+
+
+ +
+
+
+ I2P Vertical color logo +
+

Vertical Color Light Background

+
+ +
+ PNG + SVG +
+
+
+ +
+
+ I2P Vertical black logo +
+

Vertical Black Light Background

+
+ +
+ PNG + SVG +
+
+
+ +
+
+ I2P Vertical color logo with light background +
+

Vertical Color Light Background

+
+ +
+ PNG + SVG +
+
+
+
+
+ I2P Vertical white logo with black background +
+

Vertical White Black Background

+
+ +
+ PNG + SVG +
+
+
+
+ +
+
+
+ I2P icon color logo +
+

Icon Color Light Background

+
+ +
+ PNG + SVG +
+
+
+ +
+
+ I2P icon black logo +
+

Icon Black Light Background

+
+ +
+ PNG + SVG +
+
+
+ +
+
+ I2P icon color logo with light background +
+

Icon Color Light Background

+
+ +
+ PNG + SVG +
+
+
+
+
+ I2P icon white logo with black background +
+

Icon White Black Background

+
+ +
+ PNG + SVG +
+
+
+
\ No newline at end of file diff --git a/_includes/brand/typography.html b/_includes/brand/typography.html index e69de29..7d960ee 100644 --- a/_includes/brand/typography.html +++ b/_includes/brand/typography.html @@ -0,0 +1,26 @@ +
+

Typography

+
+ +
+
+
+

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

+

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

+

0 1 2 3 4 5 6 7 8 9

+
+

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

+
+
+
+ + + + + +
+ +
+
\ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 3b5019a..d56cbc3 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -7,3 +7,70 @@ + + + + + + diff --git a/_includes/navbar.html b/_includes/navbar.html index e439c47..f9de15f 100644 --- a/_includes/navbar.html +++ b/_includes/navbar.html @@ -1,7 +1,10 @@ -