tweaked index, inline site/state, changed colours

public/stylesheets/main.css

@@ -1,8 +1,38 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+/* Neon Colour Variables */
+:root {
+  --neon-green: #3DFF33;
+  --neon-purple: #F433FF;
+  --neon-yellow: #F3F315;
+  --neon-orange: #FF8300;
+  --neon-blue: #6699f6;
+  --neon-red: #FF0000;
 }
 
-a {
-  color: #00B7FF;
+
+html {
+  font-family: courier, monospace;
+  color: white;
+  text-align: justify;
+  padding: 50px;
+}
+
+body {
+  background-color: black;
+}
+
+
+a {
+  color: var(--neon-green);
+  text-decoration: none;
+  /* font-weight: bold; */
+}
+
+.site {
+  margin: 8px;
+  display: inline;
+}
+
+.state {
+  margin: 0px;
+  display: inline;
 }

views/index.pug

@@ -13,9 +13,10 @@ block content
   h2= "Visits"
   each visit in visits
     - sitesVisited.push(visit.id);
-    h3 #[a(href="/sites/" + visit.slug) #{visit.site}]
+    div(class="listing")
+      h3(class="site") #[a(href="/sites/" + visit.slug) #{visit.site}]
       //- Commmand list of all the states
-    h5 
+      h5(class="state") 
         - var states = visit.states.split(',')
         - for (var i = 0; i < states.length; i++)
           | #{states[i]}
@@ -25,9 +26,10 @@ block content
   h2= "Remaining"
   each site in sites
     if !(sitesVisited.includes(site.id))
-      h3 #[a(href="/sites/" + site.slug) #{site.site}]
+      div(class="listing")
+        h3(class="site") #[a(href="/sites/" + site.slug) #{site.site}]
         //- Commmand list of all the states
-      h5 
+        h5(class="state") 
           - var states = site.states.split(',')
           - for (var i = 0; i < states.length; i++)
             | #{states[i]}

views/site-listing.pug

@@ -6,7 +6,7 @@ block content
   h2= "Sites: " + sites.length
   
   each site in sites
-    h3= site.site
+    h3 #[a(href="/sites/" + site.slug) #{site.site}]
     //- Commmand list of all the states
     h5 
       - var states = site.states.split(',')

views/site.pug

@@ -10,15 +10,12 @@ block content
   .content
     p #{site.description}
         
-    //- - var states = visit.states.split(',')
-    //- - for (var i = 0; i < states.length; i++)
-    //-   | #{states[i]}
-    //-   if (i + 1 < states.length)
-    //-     | , 
-        
   if visits
+    h2= "Visits"
     each visit in visits
       p #{visit.date}: #{visit.img} at the site: #{visit.site_id}
+  else
+    h2= "This site has yet to be visited.  Soon... "
   
   
   include footer.pug