Update fonts

SquiggleTools · May 29, 2024 · ca49049 · ca49049
1 parent 90178de
commit ca49049
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
  "@eslint-community/eslint-plugin-eslint-comments": "^4.3.0",
  "@eslint/js": "^9.2.0",
  "@fontsource-variable/josefin-sans": "^5.0.21",
+ "@fontsource/urbanist": "^5.0.20",
  "@release-it/conventional-changelog": "^8.0.1",
  "@types/eslint-plugin-markdown": "^2.0.2",
  "accessible-astro-components": "^2.3.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Bio.astro b/src/components/Bio.astro
@@ -48,7 +48,7 @@ const {
 
  .bio-medium {
  --imageSize: clamp(3.5rem, 10vw, 6rem);
- --fontSize: var(--fontSizeBodySmall);
+ --fontSize: var(--fontSizeBodySmaller);
  }
 
  .bio-large {
@@ -68,7 +68,7 @@ const {
  }
 
  .position {
- font-size: var(--fontSizeBodySmall);
+ font-size: var(--fontSizeBodySmaller);
  font-weight: var(--fontWeightLight);
  }
 </style>
diff --git a/src/components/BioPlaceholder.astro b/src/components/BioPlaceholder.astro
@@ -37,7 +37,7 @@ const name = indexNames.get(Astro.props.index) ?? "To Be Announced";
  }
 
  .name {
- font-size: var(--fontSizeBodySmall);
+ font-size: var(--fontSizeBodySmaller);
  font-weight: var(--fontWeightLight);
  }
 </style>
diff --git a/src/components/BodyText.astro b/src/components/BodyText.astro
@@ -23,11 +23,13 @@ const { as: As = "div", class: className, size, width, ...rest } = Astro.props;
 
 <style>
  .body-text {
+ color: var(--colorForegroundBody);
  font-family: var(--fontFamilyBody);
  font-weight: var(--fontWeightBody);
  line-height: var(--lineHeightBody);
  text-align: center;
  padding: 0 var(--widthBodyPadding);
+ transition: var(--transitionMedium) line-height;
  }
 
  .body-text-medium {

diff --git a/src/components/FAQs.astro b/src/components/FAQs.astro
@@ -178,7 +178,7 @@ Once you're in Boston, see <a href="https://www.neaq.org/visit/directions-and-pa
 
  details {
  font-family: var(--fontFamilyBody);
- font-size: var(--fontSizeBody);
+ font-size: var(--fontSizeBodySmall);
  font-weight: var(--fontWeightLight);
  line-height: var(--lineHeightBody);
  margin-bottom: 1rem;

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -1,5 +1,6 @@
 ---
 import "@fontsource-variable/josefin-sans";
+import "@fontsource/urbanist";
 import { SkipLinks } from "accessible-astro-components";
 
 import Head from "~/components/Head.astro";

diff --git a/src/layouts/base.css b/src/layouts/base.css
@@ -8,30 +8,32 @@
  --colorEmphasizedBackground: #085e7a;
  --colorInverted: #edebe4;
  --colorInvertedMild: #78c1d9;
- --colorForeground: #203238;
+ --colorForeground: #1f3840;
+ --colorForegroundBody: #203238;
  --colorOffWhite: #eaeaff;
  --colorSubtle: #a5e2fc;
  --colorHeroShadow: #002547;
  --colorTextShadow: rgba(35, 49, 70, 0.75);
 
- --fontFamilyBody: var(--fontFamilyHeading);
+ --fontFamilyBody: "Urbanist";
  --fontFamilyHeading: "Josefin Sans Variable";
 
  --fontSizeBody: 1.35rem;
  --fontSizeBodyLarge: 1.5rem;
- --fontSizeBodySmall: 1rem;
+ --fontSizeBodySmall: 1.1rem;
+ --fontSizeBodySmaller: 1rem;
  --fontSizeHero: clamp(4rem, 15vw, 6rem);
  --fontSizeH2: clamp(1.75rem, 5vw, 2rem);
  --fontSizeH3: clamp(1.5rem, 3.5vw, 1.75rem);
- --fontSizeH4: clamp(1.25rem, 2.75vw, 1.5rem);
+ --fontSizeH4: clamp(1.15rem, 2.5vw, 1.35rem);
 
  --fontWeightLight: 300;
- --fontWeightBody: 400;
+ --fontWeightBody: 300;
  --fontWeightSemibold: 500;
 
  --letterSpacingHeading: -0.04em;
 
- --lineHeightBody: 1.2;
+ --lineHeightBody: 1.4;
 
  --transitionFast: 117ms;
  --transitionMedium: 280ms;
@@ -48,9 +50,12 @@
  --colorBackdropDark: var(--colorSubtle);
  --colorBackdropLight: var(--colorInverted);
  --colorEmphasized: #0685af;
- --colorForeground: rgb(168, 213, 228);
+ --colorForeground: rgb(203, 228, 235);
+ --colorForegroundBody: rgb(216, 230, 234);
  --colorInverted: #10141b;
  --colorSubtle: #062430;
+
+ --lineHeightBody: 1.5;
  }
 
  @media (prefers-reduced-motion: no-preference) {