Update with variable-related changes

README.md

@@ -8,6 +8,8 @@ sass input/:output/
 From [The Complete Sass & SCSS Course: From Beginner to Advanced](https://www.udemy.com/course/sasscourse/).
 
 ```powershell
-http-server .
+http-server . -c-1
 sass scss/:css/
+# or
+sass scss/:css/ -w --update
 ```

sass-project/css/main.css

@@ -1,5 +1,38 @@
 body {
-  font-family: sans-serif;
+  font-family: Verdana, Arial, sans-serif;
+  color: #222;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Palatino Linotype", Georgia, serif;
+}
+
+p {
+  font-family: Verdana, Arial, sans-serif;
+}
+
+a {
+  color: #f27731;
+}
+
+#header {
+  background-color: #170a48;
+  height: 60px;
+}
+#header #main-menu a {
+  color: white;
+}
+#header #main-menu li {
+  display: inline;
+}
+#main {
+  margin-left: auto;
+  margin-right: auto;
+  width: 960px;
+}
+#footer {
+  background-color: #ccf962;
+  height: 90px;
 }
 
 /*# sourceMappingURL=main.css.map */

sass-project/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAAA;EACE","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAeA;EACE,aARU;EASV,OAhBW;;;AAmBb;EACE,aAZc;;;AAehB;EACE,aAjBU;;;AAoBZ;EACE,OA1BgB;;;AA6BlB;EACE,kBA/BY;EAgCZ,QAvBc;;AA0BZ;EACE,OAhCY;;AAkCd;EACE;;AASN;EACE;EACA;EACA,OAzCc;;AAkDhB;EACE,kBA3Dc;EA4Dd,QAnDc","file":"main.css"}

sass-project/scss/main.scss

@@ -1,23 +1,46 @@
+//
+$text-color: #222;
+$theme-color: #170a48;
+$secondary-color: #f27731;
+$ternary-color: #ccf962;
+$link-color: $secondary-color;
+$menu-item-color: white;
+//
+$text-font: Verdana, Arial, sans-serif;
+$headline-font: 'Palatino Linotype', Georgia, serif;
+//
+$header-height: 60px;
+$content-width: 960px;
+$footer-height: 90px;
+
 body {
-  font-family: sans-serif;
+  font-family: $text-font;
+  color: $text-color;
 }
 
 h1, h2, h3, h4 {
-  
+  font-family: $headline-font;
 }
 
 p {
-  
+  font-family: $text-font;
 }
 
 a {
-
+  color: $link-color;
 }
 
 #header {
+  background-color: $theme-color;
+  height: $header-height;
 
   #main-menu {
-
+    a {
+      color: $menu-item-color;
+    }
+    li {
+      display: inline;
+    }
   }
   
   #logo {
@@ -26,6 +49,9 @@ a {
 }
 
 #main {
+  margin-left: auto;
+  margin-right: auto;
+  width: $content-width;
 
   #content {
   }
@@ -35,5 +61,6 @@ a {
 }
 
 #footer {
-
+  background-color: $ternary-color;
+  height: $footer-height;
 }