From 54ecb46956b22ea4b263ea4cabb427fd7466b3da Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Fri, 10 Feb 2017 17:06:47 +0100
Subject: [PATCH] start with css styles

---
 assets/logo.svg              |  1 +
 styles/base.css              |  6 ++++--
 styles/components/header.css |  2 +-
 styles/components/page.css   |  4 ++++
 templates/layout.pug         | 17 ++++++++---------
 5 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 assets/logo.svg
 create mode 100644 styles/components/page.css

diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 0000000..b71405b
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 150 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="ArtBoard1" x="0" y="0" width="150" height="60" style="fill:none;"/><g><path d="M82.126,28.638c0.058,0.171 -0.042,0.309 -0.22,0.309l-5.318,0c-0.179,0 -0.276,-0.138 -0.217,-0.306l2.817,-8.047c0.059,-0.168 0.155,-0.168 0.212,0l2.726,8.044Zm-6.583,-16.289c-0.179,0 -0.375,0.139 -0.436,0.305l-10.103,27.727c-0.061,0.168 0.035,0.307 0.214,0.307l7.316,0c0.179,0 0.366,-0.141 0.415,-0.312l1.329,-4.609c0.05,-0.173 0.236,-0.311 0.415,-0.311l9.059,0c0.179,0 0.366,0.138 0.415,0.311l1.33,4.609c0.05,0.171 0.236,0.312 0.415,0.312l7.681,0c0.179,0 0.274,-0.139 0.213,-0.304l-10.216,-27.73c-0.062,-0.166 -0.259,-0.305 -0.437,-0.305l-7.61,0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M107.736,34.36c-3.471,0 -4.925,-1.103 -4.925,-7.937c0,-7.088 1.565,-7.865 4.888,-7.865c3.322,0 4.887,0.777 4.887,7.865c0,6.834 -1.429,7.937 -4.85,7.937Zm-0.037,-22.373c-8.632,0 -12.481,4.453 -12.481,14.436c0,9.897 3.965,14.508 12.481,14.508c8.725,0 12.448,-4.338 12.448,-14.508c0,-9.983 -3.84,-14.436 -12.448,-14.436Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M124.72,40.35c0,0.175 0.142,0.318 0.317,0.318l21.646,0c0.174,0 0.317,-0.143 0.317,-0.318l0,-5.934c0,-0.175 -0.143,-0.319 -0.317,-0.319l-21.646,0c-0.175,0 -0.317,0.144 -0.317,0.319l0,5.934Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M125.032,12.349c-0.175,0 -0.318,0.144 -0.318,0.319l0,5.934c0,0.175 0.143,0.317 0.318,0.317l21.645,0c0.175,0 0.318,-0.142 0.318,-0.317l0,-5.934c0,-0.175 -0.143,-0.319 -0.318,-0.319l-21.645,0Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M124.714,29.476c0,0.175 0.143,0.319 0.318,0.319l21.645,0c0.175,0 0.318,-0.144 0.318,-0.319l0,-5.934c0,-0.175 -0.143,-0.319 -0.318,-0.319l-21.645,0c-0.175,0 -0.318,0.144 -0.318,0.319l0,5.934Z" style="fill:#fff;fill-rule:nonzero;"/><path d="M29.494,9.418c-0.34,-0.148 -0.896,-0.148 -1.237,-0.002l-16.929,7.333c-0.341,0.146 -0.357,0.421 -0.036,0.609l16.962,9.88c0.321,0.188 0.583,0.643 0.584,1.016l0.01,19.427c0,0.372 0.246,0.496 0.545,0.277l14.717,-10.737c0.3,-0.217 0.58,-0.699 0.623,-1.067l2.132,-18.436c0.043,-0.367 -0.201,-0.791 -0.541,-0.94l-16.83,-7.36Zm25.668,2.35c0.343,0.141 0.581,0.557 0.529,0.922l-3.888,27.472c-0.052,0.368 -0.334,0.855 -0.626,1.084l-21.793,17.038c-0.292,0.229 -0.77,0.229 -1.063,0l-21.79,-17.038c-0.293,-0.229 -0.575,-0.716 -0.627,-1.084l-3.897,-27.472c-0.052,-0.365 0.187,-0.781 0.53,-0.922l25.714,-10.509c0.343,-0.141 0.905,-0.141 1.248,0l25.663,10.509Z" style="fill:#fff;"/></g></svg>
\ No newline at end of file
diff --git a/styles/base.css b/styles/base.css
index ba93193..e3cb2da 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -1,7 +1,9 @@
+
 body {
-  background: #fff;
+  background: #475157;
   box-sizing: border-box;
-  transform: translate3d(1,1,1);
+  margin: 0;
+  padding: 0;
 
   & h1 {
     color: blue;
diff --git a/styles/components/header.css b/styles/components/header.css
index a8bf3a3..04c24f5 100644
--- a/styles/components/header.css
+++ b/styles/components/header.css
@@ -1,3 +1,3 @@
 .header {
-  background: blue;
+  height: 130px;
 }
diff --git a/styles/components/page.css b/styles/components/page.css
new file mode 100644
index 0000000..da10fc9
--- /dev/null
+++ b/styles/components/page.css
@@ -0,0 +1,4 @@
+.page {
+  width: 1200px;
+  margin: 0 auto;
+}
diff --git a/templates/layout.pug b/templates/layout.pug
index 8cc86a7..4ea26ba 100644
--- a/templates/layout.pug
+++ b/templates/layout.pug
@@ -3,13 +3,12 @@ html
   head
     title #{title} - AOE Tech Radar
     link(rel='stylesheet', href='/styles.css')
-
-  h3
-    a(href='/') AOE Tech Radar
-
-  hr
-
   body
-    block content
-    block scripts
-      script(src='/bundle.js')
+    .page
+      .header
+        a(href='/')
+          img(src='/assets/logo.svg')
+
+      block content
+      block scripts
+        script(src='/bundle.js')