diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock index b26c3de..c9c9d9b 100644 --- a/docs/Gemfile.lock +++ b/docs/Gemfile.lock @@ -1,7 +1,7 @@ GEM remote: https://rubygems.org/ specs: - activesupport (6.0.3.6) + activesupport (6.0.3.7) concurrent-ruby (~> 1.0, >= 1.0.2) i18n (>= 0.7, < 2) minitest (~> 5.1) @@ -17,28 +17,26 @@ GEM commonmarker (0.17.13) ruby-enum (~> 0.5) concurrent-ruby (1.1.8) - connection_pool (2.2.5) dnsruby (1.61.5) simpleidn (~> 0.1) em-websocket (0.5.2) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) - ethon (0.13.0) + ethon (0.14.0) ffi (>= 1.15.0) + eventmachine (1.2.7) eventmachine (1.2.7-x64-mingw32) - excon (0.80.1) execjs (2.7.0) - faraday (1.4.0) - faraday-excon (~> 1.0) + faraday (1.4.1) + faraday-excon (~> 1.1) faraday-net_http (~> 1.0) - faraday-net_http_persistent (~> 1.0) + faraday-net_http_persistent (~> 1.1) multipart-post (>= 1.2, < 3) ruby2_keywords (>= 0.0.4) - faraday-excon (1.0.0) - excon (>= 0.27.4) + faraday-excon (1.1.0) faraday-net_http (1.0.1) - faraday-net_http_persistent (1.0.3) - net-http-persistent (>= 3.1) + faraday-net_http_persistent (1.1.0) + ffi (1.15.0) ffi (1.15.0-x64-mingw32) forwardable-extended (2.6.0) gemoji (3.0.1) @@ -219,11 +217,13 @@ GEM jekyll-seo-tag (~> 2.1) minitest (5.14.4) multipart-post (2.1.1) - net-http-persistent (4.0.1) - connection_pool (~> 2.2) + nokogiri (1.11.3-arm64-darwin) + racc (~> 1.4) nokogiri (1.11.3-x64-mingw32) racc (~> 1.4) - octokit (4.20.0) + nokogiri (1.11.3-x86_64-darwin) + racc (~> 1.4) + octokit (4.21.0) faraday (>= 0.9) sawyer (~> 0.8.0, >= 0.5.3) pathutil (0.16.2) @@ -261,12 +261,14 @@ GEM tzinfo (>= 1.0.0) unf (0.1.4) unf_ext + unf_ext (0.0.7.7) unf_ext (0.0.7.7-x64-mingw32) unicode-display_width (1.7.0) wdm (0.1.1) zeitwerk (2.4.2) PLATFORMS + universal-darwin-20 x64-mingw32 DEPENDENCIES @@ -278,4 +280,4 @@ DEPENDENCIES wdm (~> 0.1.1) BUNDLED WITH - 2.2.14 + 2.2.17 diff --git a/docs/_includes/head.html b/docs/_includes/head.html index af586ea..b15c43b 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -7,6 +7,8 @@ {{ site.title }} + + diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html index 7e67752..d1521e8 100644 --- a/docs/_includes/nav.html +++ b/docs/_includes/nav.html @@ -12,6 +12,7 @@ Buttons Cards Colors + Type

Atoms

diff --git a/docs/css/style.scss b/docs/css/style.scss index 2c930ae..bbd4ad8 100644 --- a/docs/css/style.scss +++ b/docs/css/style.scss @@ -85,18 +85,217 @@ nav { } .main { + font-family: 'Karla', Helvetica; h1 { - font-size: 2.625rem; - font-weight: 600; - line-height: 3rem; + font-family: 'Karla', Helvetica; + font-size: 38px; + font-weight: bold; + line-height: 44px; margin-top: 0; } + h2 { + font-family: 'Karla', Helvetica; + font-weight: bold; + font-size: 24px; + line-height: 28px; + } + + h3 { + font-family: 'Karla', Helvetica; + font-weight: normal; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + } + + p { + font-size: 18px; + line-height: 21px; + } + + b { + font-weight: bold; + font-size: 16px; + line-height: 19px; + } + + .intro-text { color: rgb(124, 124, 124); font-size: 1.25rem; line-height: 1.625rem; margin-bottom: 2rem; } +} + +.color-box { + border: 1px solid #000000; + box-sizing: border-box; + height: 114px; + width: 114px; +} + +.box { + box-sizing: border-box; + padding: 20px; +} + +.type-box { + width: 275px; + height: auto; + padding: 20px; +} + +.example-buttons { + width: 364px; + display: flex; + justify-content: space-between; +} + +.active-button { + background: #FFFFFF; + border: 1.5px solid #126B55; + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + color: #093228; + + &:hover { + background: #126B55; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + color: #FFFFFF; + } + + &:focus { + background: #093228; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + color: rgba(255, 255, 255, 0.5); + } + + &:disabled{ + background: #FFFFFF; + border: 1.5px solid #BABABA; + } +} + +.hover-button { + border: 1.5px solid #126B55; + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + background: #126B55; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + color: #FFFFFF; +} + +.pressed-button { + border: 1.5px solid #126B55; + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + background: #093228; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + color: rgba(255, 255, 255, 0.5); +} + +.disabled-button { + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + background: #FFFFFF; + border: 1.5px solid #BABABA; +} + +.active-button-light { + background: #126B55; + border: 1.5px solid #126B55; + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + color: #FFFFFF; + + &:hover { + background: #FFFFFF; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + color: #093228; + } +} + +.hover-button-light { + border: 1.5px solid #126B55; + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + background: #FFFFFF; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + color: #093228; +} + +.pressed-button-light { + border: 1.5px solid #126B55; + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + background: #D2D7DF; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); + color: rgba(0, 0, 0, 0.5); +} + +.disabled-button-light { + border: none; + border-radius: 5px; + width: 101px; + height: 35px; + font-family: Karla; + font-style: normal; + font-weight: bold; + font-size: 16px; + line-height: 19px; + text-align: center; + background: #909090; + color: #FFFFFF; } \ No newline at end of file diff --git a/docs/pages/buttons.html b/docs/pages/buttons.html index 61757c1..8d25514 100644 --- a/docs/pages/buttons.html +++ b/docs/pages/buttons.html @@ -3,4 +3,41 @@ title: Buttons permalink: "/buttons" --- -

The buttons page

\ No newline at end of file +
+

on dark backgrounds

+
+

Active

+ +
+
+

Hover

+ +
+
+

Pressed

+ +
+
+

Deactivated

+ +
+
+
+

on light backgrounds

+
+

Active

+ +
+
+

Hover

+ +
+
+

Pressed

+ +
+
+

Deactivated

+ +
+
\ No newline at end of file diff --git a/docs/pages/colors.html b/docs/pages/colors.html index 1798b8f..fc9a26f 100644 --- a/docs/pages/colors.html +++ b/docs/pages/colors.html @@ -3,4 +3,121 @@ title: Colors permalink: "/colors" --- -

The colors page

\ No newline at end of file +
+

Logo Color

+

Use these colors for any graphics where type doesn’t need to be read.

+
+
+
+

Main Logo Green

+

#10A882

+
+
+
+

Primary Colors

+

Use these colors for any graphics where type does need to be read.

+
+
+
+
+

Dark Green

+

#126B55

+
+
+
+
+

Background Grey

+

#D2D7DF

+
+
+
+
+

Background White

+

#FFFFFF

+
+
+
+
+

Charcoal

+

#444444

+
+
+
+
+

Black

+

#000000

+
+
+
+
+

Button Pressed

+

#093228

+
+
+
+
+

Button Deactivated

+

#909090

+
+
+
+
+

CEIC Purple

+

#4C327D

+
+
+
+
+

Type Usage with Colors

+
+
+
+

+ Aa
#FFFFFF +

+
+
+
+
+

+ Aa
#126B55 +

+
+
+
+
+

+ Aa
#000000 +

+
+
+
+
+

+ Aa
#000000 +

+
+
+
+
+

+ Aa
#FFFFFF +

+
+
+
+
+

+ Aa
#FFFFFF +

+
+
+
+
+

+ Aa
#4C327D +

+
+
+
+
\ No newline at end of file diff --git a/docs/pages/type.html b/docs/pages/type.html new file mode 100644 index 0000000..99e62a6 --- /dev/null +++ b/docs/pages/type.html @@ -0,0 +1,47 @@ +--- +layout: default +title: Type +permalink: "/type" +--- +
+ +
+

PRIMARY TYPEFACE

+

Karla

+

abcdefghijklmnopqrstuvwxyz

+
+ +
+

Type Sizes

+

H1 Bold, 38px

+

H2 Bold, 24px

+

H3 Regular, 20px

+

P Regular, 18px

+ B Bold, 16px +
+ +
+

Line Height

+

Line height for Heading One is 44px.

+

Line height for Heading Two is 28px

+

line height for heading three is 23px

+

Line height for Paragraph is 21px

+
+
+
+ +
+

secondary typeface (if primary isn't available)

+

Helvetica

+

abcdefghijklmnopqrstuvwxyz

+
+ +
+

type sizes

+

H1 Bold, 38px

+

H2 Bold, 24px

+

H3 Regular, 20px

+

P Regular, 18px

+ B Bold, 16px +
+