Skip to content

Home #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 26 commits into from
Aug 24, 2023
Merged

Home #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
00ebb8c
feat(footer): first pass @ footer, certs, new gutter
machikoyasuda Aug 22, 2023
19bc8e2
fix(home): remove large logo logic and update bg color
machikoyasuda Aug 22, 2023
ccc608b
feat(home): first pass @ home
machikoyasuda Aug 21, 2023
6e157ab
feat(home): p is text-info color
machikoyasuda Aug 22, 2023
f5ec3ef
feat(home): p is text-info color
machikoyasuda Aug 23, 2023
b4de068
fix(home): p is col-lg-6
machikoyasuda Aug 22, 2023
14961c3
fix(home): p is col-lg-6
machikoyasuda Aug 22, 2023
3f432f7
feat(css): teal is now cyan, different color
machikoyasuda Aug 22, 2023
63cdbe7
fix(css): remove unused class, colors
machikoyasuda Aug 22, 2023
cd685a6
feat(outline): add outline primary button
machikoyasuda Aug 22, 2023
4a37bb0
feat(outline): add outline primary button
machikoyasuda Aug 23, 2023
0316cca
fix(btn): declare focus border color
machikoyasuda Aug 22, 2023
f7d168a
feat(a): add focus for a link
machikoyasuda Aug 22, 2023
08511d8
fix(css): fix bs-secondary
machikoyasuda Aug 22, 2023
49ddef8
fix(css): convert px to rem
machikoyasuda Aug 22, 2023
4926bce
refactor(css): convert all px to rem
machikoyasuda Aug 22, 2023
b989a2f
refactor(css): continue to convert all px to rem
machikoyasuda Aug 22, 2023
c3396d9
refactor(css): continue to convert all px to rem
machikoyasuda Aug 23, 2023
4d73f83
fix: add ;
machikoyasuda Aug 22, 2023
5368d95
fix(jobs): fix link regression on Jobs page, use gap and bootstrap sp…
machikoyasuda Aug 22, 2023
e3c15ab
fix(css): typo on h2 vs h3
machikoyasuda Aug 23, 2023
473534d
fix(logo): add width/height, remove class - same for M and D
machikoyasuda Aug 23, 2023
b29bd5c
fix(home): center the container with equal m/p
machikoyasuda Aug 23, 2023
52b9c66
fix(img): rename
machikoyasuda Aug 23, 2023
615c4bb
fix(nav): make logo focus better
machikoyasuda Aug 24, 2023
b316b50
fix(perf): add w/h for brand pattern
machikoyasuda Aug 24, 2023
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
12 changes: 2 additions & 10 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
---
large_logo: false
---
<!DOCTYPE html>
<html lang="en">

Expand Down Expand Up @@ -40,13 +37,8 @@
</head>

<body>
<header class="container-fluid pt-3">
{% 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 class="container-fluid">
<a class="d-inline-block" href="/"><img width="88" height="46" src="/assets/compiler_logo_stacked.svg" alt="Compiler logo"></a>
</header>

<main class="container-fluid">
Expand Down
2 changes: 1 addition & 1 deletion _layouts/job_post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
title_prefix: "Jobs with Compiler:"
---

<div class="container">
<div class="container posting">
<div class="row">
<div class="offset-md-2 col-md-7 col-12 mt-5 pt-5 mb-5 pb-5">
<h1 class="mt-4 pt-2">{{ page.title }}{% if page.type %} ({{ page.type }}){% endif %}</h1>
Expand Down
10 changes: 10 additions & 0 deletions assets/compiler_brandpattern.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 14 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
---
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 pt-5 pb-5 mb-4">
<h1 class="sans-serif h3 fw-normal pb-0 mb-0">we build software for the government</h1>
</div>

<div class="d-flex flex-column flex-lg-row mb-5 pb-4">
<a class="monospace btn-link primary-btn" href="/capabilities">Capabilities Statement</a>
<a class="monospace btn-link secondary-btn" href="mailto:[email protected]">Get in touch</a>
<div class="row">
<div class="container my-5 py-5">
<div class="offset-lg-1 col-lg-7 mt-md-4">
<img alt="" width="108.995px" height="8" src="assets/compiler_brandpattern.svg">
<h1 class="h2 mb-3 pt-4 mt-3">Software built by humans, for humans, in LA</h1>
</div>
<div class="offset-lg-1 col-lg-6 mb-md-4">
<p class="mb-3 pb-3 text-info">Compiler is a woman-owned software consultancy that’s passionate about making government tech solutions easy-to-use and accessible for all</p>
<div class="d-flex flex-column flex-lg-row gap-3">
<a class="btn btn-primary" target="_blank" href="/capabilities">Capabilities Statement</a>
<a class="btn btn-outline-primary" href="mailto:[email protected]">Get in touch</a>
</div>
</div>
</div>
</div>
8 changes: 4 additions & 4 deletions jobs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
<h1>Compiler is a woman-owned software consultancy that’s passionate about making government tech solutions
accessible for all.</h1>

<h2 class="mt-5 fs-6">Open roles</h2>
<ul id="open" class="list-unstyled text-decoration-none"></ul>
<h2 class="mt-5 fs-6 pb-1 mb-2">Open roles</h2>
<ul id="open" class="list-unstyled d-flex flex-column gap-2 text-decoration-none"></ul>

<h2 class="mt-5 fs-6">Past roles</h2>
<ul id="closed" class="list-unstyled"></ul>
<h2 class="mt-5 fs-6 pb-1 mb-2">Past roles</h2>
<ul id="closed" class="list-unstyled d-flex flex-column gap-2"></ul>
Copy link
Member Author

Choose a reason for hiding this comment

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

Use d-flex flex-column gap-2 to create a 8px vertical gap (as in, padding) between the list items. d-flex flex-column sets the links to flow vertically, rather than horizontally and tells gap to create the gap vertically.


<p class="my-5">
Missed a past opportunity? <a href="http://eepurl.com/h6qTKL">Subscribe</a> to our mailing list, as we
Expand Down
190 changes: 119 additions & 71 deletions styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
@import url("./fonts.css");

:root {
--green: #88B440;
--white: #FFFFFF;
--brand-primary-cyan: #51B1C7;
--text-black: #1C1C1C;
--brand-primary-green: #88B440;
--brand-primary-black: #1C1C1C;
--bs-light-rgb: 84, 84, 84; /* for the HR above Footer */
--bs-light: #545454; /* brand/scales/gray/4 */
--brand-primary-cyan: #51B1C7;
--bs-primary: #88B440; /* Use with .text-primary */
--bs-primary-rgb: 136, 180, 64;
--bs-secondary: #51B1C7; /* Use with .text-secondary */
--bs-secondary-rgb: 81, 177, 199;
--bs-light: #545454; /* Use with .border-light above Footer - /brand/scales/gray/4 */
--bs-light-rgb: 84, 84, 84;
--bs-info: #BEB3B3; /* Use with .text-info */
--bs-info-rgb: 190,190,190;
--bs-font-sans-serif: "Roboto", system-ui,-apple-system,"Segoe UI","Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--bs-font-monospace: "Source Code Pro Bold",monospace;
--focus-box-shadow: 0 0 0 calc(2.5rem / 16) var(--brand-primary-black), 0 0 0 calc(4rem / 16) var(--brand-primary-green);
Copy link
Member Author

Choose a reason for hiding this comment

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

This code creates this effect as a box-shadow:
image

How to read this code:

  • 0 0 0 calc(2.5rem / 16) var(--brand-primary-black): Create a 2.5px-thick black line, the same color as the background color.
  • 0 0 0 calc(4rem / 16) var(--brand-primary-green): Below that first line, starting from the same point, add another 4px of green line. Only 1.5px of green will actually show up. That's calculated like this: 4-2.5 = 1.5.

}

body {
Expand Down Expand Up @@ -44,19 +48,20 @@ li {
}

a {
color: var(--green);
color: var(--brand-primary-green);
text-decoration: none;
transition: 250ms;
font-weight: 700;
}

li>a {
text-decoration: none;
Comment on lines -52 to -53
Copy link
Member Author

Choose a reason for hiding this comment

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

No longer necessary because all a elements have text-decoration: none now.

a:hover:not(.btn) {
color: var(--brand-primary-green);
text-decoration: underline;
}

a:hover,
a:focus {
color: var(--green);
text-decoration: underline;
a:focus:not(.btn) {
outline: none;
box-shadow: var(--focus-box-shadow);
}

/*#region Font Family */
Expand All @@ -83,43 +88,60 @@ h4,

:root {
--title-font-size: 1.75rem;
--button-text-font-size: 1.25rem;
}

@media (min-width: 992px) {
:root {
--title-font-size: 2rem;
--button-text-font-size: 1.5rem;
}
}

.lg-link {
font-size: var(--title-font-size);
}

.btn-link {
font-size: var(--button-text-font-size);
/* Headlines */

:root {
--h2-font-size: calc(32rem / 16);
--h2-font-weight: 500;
--h2-line-height: 120%;
--h3-font-size: calc(24rem / 16);
--h2-font-weight: 700;
--h2-line-height: 120%;
}

@media (min-width: 992px) {
:root {
--h2-font-size: calc(40rem / 16);
--h3-font-size: calc(32rem / 16);
}
}

/*
Overwrite Bootstrap's heading font-sizes
https://stackoverflow.com/questions/5410066/what-are-the-default-font-sizes-in-pixels-for-the-html-heading-tags-h1-h2
*/

h1 {
font-size: 2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
Comment on lines 122 to 126
Copy link
Member Author

Choose a reason for hiding this comment

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

Updating h1, h4 will happen in subsequent PR #37. It will be required for completing #66.


h2 {
font-size: 1.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
h2,
.h2 {
font-size: var(--h2-font-size);
font-weight: var(--h2-font-weight);
line-height: var(--h2-line-height);
letter-spacing: 0;
margin: 0;
}

h3 {
font-size: 1.17rem;
h3,
.posting h2 {
Copy link
Member Author

Choose a reason for hiding this comment

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

Since each Job Post is created from Markdown, and we can't declare CSS classes in Markdown, this .posting h2 declares that all H2s on a job post should actually use h3 styles, which is what Figma calls for.

font-size: var(--h3-font-size);
font-weight: var(--h3-font-weight);
line-height: var(--h3-line-height);
letter-spacing: 0;
margin-top: calc(40rem / 16);
margin-bottom: 1rem;
}

h4 {
Expand All @@ -136,34 +158,74 @@ h6 {

/*#endregion */

.primary-btn {
text-decoration: none;
border: 3px solid var(--green);
background-color: var(--green);
color: var(--brand-primary-black);
padding: 1rem;
margin-right: 15px;
margin-bottom: 10px;
}
/* Buttons */

.primary-btn:hover {
opacity: 70%;
color: var(--brand-primary-black)
}

.secondary-btn {
text-decoration: none;
border: 3px solid var(--green);
color: var(--white);
padding: 1rem;
margin-right: 15px;
margin-bottom: 10px;
}

.secondary-btn:hover {
opacity: 70%;
color: var(--brand-primary-black);
background-color: var(--green);
:root {
--button-primary-default: var(--brand-primary-green);
--button-primary-hover: #A6D15F;
--button-primary-active: #698A31;
--button-primary-focus: var(--brand-primary-green);
--button-primary-disabled: #BBB;
--button-outline-hover-bg: #2F440C;
--button-outline-hover-border: var(--brand-primary-green);
--button-outline-active-bg: #213008;
--button-outline-disabled-bg: transparent;
}

.btn {
--bs-btn-padding-x: calc(1rem - 1px);
--bs-btn-padding-y: calc(1rem - 1px);
--bs-btn-font-family: var(--bs-font-monospace);
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1;
--bs-btn-border-width: calc(1rem / 16);
--bs-btn-border-radius: 0;
--bs-btn-box-shadow: none;
--bs-btn-disabled-opacity: 1;
--bs-btn-focus-box-shadow: var(--focus-box-shadow);
}

.btn-primary {
--bs-btn-color: var(--brand-primary-black);
--bs-btn-bg: var(--button-primary-default);
--bs-btn-border-color: var(--button-primary-default);
--bs-btn-hover-color: var(--brand-primary-black);
--bs-btn-hover-bg: var(--button-primary-hover);
--bs-btn-hover-border-color: var(--button-primary-hover);
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-color: var(--brand-primary-black);
--bs-btn-active-bg: var(--button-primary-active);
--bs-btn-active-border-color: var(--button-primary-active);
--bs-btn-active-shadow: inset 0 calc(3rem / 16) calc(5rem / 16) rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--brand-primary-black);
--bs-btn-disabled-bg: var(--button-primary-disabled);
--bs-btn-disabled-border-color: var(--button-primary-disabled);
}

.btn-outline-primary {
--bs-btn-color: var(--white);
--bs-btn-bg: transparent;
--bs-btn-border-color: var(--button-primary-default);
--bs-btn-hover-color: var(--white);
--bs-btn-hover-bg: var(--button-outline-hover-bg);
--bs-btn-hover-border-color: var(--button-outline-hover-border);
--bs-btn-active-color: var(--white);
--bs-btn-active-bg:var(--button-outline-active-bg);
--bs-btn-active-border-color: var(--button-outline-hover-border);
--bs-btn-active-shadow: none;
--bs-btn-disabled-color: var(--button-primary-disabled);
--bs-btn-disabled-bg: var(--button-outline-disabled-bg);
--bs-btn-disabled-border-color: var(--button-primary-disabled);
--bs-gradient: none;
}

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
background-color: var(--bs-btn-bg);
border-color: var(--bs-btn-border-color);
Comment on lines +223 to +228
Copy link
Member Author

Choose a reason for hiding this comment

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

This is a really, really neat nesting CSS Variable feature.

The underlying Figma logic calls for: For btn-primary and btn-outline-primary, the background color on focus should be the same as the default background color. Same with the border color. Bootstrap code has these values set to the hover colors instead - which is brighter - instead of the default color.

In the design, the background color for Primary is green, and the background color for Outline is black.

In the code, this is how those values are set:

.btn-primary {
    --bs-btn-bg: var(--button-primary-default);
    --bs-btn-border-color: var(--button-primary-default);
}

.btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--button-primary-default);

In this code below, I'm able to set the background-color to be the var(--bs-btn-bg) in each class's context. Even though var(--bs-btn-bg) is set to different values for .btn-primary and .btn-outline-primary, the CSS figures out what value is being scoped. Saves time and lines of code.

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

}

.pill {
Expand All @@ -174,29 +236,15 @@ h6 {
letter-spacing: 0.075rem;
text-transform: uppercase;
color: var(--white);
border: 0.2px solid var(--white);
border: calc(0.2rem / 16) solid var(--white);
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
}

/* Header */

:root {
--logo-lg-width: 15rem;
}

@media (min-width: 992px) {
:root {
--logo-lg-width: 20rem;
}
}

.logo-lg {
width: var(--logo-lg-width);
}

.logo {
width: 5.5rem;
header {
padding: calc(13rem / 16) 0;
}

/* Footer */
Expand All @@ -218,11 +266,11 @@ h6 {
}

.brandmark {
width: 136.898px;
width: calc(136.898rem / 16);
}

@media (min-width: 992px) {
.brandmark {
width: 181.676px;
width: calc(181.676rem / 16);
}
}