Skip to content
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

Typography + Job Posting page margins #94

Closed
wants to merge 6 commits into from
Closed

Typography + Job Posting page margins #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9fc8ccb
feat(css): first pass at heading css
machikoyasuda Jul 27, 2023
cd7a0ab
feat(posting): add h2/h3 styling for Postings page
machikoyasuda Jul 27, 2023
68bb9fb
fix: font declaration
machikoyasuda Jul 27, 2023
ac1ad92
fix(css): move Posting styles to bottom section
machikoyasuda Jul 27, 2023
fcbaf74
chore: bad rebase oops
machikoyasuda Jul 27, 2023
1dc29d3
feat(posting): add custom Posting margins/padding, and H1 m/p bottom
machikoyasuda Jul 27, 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
2 changes: 1 addition & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</script>
</head>

<body>
<body class="{{ layout.classes }}">
<header>
<a href="/"><img class="logo" src="/assets/compiler_logo_stacked.svg" alt="Compiler logo"></a>
</header>
Expand Down
23 changes: 13 additions & 10 deletions _layouts/job_post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
---
layout: default
classes: posting
title_prefix: "Jobs with Compiler:"
---

<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>
<div class="offset-md-2 col-md-7 col-12">
<h1 class="pb-4 mb-2 pb-md-5 mb-md-3">{{ page.title }}{% if page.type %} ({{ page.type }}){% endif %}</h1>

{{ content }} {% if page.apply_link %}
<a
class="d-inline-block monospace primary-btn"
id="apply"
href="{{ page.apply_link }}"
>
Apply Now
</a>
{{ content }}

{% if page.apply_link %}
<a
class="d-inline-block monospace primary-btn"
id="apply"
href="{{ page.apply_link }}"
>
Apply Now
</a>
{% endif %}

<p>
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
description: We build open-source, human-centered, secure, agile solutions to support the delivery of government services that increase equity of opportunity.
---
<div class="row py-5">
<h1 class="san-serif">we build software for the government</h1>
<h1 class="sans-serif">we build software for the government</h1>
</div>

<div class="d-flex flex-column flex-lg-row mb-5">
Expand Down
145 changes: 108 additions & 37 deletions styles/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
--black: #000000;
--grey: #EDEDED;
--white: #FFFFFF;
--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;
}

* {
Expand Down Expand Up @@ -83,76 +85,126 @@ li.certs {

.monospace,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
h5,
h6 {
font-family: 'Source Code Pro Bold', 'Courier New', Courier, monospace;
.h4 {
font-family: var(--bs-font-monospace);
}

.san-serif {
font-family: 'Roboto', Arial, Helvetica, sans-serif;
.sans-serif {
font-family: var(--bs-font-sans-serif);
}

/*#endregion */

/*#region Font Sizes */
/*#region Headers */

:root {
--title-font-size: 1.75rem;
--button-text-font-size: 1.25rem;
--h1-font-size: calc(40rem / 16);
--h1-font-weight: 700;
--h1-line-height: 120%;
--h2-font-size: calc(32rem / 16);
--h2-font-weight: 700;
--h2-line-height: 120%;
--h3-font-size: calc(24rem / 16);
--h3-font-weight: 700;
--h3-line-height: 120%;
--h4-font-size: calc(16rem / 16);
--h4-font-weight: 800;
--h4-line-height: 120%;
--h5-font-size: calc(16rem / 16);
--h5-font-weight: 500;
--h5-line-height: 120%;
}

@media (min-width: 992px) {
:root {
--title-font-size: 2rem;
--button-text-font-size: 1.5rem;
--h1-font-size: calc(48rem / 16);
--h1-font-weight: 800;
--h1-line-height: 110%;
--h2-font-size: calc(40rem / 16);
--h2-font-weight: 700;
--h2-line-height: 120%;
--h3-font-size: calc(32rem / 16);
--h3-font-weight: 700;
--h3-line-height: 120%;
--h4-font-size: calc(16rem / 16);
--h4-font-weight: 800;
--h4-line-height: 130%;
--h5-font-size: calc(16rem / 16);
--h5-font-weight: 500;
--h5-line-height: 120%;
}
}

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

.btn-link {
font-size: var(--button-text-font-size);
h1,
.h1 {
font-size: var(--h1-font-size);
font-weight: var(--h1-font-weight);
line-height: var(--h1-line-height);
margin: 0;
}

/*
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;
h2,
.h2 {
font-size: var(--h2-font-size);
font-weight: var(--h2-font-weight);
line-height: var(--h2-line-height);
margin-top: 0;
margin-bottom: 1rem;
}

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

h3 {
font-size: 1.17rem;
h4,
.h4 {
font-size: var(--h4-font-size);
font-weight: var(--h4-font-weight);
line-height: var(--h4-line-height);}

h5,
.h5 {
font-family: var(--bs-font-sans-serif);
font-size: var(--h5-font-size);
font-weight: var(--h5-font-weight);
line-height: var(--h5-line-height);
}

h4 {
font-size: 1rem;
/*#endregion */

/*#region Font Sizes */

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

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

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

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

.primary-btn {
text-decoration: none;
Expand Down Expand Up @@ -296,3 +348,22 @@ footer .address {
width: 17.5rem;
}
}

/* Job Posting Page */

:root {
--posting-margin: 102px 0 96px 0;
}

@media (min-width: 992px) {
:root {
--posting-margin: 135px 0 104px 0;
}
}
.posting main {
margin: var(--posting-margin);
}

.posting h2 {
margin-top: 40px;
}