fix: Implements reposive designs across all screen sizes

src/sass/abstracts/_mixins.scss

@@ -19,3 +19,54 @@
   justify-content: center;
   align-items: center;
 }
+
+// MEDIA QUERIES
+@mixin breakpoint($value) {
+  @if $value == xxxs {
+    @media (max-width: 320px) {
+      @content;
+    }
+  }
+
+  @if $value == xxs {
+    @media (max-width: 450px) {
+      @content;
+    }
+  }
+
+  @if $value == smx {
+    @media (max-width: 760px) {
+      @content;
+    }
+  }
+
+  @if $value == xs {
+    @media (max-width: 599px) {
+      @content;
+    }
+  }
+
+  @if $value == sm {
+    @media (max-width: 960px) {
+      @content;
+    }
+  }
+
+  @if $value == md {
+    @media (max-width: 1279px) {
+      @content;
+    }
+  }
+
+  @if $value == lg {
+    @media (max-width: 1919px) {
+      @content;
+    }
+  }
+
+  @if $value == xl {
+    @media (min-width: 1920px) {
+      @content;
+    }
+  }
+}

src/sass/base/_base.scss

@@ -14,6 +14,7 @@ body {
   background: $color-primary;
   color: $color-white;
   font-family: "Raleway", sans-serif;
+  max-height: 100%;
 }
 
 ul {

src/sass/components/_rectangularCard.scss

@@ -3,6 +3,10 @@
   grid-template-columns: 1fr 1fr;
   grid-gap: 3em;
 
+  @include breakpoint(xs) {
+    grid-template-columns: 1fr;
+  }
+
   &__content {
     background: $color-secondary;
     padding: 1.5em;

src/sass/components/_squareCard.scss

@@ -11,6 +11,16 @@
     @include flexVertical;
     background: $color-secondary;
 
+    @include breakpoint(md) {
+      margin-bottom: 2em;
+    }
+
+    &:not(:last-of-type) {
+      @include breakpoint(xxs) {
+        margin-right: 1em;
+      }
+    }
+
     &__title {
       font-size: 1.2rem;
       font-weight: 500;

src/sass/layout/_aside.scss

@@ -1,10 +1,26 @@
 .aside {
   background: $color-secondary;
-  height: 100%;
+  min-height: 100%;
   position: relative;
   overflow: hidden;
   padding: 3em 5em 5em;
   transition: all 0.25s ease-in-out;
+  flex: 1;
+
+  @include breakpoint(md) {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+
+  @include breakpoint(sm) {
+    padding-left: 5em;
+    padding-right: 5em;
+  }
+
+  @include breakpoint(xxs) {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
 
   &__content {
     transition: all 0.25s ease-in-out;
@@ -22,6 +38,27 @@
     top: 10em;
     left: -11em;
     opacity: 0.075;
+
+    @include breakpoint(sm) {
+      max-width: 100em;
+      width: 100em;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include breakpoint(xs) {
+      max-width: 75em;
+      width: 75em;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include breakpoint(xxs) {
+      max-width: 60em;
+      width: 60em;
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   &__wrapper {

src/sass/layout/_main.scss

@@ -1,5 +1,8 @@
 .main {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  height: 100%;
+  display: flex;
+  min-height: 100vh;
+
+  @include breakpoint(sm) {
+    flex-direction: column;
+  }
 }

src/sass/layout/_section.scss

@@ -1,5 +1,22 @@
 .section {
   padding: 3em 7em 2em;
+  min-height: 100%;
+  flex: 2;
+
+  @include breakpoint(md) {
+    padding-left: 3em;
+    padding-right: 3em;
+  }
+
+  @include breakpoint(xs) {
+    padding-left: 5em;
+    padding-right: 5em;
+  }
+
+  @include breakpoint(xxs) {
+    padding-left: 3em;
+    padding-right: 3em;
+  }
 
   .section__temperature {
     display: flex;

src/store/action-creators/index.ts

@@ -97,12 +97,10 @@ export const getCurrentLocationPosition = () => (dispatch: Dispatch) => {
       });
     },
     (error) => {
-      if (error.code === 1) {
-        dispatch({
-          type: ActionTypes.GET_CURRENT_LOCATION_POSITION_DENIED,
-          payload: error.message,
-        });
-      }
+      dispatch({
+        type: ActionTypes.GET_CURRENT_LOCATION_POSITION_DENIED,
+        payload: error.message,
+      });
     }
   );
 };

src/store/reducers/weatherReducer.ts

@@ -103,7 +103,6 @@ const weatherReducer = (
     case ActionTypes.GET_LOCATION_POSITION:
       return {
         ...state,
-        loading: false,
         woeid: action.payload,
         error: null,
       };