From 3e77d51d2b44783e109c6ba29ce4f2edcf90daef Mon Sep 17 00:00:00 2001
From: rfranzen <rfranzen@gmail.com>
Date: Wed, 12 Aug 2020 10:18:54 -0300
Subject: new icon toolbar at the top

---
 README.md                    |  16 +++++++++
 exampleSite/config.yaml      |  16 +++++++++
 images/screenshot.png        | Bin 1429351 -> 1345632 bytes
 images/tn.png                | Bin 650936 -> 622933 bytes
 layouts/partials/header.html |  35 +++++++++++++-------
 static/css/main.css          |  77 ++++++++++++++++++++++++++++---------------
 6 files changed, 106 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 315683d..612113e 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ params:
   description: A description of your site
   favicon: /favicon.ico
 
+
   searchEngines:
     - name: Google
       activated: true
@@ -37,6 +38,21 @@ params:
       icon: fas fa-search
       url: https://www.duckduckgo.com
 
+
+  nav:
+    - name: Gmail
+      icon: fas fa-envelope red
+      url: https://mail.google.com
+
+    - name: Twitter
+      icon: fab fa-twitter aqua
+      url: https://twitter.com
+    
+    - name: Facebook
+      icon: fab fa-facebook blue
+      url: https://facebook.com
+
+
   bookmarks:
     - group: dev
       icon: fas fa-code-branch
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index e2ab8af..bed8d12 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -8,6 +8,7 @@ params:
   description: rfranzen.com
   favicon: /favicon.ico
 
+
   searchEngines:
     - name: Google
       activated: true
@@ -18,6 +19,21 @@ params:
       icon: fas fa-search
       url: https://www.duckduckgo.com
 
+
+  nav:
+    - name: Gmail
+      icon: fas fa-envelope red
+      url: https://mail.google.com
+
+    - name: Twitter
+      icon: fab fa-twitter aqua
+      url: https://twitter.com
+    
+    - name: Facebook
+      icon: fab fa-facebook blue
+      url: https://facebook.com
+
+
   bookmarks:
     - group: dev
       icon: fas fa-code-branch
diff --git a/images/screenshot.png b/images/screenshot.png
index f3f6e6b..1e267c3 100644
Binary files a/images/screenshot.png and b/images/screenshot.png differ
diff --git a/images/tn.png b/images/tn.png
index c7a8ae2..99efa79 100644
Binary files a/images/tn.png and b/images/tn.png differ
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 0af473c..7d2365c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,17 +1,28 @@
 
 <header>
-  <div class="datetime">
-    <div class="time">
-      <i class="far fa-clock"></i>&nbsp;
-      <span class="time-hours"></span> :
-      <span class="time-minutes"></span> :
-      <span class="time-seconds"></span>
+  <nav>
+    <div class="nav-left">
+      <ul>
+        {{ range .Site.Params.nav }}
+        <li><a href="{{ .url }}" title="{{ .name }}"><i class="{{ .icon }}"></i></a></li>
+        {{ end }}
+      </ul>
     </div>
-    <div class="date">
-      <i class="far fa-calendar"></i>&nbsp;
-      <span class="date-day"></span> .
-      <span class="date-month"></span> .
-      <span class="date-year"></span>
+    <div class="nav-right">
+      <ul class="datetime">
+        <li class="date">
+          <i class="far fa-calendar"></i>&nbsp;
+          <span class="date-day"></span> .
+          <span class="date-month"></span> .
+          <span class="date-year"></span>
+        </li>
+        <li class="time">
+          <i class="far fa-clock"></i>&nbsp;
+          <span class="time-hours"></span> :
+          <span class="time-minutes"></span> :
+          <span class="time-seconds"></span>
+        </li>
+      </ul>
     </div>
-  </div>
+  </nav>
 </header>
diff --git a/static/css/main.css b/static/css/main.css
index 6b4c6a7..4a51bc0 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -32,7 +32,42 @@ h3 {
   html {
     font-size: 22px;
   }
-} 
+}
+
+
+/* --------------------------
+ * colors
+*/
+.amber        { color: rgb(255, 193, 7); }
+.aqua         { color: rgb(0, 255, 255); }
+.black        { color: rgb(0, 0, 0); }
+.blue         { color: rgb(33, 150, 243); }
+.blue-grey    { color: rgb(96, 125, 139); }
+.brown        { color: rgb(121, 85, 72); }
+.cyan         { color: rgb(0, 188, 212); }
+.dark-grey    { color: rgb(97, 97, 97); }
+.deep-orange  { color: rgb(255, 87, 34); }
+.deep-purple  { color: rgb(103, 58, 183); }
+.green        { color: rgb(76, 175, 80); }
+.grey         { color: rgb(158, 158, 158); }
+.indigo       { color: rgb(63, 81, 181); }
+.khaki        { color: rgb(240, 230, 140); }
+.light-blue   { color: rgb(135, 206, 235); }
+.light-green  { color: rgb(139, 195, 74); }
+.light-grey   { color: rgb(241, 241, 241); }
+.lime         { color: rgb(205, 220, 57); }
+.orange       { color: rgb(255, 152, 0); }
+.pale-blue    { color: rgb(221, 255, 255); }
+.pale-green   { color: rgb(221, 255, 221); }
+.pale-red     { color: rgb(255, 221, 221); }
+.pale-yellow  { color: rgb(255, 255, 204); }
+.pink         { color: rgb(233, 30, 99); }
+.purple       { color: rgb(156, 39, 176); }
+.red          { color: rgb(244, 67, 54); }
+.sand         { color: rgb(253, 245, 230); }
+.teal         { color: rgb(0, 150, 136); }
+.white        { color: rgb(255, 255, 255); }
+.yellow       { color: rgb(255, 235, 59); }
 
 
 /* --------------------------
@@ -47,7 +82,7 @@ h3 {
   visibility: hidden;
 }
 
-.shadow { box-shadow: 10px 20px 50px 10px #000; }
+.shadow { box-shadow: 10px 20px 50px 10px rgb(0, 0, 0); }
 
 
 /* --------------------------
@@ -59,35 +94,25 @@ header {
   font-size: 1rem;
   padding: 0.5rem;
 }
-header nav {
-  width: fit-content;
-}
-header nav ul {
-  display: flex;
-  flex-wrap: nowrap;
-  list-style: none;
-}
-header nav ul li {
-  margin: 0.1rem 0.3rem;
-}
 
-.datetime {
+nav {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
+  justify-content: flex-end;
   font-size: 0.7rem;
-  text-align: center;
-}
-.date {
-  padding: 0 0.5rem;
-  border-right: solid 1px;
-  width: fit-content;
 }
 
-.time {
-  padding: 0 0.5rem;
-  width: fit-content;
+nav ul {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: 0.1rem 0;
 }
 
+.nav-left { margin-right: auto; }
+.nav-left ul li { padding: 0 0.3rem; }
+.nav-right ul li { padding: 0 0.6rem; }
+
 
 /* --------------------------
  * search
@@ -111,7 +136,7 @@ header nav ul li {
 .searchbox input {
   background: none;
   border: 0;
-  border-bottom: solid 3px #f44336;
+  border-bottom: solid 3px rgb(244, 67, 54);
   line-height: 26px;
   padding: 4px;
   width: 70%;
@@ -152,7 +177,7 @@ header nav ul li {
   list-style: none;
   column-gap: 0.3rem;
   columns: 4 100px;
- 
+
 }
 
 .card ul li {
-- 
cgit v1.2.3