Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

add Colors, Type & Buttons Pages #3

Open
brandonalbright wants to merge 5 commits into
base: main
Choose a base branch
from
Open

add Colors, Type & Buttons Pages #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9c7cc2
updated colors page, and added css file for same
brandonalbright May 20, 2021
5a398d5
didn't push changes correctly
brandonalbright May 20, 2021
edb15bc
corrected, was writing under ignored files
brandonalbright May 20, 2021
b659c20
add type and buttons page
brandonalbright May 26, 2021
b9c2ea0
Update type.html
brandonalbright Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions docs/Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -278,4 +280,4 @@ DEPENDENCIES
wdm (~> 0.1.1)

BUNDLED WITH
2.2.14
2.2.17
2 changes: 2 additions & 0 deletions docs/_includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ site.title }}</title>
<!-- <link rel="shortcut icon" href="/favicon.ico" /> -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css">
<script src="https://kit.fontawesome.com/211706c7f5.js" crossorigin="anonymous"></script>
</head>
Expand Down
1 change: 1 addition & 0 deletions docs/_includes/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<a href="buttons.html" {% if current[1] == 'buttons' %}class='current'{% endif %}>Buttons</a>
<a href="cards.html" {% if current[1] == 'cards' %}class='current'{% endif %}>Cards</a>
<a href="colors.html" {% if current[1] == 'colors' %}class='current'{% endif %}>Colors</a>
<a href="type.html" {% if current[1] == 'type' %}class='current'{% endif %}>Type</a>
</div>
<p>Atoms</p>
<div class="nav-links">
Expand Down
205 changes: 202 additions & 3 deletions docs/css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Collaborator

@amandathedev amandathedev May 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[non-blocking] I'd recommend using rem instead of px for line-height and font-size. Here's some more info: https://css-tricks.com/is-it-better-to-use-ems-rems-than-px-for-font-size/

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;
}
39 changes: 38 additions & 1 deletion docs/pages/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,41 @@
title: Buttons
permalink: "/buttons"
---
<p>The buttons page</p>
<div>
<h3>on dark backgrounds</h3>
<div class="example-buttons">
<p>Active</p>
<button class="active-button">Donate</button>
</div>
<div class="example-buttons">
<p>Hover</p>
<button class="hover-button">Donate</button>
</div>
<div class="example-buttons">
<p>Pressed</p>
<button class="pressed-button">Donate</button>
</div>
<div class="example-buttons">
<p>Deactivated</p>
<button class="disabled-button" disabled>Donate</button>
</div>
</div>
<div>
<h3>on light backgrounds</h3>
<div class="example-buttons">
<p>Active</p>
<button class="active-button-light">Donate</button>
</div>
<div class="example-buttons">
<p>Hover</p>
<button class="hover-button-light">Donate</button>
</div>
<div class="example-buttons">
<p>Pressed</p>
<button class="pressed-button-light">Donate</button>
</div>
<div class="example-buttons">
<p>Deactivated</p>
<button class="disabled-button-light" disabled>Donate</button>
</div>
</div>
Loading