Section 3: Implemented BEM

Joseph Harvey Angeles · Joseph Harvey Angeles · commit 43c628e3b034 · 2018-06-16T15:36:59.000+08:00
diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css
@@ -7,32 +7,38 @@ Dark green: #28b485
 
 */
 
-* {
+*,
+*::before, 
+*::after {
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
+  box-sizing: inherit;
+}
+html {
+  /*font-size: 10px; /* root pixel size, rem reference (1 rem)*/
+  font-size: 62.5%;
 }
-
 body {
   font-family: "Lato", sans-serif;
   font-weight: 400;
-  font-size: 16px;
+  /* font-size: 16px; */
   line-height: 1.7;
   color: #777;
-  padding: 10px;
+  padding: 1rem;
+  box-sizing: border-box;
 }
 
-.logo-box {
+.header__logo-box {
   position: absolute;
-  top: 40px;
-  left: 40px;
+  top: 4rem;
+  left: 4rem;
 }
 
-.logo {
-  height: 35px;
+.header__logo {
+  height: 3.5rem;
 }
 
-.text-box {
+.header__text-box {
   position: absolute;
   top: 40%;
   left: 50%;
@@ -54,35 +60,35 @@ body {
   color: #FFF;
   text-transform: uppercase;
   backface-visibility: hidden; /* hide the background so that when children animates, it doesn't interfere */
-  margin-bottom: 60px;
+  margin-bottom: 6rem;
 }
 
-.heading-primary-main {
+.heading-primary--main {
   display: block;
-  font-size: 60px;
+  font-size: 6rem;
   font-weight: 400;
-  letter-spacing: 35px;
+  letter-spacing: 3.5rem;
   animation-name: moveInLeft;
   animation-duration: 1s;
   animation-timing-function: ease-out;
   /* animation-iteration-count: 3; */
 }
 
-.heading-primary-sub {
+.heading-primary--sub {
   display: block;
-  font-size: 20px;
+  font-size: 2rem;
   font-weight: 700;
-  letter-spacing: 17.4px;
+  letter-spacing: 1.75rem;
   animation: moveInRight 1s ease-out;
 }
 
 @keyframes moveInLeft {
   0% {
     opacity: 0;
-    transform: translateX(-100px);
+    transform: translateX(-10rem);
   }
   80% {
-    transform: translateX(10px);
+    transform: translateX(1rem);
   }
   100% {
     opacity: 1;
@@ -93,10 +99,10 @@ body {
 @keyframes moveInRight {
   0% {
     opacity: 0;
-    transform: translateX(100px);
+    transform: translateX(10rem);
   }
   80% {
-    transform: translateX(-10px);
+    transform: translateX(-1rem);
   }
   100% {
     opacity: 1;
@@ -107,7 +113,7 @@ body {
 @keyframes moveInBottom {
   0% {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateY(3rem);
   }
   100% {
     opacity: 1;
@@ -118,25 +124,26 @@ body {
 .btn:link, .btn:visited {
   text-transform: uppercase;
   text-decoration: none;
-  padding: 15px 40px;
+  padding: 1.5rem 4rem;
   display: inline-block;
-  border-radius: 100px;
+  border-radius: 10rem;
   transition: all .2s;
   position: relative;
+  font-size: 1.6rem;
 }
 
 .btn:hover {
   transform: translateY(-3px);
   /* box-shadow: x-dir y-dir blur color */
-  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2);
 }
 
 .btn:active { /* clicked state */
   transform: translateY(-1px); /* minus 1 to initial state not to hover */
-  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
 }
 
-.btn-white {
+.btn--white {
   background-color: #fff;
   color: #777;
 }
@@ -154,7 +161,7 @@ body {
   transition: all .4s;
 }
 
-.btn-white::after {
+.btn--white::after {
   background-color: #fff;
 }
 
@@ -163,7 +170,7 @@ body {
   opacity: 0;
 }
 
-.btn-animated {
+.btn--animated {
   animation: moveInBottom .5s ease-out .75s;
   animation-fill-mode: backwards; /* apply all initial 0% state of the animation before the animation starts */
 }
diff --git a/Natours/starter/index.html b/Natours/starter/index.html
@@ -14,15 +14,15 @@
     </head>
     <body>
         <header class="header">
-          <div class="logo-box">
-            <img src="img/logo-white.png" alt="Logo" class="logo"/>
+          <div class="header__logo-box">
+            <img src="img/logo-white.png" alt="Logo" class="header__logo"/>
           </div>
-          <div class="text-box">
+          <div class="header__text-box">
             <h1 class="heading-primary"> <!-- SEO checks for h1, we want the whole slogan to be the title that's why spans-->
-              <span class="heading-primary-main">Outdoors</span>
-              <span class="heading-primary-sub">is where life happens</span>
+              <span class="heading-primary--main">Outdoors</span>
+              <span class="heading-primary--sub">is where life happens</span>
             </h1>
-            <a href="#" class="btn btn-white btn-animated">Discover our tours</a>
+            <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
           </div>
         </header>
         
