Clean up some CSS: less composition

draperunner · Mar 9, 2024 · 3ee47f3 · 3ee47f3
1 parent cd692d2
commit 3ee47f3
Show file tree

Hide file tree

Showing 18 changed files with 30 additions and 35 deletions.
diff --git a/src/base-styles/main.css b/src/base-styles/main.css
@@ -1,7 +1,8 @@
 body {
   margin: 0;
   background-color: #ecf0f1;
-  font-family: "Open Sans", sans-serif;
+  font-family: var(--font-body);
+  color: var(--gray);
 }
 
 img {
@@ -25,3 +26,12 @@ a:hover {
   color: #3498db;
   text-decoration: underline;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-header);
+}
diff --git a/src/base-styles/types.module.css b/src/base-styles/types.module.css
diff --git a/src/base-styles/typography.css b/src/base-styles/typography.css
@@ -0,0 +1,4 @@
+:root {
+  --font-header: "Fredoka One", cursive;
+  --font-body: "Open Sans", sans-serif;
+}
diff --git a/src/components/Buttons/Alternative/Alternative.module.css b/src/components/Buttons/Alternative/Alternative.module.css
@@ -1,6 +1,5 @@
 .alternativeBase {
   composes: base from "../BaseButton.module.css";
-  composes: bodyFont from "../../../base-styles/types.module.css";
   padding: 20px;
   display: inline-block;
   margin: 3px;

diff --git a/src/components/Buttons/CategoryButton/CategoryButton.module.css b/src/components/Buttons/CategoryButton/CategoryButton.module.css
@@ -1,11 +1,11 @@
 .category {
   composes: base from "../BaseButton.module.css";
-  composes: headerFont from "../../../base-styles/types.module.css";
   composes: white from "../../../base-styles/colors.module.css";
   composes: orangeLightBackground from "../../../base-styles/colors.module.css";
   composes: yellowBackgroundHover from "../../../base-styles/colors.module.css";
   composes: yellowBackgroundFocus from "../../../base-styles/colors.module.css";
   composes: darkGrayHover from "../../../base-styles/colors.module.css";
   composes: darkGrayFocus from "../../../base-styles/colors.module.css";
+  font-family: var(--font-header);
   text-transform: uppercase;
 }
diff --git a/src/components/Buttons/ResultButton/ResultButton.module.css b/src/components/Buttons/ResultButton/ResultButton.module.css
@@ -1,6 +1,5 @@
 .result {
   composes: base from "../BaseButton.module.css";
-  composes: bodyFont from "../../../base-styles/types.module.css";
   composes: white from "../../../base-styles/colors.module.css";
   composes: greenLightBackground from "../../../base-styles/colors.module.css";
   composes: darkGrayHover from "../../../base-styles/colors.module.css";

diff --git a/src/components/Buttons/StandardButton/StandardButton.module.css b/src/components/Buttons/StandardButton/StandardButton.module.css
@@ -10,9 +10,7 @@
 .standard {
   composes: base from "../BaseButton.module.css";
   composes: hyphenate;
-  composes: bodyFont from "../../../base-styles/types.module.css";
   composes: white from "../../../base-styles/colors.module.css";
-  composes: bodyFontColor from "../../../base-styles/types.module.css";
   composes: blueBackground from "../../../base-styles/colors.module.css";
   composes: blueLightBackgroundHover from "../../../base-styles/colors.module.css";
   composes: blueLightBackgroundFocus from "../../../base-styles/colors.module.css";

diff --git a/src/components/Jumbotron/Jumbotron.module.css b/src/components/Jumbotron/Jumbotron.module.css
@@ -5,7 +5,7 @@
 }
 
 .title {
-  composes: headerFont from "../../base-styles/types.module.css";
+  font-family: var(--font-header);
   composes: blue from "../../base-styles/colors.module.css";
   font-size: 63px;
   font-weight: 500;

diff --git a/src/components/Jumbotron/index.tsx b/src/components/Jumbotron/index.tsx
@@ -39,7 +39,7 @@ const Jumbotron = (props: Props): JSX.Element => {
             }))}
         />
       ) : null}
-      <h3 className={styles.subtitle}>{subtitle()}</h3>
+      <p className={styles.subtitle}>{subtitle()}</p>
     </div>
   );
 };

diff --git a/src/components/Kitem/Kitem.module.css b/src/components/Kitem/Kitem.module.css
@@ -8,7 +8,6 @@
 }
 
 .kitem {
-  composes: bodyFont from "../../base-styles/types.module.css";
   margin: 5px 5px 30px;
   padding: 0;
   white-space: normal;
@@ -48,15 +47,15 @@ a.kitem:hover {
 }
 
 .head {
-  composes: headerFont from "../../base-styles/types.module.css";
+  font-family: var(--font-header);
   width: 100%;
   height: 100%;
   padding: 8px 0;
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
 
-.head h3 {
+.head div {
   font-size: 24px;
   margin-top: 20px;
   margin-bottom: 10px;
@@ -151,7 +150,7 @@ a.kitem:hover {
     margin: 5px 0;
   }
 
-  .head h3 {
+  .head div {
     font-size: 18px;
     margin-top: 10px;
     margin-bottom: 5px;

diff --git a/src/components/Kitem/index.tsx b/src/components/Kitem/index.tsx
@@ -33,7 +33,7 @@ const Kitem = (props: Props): JSX.Element => {
     return (
       <div className={className}>
         <div className={styles[`${props.color}head`]}>
-          <h3>{props.head || ""}</h3>
+          <div>{props.head || ""}</div>
         </div>
         <div className={styles.body}>
           <p>{props.body}</p>
@@ -51,7 +51,7 @@ const Kitem = (props: Props): JSX.Element => {
       onClick={props.onClick}
     >
       <div className={styles[`${props.color}head`]}>
-        <h3>{props.head}</h3>
+        <div>{props.head}</div>
       </div>
       <div className={styles.body}>
         <p>{props.body}</p>

diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
@@ -1,6 +1,6 @@
 .navbar {
   composes: blue from "../../base-styles/colors.module.css";
-  composes: headerFont from "../../base-styles/types.module.css";
+  font-family: var(--font-header);
   margin-bottom: 20px;
   background: none;
   border-radius: 0;

diff --git a/src/containers/About/About.module.css b/src/containers/About/About.module.css
@@ -6,7 +6,7 @@
 
 .title {
   composes: blue from "../../base-styles/colors.module.css";
-  composes: headerFont from "../../base-styles/types.module.css";
+  font-family: var(--font-header);
   letter-spacing: 2px;
   line-height: 40px;
   font-size: 63px;

diff --git a/src/containers/Questions/Explanation/Explanation.module.css b/src/containers/Questions/Explanation/Explanation.module.css
@@ -1,12 +1,10 @@
 .wrapper {
-  composes: bodyFont from "../../../base-styles/types.module.css";
-  composes: bodyFontColor from "../../../base-styles/types.module.css";
   margin: 3px;
 }
 
 .header {
-  composes: headerFont from "../../../base-styles/types.module.css";
   composes: blue from "../../../base-styles/colors.module.css";
+  font-family: var(--font-header);
   font-weight: 500;
   margin-bottom: 2px;
 }

diff --git a/src/containers/Questions/Question/Question.module.css b/src/containers/Questions/Question/Question.module.css
@@ -1,8 +1,8 @@
 .question {
-  composes: bodyFontColor from "../../../base-styles/types.module.css";
   margin: 0 20px;
   font-size: 24px;
   font-weight: 500;
+  font-family: "Open Sans", sans-serif;
 }
 
 @media (max-width: 767px) {

diff --git a/src/containers/Questions/Question/index.tsx b/src/containers/Questions/Question/index.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 const Question = (props: Props): JSX.Element => (
   <MathElement>
-    <h3
+    <h1
       className={styles.question}
       dangerouslySetInnerHTML={{ __html: sanitize(props.text) }}
     />

diff --git a/src/containers/Result/Result.module.css b/src/containers/Result/Result.module.css
@@ -1,6 +1,5 @@
 .header {
-  composes: headerFont from "../../base-styles/types.module.css";
-  composes: bodyFontColor from "../../base-styles/types.module.css";
+  font-family: var(--font-header);
   font-size: 36px;
   font-weight: 500;
   margin: 10px 0 0;

diff --git a/src/main.tsx b/src/main.tsx
@@ -3,6 +3,7 @@ import "katex";
 import "katex/dist/katex.min.css";
 
 import "./base-styles/colors.css";
+import "./base-styles/typography.css";
 import "./base-styles/main.css";
 import "./auth";