From d2c0d48825c39da9cdcc87ad180866253355dd39 Mon Sep 17 00:00:00 2001
From: kor <h@kor.co.nz>
Date: Sun, 15 Jul 2018 03:02:57 +1200
Subject: [PATCH] Link setup and improved css styling.

---
 asset/style.css    | 53 ++++++++++++++++++++++++++++++++++------------
 content/Memex.ndtl | 12 +++++------
 logic/main.js      | 22 ++++++++-----------
 3 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/asset/style.css b/asset/style.css
index d0ea511..4f1daf6 100644
--- a/asset/style.css
+++ b/asset/style.css
@@ -30,52 +30,77 @@ body {
 .grid-item {
   width: 350px;
   float: left;
-  background: #D26;
   margin-bottom: 20px;
   border-radius: 2px;
 }
 
 
 /* LINK */
-a { 
+a#url { 
 	color:#000; 
 	text-decoration:underline; 
 }
 a#urlseen { 
 	color:#666;  
 }
+a#url:hover, a#urlseen:hover {
+	color:#DCDCDC;
+	background-color: #000;
+}
+
 
 /* ENTRY */
 .grid-item { 
 	color:#000; 
 	background:#999;
-	padding:0.5em; 
+	padding:20px; 
 	min-height:2.4em;
 	float:left;
 }
 
-/* TAGS */
-#tags { 
-	font-size:0.8em;
+/* TITLE */
+.title {
+	margin-right: 45px;
+	font-size:1em;
 	color:#000; 
+	/*background-color: #000;*/
 }
 
-/* NOTE, QUOTE, TERM */
-#note, #quote, #term {
+/* LINK, NOTE, QUOTE, TERM, TAGS */
+.link, .note, .quote, .term, .tags, .prog {
 	padding-top: 1em;
 	font-size:0.8em;
 	color:#000; 
 }
+.tags a {
+	color:#000; 
+	text-decoration:none; 
+}
+.tags a:hover {
+	color:#DCDCDC;
+	background-color: #000;
+}
 
 /* TYPE */
-#type {
+#type a {
 	text-align: center;
 	vertical-align: top;
-	width: 40px; 
-	height: 40px;
+	width: 70px; 
+	height: 62px;
 	position: absolute;
-    top: 8px;
-    right: 5px;
-	color:#666; 
+	padding-top: 18px;
+    top: 0px;
+    right: 0px;
+	color:#888; 
 	font-size:1.5em;
+	/*background: #000;*/
+}
+#type a:hover {
+	color:#000;
+	text-decoration:none; 
+}
+
+.textIcon {
+	color:#888;
+	margin-right:0.75em; 
 }
\ No newline at end of file
diff --git a/content/Memex.ndtl b/content/Memex.ndtl
index a817b3c..5c1841b 100644
--- a/content/Memex.ndtl
+++ b/content/Memex.ndtl
@@ -104,7 +104,7 @@ MOD SUPPORT IN UNITY
   LINK : http://nihilocrat.tumblr.com/post/157890290188/mod-support-in-unity
   TYPE : article
   DATE : 12018-07-03
-  TAGS : gamedev
+  TAGS : gamedev, unity3d
   SEEN : false
 
 PSALM 46
@@ -119,7 +119,7 @@ C# GC
   LINK : http://benbowen.blog/post/three_garbage_examples/
   TYPE : article
   DATE : 12018-07-03
-  TAGS : gamedev, code
+  TAGS : gamedev, code, unity3d
   SEEN : true
   REVI : true
 
@@ -176,7 +176,7 @@ GENERATE GREAT DUNGEONS
   TAGS : gamedev
   SEEN : false
 
-TECHNOLOGIST CLIMATE REACT
+TECHNOLOGIST CLIMATE
   LINK : http://worrydream.com/ClimateChange/
   TYPE : article
   DATE : 12018-07-03
@@ -219,7 +219,7 @@ MAGIC INK
   TAGS : ux, design
   SEEN : true
 
-PROCEDURAL WORLD NARRATIVES
+PROCEDURAL NARRATIVES
   LINK : https://www.gamasutra.com/blogs/JoshGe/20161116/285647/Weaving_Narratives_into_Procedural_Worlds.php
   TYPE : article
   DATE : 12018-07-03
@@ -260,7 +260,7 @@ RV BATTERY RANT
   TYPE : article
   DATE : 12018-07-03
   TAGS : offgrid
-  NOTE : rant
+  NOTE : Rant
   SEEN : true
 
 HYPER LIGHT DIFFICULTY
@@ -448,7 +448,7 @@ LONG-TERM MEMORY
   TERM : Anki, Memex
   SEEN : false
 
-DECLARATION OF INDEPENDENCE OF CYBERSPACE
+INDEPENDENCE IN CYBERSPACE
   PERS : ark
   SRCE : Merveilles
   LINK : https://www.eff.org/cyberspace-independence
diff --git a/logic/main.js b/logic/main.js
index 63eee37..a8ae42b 100644
--- a/logic/main.js
+++ b/logic/main.js
@@ -39,7 +39,7 @@ function displayEntries(db)
 
     	// ENTRY
 	    entries += `<div class="grid-item">`;
-	    entries += `${keys[i].toProperCase()}`;
+	    entries += `<div class="title">${keys[i].toProperCase()}</div>`;
 
 	    // LINK
 		if (typeof value.LINK !== 'undefined')
@@ -52,13 +52,14 @@ function displayEntries(db)
 					idUrl = "urlseen";
 				}
 			}
-			entries += `<div id="link"><a href="${String(value.LINK)}" id="${idUrl}">${extractRootDomain(value.LINK)}</a></div>`;
+			entries += `<div class="link"><i class="fas fa-link textIcon"></i><a href="${String(value.LINK)}" id="${idUrl}">${extractRootDomain(value.LINK)}</a></div>`;
 		}
 
 		// TYPE
 		if (typeof value.TYPE !== 'undefined')
 		{
 			entries += `<div id="type">`;
+			entries += `<a href='#type:${String(value.TYPE)}'>`;
 			if (value.TYPE == 'article')
 			{
 				entries += `<i class="far fa-newspaper"></i>`;
@@ -104,43 +105,38 @@ function displayEntries(db)
 				entries += `<i class="fas fa-music"></i>`;
 			}
 			 
+			entries += `</a>`;
 			entries += `</div>`;
 		}
 
 		// TAGS
 		if (typeof value.TAGS !== 'undefined')
 		{
-			entries += `<div id="tags">${value.TAGS.toLowerCase()}</div>`;
+			entries += `<div class="tags"><i class="fas fa-tag textIcon"></i><a href=#tag:${value.TAGS.toLowerCase()}>${value.TAGS.toLowerCase()}</a></div>`;
 		}
 
 		// NOTE
 		if (typeof value.NOTE !== 'undefined')
 		{
-			entries += `<div id="note">NOTE: ${value.NOTE}</div>`;
+			entries += `<div class="note"><i class="fas fa-sticky-note textIcon"></i>${value.NOTE}</div>`;
 		}
 
 		// QUOTE
 		if (typeof value.QOTE !== 'undefined')
 		{
-			entries += `<div id="quote">QUOTE: ${value.QOTE}</div>`;
+			entries += `<div class="quote"><i class="fas fa-comment textIcon"></i>${value.QOTE}</div>`;
 		}
 
 		// TERM
 		if (typeof value.TERM !== 'undefined')
 		{
-			entries += `<div id="term">TERM(S): ${value.TERM}</div>`;
-		}
-
-		// TERM
-		if (typeof value.TERM !== 'undefined')
-		{
-			entries += `<div id="term">TERM(S): ${value.TERM}</div>`;
+			entries += `<div class="term"><i class="fas fa-ribbon textIcon"></i>${value.TERM}</div>`;
 		}
 
 		// PROGRESS
 		if (typeof value.PROG !== 'undefined')
 		{
-			entries += `<div id="term">PROGRESS: ${value.PROG}</div>`;
+			entries += `<div class="prog"><i class="fas fa-clock textIcon"></i>${value.PROG}</div>`;
 		}
 
 		entries += `</div>`;