tweaked index, inline site/state, changed colours

public/stylesheets/main.css

@@ -1,8 +1,38 @@
-body {
+/* Neon Colour Variables */
-  padding: 50px;
+:root {
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  --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,26 +13,28 @@ block content
   h2= "Visits"
   each visit in visits
     - sitesVisited.push(visit.id);
-    h3 #[a(href="/sites/" + visit.slug) #{visit.site}]
+    div(class="listing")
-    //- Commmand list of all the states
+      h3(class="site") #[a(href="/sites/" + visit.slug) #{visit.site}]
-    h5 
-      - var states = visit.states.split(',')
-      - for (var i = 0; i < states.length; i++)
-        | #{states[i]}
-        if (i + 1 < states.length)
-          | , 
-          
-  h2= "Remaining"
-  each site in sites
-    if !(sitesVisited.includes(site.id))
-      h3 #[a(href="/sites/" + site.slug) #{site.site}]
       //- Commmand list of all the states
-      h5 
+      h5(class="state") 
-        - var states = site.states.split(',')
+        - var states = visit.states.split(',')
         - for (var i = 0; i < states.length; i++)
           | #{states[i]}
           if (i + 1 < states.length)
             | , 
+          
+  h2= "Remaining"
+  each site in sites
+    if !(sitesVisited.includes(site.id))
+      div(class="listing")
+        h3(class="site") #[a(href="/sites/" + site.slug) #{site.site}]
+        //- Commmand list of all the states
+        h5(class="state") 
+          - var states = site.states.split(',')
+          - for (var i = 0; i < states.length; i++)
+            | #{states[i]}
+            if (i + 1 < states.length)
+              | , 
     else
       //- h3= "Removed!"
 

views/site-listing.pug

@@ -4,9 +4,9 @@ block content
   h1= title
   
   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

@@ -9,16 +9,13 @@ block content
   h5= site.category
   .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