From a6e32d3b7f7991619b60768e8e073f81ef199000 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 27 Jul 2023 21:33:57 +0000 Subject: [PATCH 1/7] refactor(css): use btn, btn-primary, btn-outline-primary Bootstrap CSS variables --- _layouts/job_post.html | 2 +- index.html | 4 +-- styles/base.css | 70 ++++++++++++++++++++++++------------------ 3 files changed, 43 insertions(+), 33 deletions(-) diff --git a/_layouts/job_post.html b/_layouts/job_post.html index 62366c9d..22691ec5 100644 --- a/_layouts/job_post.html +++ b/_layouts/job_post.html @@ -7,7 +7,7 @@

{{ page.title }}{% if page.type %} ({{ page.type }}){% endif %}

{{ content }} {% if page.apply_link %} diff --git a/index.html b/index.html index 235558ad..e8393dba 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@

we build software for the government

- Capabilities Statement - Get in touch + Capabilities Statement + Get in touch
diff --git a/styles/base.css b/styles/base.css index ee38e019..ff8ad68b 100644 --- a/styles/base.css +++ b/styles/base.css @@ -52,8 +52,8 @@ a { transition: 250ms; } -a:hover, -a:focus { +a:hover:not(.btn), +a:focus:not(.btn) { color: var(--brand-primary-white); } @@ -152,34 +152,44 @@ h6 { /*#endregion */ -.primary-btn { - text-decoration: none; - border: 3px solid var(--brand-primary-green); - background-color: var(--brand-primary-green); - color: var(--text-black); - padding: 1rem; - margin-right: 15px; - margin-bottom: 10px; -} - -.primary-btn:hover { - opacity: 70%; - color: var(--text-black) -} - -.secondary-btn { - text-decoration: none; - border: 3px solid var(--brand-primary-green); - color: var(--brand-primary-white); - padding: 1rem; - margin-right: 15px; - margin-bottom: 10px; -} - -.secondary-btn:hover { - opacity: 70%; - color: var(--brand-primary-white); - background-color: var(--brand-primary-green); +/* Buttons */ + +.btn { + --bs-btn-padding-x: 1rem; + --bs-btn-padding-y: 1rem; + --bs-btn-font-family: "Source Code Pro Bold", monospace; + --bs-btn-font-weight: 1rem; + --bs-btn-line-height: 120%; + --bs-btn-border-radius: 0; + --bs-btn-box-shadow: none; + --bs-btn-focus-box-shadow: 0 0 0 2px #1C1C1C, 0 0 0 4px #88B440; +} + +.btn-primary { + --bs-btn-color: #1C1C1C; + --bs-btn-bg: #88B440; + --bs-btn-border-width: 0; + --bs-btn-border-color: #88B440; + --bs-btn-hover-color: #1C1C1C; + --bs-btn-hover-bg: #A6D15F; + --bs-btn-hover-border-color: #A6D15F; + --bs-btn-disabled-opacity: #7D8084; +} + +.btn-outline-primary { + --bs-btn-color: #FFFFFF; + --bs-btn-border-color: #88B440; + --bs-btn-hover-color: #fff; + --bs-btn-hover-bg: #7A974A; + --bs-btn-hover-border-color: #88B440; + --bs-btn-active-color: #fff; + --bs-btn-active-bg: #5E7734; + --bs-btn-active-border-color: #88B440; + --bs-btn-active-shadow: none; + --bs-btn-disabled-color: #7D8084; + --bs-btn-disabled-bg: transparent; + --bs-btn-disabled-border-color: #7D8084; + --bs-gradient: none; } /* Header */ From e9d6718e7e951ee2c9ad2413c37e76dbbbe71ff7 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 27 Jul 2023 21:36:46 +0000 Subject: [PATCH 2/7] fix(index): add mobile padding --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e8393dba..dff0ccf4 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@

we build software for the government

- Capabilities Statement + Capabilities Statement Get in touch
From d70237eb3b6b84f4bfa7b911de142d41ca5faf53 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 27 Jul 2023 21:37:06 +0000 Subject: [PATCH 3/7] fix(css): use full color --- styles/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/base.css b/styles/base.css index ff8ad68b..99391204 100644 --- a/styles/base.css +++ b/styles/base.css @@ -179,7 +179,7 @@ h6 { .btn-outline-primary { --bs-btn-color: #FFFFFF; --bs-btn-border-color: #88B440; - --bs-btn-hover-color: #fff; + --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #7A974A; --bs-btn-hover-border-color: #88B440; --bs-btn-active-color: #fff; From 8d177576b11b45f3f86aaeb9508cc85234bdf2c4 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 27 Jul 2023 21:47:45 +0000 Subject: [PATCH 4/7] fix(index): remove mb from desktop --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index dff0ccf4..1148d69a 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@

we build software for the government

- Capabilities Statement + Capabilities Statement Get in touch
From 2324a4abc06868cc0a86992faf9450b4cdb2437b Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 27 Jul 2023 21:52:44 +0000 Subject: [PATCH 5/7] feat(css): add disabled style for primary --- styles/base.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/styles/base.css b/styles/base.css index 99391204..683f9395 100644 --- a/styles/base.css +++ b/styles/base.css @@ -168,12 +168,15 @@ h6 { .btn-primary { --bs-btn-color: #1C1C1C; --bs-btn-bg: #88B440; - --bs-btn-border-width: 0; + --bs-btn-border-width: 1px; --bs-btn-border-color: #88B440; --bs-btn-hover-color: #1C1C1C; --bs-btn-hover-bg: #A6D15F; --bs-btn-hover-border-color: #A6D15F; - --bs-btn-disabled-opacity: #7D8084; + --bs-btn-disabled-color: #1C1C1C; + --bs-btn-disabled-bg: #7D8084; + --bs-btn-disabled-border-color: #7D8084; + --bs-btn-disabled-opacity: 1; } .btn-outline-primary { From f410863bbba90d10588438402c37d228376dc093 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 27 Jul 2023 21:57:38 +0000 Subject: [PATCH 6/7] feat(styles): first pass at styles/components page --- styles.html | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 styles.html diff --git a/styles.html b/styles.html new file mode 100644 index 00000000..e06e223c --- /dev/null +++ b/styles.html @@ -0,0 +1,30 @@ +--- +layout: default +description: Internal style guide +--- + +
+
+
+

H1 - This is header one.

+

H2 - This is an example of header two.

+

H3 - Maze screensavers barbie scrunched socks airwalk.

+

H4 - Maze screensavers barbie scrunched socks airwalk. Nerf guns savage garden roseanne barr turquoise full house, bubble tape no fear t-shirts mia hamm enrique iglesias apollo 13

+
H5 - Maze screensavers barbie scrunched socks airwalk. Nerf guns savage garden roseanne barr turquoise full house, bubble tape no fear t-shirts mia hamm enrique iglesias apollo 13
+
+

This is the primary body copy used throughout the site, for both marketing and product pages. Body styles are intended for use in multi-line paragraphs of content and by default is left-aligned for optimized legibility. The ideal line length for paragraphs is 45 to 80 characters, which for this style roughly translates to a container width of 400 to 640px.

+
+ Link to home page +
+ +
+ .btn .btn-outline-primary + .btn .btn-outline-primary .disabled +
+
+
+
+
From 1828798ce4b460a682236a13b15e22b6dcb1dec6 Mon Sep 17 00:00:00 2001 From: Machiko Yasuda Date: Thu, 27 Jul 2023 22:10:55 +0000 Subject: [PATCH 7/7] feat(style-guide): add ul --- styles.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/styles.html b/styles.html index e06e223c..1f28ab8c 100644 --- a/styles.html +++ b/styles.html @@ -25,6 +25,34 @@
H5 - Maze screensavers barbie scrunched socks airwalk. Nerf guns savage gard .btn .btn-outline-primary .disabled
+
    +
  • This is a list.
    • +
  • However, this style only applies to immediate child elements.
    • +
  • Nested lists: +
      +
    • are unaffected by this style
      • +
    • will still show a bullet
      • +
    • and have appropriate left margin
      • +
    +
    • +
  • This may still come in handy in some situations.
    • +
+ +
    +
  • This is a list with class "list-unstyled".
    • +
  • It appears completely unstyled.
    • +
  • Structurally, it's still a list.
    • +
  • However, this style only applies to immediate child elements.
    • +
  • Nested lists: +
      +
    • are unaffected by this style
      • +
    • will still show a bullet
      • +
    • and have appropriate left margin
      • +
    +
    • +
  • This may still come in handy in some situations.
    • +
+