Refactor: jobs page styling (#87)

angela-tran · web-flow · commit bdc798780084 · 2023-08-11T11:13:39.000-05:00
diff --git a/_includes/certs.html b/_includes/certs.html
@@ -1,7 +1,7 @@
 {% for cert in site.data.certs %}
 <div>
     <h2 class="san-serif heading">{{ cert.name }}</h2>
-    <ul class="no-bullets">
+    <ul class="list-unstyled">
         {% for value in cert.values %}
         <li>{{ value }}</li>
         {% endfor %}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,3 +1,6 @@
+---
+large_logo: false
+---
 <!DOCTYPE html>
 <html lang="en">
 
@@ -38,7 +41,12 @@
 
 <body>
     <header>
-        <a href="/"><img class="logo" src="/assets/compiler_logo_stacked.svg" alt="Compiler logo"></a>
+        {% if page.large_logo %}
+            {% assign logo_class = "logo-lg" %}
+        {% else %}
+            {% assign logo_class = "logo" %}
+        {% endif %}
+        <a href="/"><img class="{{ logo_class }}" src="/assets/compiler_logo_stacked.svg" alt="Compiler logo"></a>
     </header>
 
     <main>
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 ---
 layout: default
 description: We build open-source, human-centered, secure, agile solutions to support the delivery of government services that increase equity of opportunity.
+large_logo: true
 ---
 <div class="row py-5">
     <h1 class="san-serif">we build software for the government</h1>
diff --git a/jobs.html b/jobs.html
@@ -2,18 +2,28 @@
 layout: default
 title: Jobs with Compiler
 ---
-<h1>Jobs</h1>
+<div class="jobs container mt-5">
+    <div class="row">
+        <div class="col-md-8 offset-md-2 mt-5">
+            <span class="pill rounded p-2">Careers</span>
+            <h1>Compiler is a woman-owned software consultancy that’s passionate about making government tech solutions
+                accessible for all.</h1>
 
-<h2>Accepting applications</h2>
-<ul id="open" class="mx-3"></ul>
+            <h2 class="mt-5 fs-5">Open roles</h2>
+            <ul id="open" class="list-unstyled text-decoration-none"></ul>
 
-<h2>Past opportunities</h2>
-<ul id="closed" class="mx-3"></ul>
+            <h2 class="mt-5 fs-5">Past roles</h2>
+            <ul id="closed" class="list-unstyled"></ul>
 
-<p class="mb-5">
-    Missed a past opportunity? <a href="http://eepurl.com/h6qTKL">Subscribe</a> to our mailing list, as we are always
-    looking for great candidates.
-</p>
+            <p class="my-5">
+                Missed a past opportunity? <a href="http://eepurl.com/h6qTKL">Subscribe</a> to our mailing list, as we
+                are always looking for great candidates.
+            </p>
+
+
+        </div>
+    </div>
+</div>
 
 <script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js" crossorigin="anonymous"></script>
 <script>
@@ -30,7 +40,7 @@ <h2>Past opportunities</h2>
         const open_date = DateTime.fromISO(job.open_date).startOf("day");
         const close_date = DateTime.fromISO(job.close_date).endOf("day");
 
-        if(open_date <= now && close_date >= now) {
+        if (open_date <= now && close_date >= now) {
             open_jobs.push(job);
         }
         else {
diff --git a/styles/base.css b/styles/base.css
@@ -7,7 +7,7 @@
     --navy: #223061;
     --off-black: #262626;
     --black: #000000;
-    --grey: #EDEDED;
+    --grey: #878787;
     --white: #FFFFFF;
 }
 
@@ -54,29 +54,34 @@ a {
     transition: 250ms;
 }
 
+li>a {
+    text-decoration: none;
+}
+
 a:hover,
 a:focus {
     color: var(--green);
+    text-decoration: underline;
 }
 
-ul.no-bullets {
-    padding-left: 0;
-}
-
-ul.no-bullets li {
-    list-style-type: none;
-    padding: 0;
-    margin: 16px 0;
+.certs li {
+    margin: 1rem 0;
 }
 
 @media (min-width: 992px) {
-    ul.no-bullets li {
+    .certs li {
         margin: inherit 0 0;
     }
 }
 
-li.certs {
-    padding-bottom: 0.75rem;
+.jobs li {
+    margin: 1rem 0;
+}
+
+@media (min-width: 992px) {
+    .jobs li {
+        margin: 0.5rem 0 0;
+    }
 }
 
 /*#region Font Family */
@@ -184,17 +189,29 @@ h6 {
     background-color: var(--green);
 }
 
+.pill {
+    font-size: 0.75rem;
+    font-family: "Source Code Pro Regular";
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: 0.075rem;
+    text-transform: uppercase;
+    color: var(--grey);
+    border: 1px solid var(--grey);
+    border-radius: 0.375rem;
+}
+
 /* Header */
 
 :root {
     --header-margin-left: -5px;
-    --logo-width: 15rem;
+    --logo-lg-width: 15rem;
 }
 
 @media (min-width: 992px) {
     :root {
         --header-margin-left: -10px;
-        --logo-width: 20rem;
+        --logo-lg-width: 20rem;
     }
 }
 
@@ -203,8 +220,12 @@ header {
     /* account for padding within the Compiler logo*/
 }
 
+.logo-lg {
+    width: var(--logo-lg-width);
+}
+
 .logo {
-    width: var(--logo-width);
+    width: 5.5rem;
 }
 
 /* Main */
