hotfix css mobile

SachaWildCode · Jun 18, 2024 · e5b84b3 · e5b84b3
1 parent 74e5377
commit e5b84b3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git a/src/app/components/faq/faq.component.scss b/src/app/components/faq/faq.component.scss
@@ -52,29 +52,16 @@ main {
   }
 }
 details > summary {
-  list-style: none;
   position: relative;
   cursor: pointer;
 }
 summary::-webkit-details-marker {
-  display: none;
 }
 
-summary::after {
-  content: '\25B6';
-  position: absolute;
-  right: 0;
-  transform: rotate(0deg);
-  transition: transform 0.3s ease;
-}
-
-details[open] summary::after {
-  transform: rotate(90deg);
-}
 @media (max-width: 600px) {
   main {
     section {
-      width: 90%;
+      width: 100%;
     }
   }
 }
diff --git a/src/app/components/landing-preview/landing-preview.component.scss b/src/app/components/landing-preview/landing-preview.component.scss
@@ -16,7 +16,7 @@ main {
   h2 {
     margin-bottom: 1rem;
     text-align: center;
-    width: 55%;
+    width: 60%;
     color: var(--color-white);
     font-weight: 300;
     animation: slideIn 1s ease-in-out forwards;
@@ -79,3 +79,10 @@ section:has(.learn-more:hover) .give-now {
   background-color: var(--color-white);
   color: var(--color-black);
 }
+@media (max-width: 798px) {
+  main {
+    h2 {
+      width: 90%;
+    }
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
@@ -13,7 +13,7 @@
   --font-size-h3: 1.954rem; /* 31.2px */
   --font-size-h4: 1.563rem; /* 24.96px */
   --font-size-h5: 1.25rem; /* 20px */
-  --font-size-normal: %;
+  --font-size-normal: 100%;
   --font-size-small: 0.8rem; /* 12.8px */
   --button-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   --color-white: #ffffff;
@@ -30,7 +30,6 @@ body {
   min-height: 100vh;
   background-color: var(--background-color);
   font-family: var(--font-family-inter);
-  text-shadow: var(--text-shadow);
   font-weight: var(--font-weight-lighter);
 }
 
@@ -41,11 +40,13 @@ app-root {
 @import url('https://fonts.googleapis.com/css?family=League%20Spartan|Inter');
 
 h1,
+h2,
 h3,
 h4,
 h5 {
   font-family: var(--font-family-league-spartan);
   font-weight: var(--font-weight-700);
+  // text-shadow: var(--text-shadow);
 }
 
 html {
@@ -114,26 +115,51 @@ button {
     padding-bottom: calc(52px + 2rem); // for navbar
   }
   h1 {
-    font-size: 2.489rem; /* 39.84px */
+    font-size: calc(var(--font-size-h1) * 0.9);
   }
 
   h2 {
-    font-size: 2.074rem; /* 33.12px */
+    font-size: calc(var(--font-size-h2) * 0.9);
   }
 
   h3 {
-    font-size: 1.728rem; /* 27.68px */
+    font-size: calc(var(--font-size-h3) * 0.9);
   }
 
   h4 {
-    font-size: 1.44rem; /* 23.04px */
+    font-size: calc(var(--font-size-h4) * 0.9);
   }
 
   h5 {
-    font-size: 1.2rem; /* 19.2px */
+    font-size: calc(var(--font-size-h5) * 0.9);
   }
 
   small {
-    font-size: 0.833rem; /* 13.28px */
+    font-size: calc(var(--font-size-small) * 0.9);
+  }
+}
+@media (max-width: 576px) {
+  h1 {
+    font-size: calc(var(--font-size-h1) * 0.7);
+  }
+
+  h2 {
+    font-size: calc(var(--font-size-h2) * 0.7);
+  }
+
+  h3 {
+    font-size: calc(var(--font-size-h3) * 0.7);
+  }
+
+  h4 {
+    font-size: calc(var(--font-size-h4) * 0.7);
+  }
+
+  h5 {
+    font-size: calc(var(--font-size-h5) * 0.7);
+  }
+
+  small {
+    font-size: calc(var(--font-size-small) * 0.7);
   }
 }