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

fix: Update font size and line height to vh, resolve #2 #34

Closed
wants to merge 6 commits into from
Closed

fix: Update font size and line height to vh, resolve #2 #34

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
78e5ac5
fix: Update font style and line height to vh
chethtrayen May 19, 2023
1b4d196
Update title size to be smaller
chethtrayen May 19, 2023
e5600a2
Add font size small to plone url
chethtrayen May 20, 2023
d7058d0
Increase font size
chethtrayen May 20, 2023
d9e63b1
Merge branch 'philly-js-club:main' into fix/2-update-text-styling-to-vh
chethtrayen May 20, 2023
cb15443
Update font size to be close to prod size
chethtrayen May 20, 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
14 changes: 7 additions & 7 deletions app/root.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@
:root {
--color-background: #efdb4f;
--color-foreground: #323330;
--font-size-small: clamp(1.5rem, 4vw, 2rem);
--font-size-medium: clamp(1.5rem, 4vw, var(--font-size-large));
--font-size-large: clamp(2rem, 4vw, 3rem);
--font-size-larger: clamp(2.5rem, 5vw, 5rem);
--font-size-title: clamp(7rem, 15vw, 15rem);
--font-size-small: clamp(2vh, 4vw, var(--font-size-medium));
--font-size-medium: clamp(3.4vh, 5vw, var(--font-size-large));
--font-size-large: clamp(3vh, 5vw, 4.4vh);
--font-size-larger: clamp(5.3vh, 5vw, 7.33vh);
--font-size-title: clamp(10.5vh, 15vw, 22vh);
--font-weight-light: 400;
--font-weight-medium: 600;
--font-weight-large: 700;
--font-weight-larger: 700;
--font-weight-title: 900;
--line-height-medium: clamp(1.5rem, 6vw, var(--font-size-medium));
--line-height-title: clamp(5.5rem, 12vw, 12rem);
--line-height-medium: clamp(3vh, 6vw, var(--font-size-medium));
--line-height-title: clamp(10vh, 12vw, 17.6vh);
--width-main-max: 150rem;
}

Expand Down
2 changes: 1 addition & 1 deletion app/routes/code-of-conduct.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function About() {
<p className="body-text">
This Code of Conduct adapted from{" "}
<a
className="page-grid-footer-link"
className="page-grid-footer-link small"
href="https://plone.org/foundation/materials/foundation-resolutions/code-of-conduct"
rel="noreferrer"
target="_blank"
Expand Down
9 changes: 8 additions & 1 deletion app/shared.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ Let us know if you think you've found one we'd like. 😏
font-weight: var(--font-weight-medium);
}

.small {
font-size: var(--font-size-small);
}

.body-text {
font-size: var(--font-size-medium);
font-weight: var(--font-weight-light);
Expand Down Expand Up @@ -120,18 +124,20 @@ Let us know if you think you've found one we'd like. 😏
}

.page-grid-subtitle {
align-self: end;
font-size: var(--font-size-larger);
font-weight: var(--font-weight-title);
line-height: var(--line-height-larger);
text-transform: uppercase;
max-width: fit-content;
}

.page-grid-left {
grid-area: left;
}

.page-grid-footer {
align-content: flex-end;
align-content: end;
align-items: baseline;
display: flex;
flex-wrap: wrap;
Expand All @@ -140,6 +146,7 @@ Let us know if you think you've found one we'd like. 😏
grid-area: footer;
height: 100%;
justify-content: flex-start;
min-width: 350px;
}

.page-grid-footer-separator {
Expand Down