diff --git a/README.md b/README.md index 06ec98d..8272977 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Longer notes can be collapsed to show just the first line, for even more compact ![Collapsed notes](images/nullboard-collapsed-notes.gif) -The font is [Barlow](https://tribby.com/fonts/barlow/) - it's both narrow *and* still very legible. Absolutely fantastic design! +The default font is [Barlow](https://tribby.com/fonts/barlow/) - it's both narrow *and* still very legible. Absolutely fantastic design! ![Barlow speciment](images/barlow-specimen.png) @@ -66,9 +66,13 @@ Lists can be moved around as well, though not as flashy as notes: ![List swapping](images/nullboard-list-swap.gif) -The color theme can be inversed and the font size can be increased: +The font can be changed; its size and line height can be adjusted: -![Theme and zoom](images/nullboard-theme-and-zoom.gif) +![Theme and zoom](images/nullboard-ui-preferences.gif) + +The color theme can be inverted: + +![Dark theme](images/nullboard-dark-theme.gif) Also: diff --git a/extras/MavenPro-regular.woff b/extras/MavenPro-Regular.woff similarity index 100% rename from extras/MavenPro-regular.woff rename to extras/MavenPro-Regular.woff diff --git a/images/nullboard-dark-theme.gif b/images/nullboard-dark-theme.gif new file mode 100644 index 0000000..37f71f8 Binary files /dev/null and b/images/nullboard-dark-theme.gif differ diff --git a/images/nullboard-ui-preferences.gif b/images/nullboard-ui-preferences.gif new file mode 100644 index 0000000..3bdcb14 Binary files /dev/null and b/images/nullboard-ui-preferences.gif differ diff --git a/nullboard.html b/nullboard.html index 4cdbd67..9e7e4d4 100644 --- a/nullboard.html +++ b/nullboard.html @@ -668,8 +668,8 @@ left: 9px; line-height: calc(19 / 11); padding: 6px 12px; - opacity: 0.6; z-index: 3; + opacity: 0.6; background: #f8f9fb; } @@ -682,6 +682,13 @@ opacity: 1.0; } + .logo .alert { + display: none; + font-style: normal; + margin-left: 5px; + color: #d20; + } + .logo .bulk { overflow: hidden; height: 0; @@ -695,21 +702,38 @@ opacity: 1; } - .logo a { + .logo a.site, + .logo .bulk a { color: #000; - display: block; } - .logo a:hover { + .logo .bulk a:hover { color: #1489db; } + .logo .bulk a { + display: block; + } + .logo .bulk a:before { display: inline-block; content: '-'; width: 11px; } + /***/ + .logo.updated { + opacity: 1; + } + + .logo.updated .alert { + display: inline-block; + } + + .logo.updated .bulk .view-changes { + color: #d20; + } + /***/ .config { position: absolute; @@ -827,6 +851,7 @@ } /***/ + .config .bulk .section .title { text-align: center; width: 0; @@ -878,6 +903,7 @@ /***/ .config .bulk .ui-prefs .f-prefs table { + width: 10px; /* mobile safari */ padding: 0; margin: 0; border-collapse: collapse; @@ -1277,11 +1303,13 @@ -