Styles refactoring

gustavocardoso · Feb 3, 2020 · 70e55bd · 70e55bd
1 parent 95fb358
commit 70e55bd
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 54 deletions.
diff --git a/src/index.html b/src/index.html
@@ -32,32 +32,38 @@ <h1 class="page-title">The Animals</h1>
     </section>
 
     <section class="app" data-window="canvas">
-      <h1 class="page-title">The Animals</h1>
+      <div class="app-container">
+        <h1 class="page-title">The Animals</h1>
 
-      <section class="animal">
-        <div class="thumb-box">
-          <p class="instructions">Press shuffle button to <span>start</span></p>
-        </div>
+        <section class="animal">
+          <div class="thumb-box">
+            <p class="instructions">
+              Press shuffle button to <span>start</span>
+            </p>
+          </div>
 
-        <audio class="player-sound">
-          <source src="public/audio/sounds-160.mp3" type="audio/mpeg" />
-          <source src="public/audio/sounds-160.ogg" type="audio/ogg" />
-        </audio>
+          <audio class="player-sound">
+            <source src="public/audio/sounds-160.mp3" type="audio/mpeg" />
+            <source src="public/audio/sounds-160.ogg" type="audio/ogg" />
+          </audio>
 
-        <h2 class="name">Welcome</h2>
-      </section>
+          <h2 class="name">Welcome</h2>
+        </section>
 
-      <section class="controls">
-        <div class="control-button">
-          <button class="play disabled"><span class="icon-play"></span></button>
-          <div class="button-text">Play sound</div>
-        </div>
+        <section class="controls">
+          <div class="control-button">
+            <button class="play disabled">
+              <span class="icon-play"></span>
+            </button>
+            <div class="button-text">Play sound</div>
+          </div>
 
-        <div class="control-button">
-          <button class="shuffle"><span class="icon-refresh"></span></button>
-          <div class="button-text">Shuffle</div>
-        </div>
-      </section>
+          <div class="control-button">
+            <button class="shuffle"><span class="icon-refresh"></span></button>
+            <div class="button-text">Shuffle</div>
+          </div>
+        </section>
+      </div>
     </section>
   </body>
 </html>
diff --git a/src/sass/_animals.scss b/src/sass/_animals.scss
@@ -1,17 +1,39 @@
 .app {
   @extend %basic-screen;
-  justify-content: space-between;
+  justify-content: center;
   background: url('~imagesPath/backgrounds/intro-mobile.jpg') center center
-    no-repeat #8ea604;
+    #8ea604;
   z-index: 3;
   display: none;
 
+  @media (min-width: $media-desktop) {
+    background-image: url('~imagesPath/backgrounds/intro.jpg');
+  }
+
+  .app-container {
+    height: 95vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4rem 2rem;
+
+    @media (min-width: $media-desktop) {
+      height: 80vh;
+      padding: 6rem 2rem;
+    }
+  }
+
   .page-title {
     @extend %page-title;
     font-size: 3em;
     text-align: center;
-    margin-top: 2em;
     animation: pulseSlow 10s ease infinite;
+
+    @media (min-width: $media-desktop) {
+      font-size: 4em;
+      margin-top: 0.8em;
+    }
   }
 
   .animal {
@@ -45,6 +67,7 @@
       border: 5px solid #ccc;
       box-shadow: 0 -5px 15px 0 rgba(0, 0, 0, 0.2);
       padding: 1em;
+      margin-bottom: 1rem;
 
       &.shuffle {
         -webkit-animation: 0.4s ease 1 forwards shuffle;
@@ -69,13 +92,17 @@
     }
 
     .name {
-      font-size: 4em;
+      font-size: 3em;
       font-weight: 900;
       text-align: center;
       text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.7),
         1px -1px 0 rgba(0, 0, 0, 0.7), -1px 1px 0 rgba(0, 0, 0, 0.7),
         1px 1px 0 rgba(0, 0, 0, 0.7);
       color: #eee;
+
+      @media (min-width: $media-desktop) {
+        font-size: 4em;
+      }
     }
 
     .fade {
@@ -132,20 +159,3 @@
     }
   }
 }
-
-@media (min-width: $media-desktop) {
-  .app {
-    background-image: url('~imagesPath/backgrounds/intro.jpg');
-
-    .page-title {
-      font-size: 4em;
-      margin-top: 0.8em;
-    }
-
-    .animal {
-      .name {
-        font-size: 5em;
-      }
-    }
-  }
-}
diff --git a/src/sass/_intro.scss b/src/sass/_intro.scss
@@ -2,7 +2,8 @@
   @extend %basic-screen;
   justify-content: center;
   text-align: center;
-  background: url('~imagesPath/backgrounds/intro-mobile.jpg') center center no-repeat #8EA604;
+  background: url('~imagesPath/backgrounds/intro-mobile.jpg') center center
+    #8ea604;
   padding: 2em;
   z-index: 2;
 
@@ -29,15 +30,15 @@
   }
 
   .page-description {
-    font-size: .7em;
+    font-size: 0.7em;
     color: #333;
     transform: rotate(-1.8deg);
     margin-top: 1em;
   }
 
   .credits {
-    font-size: .44em;
-    color: #BF3100;
+    font-size: 0.44em;
+    color: #bf3100;
     margin-top: 6em;
 
     a {
@@ -47,7 +48,7 @@
   }
 }
 
-@media(min-width: $media-desktop) {
+@media (min-width: $media-desktop) {
   .intro {
     background-image: url('~imagesPath/backgrounds/intro.jpg');
 

diff --git a/src/sass/app.scss b/src/sass/app.scss
@@ -2,7 +2,6 @@
 
 @import './config';
 
-
 @import './vendor/icomoon';
 
 @import './placeholders/basics';
@@ -14,7 +13,9 @@
 @import './intro';
 @import './animals';
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -36,7 +37,7 @@ body {
   background-image: $body-default-background-color;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  
+
   &:before {
     display: none;
     content: 'mobile';
@@ -58,18 +59,18 @@ h1 {
   z-index: 1;
 
   .main-loading {
-    font-size: .9em;
+    font-size: 0.9em;
     font-weight: 900;
     letter-spacing: 1px;
     color: #333;
-    animation: blink .4s ease infinite alternate;
+    animation: blink 0.4s ease infinite alternate;
   }
 }
 
 .footer {
   @extend %basic-footer;
   color: $footer-text-color;
-  padding: .6em .4em;
+  padding: 0.6em 0.4em;
   background: #111;
   width: 100%;
 
@@ -79,7 +80,7 @@ h1 {
   }
 }
 
-@media(min-width: $media-desktop) {
+@media (min-width: $media-desktop) {
   body:before {
     display: none;
     content: 'desktop';