progress responsive design

fbohz · Jun 28, 2020 · 4d53cd8 · 4d53cd8
1 parent 3afe11c
commit 4d53cd8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/museo-demo/css/style.css b/museo-demo/css/style.css
@@ -683,16 +683,26 @@ body {
   padding: 10rem 0;
   font-size: 1.4rem;
   color: #f7f7f7; }
+  @media only screen and (max-width: 56.25em) {
+    .footer {
+      padding: 8rem 0; } }
   .footer__logo-box {
     text-align: center;
     margin-bottom: 8rem; }
+    @media only screen and (max-width: 56.25em) {
+      .footer__logo-box {
+        margin-bottom: 6rem; } }
   .footer__logo {
     width: 15rem;
     height: auto; }
   .footer__navigation {
     border-top: 1px solid #777;
     padding-top: 2rem;
     display: inline-block; }
+    @media only screen and (max-width: 56.25em) {
+      .footer__navigation {
+        width: 100%;
+        text-align: center; } }
   .footer__list {
     list-style: none; }
   .footer__item {
@@ -708,12 +718,17 @@ body {
     transition: all .2s; }
   .footer__link:hover, .footer__link:active {
     color: #55c57a;
-    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); }
+    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
+    transform: rotate(5deg) scale(1.3); }
   .footer__copyright {
     border-top: 1px solid #777;
     padding-top: 2rem;
     width: 80%;
     float: right; }
+    @media only screen and (max-width: 56.25em) {
+      .footer__copyright {
+        width: 100%;
+        float: none; } }
 
 .navigation__checkbox {
   display: none; }
@@ -734,6 +749,10 @@ body {
     .navigation__button {
       top: 4rem;
       right: 4rem; } }
+  @media only screen and (max-width: 37.5em) {
+    .navigation__button {
+      top: 3rem;
+      right: 3rem; } }
 
 .navigation__background {
   height: 6rem;
@@ -749,6 +768,10 @@ body {
     .navigation__background {
       top: 4.5rem;
       right: 4.5rem; } }
+  @media only screen and (max-width: 37.5em) {
+    .navigation__background {
+      top: 3.5rem;
+      right: 3.5rem; } }
 
 .navigation__nav {
   height: 100vh;

diff --git a/museo-demo/sass/layout/_footer.scss b/museo-demo/sass/layout/_footer.scss
@@ -4,9 +4,17 @@
     font-size: 1.4rem;
     color: $color-grey-light-1;
 
+    @include respond(tab-port) {
+        padding: 8rem 0;
+    }
+
     &__logo-box {
         text-align: center;
         margin-bottom: 8rem;
+
+        @include respond(tab-port) {
+            margin-bottom: 6rem;
+        }
     }
 
     &__logo {
@@ -18,6 +26,11 @@
         border-top: 1px solid $color-grey-dark;
         padding-top: 2rem;
         display: inline-block;
+
+        @include respond(tab-port) {
+            width: 100%;
+            text-align: center;
+        }
     }
 
     &__list {
@@ -40,15 +53,14 @@
             text-decoration: none;
             text-transform: uppercase;
             display: inline-block;
-            transition: all .2s; 
+            transition: all .2s;
         }
 
         &:hover,
         &:active {
             color: $color-primary;
             box-shadow: 0 1rem 2rem rgba($color-black, .4);
-            // funky animation
-            // transform: rotate(5deg) scale(1.3);
+            transform: rotate(5deg) scale(1.3);
         }
     }
 
@@ -57,5 +69,10 @@
         padding-top: 2rem;
         width: 80%;
         float: right;
+
+        @include respond(tab-port) {
+            width: 100%;
+            float: none;
+        }
     }
 }
diff --git a/museo-demo/sass/layout/_navigation.scss b/museo-demo/sass/layout/_navigation.scss
@@ -20,6 +20,10 @@
             top: 4rem;
             right: 4rem;
         }
+        @include respond(phone) {
+            top: 3rem;
+            right: 3rem;
+        }
     }
 
     &__background {
@@ -41,6 +45,11 @@
             top: 4.5rem;
             right: 4.5rem;
         }
+
+        @include respond(phone) {
+            top: 3.5rem;
+            right: 3.5rem;
+        }
     }
 
     &__nav {