Merge pull request #8 from DesignSystemsOSS/responsiveness

update: responsiveness added to products page (#7)

src/components/section-components/Header/style.header.scss

@@ -48,4 +48,8 @@ header.header {
   100% {
     color: #006eff;
   }
-}
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)

src/components/widgets/Cards/CareerOpeningCard/style.widgets.cards.career-opening-card.scss

@@ -19,4 +19,36 @@ div.career-opening-card {
     margin-top: 0.6em;
     margin-bottom: 1.4em;
   }
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
+
+@media screen and (max-width: 1400px) {
+  div.career-opening-card {
+    width: 80%;
+    margin: auto;
+    text-align: center;
+    padding: 2.4em 1.2em;
+    background-color: #ffffff;
+    border-radius: 6px;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    gap: 2em;
+    align-items: center;
+    justify-content: space-between;
+    transition: 0.2s ease-in-out;
+    &:hover {
+      cursor: pointer;
+      background-color: #fefefe;
+      transform: translateY(-2px);
+    }
+    > p.career-role-description {
+      max-width: 40ch;
+      margin-top: 0.6em;
+      margin-bottom: 1.4em;
+    }
+  }
 }

src/components/widgets/Cards/ProductCard/style.widgets.cards.product-card.scss

@@ -33,4 +33,52 @@ div.product-card {
       font-weight: 600;
     }
   }
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
+
+@media screen and (max-width: 1400px) {
+  div.product-card {
+    width: 80%;
+    border-radius: 8px;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 2.4em;
+    display: grid;
+    grid-template-columns: auto;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    color: black;
+    background-color: white;
+    border: 1.2px solid #f2f2f2;
+    box-shadow: 0 8px 32px 0 rgba(31, 135, 95, 0.250);
+    cursor: pointer;
+    transition: 0.2s ease-in-out;
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0px 4px 12px 0 rgba(31, 135, 95, 0.500);
+    }
+    > div.product-details-wrapper {
+      width: 80%;
+      margin-right: auto;
+      margin-left: auto;
+      > p.product-description {
+        max-width: 70ch;
+      }
+    }
+    > div.product-cta-button-wrapper {
+      margin-top: 2em;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 36px;
+      > a.check-github-url {
+        color: black;
+        font-weight: 600;
+      }
+    }
+  }
 }

src/views/Careers/style.view-careers.scss

@@ -26,4 +26,46 @@ div.careers {
       row-gap: 3em;
     }
   }
+}
+
+// media-queries for different resolutions and screen-widths
+
+// scss-query for screen-size: (maximum-width: 1400px)
+
+@media screen and (max-width: 1400px) {
+  div.careers {
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 8em;
+    width: 90%;
+    > h1.careers-page-title {
+      font-size: 26px;
+    }
+    > p.careers-page-section-description {
+      text-align: center;
+      color: #f2f2f2;
+      width: 60ch;
+      margin-right: auto;
+      margin-left: auto;
+      margin-top: 1em;
+      font-size: 14px;
+    }
+    > div.volunteer-roles-section {
+      width: 90%;
+      margin-top: 3em;
+      margin-right: auto;
+      margin-left: auto;
+      > h3.volunteer-roles-title {
+        text-align: center;
+      }
+      > div.volunteer-roles-wrapper {
+        margin-top: 3em;
+        display: grid;
+        grid-template-columns: auto;
+        margin-right: auto;
+        margin-left: auto;
+        row-gap: 3em;
+      }
+    }
+  }
 }