Slight style changes, piwik is now matomo

config.example.toml

@@ -85,3 +85,9 @@
 [logger]
 	write=true
 	file="/var/log/icynet.log"
+
+# Matomo tracking
+#[matomo]
+#	site_id=
+#	site_domain="icynet.eu"
+#	track_url="//analytics.icynet.eu/"

server/server.js

@@ -53,8 +53,8 @@ app.use((req, res, next) => {
   })
 
   // Add Piwik tracker if configured
-  if (config.piwik && config.piwik.site_id) {
-    res.locals.piwik = config.piwik
+  if (config.matomo && config.matomo.site_id) {
+    res.locals.matomo = config.matomo
   }
 
   next()

src/style/main.styl

@@ -69,8 +69,6 @@ a
         margin: 0
         display: inline-block
         list-style-type: none
-        &.floating
-            float: right
 
     li
         font-size: 30px
@@ -98,6 +96,13 @@ a
         cursor: pointer
         color: green
     
+    .list
+        display: flex
+        flex-direction: row
+        
+        .floating
+            margin-left: auto
+
     input[type=checkbox]
         display: none
 
@@ -154,12 +159,13 @@ section
 .wrapper
     overflow: hidden
     min-height: 100vh
+    width: 100%
 
 .document
     overflow: hidden
-    min-height: 100vh;
-    padding: 50px;
-    background-color: #fff;
+    min-height: 100vh
+    padding: 50px
+    background-color: #fff
 
 .tos
     display: inline-block
@@ -182,6 +188,7 @@ input:not([type="submit"])
     border-radius: 5px
     border: 1px solid #c1c1c1
     background-color: #f5f5f5
+    color: #000
     box-shadow: inset 2px 2px 5px #ddd
     transition: border 0.1s linear
 
@@ -189,6 +196,7 @@ button, .button, input[type="submit"]
     display: block
     padding: 5px 10px
     background-color: #fbfbfb
+    color: #000
     border: 1px solid #c1c1c1
     border-radius: 5px
     font-size: 120%
@@ -197,6 +205,9 @@ button, .button, input[type="submit"]
     &.active
         background-color: #ddd
 
+input[disabled]
+    color: #959595
+
 .button
     display: inline-block
     margin-right: 5px
@@ -617,7 +628,6 @@ noscript
                 text-transform: none
             
             .floating
-                float: none !important
                 border-top: 2px solid #00a1b5
 
     #navlogo
@@ -649,7 +659,7 @@ noscript
             float: initial !important
             display: block !important
             border: 0 !important
-            width: 300px !important
+            width: auto !important
             margin: auto
     .dialog
         width: 100vw !important

views/layout.pug

@@ -3,16 +3,18 @@ html
 	head
 		meta(charset="utf8")
 		meta(name="viewport", content="width=device-width, initial-scale=1")
-		if piwik
+		if matomo
 			script(type="text/javascript").
 				var _paq = _paq || [];
 				  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+				_paq.push(["setCookieDomain", "*.#{matomo.site_domain}"]);
+				_paq.push(["setDomains", ["*.#{matomo.site_domain}"]]);
 				_paq.push(['trackPageView']);
 				_paq.push(['enableLinkTracking']);
 				(function() {
-					var u="#{piwik.track_url}";
+					var u="#{matomo.track_url}";
 					_paq.push(['setTrackerUrl', u+'piwik.php']);
-					_paq.push(['setSiteId', '#{piwik.site_id}']);
+					_paq.push(['setSiteId', '#{matomo.site_id}']);
 					var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
 					g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
 				})();
@@ -47,6 +49,9 @@ html
 		noscript
 			h2 This site requires JavaScript to work properly!
 			p Please consider enabling JavaScript for the full experience.
+			if matomo
+				p
+					img(src="#{matomo.track_url}piwik.php?idsite=1&rec=1" style="border:0;" alt="")
 		block banner
 			.banner
 				.logo