style: improve title style

clicepfl · Mar 16, 2024 · 425b1a8 · 425b1a8
1 parent bb1b3cb
commit 425b1a8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 11 deletions.
diff --git a/app/src/components/Card.tsx b/app/src/components/Card.tsx
@@ -64,7 +64,7 @@ export default function Card(
     >
       <DirectusImage img={img} name={title || ""} className={styles.picture} />
       <div>
-        <p className={styles.title}>{title}</p>
+        <p className={styles.name}>{title}</p>
         <p className={styles.description}>{description}</p>
       </div>
     </div>

diff --git a/app/src/styles/Card.module.scss b/app/src/styles/Card.module.scss
@@ -19,10 +19,6 @@
     height: 20ch;
     border-radius: 4rem;
 
-    .title {
-      font-size: x-large;
-    }
-
     .description {
       font-size: medium;
     }
@@ -52,6 +48,10 @@
     overflow: hidden;
   }
 
+  .name {
+    font-size: larger;
+  }
+
   .description {
     font-size: small;
     font-weight: 300;

diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
@@ -84,7 +84,6 @@ a {
     grid-row: 1;
     grid-column: 2;
     width: 110%;
-    margin-top: 5em;
 
     @media (max-width: 800px) {
       display: none;
@@ -118,8 +117,6 @@ a {
     text-align: center;
     padding: 0 2rem;
 
-    @extend .title;
-
     // h4 (subtitle) must be centered and slightly enlarged
     + h4 {
       text-align: center;
@@ -200,12 +197,14 @@ a {
   }
 }
 
-.title {
+h1 {
   color: var(--dark-title-color);
 
   letter-spacing: 0.1em;
 
-  margin: 1rem 0 1rem 0;
+  margin: 0;
+  margin-top: 2rem;
+
   text-align: center;
 
   font-weight: lighter;
@@ -246,7 +245,6 @@ a {
   }
 
   h1 {
-    @extend .title;
     @extend .large;
   }
 }