From 5b47b03006dcf17b997efcf6860ed16445effb58 Mon Sep 17 00:00:00 2001
From: kor <h@kor.co.nz>
Date: Sun, 16 Sep 2018 02:15:16 +1200
Subject: [PATCH] Add css refactor progress continued.

---
 docs/asset/style.css | 95 +++++++++++++++++++++++---------------------
 docs/logic/view.js   | 44 ++++++++++----------
 2 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/docs/asset/style.css b/docs/asset/style.css
index 5cafad5..bc9f0ec 100644
--- a/docs/asset/style.css
+++ b/docs/asset/style.css
@@ -63,6 +63,9 @@ body {
 	padding: 0em;
 	margin: 0; 
 }
+::selection {
+    background: var(--color-bg);
+}
 
 /*MENU*/
 .menu {
@@ -203,6 +206,9 @@ body {
   background: var(--color-itembg);
   opacity: 1;
 }
+.griditem::selection {
+    background: var(--b_high);
+}
 .griditem-containerupper {
   padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
   display: inline-block;
@@ -334,10 +340,10 @@ body {
   right: 0px;
   top: 0px;
 }
-.griditem-image .griditem-type i {
+.griditem-image .griditem-typeicon {
   display: none;
 }
-.griditem-image:hover .griditem-type i  {
+.griditem-image:hover .griditem-typeicon  {
   display: initial;
   color: var(--color-image);
   opacity: var(--alpha-enabled);
@@ -346,7 +352,7 @@ body {
   opacity: var(--alpha-enabled);
   color: var(--color-item);
 }
-.griditem:hover .griditem-type:hover {
+.griditem-type:hover i {
   opacity: var(--alpha-ascent);
   color: var(--color-itemascent);
 }
@@ -358,18 +364,50 @@ body {
 .griditem-linkicon {
   opacity: var(--alpha-idle);
 }
-.griditem:hover .griditem-linktitle {
+.griditem-linktitle {
   opacity: var(--alpha-enabled);
 }
-.griditem:hover a:hover .griditem-linktitle {
+.griditem-link:hover .griditem-linktitle {
   opacity: var(--alpha-ascent);
 }
-.griditem:hover .griditem-linkicon {
+.griditem-linkicon {
   opacity: var(--alpha-enabled);
 }
 
+/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
+.griditem-note, .griditem-quote, .griditem-term, .griditem-tags, .griditem-auth, .griditem-prog {
+  opacity: var(--alpha-idle);
+  padding-top: var(--size-item-elem-padding);
+  color: var(--color-item); 
+  font-size: var(--size-font-body);
+  float: left;
+  clear: both;
+}
+.griditem:hover .griditem-note, 
+.griditem:hover .griditem-quote, 
+.griditem:hover .griditem-term, 
+.griditem:hover .griditem-tags,
+.griditem:hover .griditem-auth,
+.griditem:hover .griditem-prog {
+  opacity:; var(--alpha-enabled);
+  color: var(--color-item);
+}
+.griditem-image .griditem-containerlower .link, 
+.griditem-image .griditem-containerlower .griditem-note, 
+.griditem-image .griditem-containerlower .griditem-quote, 
+.griditem-image .griditem-containerlower .griditem-term, 
+.griditem-image .griditem-containerlower .griditem-tags,
+.griditem-image .griditem-containerlower .griditem-auth,
+.griditem-image .griditem-containerlower .griditem-prog {
+  color: var(--color-image); 
+}
 
-
+.griditem-image .griditem-containerlower {
+  display: none;
+}
+.griditem-image:hover .griditem-containerlower {
+  display: initial;
+}
 
 
 
@@ -385,55 +423,22 @@ body {
 /*TODO: refactor below; */
 
 
-/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
-.note, .quote, .term, .tags, .auth, .prog {
-  opacity: var(--alpha-idle);
-	padding-top: var(--size-item-elem-padding);
-  color: var(--color-item); 
-	font-size: var(--size-font-body);
-  float: left;
-  clear: both;
-}
-.griditem:hover .note, 
-.griditem:hover .quote, 
-.griditem:hover .term, 
-.griditem:hover .tags,
-.griditem:hover .auth,
-.griditem:hover .prog {
-  opacity:; var(--alpha-enabled);
-	color: var(--color-item);
-}
-.griditem-image .griditem-containerlower .link, 
-.griditem-image .griditem-containerlower .note, 
-.griditem-image .griditem-containerlower .quote, 
-.griditem-image .griditem-containerlower .term, 
-.griditem-image .griditem-containerlower .tags,
-.griditem-image .griditem-containerlower .auth,
-.griditem-image .griditem-containerlower .prog {
-  color: var(--color-image); 
-}
 
-.griditem-image .griditem-containerlower {
-  display: none;
-}
-.griditem-image:hover .griditem-containerlower {
-  display: initial;
-}
-.tags a {
+.griditem-tags a {
 	color: var(--color-item); 
 	text-decoration:none; 
 }
-.griditem:hover .tags a {
+.griditem:hover .griditem-tags a {
 	color: var(--color-item); 
 }
-.griditem:hover .tags a:hover {
+.griditem:hover .griditem-tags a:hover {
 	background-color: var(--color-itemascent);
 	color: var(--color-itembg);
 }
-.griditem-image:hover .tags a {
+.griditem-image:hover .griditem-tags a {
   color: #fff; 
 }
-.griditem-image:hover .tags a:hover {
+.griditem-image:hover .griditem-tags a:hover {
   color: #fff; 
 }
 
diff --git a/docs/logic/view.js b/docs/logic/view.js
index 4dcecac..f9bdf97 100644
--- a/docs/logic/view.js
+++ b/docs/logic/view.js
@@ -126,7 +126,7 @@ function View()
       // LINK START
       if (SETTINGS.SHOWLINK)
       {
-        entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="griditem-link">`;
+        entry += `<a class="griditem-link" href="${String(value.LINK)}" id="${idUrl}">`;
       }
     }
 
@@ -155,63 +155,61 @@ function View()
       {
         if (typeof value.TYPE !== 'undefined')
         {
-          entry += `<a href='#type-${String(value.TYPE)}'>`;
-          entry += `<div class="griditem-type">`;
+          entry += `<a class="griditem-type" href='#type-${String(value.TYPE)}'>`;
 
           if (value.TYPE == 'article')
           {
-            entry += `<i class="far fa-newspaper"></i>`;
+            entry += `<i class="griditem-typeicon far fa-newspaper"></i>`;
           }
           else if (value.TYPE == 'podcast')
           {
-            entry += `<i class="fas fa-podcast"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-podcast"></i>`;
           }
           else if (value.TYPE == 'video')
           {
-            entry += `<i class="fas fa-tv"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-tv"></i>`;
           }
           else if (value.TYPE == 'list')
           {
-            entry += `<i class="fas fa-file-alt"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-file-alt"></i>`;
           }
           else if (value.TYPE == 'book')
           {
-            entry += `<i class="fas fa-book-open"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-book-open"></i>`;
           }
           else if (value.TYPE == 'game')
           {
-            entry += `<i class="fas fa-gamepad"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-gamepad"></i>`;
           }
           else if (value.TYPE == 'service')
           {
-            entry += `<i class="fas fa-server"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-server"></i>`;
           }
           else if (value.TYPE == 'lecture')
           {
-            entry += `<i class="fas fa-chalkboard-teacher"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-chalkboard-teacher"></i>`;
           }
           else if (value.TYPE == 'quote')
           {
-            entry += `<i class="fas fa-comment"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-comment"></i>`;
           }
           else if (value.TYPE == 'tool')
           {
-            entry += `<i class="fas fa-wrench"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-wrench"></i>`;
           }
           else if (value.TYPE == 'music')
           {
-            entry += `<i class="fas fa-music"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-music"></i>`;
           }
           else if (value.TYPE == 'image')
           {
-            entry += `<i class="fas fa-image"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-image"></i>`;
           }
           else if (value.TYPE == 'encyclopedia')
           {
-            entry += `<i class="fas fa-globe"></i>`;
+            entry += `<i class="griditem-typeicon fas fa-globe"></i>`;
           }
            
-          entry += `</div>`;
           entry += `</a>`;
         }
       }
@@ -230,7 +228,7 @@ function View()
       {
         if (typeof value.AUTH !== 'undefined')
         {
-          entry += `<div class="auth"><i class="fas fa-user textIcon"></i>${value.AUTH}</div>`;
+          entry += `<div class="griditem-auth"><i class="fas fa-user textIcon"></i>${value.AUTH}</div>`;
         }
       }
 
@@ -239,7 +237,7 @@ function View()
       {
         if (typeof value.TAGS !== 'undefined')
         {
-          entry += `<div class="tags"><i class="fas fa-tag textIcon"></i>`;
+          entry += `<div class="griditem-tags"><i class="fas fa-tag textIcon"></i>`;
           for (var i = 0; i < value.TAGS.length; i++)
           {
             entry += `<a href="#tag-${value.TAGS[i]}">${value.TAGS[i]}</a>`;
@@ -257,7 +255,7 @@ function View()
       {
         if (typeof value.NOTE !== 'undefined')
         {
-          entry += this.buildArrayElement(value.NOTE, "note", "fas fa-sticky-note textIcon");
+          entry += this.buildArrayElement(value.NOTE, "griditem-note", "fas fa-sticky-note textIcon");
         }
       }
 
@@ -266,7 +264,7 @@ function View()
       {
         if (typeof value.QOTE !== 'undefined')
         {
-          entry += this.buildArrayElement(value.QOTE, "quote", "fas fa-comment textIcon");
+          entry += this.buildArrayElement(value.QOTE, "griditem-quote", "fas fa-comment textIcon");
         }
       }
 
@@ -275,7 +273,7 @@ function View()
       {
         if (typeof value.TERM !== 'undefined')
         {
-          entry += this.buildArrayElement(value.TERM, "term", "fas fa-ribbon textIcon");
+          entry += this.buildArrayElement(value.TERM, "griditem-term", "fas fa-ribbon textIcon");
         }
       }
 
@@ -284,7 +282,7 @@ function View()
       {
         if (typeof value.PROG !== 'undefined')
         {
-          entry += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
+          entry += `<div class="griditem-prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
         }
       }