Refactor: Buttons + Create Style Guide page

_layouts/job_post.html

@@ -7,7 +7,7 @@ <h1>{{ page.title }}{% if page.type %} ({{ page.type }}){% endif %}</h1>
 
 {{ content }} {% if page.apply_link %}
 <a
-  class="d-inline-block monospace primary-btn"
+  class="d-inline-block btn btn-primary"
   id="apply"
   href="{{ page.apply_link }}"
 >

index.html

@@ -7,6 +7,6 @@ <h1 class="san-serif">we build software for the government</h1>
 </div>
 
 <div class="d-flex flex-column flex-lg-row mb-5">
-    <a class="monospace btn-link primary-btn" href="/capabilities">Capabilities Statement</a>
-    <a class="monospace btn-link secondary-btn" href="mailto:hello@compiler.la">Get in touch</a>
+    <a class="btn btn-primary mb-3 me-md-3 mb-md-0" href="/capabilities">Capabilities Statement</a>
+    <a class="btn btn-outline-primary" href="mailto:hello@compiler.la">Get in touch</a>
 </div>

styles.html

@@ -0,0 +1,58 @@
+---
+layout: default
+description: Internal style guide
+---
+
+<div class="container-fluid">
+    <div class="row">
+        <div class="offset-md-2 col-md-7 mt-5">
+            <h1 class="mt-5 pt-5">H1 - This is header one.</h1>
+            <h2>H2 - This is an example of header two.</h2>
+            <h3>H3 - Maze screensavers barbie scrunched socks airwalk.</h3>
+            <h4>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</h4>
+            <h5>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</h5>
+            <hr>
+            <p>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.</p>
+            <hr>
+            <a href="/">Link to home page</a>
+            <hr>
+            <div>
+                <a href="/" class="btn btn-primary me-md-4 mb-4 mb-md-0">.btn .btn-primary</a>
+                <a href="/" class="btn btn-primary disabled">.btn .btn-primary .disabled</a>
+            </div>
+            <div class="mt-4">
+                <a href="/" class="btn btn-outline-primary me-md-4 mb-4 mb-md-0">.btn .btn-outline-primary</a>
+                <a href="/" class="btn btn-outline-primary disabled">.btn .btn-outline-primary .disabled</a>
+            </div>
+            <hr>
+            <ul>
+                <li>This is a list.</li>
+                <li>However, this style only applies to immediate child elements.</li>
+                <li>Nested lists:
+                    <ul>
+                    <li>are unaffected by this style</li>
+                    <li>will still show a bullet</li>
+                    <li>and have appropriate left margin</li>
+                    </ul>
+                </li>
+                <li>This may still come in handy in some situations.</li>
+            </ul>
+
+            <ul class="list-unstyled">
+                <li>This is a list with class "list-unstyled".</li>
+                <li>It appears completely unstyled.</li>
+                <li>Structurally, it's still a list.</li>
+                <li>However, this style only applies to immediate child elements.</li>
+                <li>Nested lists:
+                  <ul>
+                    <li>are unaffected by this style</li>
+                    <li>will still show a bullet</li>
+                    <li>and have appropriate left margin</li>
+                  </ul>
+                </li>
+                <li>This may still come in handy in some situations.</li>
+            </ul>
+            <hr>
+        </div>
+    </div>
+</div>

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,47 @@ 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: 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-color: #1C1C1C;
+    --bs-btn-disabled-bg: #7D8084;
+    --bs-btn-disabled-border-color: #7D8084;
+    --bs-btn-disabled-opacity: 1;
+}
+
+.btn-outline-primary {
+    --bs-btn-color: #FFFFFF;
+    --bs-btn-border-color: #88B440;
+    --bs-btn-hover-color: #FFFFFF;
+    --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 */