From 98cc0af749a70e1ec5f5092951f8e0afd8c790aa Mon Sep 17 00:00:00 2001 From: "rowlet.qwerty@gmail.com" Date: Fri, 23 May 2025 20:23:00 -0600 Subject: [PATCH] typography commit --- src/assets/fonts.css | 60 ++++++++++++++++++++++++++++++++++++++++ src/components/Test.tsx | 10 ++++++- src/layouts/Layout.astro | 38 ++++++++++++------------- 3 files changed, 88 insertions(+), 20 deletions(-) create mode 100644 src/assets/fonts.css diff --git a/src/assets/fonts.css b/src/assets/fonts.css new file mode 100644 index 0000000..3d467c5 --- /dev/null +++ b/src/assets/fonts.css @@ -0,0 +1,60 @@ + +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;600;700&display=swap'); + +/* DESKTOP Heading 1: Geologica - Regular */ +.heading { +font-family: 'Geologica', sans-serif; +font-size: 55px; +font-weight: normal; +} + +/* DEKSTOP Heading 1: Geologica - SemiBold */ +.heading-semi { +font-family: 'Geologica', sans-serif; +font-size: 55px; +font-weight: 600; +} + +/* DESKTOP Heading 2: Lato - Regular */ +.subheading { +font-family: 'Lato', sans-serif; +font-size: 43px; +font-weight: normal; +} + +/* DESKTOP Heading 2: Lato - Bold */ +.subheading_semi { +font-family: 'Lato', sans-serif; +font-size: 43px; +font-weight: bold; +} + +/* DESKTOP Heading 3: Lato - Regular */ +.tertiary{ +font-family: 'Lato', sans-serif; +font-size: 37px; +font-weight: normal; +} + +/* DESKTOP Heading 3: Lato - Bold */ +.tertiary-semi{ +font-family: 'Lato', sans-serif; +font-size: 37px; +font-weight: bold; +} + +/* DESKTOP Heading 4: Lato - Regular */ +.quarternary{ +font-family: 'Lato', sans-serif; +font-size: 29px; +font-weight: normal; +} + +/* DESKTOP Heading 4: Lato - Bold */ +.quarternary-semi{ +font-family: 'Lato', sans-serif; +font-size: 29px; +font-weight: bold; +} + diff --git a/src/components/Test.tsx b/src/components/Test.tsx index a15db4a..d69c606 100644 --- a/src/components/Test.tsx +++ b/src/components/Test.tsx @@ -1,3 +1,11 @@ +// Test.jsx or Test.astro (React-style component example) export default function Test() { - return
Testing 123...
; + return ( +
+

Geologica Headingggg

+ +

Lato Subheading

+

Check the styles applied to h1 and h2 elements.

+
+ ); } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e455c61..f729286 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,22 +1,22 @@ - - - - - - - Astro Basics - - - - + + + + Astro Test Page + + + + + +
+

Geologica Heading

+

TEST

+

TESTING

+ +
+ - + + +