fix: invalid font family on header (#5)

* fix: remove explicit bold font family * refactor: change header styles to be concise with the other styles
kibis-is · Nov 13, 2023 · 6db3c1e · 6db3c1e
1 parent c7c9f9d
commit 6db3c1e
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 29 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -7,40 +7,23 @@ import styles from './index.module.scss';
 
 const Header: FC = () => {
   return (
-    <header className={styles.header}>
+    <header className={styles.wrapper}>
       {/*title*/}
-      <div
-        className={clsx(
-          styles['header__container'],
-          styles['header__text-container']
-        )}
-      >
-        <h1
-          className={clsx(styles.header__text, styles['header__text--title'])}
-        >
+      <div className={clsx(styles.container, styles['text-container'])}>
+        <h1 className={clsx(styles.text, styles['text--title'])}>
           The AVM utility wallet
         </h1>
 
-        <p
-          className={clsx(
-            styles.header__text,
-            styles['header__text--subtitle']
-          )}
-        >
+        <p className={clsx(styles.text, styles['text--subtitle'])}>
           A wallet that is not just for DeFi, but also focuses on utility.
         </p>
       </div>
 
       {/*image*/}
-      <div
-        className={clsx(
-          styles['header__container'],
-          styles['header__image-container']
-        )}
-      >
+      <div className={clsx(styles.container, styles['image-container'])}>
         <ThemedImage
           alt="Wallet home screen"
-          className={styles['header__image']}
+          className={styles.image}
           sources={{
             dark: '/images/wallet_home_screen-dark.png',
             light: '/images/wallet_home_screen-light.png',

diff --git a/src/components/Header/index.module.scss b/src/components/Header/index.module.scss
@@ -1,6 +1,63 @@
 @import "../../styles/functions";
 @import "../../styles/mixins";
 
+.container {
+  display: flex;
+  flex: 1;
+  padding: 2rem 0;
+}
+
+.image {
+  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
+  @include tablet-and-up {
+    max-height: 600px;
+  }
+}
+
+.image-container {
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  color: text-color("light");
+
+  &--title {
+    font-size: 2rem;
+    font-weight: 600;
+    @include tablet-and-up {
+      font-size: 4.5rem;
+    }
+  }
+
+  &--subtitle {
+    font-size: 1rem;
+    @include tablet-and-up {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+.text-container {
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.wrapper {
+  align-items: center;
+  background-color: #f4f4f4;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--ifm-navbar-height));
+  padding: 0 2rem;
+  @include tablet-and-up {
+    background-image: url("/static/images/header_background.jpeg");
+    background-size: cover;
+    flex-direction: row;
+  }
+}
+
 .header {
   align-items: center;
   background-color: #f4f4f4;

diff --git a/src/components/Heading/index.module.scss b/src/components/Heading/index.module.scss
@@ -1,5 +1,4 @@
 .heading {
   color: var(--kb-text-color);
-  font-family: "AnonymousPro - Bold", sans-serif;
   font-weight: 600;
 }
diff --git a/src/components/SectionTitle/index.module.scss b/src/components/SectionTitle/index.module.scss
@@ -26,7 +26,6 @@
 
 .text {
   color: var(--kb-text-color);
-  font-family: "AnonymousPro - Bold", sans-serif;
   font-weight: 600;
   margin: 0;
   padding: 0;

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: 'AnonymousPro - Bold';
+  font-family: 'AnonymousPro';
   font-style: normal;
   font-weight: 600 700;
   font-display: swap;
@@ -34,9 +34,7 @@
   --ifm-color-primary-lightest: #EC39FC;
   --ifm-code-font-size: 95%;
   --ifm-font-family-base: 'AnonymousPro';
-  --ifm-heading-font-family: 'AnonymousPro - Bold';
-
-  // custom
+  --ifm-heading-font-family: 'AnonymousPro';
   --kb-background-color: var(--ifm-color-white);
   --kb-sub-text-color: rgba(255, 255, 255, 0.64);
   --kb-text-color: #4A5568;