SCSS: Move review component out of reviews section and into component…

…s>review
wikjoh · Oct 5, 2024 · 197d3d5 · 197d3d5
1 parent 5892560
commit 197d3d5
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 81 deletions.
diff --git a/css/main.css b/css/main.css
@@ -575,6 +575,43 @@ a:hover {
   font-size: var(--fs-h5);
 }
 
+.review {
+  padding: 3rem 1.5rem 1.5rem;
+  background-color: var(--color-reviewbg);
+  border-radius: 8px;
+  box-shadow: 0px 2px 5px var(--color-gray-300);
+  position: relative;
+}
+.review .img-quote-icon {
+  position: absolute;
+  top: -22px;
+  left: 16px;
+}
+.review blockquote img {
+  margin-bottom: 1rem;
+}
+.review blockquote p {
+  font-size: var(--fs-body-l);
+}
+.review .author {
+  margin-top: 1.5rem;
+  display: flex;
+}
+.review .author-details {
+  margin-left: 1rem;
+}
+.review .author-details .author-name {
+  font-size: var(--fs-body-m);
+  font-weight: var(--fw-bold);
+  line-height: 1.6;
+  color: var(--color-heading);
+}
+.review .author-details .author-role {
+  font-size: var(--fs-body-s);
+  line-height: 1.6;
+  color: var(--color-reviewrole);
+}
+
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -997,42 +1034,6 @@ section#reviews {
   font-weight: var(--fw-extra);
   line-height: 1.3;
 }
-.reviews-container .review {
-  padding: 3rem 1.5rem 1.5rem;
-  background-color: var(--color-reviewbg);
-  border-radius: 8px;
-  box-shadow: 0px 2px 5px var(--color-gray-300);
-  position: relative;
-}
-.reviews-container .img-quote-icon {
-  position: absolute;
-  top: -22px;
-  left: 16px;
-}
-.reviews-container blockquote img {
-  margin-bottom: 1rem;
-}
-.reviews-container blockquote p {
-  font-size: var(--fs-body-l);
-}
-.reviews-container .author {
-  margin-top: 1.5rem;
-  display: flex;
-}
-.reviews-container .author-details {
-  margin-left: 1rem;
-}
-.reviews-container .author-details .author-name {
-  font-size: var(--fs-body-m);
-  font-weight: var(--fw-bold);
-  line-height: 1.6;
-  color: var(--color-heading);
-}
-.reviews-container .author-details .author-role {
-  font-size: var(--fs-body-s);
-  line-height: 1.6;
-  color: var(--color-reviewrole);
-}
 
 @media (768px <= width) {
   /* Change margin & padding */

diff --git a/css/scss/components/_index.scss b/css/scss/components/_index.scss
@@ -4,4 +4,5 @@
 @forward './jumptomain';
 @forward './dmtoggleswitch';
 @forward './brandlogo';
-@forward './featurecard';
+@forward './featurecard';
+@forward './review';
diff --git a/css/scss/components/_review.scss b/css/scss/components/_review.scss
@@ -0,0 +1,43 @@
+.review {
+  padding: 3rem 1.5rem 1.5rem;
+  background-color: var(--color-reviewbg);
+  border-radius: 8px;
+  box-shadow: 0px 2px 5px var(--color-gray-300);
+  position: relative;
+
+  .img-quote-icon {
+    position: absolute;
+    top: -22px;
+    left: 16px;
+  }
+
+  blockquote {
+    img {
+      margin-bottom: 1rem;
+    }
+    p {
+      font-size: var(--fs-body-l);
+    }
+  }
+
+  .author {
+    margin-top: 1.5rem;
+    display: flex;
+  }
+
+  .author-details {
+    margin-left: 1rem;
+
+    .author-name {
+      font-size: var(--fs-body-m);
+      font-weight: var(--fw-bold);
+      line-height: 1.6;
+      color: var(--color-heading);
+    }
+    .author-role {
+      font-size: var(--fs-body-s);
+      line-height: 1.6;
+      color: var(--color-reviewrole);
+    }
+  }
+}
diff --git a/css/scss/sections/_reviews.scss b/css/scss/sections/_reviews.scss
@@ -15,48 +15,4 @@ section#reviews {
     font-weight: var(--fw-extra);
     line-height: 1.3;
   }
-
-  .review {
-    padding: 3rem 1.5rem 1.5rem;
-    background-color: var(--color-reviewbg);
-    border-radius: 8px;
-    box-shadow: 0px 2px 5px var(--color-gray-300);
-    position: relative;
-  }
-
-  .img-quote-icon {
-    position: absolute;
-    top: -22px;
-    left: 16px;
-  }
-
-  blockquote {
-    img {
-      margin-bottom: 1rem;
-    }
-    p {
-      font-size: var(--fs-body-l);
-    }
-  }
-
-  .author {
-    margin-top: 1.5rem;
-    display: flex;
-  }
-
-  .author-details {
-    margin-left: 1rem;
-
-    .author-name {
-      font-size: var(--fs-body-m);
-      font-weight: var(--fw-bold);
-      line-height: 1.6;
-      color: var(--color-heading);
-    }
-    .author-role {
-      font-size: var(--fs-body-s);
-      line-height: 1.6;
-      color: var(--color-reviewrole);
-    }
-  }
 }