diff --git a/build/contact/index.html b/build/contact/index.html
index 55589dd..660f73b 100644
--- a/build/contact/index.html
+++ b/build/contact/index.html
@@ -62,13 +62,14 @@
 
 </main>
 
-<footer>
+<!-- <footer>
 
 	<p>By <a href="https://chat.dashdevs.org">dashdevs</a> and featured on <a href="http://www.dashdevs.org/">DashDevs.org</a></p>
 
 	<p class="siteinfo">Development build, version 1.0.0, page template</p>
 
 </footer>
+   -->
 
 </body>
 </html>
diff --git a/build/css/styles.css b/build/css/styles.css
index ebec6d0..d2a5589 100644
--- a/build/css/styles.css
+++ b/build/css/styles.css
@@ -1,5 +1,17 @@
 /* basic page styles */
 
+
+/* dark blue: #1f2833; */
+
+
+/* light yellow: FBF7EB, new lighter: #f7f2ea */
+
+
+/* light grey: #c5c6c7*/
+
+
+/* neon green: #66FCF1 */
+
 *,
 *:before,
 *:after {
@@ -9,11 +21,24 @@
 }
 
 body {
-    font-family: georgia, cambria, "times new roman", times, serif;
-    font-size: 1em;
-    color: #555;
-    background-color: #FBF7EB;
+    /* font-family: georgia, cambria, "times new roman", times, serif; */
+    font-family: 'Open Sans', sans-serif;
+    font-size: 1.05em;
+    /* only with position static text will auto-format when making window smaller */
+    /* position: relative; */
+    /* margin-top: 60px; */
+    /* margin-left: 310px; */
+    /* TODO: not sure this is clean solution */
+    /* set background-color for all parts default, specially below content  */
+    background-color: #f7f2ea;
+    /* color: #1f2833; */
     line-height: 1.5;
+    /* TODO: put footer at bottom 
+    https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b */
+    /* min-height: 100%; */
+    /* TODO: repair, only scrolling in body possible */
+    overflow: auto;
+    /* padding-top: 30px; */
 }
 
 article,
@@ -33,12 +58,14 @@ summary {
 h1,
 h2,
 .logo {
-    font-family: arial, helvetica, free-sans, sans-serif;
+    /* font-family: arial, helvetica, free-sans, sans-serif; */
+    font-family: 'Oswald', sans-serif;
     font-weight: normal;
 }
 
 h1 {
     font-size: 1.6em;
+    text-transform: uppercase;
 }
 
 h2 {
@@ -69,39 +96,52 @@ img {
 }
 
 pre {
-    font-size: 0.8rem;
+    /* font-size: 1.05em; */
+    font-weight: bold;
     padding: 0.2em 0.4em;
     margin: 1em 0 1.5em 3em;
-    background-color: #eff5ef;
+    background-color: #1f2833;
     border-radius: 3px;
     overflow: auto;
 }
 
 code {
+    font-size: 0.88em;
     font-family: Consolas, Menlo, "DejaVu Mono", monospace;
-    color: #363;
-    background-color: #eff5ef;
-    border-radius: 3px;
-    padding: 0 0.2em;
+    color: #E831C1;
+    background-color: #ddd7d4;
+    /* CHECK needed for bold, pre not enough!? */
+    font-weight: bold;
+    /* makes single code border round */
+    border-radius: 5px;
+    padding: 0 0.4em;
 }
 
 pre code {
     padding: 0;
+    color: #eff5ef;
+    background-color: #1f2833;
+    padding-left: 8px;
+    line-height: 2.5;
+    font-size: 0.82em;
+    /* TODO make border round */
+    /* border-radius: 5px; */
 }
 
 a:link,
 a:visited {
     text-decoration: none;
-    color: #66c;
+    color: #fff;
 }
 
 a:hover,
 a:active {
-    color: #c66;
+    color: #c5c6c7;
 }
 
 .pagelist {
     list-style-type: none;
+    /* TODO: check what flex does here */
     display: flex;
     flex-wrap: wrap;
     margin: 0;
@@ -120,12 +160,14 @@ a:active {
     border: 1px solid #ccc;
     outline: 0 none;
     overflow: hidden;
+    /* color for links in pagelist type page eg "Installation" (1 from 3) */
+    color: #1f2833;
 }
 
 .pagelist a:hover,
 .pagelist a:focus {
-    background-color: #f9f9f9;
-    border-color: #999;
+    background-color: #5a14dd;
+    border-color: rgb(238, 9, 150);
 }
 
 .pagelist h2,
@@ -134,40 +176,56 @@ a:active {
 }
 
 .pagelist p {
-    color: #333;
+    color: #1f2833;
 }
 
 p.articleinfo {
     font-size: 0.8em;
-    color: #777;
+    /* currently date */
+    color: #1f2833;
 }
 
 
 /* layout */
 
-.content {
-    /* for page and article template */
-    max-width: 100%;
-    max-height: 100%;
-    /* Distance left, right 4em */
-    padding: 0em 4em;
-    margin: 0 0 0 0;
-    background-color: #FBF7EB;
-}
-
 main {
     /* for page and article template */
     clear: both;
     background-color: #fff;
-    /* todo check not working here */
-    /* overflow: scroll; */
-    margin: 55px 0px 0 0px;
+    margin-top: 60px;
+    /* margin-bottom: 0; */
+    background-color: #f7f2ea;
+    /* min-height: 100%; */
+    /* min-width: 100%; */
+    overflow: auto;
+}
+
+.content {
+    /* this is the content of main navigation header */
+    /* CHECK min-width makes things too wide */
+    /* min-width: 100%; */
+    min-height: 100%;
+    overflow: auto;
+    /* move font a little down */
+    padding-top: 10px;
 }
 
 article {
     /* for page and article template */
-    /* Distance top 1rem for content */
-    padding: 1rem 0;
+    /* Distance left, right 4em */
+    padding: 0 4em;
+    /* Distance top 2em for content */
+    padding-top: 2em;
+}
+
+article a:link,
+article a:visited,
+article a:hover {
+    color: #2092bc;
+}
+
+article a:hover {
+    text-decoration: underline;
 }
 
 header {
@@ -175,7 +233,7 @@ header {
     clear: both;
     width: 100%;
     /* eg can overwrite value for "if desktop" below */
-    height: 55px;
+    height: 60px;
     overflow: auto;
     background-color: #1f2833
 }
@@ -183,12 +241,12 @@ header {
 footer {
     /* footer global */
     clear: both;
-    width: 100%;
+    /* width: 100%; */
+    margin-left: 310px;
     height: 70px;
+    /* margin-top: -70px; */
     overflow: auto;
-    background-color: #FBF7EB;
-    /* bottom: 0; */
-    /* left: 310px; */
+    background-color: #f7f2ea;
 }
 
 footer {
@@ -201,6 +259,16 @@ footer p {
     margin: 0;
 }
 
+footer a:link,
+footer a:visited,
+footer a:hover {
+    color: #2092bc;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
 .logo {
     font-size: 1.5em;
     margin: 0.2em 0 0 0;
@@ -208,7 +276,7 @@ footer p {
 
 .logo a {
     padding: 0.2em 0;
-    color: #999;
+    color: #66fcf1;
 }
 
 
@@ -235,14 +303,21 @@ footer p {
 }
 
 .nav.main a {
-    color: #222;
+    color: #fff;
 }
 
 .nav a.active,
 .nav strong {
-    background-color: #fff;
+    background-color: #1f2833;
 }
 
+.nav a:hover {
+    color: #c5c6c7;
+}
+
+
+/* this is the prev-next-link at bottom in articles */
+
 .nav.page {
     margin-top: 1.5em;
     border-top: 1px solid #ccc;
@@ -260,14 +335,16 @@ footer p {
         /* header global */
         position: fixed;
         /* defined global above */
-        /* height: 55px; */
+        /* height: 60px; */
         top: 0;
     }
     .logo {
         float: left;
+        margin-left: 20px;
     }
     .nav.main {
         float: right;
+        margin-right: 20px;
     }
     .nav li {
         flex: 1 1 auto;
@@ -276,16 +353,18 @@ footer p {
         width: 6em;
     }
     main {
-        /* main global */
+        /* global template */
         /* position: fixed; */
         /* margin: 0px 0px 0px 0px; */
         /* padding: 3em 0em 2em 0em; */
         /* overflow: auto; */
+        /* color: #66fcf1; */
     }
     .subpages .content {
         /* article template */
+        /* Important  */
         display: flex;
-        margin: 55px 0px 0px 310px;
+        margin-left: 310px;
     }
     .subpages article {
         /* article template */
@@ -305,15 +384,18 @@ footer p {
         overflow-x: hidden;
         overflow-y: scroll;
         padding-top: 20px;
-        margin-top: 55px
+        margin-top: 60px;
+        color: #fff;
     }
     .nav.sub ul {
         margin-top: 1em;
         flex-direction: column;
-        border-top: 1px dotted #ccc;
+        /* border above first link */
+        /* border-top: 1px solid rgb(185, 27, 27); */
     }
     .nav.sub li {
-        border-bottom: 1px dotted #ccc;
+        /* put smth around nav.sub links */
+        /* border-bottom: 1px solid rgb(58, 17, 17); */
     }
     .nav.sub a,
     .nav.sub strong {
diff --git a/build/index.html b/build/index.html
index 451bbd8..86b0a5e 100644
--- a/build/index.html
+++ b/build/index.html
@@ -72,13 +72,14 @@
 
 </main>
 
-<footer>
+<!-- <footer>
 
 	<p>By <a href="https://chat.dashdevs.org">dashdevs</a> and featured on <a href="http://www.dashdevs.org/">DashDevs.org</a></p>
 
 	<p class="siteinfo">Development build, version 1.0.0, page template</p>
 
 </footer>
+   -->
 
 </body>
 </html>
diff --git a/build/rss.xml b/build/rss.xml
index 8d09ad8..75b4f03 100644
--- a/build/rss.xml
+++ b/build/rss.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[dashdevs-suite]]></title><description><![CDATA[dashdevs-suite metalsmith website]]></description><link>http://127.0.0.1</link><generator>metalsmith-feed</generator><lastBuildDate>Wed, 04 Mar 2020 14:57:18 GMT</lastBuildDate><atom:link href="http://127.0.0.1/rss.xml" rel="self" type="application/rss+xml"/><item><title><![CDATA[Articles]]></title><description><![CDATA[<!DOCTYPE html>
+<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[dashdevs-suite]]></title><description><![CDATA[dashdevs-suite metalsmith website]]></description><link>http://127.0.0.1</link><generator>metalsmith-feed</generator><lastBuildDate>Thu, 05 Mar 2020 13:41:51 GMT</lastBuildDate><atom:link href="http://127.0.0.1/rss.xml" rel="self" type="application/rss+xml"/><item><title><![CDATA[Articles]]></title><description><![CDATA[<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
diff --git a/build/sitemap.xml b/build/sitemap.xml
index 5db176c..6613046 100644
--- a/build/sitemap.xml
+++ b/build/sitemap.xml
@@ -2,14 +2,14 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
 <url> <loc>http://127.0.0.1/</loc> <priority>1.0</priority> </url>
 <url> <loc>http://127.0.0.1/article/future/</loc> </url>
-<url> <loc>http://127.0.0.1/article/gulp/</loc> </url>
 <url> <loc>http://127.0.0.1/article/gotchas/</loc> </url>
+<url> <loc>http://127.0.0.1/article/gulp/</loc> </url>
 <url> <loc>http://127.0.0.1/article/</loc> <priority>0.8</priority> </url>
 <url> <loc>http://127.0.0.1/article/usage/</loc> </url>
 <url> <loc>http://127.0.0.1/contact/</loc> <priority>0.7</priority> </url>
 <url> <loc>http://127.0.0.1/start/build/</loc> <priority>0.5</priority> </url>
-<url> <loc>http://127.0.0.1/start/</loc> <priority>0.9</priority> </url>
 <url> <loc>http://127.0.0.1/start/installation/</loc> <priority>0.5</priority> </url>
+<url> <loc>http://127.0.0.1/start/</loc> <priority>0.9</priority> </url>
 <url> <loc>http://127.0.0.1/start/page-definitions/</loc> <priority>0.3</priority> </url>
 <url> <loc>http://127.0.0.1/start/plugins/</loc> <priority>0.3</priority> </url>
 <url> <loc>http://127.0.0.1/start/site-files/</loc> <priority>0.4</priority> </url>
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
index ebec6d0..d2a5589 100644
--- a/src/assets/css/styles.css
+++ b/src/assets/css/styles.css
@@ -1,5 +1,17 @@
 /* basic page styles */
 
+
+/* dark blue: #1f2833; */
+
+
+/* light yellow: FBF7EB, new lighter: #f7f2ea */
+
+
+/* light grey: #c5c6c7*/
+
+
+/* neon green: #66FCF1 */
+
 *,
 *:before,
 *:after {
@@ -9,11 +21,24 @@
 }
 
 body {
-    font-family: georgia, cambria, "times new roman", times, serif;
-    font-size: 1em;
-    color: #555;
-    background-color: #FBF7EB;
+    /* font-family: georgia, cambria, "times new roman", times, serif; */
+    font-family: 'Open Sans', sans-serif;
+    font-size: 1.05em;
+    /* only with position static text will auto-format when making window smaller */
+    /* position: relative; */
+    /* margin-top: 60px; */
+    /* margin-left: 310px; */
+    /* TODO: not sure this is clean solution */
+    /* set background-color for all parts default, specially below content  */
+    background-color: #f7f2ea;
+    /* color: #1f2833; */
     line-height: 1.5;
+    /* TODO: put footer at bottom 
+    https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b */
+    /* min-height: 100%; */
+    /* TODO: repair, only scrolling in body possible */
+    overflow: auto;
+    /* padding-top: 30px; */
 }
 
 article,
@@ -33,12 +58,14 @@ summary {
 h1,
 h2,
 .logo {
-    font-family: arial, helvetica, free-sans, sans-serif;
+    /* font-family: arial, helvetica, free-sans, sans-serif; */
+    font-family: 'Oswald', sans-serif;
     font-weight: normal;
 }
 
 h1 {
     font-size: 1.6em;
+    text-transform: uppercase;
 }
 
 h2 {
@@ -69,39 +96,52 @@ img {
 }
 
 pre {
-    font-size: 0.8rem;
+    /* font-size: 1.05em; */
+    font-weight: bold;
     padding: 0.2em 0.4em;
     margin: 1em 0 1.5em 3em;
-    background-color: #eff5ef;
+    background-color: #1f2833;
     border-radius: 3px;
     overflow: auto;
 }
 
 code {
+    font-size: 0.88em;
     font-family: Consolas, Menlo, "DejaVu Mono", monospace;
-    color: #363;
-    background-color: #eff5ef;
-    border-radius: 3px;
-    padding: 0 0.2em;
+    color: #E831C1;
+    background-color: #ddd7d4;
+    /* CHECK needed for bold, pre not enough!? */
+    font-weight: bold;
+    /* makes single code border round */
+    border-radius: 5px;
+    padding: 0 0.4em;
 }
 
 pre code {
     padding: 0;
+    color: #eff5ef;
+    background-color: #1f2833;
+    padding-left: 8px;
+    line-height: 2.5;
+    font-size: 0.82em;
+    /* TODO make border round */
+    /* border-radius: 5px; */
 }
 
 a:link,
 a:visited {
     text-decoration: none;
-    color: #66c;
+    color: #fff;
 }
 
 a:hover,
 a:active {
-    color: #c66;
+    color: #c5c6c7;
 }
 
 .pagelist {
     list-style-type: none;
+    /* TODO: check what flex does here */
     display: flex;
     flex-wrap: wrap;
     margin: 0;
@@ -120,12 +160,14 @@ a:active {
     border: 1px solid #ccc;
     outline: 0 none;
     overflow: hidden;
+    /* color for links in pagelist type page eg "Installation" (1 from 3) */
+    color: #1f2833;
 }
 
 .pagelist a:hover,
 .pagelist a:focus {
-    background-color: #f9f9f9;
-    border-color: #999;
+    background-color: #5a14dd;
+    border-color: rgb(238, 9, 150);
 }
 
 .pagelist h2,
@@ -134,40 +176,56 @@ a:active {
 }
 
 .pagelist p {
-    color: #333;
+    color: #1f2833;
 }
 
 p.articleinfo {
     font-size: 0.8em;
-    color: #777;
+    /* currently date */
+    color: #1f2833;
 }
 
 
 /* layout */
 
-.content {
-    /* for page and article template */
-    max-width: 100%;
-    max-height: 100%;
-    /* Distance left, right 4em */
-    padding: 0em 4em;
-    margin: 0 0 0 0;
-    background-color: #FBF7EB;
-}
-
 main {
     /* for page and article template */
     clear: both;
     background-color: #fff;
-    /* todo check not working here */
-    /* overflow: scroll; */
-    margin: 55px 0px 0 0px;
+    margin-top: 60px;
+    /* margin-bottom: 0; */
+    background-color: #f7f2ea;
+    /* min-height: 100%; */
+    /* min-width: 100%; */
+    overflow: auto;
+}
+
+.content {
+    /* this is the content of main navigation header */
+    /* CHECK min-width makes things too wide */
+    /* min-width: 100%; */
+    min-height: 100%;
+    overflow: auto;
+    /* move font a little down */
+    padding-top: 10px;
 }
 
 article {
     /* for page and article template */
-    /* Distance top 1rem for content */
-    padding: 1rem 0;
+    /* Distance left, right 4em */
+    padding: 0 4em;
+    /* Distance top 2em for content */
+    padding-top: 2em;
+}
+
+article a:link,
+article a:visited,
+article a:hover {
+    color: #2092bc;
+}
+
+article a:hover {
+    text-decoration: underline;
 }
 
 header {
@@ -175,7 +233,7 @@ header {
     clear: both;
     width: 100%;
     /* eg can overwrite value for "if desktop" below */
-    height: 55px;
+    height: 60px;
     overflow: auto;
     background-color: #1f2833
 }
@@ -183,12 +241,12 @@ header {
 footer {
     /* footer global */
     clear: both;
-    width: 100%;
+    /* width: 100%; */
+    margin-left: 310px;
     height: 70px;
+    /* margin-top: -70px; */
     overflow: auto;
-    background-color: #FBF7EB;
-    /* bottom: 0; */
-    /* left: 310px; */
+    background-color: #f7f2ea;
 }
 
 footer {
@@ -201,6 +259,16 @@ footer p {
     margin: 0;
 }
 
+footer a:link,
+footer a:visited,
+footer a:hover {
+    color: #2092bc;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
 .logo {
     font-size: 1.5em;
     margin: 0.2em 0 0 0;
@@ -208,7 +276,7 @@ footer p {
 
 .logo a {
     padding: 0.2em 0;
-    color: #999;
+    color: #66fcf1;
 }
 
 
@@ -235,14 +303,21 @@ footer p {
 }
 
 .nav.main a {
-    color: #222;
+    color: #fff;
 }
 
 .nav a.active,
 .nav strong {
-    background-color: #fff;
+    background-color: #1f2833;
 }
 
+.nav a:hover {
+    color: #c5c6c7;
+}
+
+
+/* this is the prev-next-link at bottom in articles */
+
 .nav.page {
     margin-top: 1.5em;
     border-top: 1px solid #ccc;
@@ -260,14 +335,16 @@ footer p {
         /* header global */
         position: fixed;
         /* defined global above */
-        /* height: 55px; */
+        /* height: 60px; */
         top: 0;
     }
     .logo {
         float: left;
+        margin-left: 20px;
     }
     .nav.main {
         float: right;
+        margin-right: 20px;
     }
     .nav li {
         flex: 1 1 auto;
@@ -276,16 +353,18 @@ footer p {
         width: 6em;
     }
     main {
-        /* main global */
+        /* global template */
         /* position: fixed; */
         /* margin: 0px 0px 0px 0px; */
         /* padding: 3em 0em 2em 0em; */
         /* overflow: auto; */
+        /* color: #66fcf1; */
     }
     .subpages .content {
         /* article template */
+        /* Important  */
         display: flex;
-        margin: 55px 0px 0px 310px;
+        margin-left: 310px;
     }
     .subpages article {
         /* article template */
@@ -305,15 +384,18 @@ footer p {
         overflow-x: hidden;
         overflow-y: scroll;
         padding-top: 20px;
-        margin-top: 55px
+        margin-top: 60px;
+        color: #fff;
     }
     .nav.sub ul {
         margin-top: 1em;
         flex-direction: column;
-        border-top: 1px dotted #ccc;
+        /* border above first link */
+        /* border-top: 1px solid rgb(185, 27, 27); */
     }
     .nav.sub li {
-        border-bottom: 1px dotted #ccc;
+        /* put smth around nav.sub links */
+        /* border-bottom: 1px solid rgb(58, 17, 17); */
     }
     .nav.sub a,
     .nav.sub strong {
diff --git a/src/layouts/page.hbs b/src/layouts/page.hbs
index eedf747..ff3fe8f 100644
--- a/src/layouts/page.hbs
+++ b/src/layouts/page.hbs
@@ -27,7 +27,7 @@
 
 </main>
 
-{{> footer template='page' }}
+<!-- {{> footer template='page' }}   -->
 
 </body>
 </html>