Video 51: Styling the Application: Part I

web-server/public/css/styles.css

@@ -1,7 +1,30 @@
-h1 {
-    color: grey;
+body {
+  color: #333333;
+  font-family: arial;
+  max-width: 650px;
+  margin: 0 auto;
+  padding: 0 16px;
 }
 
-img {
-    width: 250px;
+footer {
+  color: #888888;
+  border-top: 1px solid #EEEEEE;
+  margin-top: 16px;
+  padding: 16px 0;
+}
+
+header {
+  margin-top: 16px;
+  margin-bottom: 48px;
+}
+
+h1 {
+  font-size:64px;
+  margin-bottom: 16px;
+}
+
+header a {
+  color: #888888;
+  margin-right: 16px;
+  text-decoration: none;
 }

web-server/templates/partials/footer.hbs

@@ -1 +1,3 @@
+<footer>
   <p>Created by {{name}}</p>
+</footer>

web-server/templates/partials/header.hbs

@@ -1,7 +1,7 @@
+<header>
   <h1>{{title}}</h1>
   
-<div>
   <a href="/">Weather</a>
   <a href="/about">About</a>
   <a href="/help">Help</a>
-</div>
+</header>