Home #107

machikoyasuda · 2023-08-21T22:34:37Z

Note: This PR was created off of fix/footer #106. These 2 changes can go out together in sync, so the Home page doesn't look disjointed.

What this PR does

- Home page: Adds new home headline, paragraph text, image. Upload new brandmark. New cyan/teal color.
- Header: Removes the large logo logic. Add the box-shadow.
- Whole app: Set correct background color

Components

Configure btn-primary, btn-outline-primary with :hover, :focus, :disabled modes all designed.
Configure .h2 h2 and .h3. The home page has a h1 that uses a .h2 style class. The job posting page uses a .h3 class style on its h2s. This PR does not re-do all the headline font sizes. That will come in a separate PR Fix: Font weights #116
Sets focus ring for buttons and links.
Set text-info to be gray color.

Screenshots

Home

Jobs (Ensure no regressions)

Posting (Ensure no regressions)

Has the new primary disabled button

Perf / A11y

machikoyasuda · 2023-08-22T00:51:53Z

Ready for review. Should be reviewed after #106, but can (and probably should) be merged at the same time. Just have 1 outstanding question:

@thekaveman The design calls for removing the Capabilities Statement button. But since we don't have the #44 yet, we don't have any other way for people to get to it. Should I keep the button there? Should I remove the Get in touch button, so at least the design is the same with 1 button? There is a contact email link right below it.

@segacy1 If we do need 2 buttons, what should the 2nd button look like? I guessed what an outline button might look like, but I'm not sure about how it looks on hover.

segacy1 · 2023-08-22T15:38:25Z

Created a version of the homepage with both buttons in figma too so we have it here

For the secondary button hover, updated to this:

In Figma here

Also, two additional notes:

For the focus states for both primary and secondary buttons styles, I've updated the distance between the button and the focus border to be 4px
I've changed all the secondary button borders to 1.5px width - it was looking a little too thin to me

machikoyasuda · 2023-08-22T16:25:48Z

Marking this back as In Progress as I update the outline button.

machikoyasuda · 2023-08-22T18:38:53Z

@segacy1

Neither of these disabled buttons have sufficient color contrast.

It won't affect the home page, but it will affect the job post page. The job post page has a disabled button when the job is no longer open, like this: https://compiler.la/jobs/executive-assistant

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation:  change text colour to #171717.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #apply
   └── <a class="d-inline-block monospace btn btn-primary disabled" id="apply" href="https://forms.clickup.com/8631512/f/87d6r-2087/GUOF0LDD4SN58BC27T"> Apply Now </a>

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation:  change text colour to #171717.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > div > div > div:nth-child(27) > a:nth-child(1)
   └── <a class="disabled monospace btn btn-primary" target="_blank" href="https://github.com/capabilities">Capabilities Statement</a>

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.3:1. Recommendation:  change background to #171717.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > div > div > div:nth-child(27) > a:nth-child(2)
   └── <a class="disabled monospace btn btn-outline-primary" href="mailto:[email protected]">Get in touch</a>

3 Errors

machikoyasuda · 2023-08-22T23:21:39Z

styles/base.css

    --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);


This code creates this effect as a box-shadow:

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.

machikoyasuda · 2023-08-22T23:22:09Z

styles/base.css

-li>a {
-    text-decoration: none;


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

machikoyasuda · 2023-08-22T23:23:14Z

styles/base.css

 h1 {
    font-size: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
 }


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

machikoyasuda · 2023-08-22T23:24:00Z

styles/base.css

-h3 {
-    font-size: 1.17rem;
+h3,
+.posting h2 {


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.

machikoyasuda · 2023-08-22T23:29:04Z

styles/base.css

+.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);


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); }

machikoyasuda · 2023-08-22T23:30:22Z

Added a bunch of explanatory comments.

@thekaveman @angela-tran Ready for review.

Ideally, both this PR and the #106 PR can go out at the same time, so that the Home Page looks in sync with the new Footer.

machikoyasuda · 2023-08-22T23:52:06Z

jobs.html

-            <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>


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.

thekaveman · 2023-08-22T23:58:04Z

@machikoyasuda

The design calls for removing the Capabilities Statement button. But since we don't have the #44 yet, we don't have any other way for people to get to it. Should I keep the button there?

Let's leave both buttons there for now, until we have the nav from #44.

/cc @AnthonyRollins

styles/base.css

netlify · 2023-08-23T02:56:03Z

✅ Deploy Preview for compilerla ready!

Name	Link
🔨 Latest commit	`b316b50`
🔍 Latest deploy log	https://app.netlify.com/sites/compilerla/deploys/64e7bbbae7c0d5000937c532
😎 Deploy Preview	https://deploy-preview-107--compilerla.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

machikoyasuda · 2023-08-23T16:37:33Z

@segacy1 There's a Netlify preview link now, so you can check out how the buttons look: https://deploy-preview-107--compilerla.netlify.app/

machikoyasuda · 2023-08-23T16:38:52Z

Funny mobile browser quirk: Mobile Safari thinks these codes are phone numbers

…acing

machikoyasuda · 2023-08-23T17:42:49Z

Rebased with latest main

segacy1 · 2023-08-23T18:43:38Z

Hi @machikoyasuda - 2 quick notes from reviewing on Netlify

Could we remove the drop shadow from the nav?
Could we vertically center the content on the page between nav and footer?

I'll make sure that's reflected in Figma as well

machikoyasuda · 2023-08-23T19:22:59Z

@segacy1 These 2 fixes are now out here: https://deploy-preview-107--compilerla.netlify.app/

thekaveman · 2023-08-23T20:32:38Z

assets/compiler-la--pattern-sm.svg

Can we please avoid using compiler-la as an ID or engineering string whenever possible? Either compiler or compiler-llc if you need a longer version. For this is could even be like brand-pattern or shapes-brand-pattern or something.

Got it. I put the company name in there for SEO reasons 😅

But Compiler LA is not the official company name anymore right? It's Compiler LLC.

renamed 52b9c66

@thekaveman need a re-review for this! thank u

angela-tran

The focus ring is such a simple thing, yet makes the site feel more polished! I like it.

I noticed the focus ring around our logo is a little weird - is that an easy fix?

machikoyasuda · 2023-08-24T17:56:50Z

@angela-tran 615c4bb

Works just by adding d-inline-block to the parent a tag.

angela-tran

Looks good to me 👍

#107 changed the class names for the button styles

machikoyasuda self-assigned this Aug 22, 2023

machikoyasuda marked this pull request as ready for review August 22, 2023 00:51

machikoyasuda requested a review from a team as a code owner August 22, 2023 00:51

machikoyasuda linked an issue Aug 22, 2023 that may be closed by this pull request

Development work for Home page #65

Closed

machikoyasuda force-pushed the fix/footer branch from c084661 to 9c05f2e Compare August 22, 2023 16:08

machikoyasuda force-pushed the feat/65-new-home branch from 63819c8 to f02bdb1 Compare August 22, 2023 16:20

machikoyasuda marked this pull request as draft August 22, 2023 16:38

machikoyasuda force-pushed the feat/65-new-home branch from f02bdb1 to 90c673a Compare August 22, 2023 17:22

machikoyasuda force-pushed the feat/65-new-home branch from 5e09e43 to 3875804 Compare August 22, 2023 22:41

machikoyasuda commented Aug 22, 2023

View reviewed changes

machikoyasuda marked this pull request as ready for review August 22, 2023 23:29

machikoyasuda commented Aug 22, 2023

View reviewed changes

machikoyasuda mentioned this pull request Aug 23, 2023

Footer #106

Merged

Base automatically changed from fix/footer to main August 23, 2023 00:40

machikoyasuda commented Aug 23, 2023

View reviewed changes

styles/base.css Outdated Show resolved Hide resolved

machikoyasuda closed this Aug 23, 2023

machikoyasuda reopened this Aug 23, 2023

machikoyasuda added 8 commits August 23, 2023 17:41

fix(css): convert px to rem

49ddef8

refactor(css): convert all px to rem

4926bce

refactor(css): continue to convert all px to rem

b989a2f

refactor(css): continue to convert all px to rem

c3396d9

fix: add ;

4d73f83

fix(jobs): fix link regression on Jobs page, use gap and bootstrap sp…

5368d95

…acing

fix(css): typo on h2 vs h3

e3c15ab

fix(logo): add width/height, remove class - same for M and D

473534d

machikoyasuda force-pushed the feat/65-new-home branch from f804eed to 473534d Compare August 23, 2023 17:42

fix(home): center the container with equal m/p

b29bd5c

machikoyasuda requested a review from segacy1 August 23, 2023 19:32

segacy1 approved these changes Aug 23, 2023

View reviewed changes

thekaveman requested changes Aug 23, 2023

View reviewed changes

fix(img): rename

52b9c66

machikoyasuda mentioned this pull request Aug 23, 2023

Fix: Font weights #116

Merged

machikoyasuda added this to the Home Page milestone Aug 23, 2023

angela-tran reviewed Aug 24, 2023

View reviewed changes

fix(nav): make logo focus better

615c4bb

angela-tran approved these changes Aug 24, 2023

View reviewed changes

machikoyasuda requested a review from thekaveman August 24, 2023 18:27

fix(perf): add w/h for brand pattern

b316b50

thekaveman approved these changes Aug 24, 2023

View reviewed changes

machikoyasuda merged commit 66b0481 into main Aug 24, 2023

machikoyasuda deleted the feat/65-new-home branch August 24, 2023 21:41

angela-tran added a commit that referenced this pull request Jan 24, 2024

fix: "Apply now" button style

f25982d

#107 changed the class names for the button styles

angela-tran mentioned this pull request Jan 24, 2024

Fix: "Apply now" button style #166

Merged

Home #107

Home #107

Uh oh!

Conversation

machikoyasuda commented Aug 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this PR does

Components

Screenshots

Home

Jobs (Ensure no regressions)

Posting (Ensure no regressions)

Perf / A11y

Uh oh!

machikoyasuda commented Aug 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

segacy1 commented Aug 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

machikoyasuda commented Aug 22, 2023

Uh oh!

machikoyasuda commented Aug 22, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

machikoyasuda commented Aug 22, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thekaveman commented Aug 22, 2023

Uh oh!

Uh oh!

netlify bot commented Aug 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for compilerla ready!

Uh oh!

machikoyasuda commented Aug 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

machikoyasuda commented Aug 23, 2023

Uh oh!

machikoyasuda commented Aug 23, 2023

Uh oh!

segacy1 commented Aug 23, 2023

Uh oh!

machikoyasuda commented Aug 23, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

angela-tran left a comment

Choose a reason for hiding this comment

Uh oh!

machikoyasuda commented Aug 24, 2023

Uh oh!

angela-tran left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

machikoyasuda commented Aug 21, 2023 •

edited

Loading

machikoyasuda commented Aug 22, 2023 •

edited

Loading

segacy1 commented Aug 22, 2023 •

edited

Loading

netlify bot commented Aug 23, 2023 •

edited

Loading

machikoyasuda commented Aug 23, 2023 •

edited

Loading