fix reports on frontendmentor

Author: DalaScript

.gitignore

@@ -1,16 +1,40 @@
-# Avoid accidental upload of the Sketch and Figma design files
-#####################################################
-## Please do not remove lines 5 and 6 - thanks! 🙂 ##
-#####################################################
+# Design files (please do not remove 🙂)
 *.sketch
 *.fig
-
-# Avoid accidental XD upload if you convert the design file
-###############################################
-## Please do not remove line 12 - thanks! 🙂 ##
-###############################################
 *.xd
 
-# Avoid your project being littered with annoying .DS_Store files!
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+yarn.debug.log*
+yarn.error.log*
+npm-debug.log*
+
+# Environment and secrets
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+/coverage
+
+# Production
+/build
+/dist
+/.next
+/out
+
+# IDEs and editors
+/.idea
+/.vscode
+*.swp
+*.swo
+
+# Misc
+*.log
+*.pem
 .DS_Store
-.prettierignore
+Thumbs.db

assets/styles/base/_variables.scss

@@ -4,25 +4,44 @@
 
 /* || Global Variables
  *************************/
-/* || Colors
- *************************/
-$white: #ffffff;
-$light-gray: #d6e2f0;
-$grayish-blue: #7b879d;
-$dark-blue: #1f3251;
+:root {
+    /* || Colors
+     *************************/
+    --white: #ffffff;
+    --light-gray: #d6e2f0;
+    --grayish-blue: #7b879d;
+    --dark-blue: #1f3251;
 
-/* || Fonts
- *************************/
-$outfit: "Outfit", sans-serif;
+    /* || Fonts
+    *************************/
+    --outfit: "Outfit", sans-serif;
 
-/* || Spacing
- *************************/
-$space-xs: 0.5rem;
-$space-sm: 1rem;
-$space-md: 1.5rem;
-$space-lg: 2.5rem;
+    /* || Spacing
+    *************************/
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 1.5rem;
+    --space-lg: 2.5rem;
+
+    /* || Font sizes
+    *************************/
+    --fs-sm: 0.9375rem;
+    --fs-md: 1.375rem;
+}
 
-/* || Font sizes
+/* || SCSS Aliases
  *************************/
-$fs-sm: 0.9375rem;
-$fs-md: 1.375rem;
+$white: var(--white);
+$light-gray: var(--light-gray);
+$grayish-blue: var(--grayish-blue);
+$dark-blue: var(--dark-blue);
+
+$outfit: var(--outfit);
+
+$space-xs: var(--space-xs);
+$space-sm: var(--space-sm);
+$space-md: var(--space-md);
+$space-lg: var(--space-lg);
+
+$fs-sm: var(--fs-sm);
+$fs-md: var(--fs-md);

assets/styles/components/_card.scss

@@ -2,8 +2,8 @@
  *************************/
 .card {
     padding: $space-sm $space-sm $space-lg;
-    max-width: 320px;
-    border-radius: 20px;
+    max-width: 20rem;
+    border-radius: 1.25rem;
 
     background-color: $white;
     box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
@@ -29,13 +29,15 @@
      *************************/
     &__title {
         font-size: $fs-md;
+        font-weight: 700;
+        line-height: 1.75rem;
         color: $dark-blue;
     }
 
     /* || Description
      *************************/
     &__description {
-        margin-top: $space-sm;
+        margin-block-start: $space-sm;
 
         font-size: $fs-sm;
         font-weight: 400;

assets/styles/layout/_body.scss

@@ -8,9 +8,9 @@ body {
 /* || Main Element
  *************************/
 main {
-    height: 100vh;
+    min-height: 100vh;
 
     display: flex;
     justify-content: center;
     align-items: center;
-}
+}

assets/styles/styles.css

@@ -7,13 +7,29 @@
 @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
 /* || Global Variables
  *************************/
-/* || Colors
- *************************/
-/* || Fonts
- *************************/
-/* || Spacing
- *************************/
-/* || Font sizes
+:root {
+  /* || Colors
+   *************************/
+  --white: #ffffff;
+  --light-gray: #d6e2f0;
+  --grayish-blue: #7b879d;
+  --dark-blue: #1f3251;
+  /* || Fonts
+  *************************/
+  --outfit: "Outfit", sans-serif;
+  /* || Spacing
+  *************************/
+  --space-xs: 0.5rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2.5rem;
+  /* || Font sizes
+  *************************/
+  --fs-sm: 0.9375rem;
+  --fs-md: 1.375rem;
+}
+
+/* || SCSS Aliases
  *************************/
 /* || Reset
  *************************/
@@ -28,14 +44,14 @@
 /* || Body Element
  *************************/
 body {
-  background-color: #d6e2f0;
-  font-family: "Outfit", sans-serif;
+  background-color: var(--light-gray);
+  font-family: var(--outfit);
 }
 
 /* || Main Element
  *************************/
 main {
-  height: 100vh;
+  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -46,10 +62,10 @@ main {
 /* || Card Component
  *************************/
 .card {
-  padding: 1rem 1rem 2.5rem;
-  max-width: 320px;
-  border-radius: 20px;
-  background-color: #ffffff;
+  padding: var(--space-sm) var(--space-sm) var(--space-lg);
+  max-width: 20rem;
+  border-radius: 1.25rem;
+  background-color: var(--white);
   box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
   /* || Image
    *************************/
@@ -67,19 +83,21 @@ main {
   display: block;
 }
 .card__content {
-  margin-top: 1.5rem;
-  padding: 0 1rem;
+  margin-top: var(--space-md);
+  padding: 0 var(--space-sm);
   text-align: center;
 }
 .card__title {
-  font-size: 1.375rem;
-  color: #1f3251;
+  font-size: var(--fs-md);
+  font-weight: 700;
+  line-height: 1.75rem;
+  color: var(--dark-blue);
 }
 .card__description {
-  margin-top: 1rem;
-  font-size: 0.9375rem;
+  margin-block-start: var(--space-sm);
+  font-size: var(--fs-sm);
   font-weight: 400;
   letter-spacing: 0.1875px;
   line-height: 1.1875rem;
-  color: #7b879d;
+  color: var(--grayish-blue);
 }

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="ltr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">