diff --git a/src/digimarks/static/css/digui.css b/src/digimarks/static/css/digui.css index 55a2f61..94f6f4f 100644 --- a/src/digimarks/static/css/digui.css +++ b/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(4, 0, 0, 1); + --shadow-color: rgba(213, 217, 217, .5); --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 */ -.heading { - font-weight: bold; - font-size: 1.1em; +[data-theme='silo'] header nav::after { + content: ''; + background: repeating-linear-gradient(90deg, #23B0FF, #23B0FF 2px, transparent 0, transparent 10px); + 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, -[date-theme='nebula-light'] button, +[data-theme='nebula'] .card, +[data-theme='nebula'] button, [data-theme='nebula-dark'] .card, [data-theme='nebula-dark'] button { box-shadow: var(--shadow-color) 0 2px 5px 0; diff --git a/src/digimarks/static/js/digimarks.js b/src/digimarks/static/js/digimarks.js index 57f09b5..159057f 100644 --- a/src/digimarks/static/js/digimarks.js +++ b/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'], - theme: Alpine.$persist('nebula-light').as('theme'), + themes: ['nebula', 'nebula-dark', 'bbs', 'silo'], + 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 + '"');