silo improvements, fix for nebula

src/digimarks/static/css/digui.css

@@ -20,11 +20,12 @@
     --border-color: #d5d9d9;
     --border-width: 1px;
     --border-radius: 8px;
-    --shadow-color: rgba(213, 217, 217, .5);
+    /*--shadow-color: rgba(213, 217, 217, .5);*/
+    --shadow-color: rgba(3, 3, 3, .5);
     --global-theme-toggle-content: ' 🌞';
 }
 
-html[data-theme='nebula-light'] {
+html[data-theme='nebula'] {
     --background-color: #fff;
     --text-color: #121416d8;
     --secondary-text-color: #121416d8;
@@ -37,8 +38,7 @@ html[data-theme='nebula-light'] {
     --border-color: #d5d9d9;
     --border-width: 1px;
     --border-radius: 8px;
-    /*--shadow-color: rgba(213, 217, 217, .5);*/
+    --shadow-color: rgba(213, 217, 217, .5);
-    --shadow-color: rgba(4, 0, 0, 1);
     --global-theme-toggle-content: ' 🌞';
 }
 
@@ -126,7 +126,7 @@ header * {
 }
 
 header li {
-    margin: 20px;
+    /*margin: 10px;*/
 }
 
 header li a {
@@ -138,12 +138,19 @@ header li h1 {
     font-weight: bold;
     font-size: 1.2rem;
     vertical-align: middle;
+    margin-right: 3rem;
 }
 
-/* Heading element other than an h1-6 one, e.g. one in the nav */
+[data-theme='silo'] header nav::after {
-.heading {
+    content: '';
-    font-weight: bold;
+    background: repeating-linear-gradient(90deg, #23B0FF, #23B0FF 2px, transparent 0, transparent 10px);
-    font-size: 1.1em;
+    display: block;
+    width: 100%;
+    right: 10px;
+}
+
+[data-theme='silo'] header {
+    border-bottom: 3px dotted #23B0FF;
 }
 
 a, a:hover, a:visited, a:active {
@@ -165,12 +172,15 @@ a:hover {
     color: var(--text-color);
 }
 
+/* Special button */
+.theme-toggle::after {
+    content: var(--global-theme-toggle-content);
+}
+
 /* Buttons */
-button {
+button, input {
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);
-    /*background-color: #fff;*/
-    /*border: 1px solid #d5d9d9;*/
     box-sizing: border-box;
     color: var(--secondary-text-color);
     cursor: pointer;
@@ -179,13 +189,12 @@ button {
     line-height: 29px;
     padding: 0 10px 0 11px;
     position: relative;
-    text-align: center;
+    text-align: left;
     text-decoration: none;
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
     vertical-align: middle;
-    /*width: 100px;*/
 }
 
 button:hover {
@@ -202,10 +211,6 @@ button:focus {
     /*border-color: #d57803;*/
 }
 
-.theme-toggle::after {
-    content: var(--global-theme-toggle-content);
-}
-
 /* Cards */
 .cards {
     display: grid;
@@ -222,8 +227,8 @@ button:focus {
     padding: 1em;
 }
 
-[date-theme='nebula-light'] .card,
+[data-theme='nebula'] .card,
-[date-theme='nebula-light'] button,
+[data-theme='nebula'] button,
 [data-theme='nebula-dark'] .card,
 [data-theme='nebula-dark'] button {
     box-shadow: var(--shadow-color) 0 2px 5px 0;

src/digimarks/static/js/digimarks.js

@@ -10,8 +10,8 @@ document.addEventListener('alpine:init', () => {
         tags: [],
 
         /* nebula (dropshadows), bbs (monospace, right lines), silo (like bbs but dark) ?? */
-        themes: ['nebula-light', 'nebula-dark', 'bbs', 'silo'],
+        themes: ['nebula', 'nebula-dark', 'bbs', 'silo'],
-        theme: Alpine.$persist('nebula-light').as('theme'),
+        theme: Alpine.$persist('nebula').as('theme'),
 
         show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
         show_bookmarks_list: Alpine.$persist(true).as('show_bookmarks_list'),
@@ -33,7 +33,8 @@ document.addEventListener('alpine:init', () => {
         async init() {
             /** Initialise the application after loading */
             document.documentElement.setAttribute('data-theme', this.theme);
-            // document.getElementById('theme-link').setAttribute('href', 'digui-theme-' + this.theme + '.css');
+            console.log('Set theme', this.theme);
+            /* Bookmarks are refreshed through the getBookmarks() call in the HTML page */
             /* await this.getBookmarks(); */
             setInterval(() => {
                 // Update counter to next game (midnight UTC, fetched from API) every second
@@ -42,23 +43,20 @@ document.addEventListener('alpine:init', () => {
         },
 
         async loopToNextTheme() {
-            /* TBD: loop through themes */
+            /* Loop through themes */
             let currentThemeIndex = this.themes.indexOf(this.theme);
-            console.log('currentThemeIndex', currentThemeIndex);
             if (currentThemeIndex + 1 >= this.themes.length) {
                 currentThemeIndex = 0
             } else {
                 currentThemeIndex++;
             }
-            console.log('currentThemeIndex', currentThemeIndex);
             this.theme = this.themes[currentThemeIndex];
-            console.log('switching to ' + this.theme)
+            console.log('Switching to theme', this.theme)
             document.documentElement.setAttribute('data-theme', this.theme);
             /* Optionally, change the theme CSS file too */
             // document.getElementById('theme-link').setAttribute('href', 'digui-theme-' + this.theme + '.css');
         },
 
-
         async loadCache() {
             if (this.userKey in this.cache) {
                 console.log('Loading bookmarks from cache for user "' + this.userKey + '"');