Merge pull request wesbos#227 from ElaMoscicka/master

Added spacing, semicolons
awaisab172 · Sep 24, 2018 · ab3af9f · ab3af9f
2 parents 237b5ec + 29489a8
commit ab3af9f
Show file tree

Hide file tree

Showing 38 changed files with 480 additions and 446 deletions.
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
@@ -3,6 +3,7 @@ html {
   background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
   background-size: cover;
 }
+
 body,html {
   margin: 0;
   padding: 0;

diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html
@@ -18,30 +18,30 @@
 
   <style>
     html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
+      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background-size: cover;
+      font-family: 'helvetica neue';
       text-align: center;
       font-size: 10px;
     }
 
     body {
       margin: 0;
       font-size: 2rem;
-      display:flex;
-      flex:1;
+      display: flex;
+      flex: 1;
       min-height: 100vh;
       align-items: center;
     }
 
     .clock {
       width: 30rem;
       height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
+      border: 20px solid white;
+      border-radius: 50%;
+      margin: 50px auto;
       position: relative;
-      padding:2rem;
+      padding: 2rem;
       box-shadow:
         0 0 0 4px rgba(0,0,0,0.1),
         inset 0 0 0 3px #EFEFEF,
@@ -57,11 +57,11 @@
     }
 
     .hand {
-      width:50%;
-      height:6px;
-      background:black;
+      width: 50%;
+      height: 6px;
+      background: black;
       position: absolute;
-      top:50%;
+      top: 50%;
       transform-origin: 100%;
       transform: rotate(90deg);
       transition: all 0.05s;

diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
@@ -18,30 +18,30 @@
 
   <style>
     html {
-      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
-      background-size:cover;
-      font-family:'helvetica neue';
+      background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
+      background-size: cover;
+      font-family: 'helvetica neue';
       text-align: center;
       font-size: 10px;
     }
 
     body {
       margin: 0;
       font-size: 2rem;
-      display:flex;
-      flex:1;
+      display: flex;
+      flex: 1;
       min-height: 100vh;
       align-items: center;
     }
 
     .clock {
       width: 30rem;
       height: 30rem;
-      border:20px solid white;
-      border-radius:50%;
-      margin:50px auto;
+      border: 20px solid white;
+      border-radius: 50%;
+      margin: 50px auto;
       position: relative;
-      padding:2rem;
+      padding: 2rem;
       box-shadow:
         0 0 0 4px rgba(0,0,0,0.1),
         inset 0 0 0 3px #EFEFEF,
@@ -57,11 +57,11 @@
     }
 
     .hand {
-      width:50%;
-      height:6px;
-      background:black;
+      width: 50%;
+      height: 6px;
+      background: black;
       position: absolute;
-      top:50%;
+      top: 50%;
     }
 
   </style>

diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html
@@ -55,7 +55,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     }
 
     input {
-      width:100px;
+      width: 100px;
     }
   </style>
 

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
@@ -40,7 +40,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     }
 
     input {
-      width:100px;
+      width: 100px;
     }
   </style>
 

diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html
@@ -9,46 +9,47 @@
   <style>
     html {
       box-sizing: border-box;
-      background:#ffc600;
-      font-family:'helvetica neue';
+      background: #ffc600;
+      font-family: 'helvetica neue';
       font-size: 20px;
       font-weight: 200;
     }
+
     body {
       margin: 0;
     }
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
 
     .panels {
-      min-height:100vh;
+      min-height: 100vh;
       overflow: hidden;
       display: flex;
     }
 
     .panel {
-      background:#6B0F9C;
-      box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
-      color:white;
+      background: #6B0F9C;
+      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
+      color: white;
       text-align: center;
-      align-items:center;
+      align-items: center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
         font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
         flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
         background 0.2s;
       font-size: 20px;
-      background-size:cover;
-      background-position:center;
+      background-size: cover;
+      background-position: center;
       flex: 1;
       justify-content: center;
       display: flex;
       flex-direction: column;
     }
 
-
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
     .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
     .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
@@ -57,11 +58,11 @@
 
     /* Flex Items */
     .panel > * {
-      margin:0;
+      margin: 0;
       width: 100%;
-      transition:transform 0.5s;
+      transition: transform 0.5s;
       flex: 1 0 auto;
-      display:flex;
+      display: flex;
       justify-content: center;
       align-items: center;
     }
@@ -74,18 +75,18 @@
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
-      text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
+      text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
       flex: 5;
-      font-size:40px;
+      font-size: 40px;
     }
-
   </style>
 
 

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
@@ -9,41 +9,42 @@
   <style>
     html {
       box-sizing: border-box;
-      background:#ffc600;
-      font-family:'helvetica neue';
+      background: #ffc600;
+      font-family: 'helvetica neue';
       font-size: 20px;
       font-weight: 200;
     }
+
     body {
       margin: 0;
     }
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
 
     .panels {
-      min-height:100vh;
+      min-height: 100vh;
       overflow: hidden;
     }
 
     .panel {
-      background:#6B0F9C;
-      box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
-      color:white;
+      background: #6B0F9C;
+      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
+      color: white;
       text-align: center;
-      align-items:center;
+      align-items: center;
       /* Safari transitionend event.propertyName === flex */
       /* Chrome + FF transitionend event.propertyName === flex-grow */
       transition:
         font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
         flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
         background 0.2s;
       font-size: 20px;
-      background-size:cover;
-      background-position:center;
+      background-size: cover;
+      background-position: center;
     }
 
-
     .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
     .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
     .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
@@ -52,23 +53,24 @@
 
     /* Flex Children */
     .panel > * {
-      margin:0;
+      margin: 0;
       width: 100%;
-      transition:transform 0.5s;
+      transition: transform 0.5s;
     }
 
     .panel p {
       text-transform: uppercase;
       font-family: 'Amatic SC', cursive;
-      text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
+      text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
       font-size: 2em;
     }
+
     .panel p:nth-child(2) {
       font-size: 4em;
     }
 
     .panel.open {
-      font-size:40px;
+      font-size: 40px;
     }
 
   </style>

diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css
@@ -1,27 +1,29 @@
     html {
       box-sizing: border-box;
-      background:#ffc600;
-      font-family:'helvetica neue';
+      background: #ffc600;
+      font-family: 'helvetica neue';
       font-size: 20px;
       font-weight: 200;
     }
+
     *, *:before, *:after {
       box-sizing: inherit;
     }
+
     input {
       width: 100%;
-      padding:20px;
+      padding: 20px;
     }
 
     .search-form {
-      max-width:400px;
-      margin:50px auto;
+      max-width: 400px;
+      margin: 50px auto;
     }
 
     input.search {
       margin: 0;
       text-align: center;
-      outline:0;
+      outline: 0;
       border: 10px solid #F7F7F7;
       width: 120%;
       left: -10%;
@@ -33,30 +35,31 @@
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
     }
 
-
     .suggestions {
       margin: 0;
       padding: 0;
       position: relative;
-      /*perspective:20px;*/
+      /*perspective: 20px;*/
     }
+
     .suggestions li {
-      background:white;
+      background: white;
       list-style: none;
       border-bottom: 1px solid #D8D8D8;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
-      margin:0;
-      padding:20px;
-      transition:background 0.2s;
-      display:flex;
-      justify-content:space-between;
+      margin: 0;
+      padding: 20px;
+      transition: background 0.2s;
+      display: flex;
+      justify-content: space-between;
       text-transform: capitalize;
     }
 
     .suggestions li:nth-child(even) {
       transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
       background: linear-gradient(to bottom,  #ffffff 0%,#EFEFEF 100%);
     }
+
     .suggestions li:nth-child(odd) {
       transform: perspective(100px) rotateX(-3deg) translateY(3px);
       background: linear-gradient(to top,  #ffffff 0%,#EFEFEF 100%);
@@ -67,5 +70,5 @@
     }
 
     .hl {
-      background:#ffc600;
-    }
+      background: #ffc600;
+    }
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,7 +55,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2> @@
         }
         input {
-          width:100px;
+          width: 100px;
         }
       </style>
@@ Expand Down @@