more tweakn'

README.md

@@ -14,12 +14,11 @@ Just your own, predictable grid of links.
 - [x] settings pane
 - [x] context-menu
 - [x] custom images for tiles
+- [x] custom css
 - [ ] backup settings to a file?
-- [ ] show same on top of folders? (or - like in vivaldi - show first 4 thumbs?)
+- [ ] show same on top of folders? (like in vivaldi - first 4 mini-thumbs)?
 - [ ] light/dark themes (css based on the OS?)
-- [ ] custom css
 - [ ] accessibility (keyboard support)
-- [ ] shortcuts (1-9?)
 - [ ] show another (e.g. TODO) folder in  list view?
 - [ ] show recently closed?
 - [x] Requires only 2 permissions (bookmarks & storage for cache)!

src/app/index.styl

@@ -16,6 +16,7 @@ body
 	user-select none
 	box-sizing border-box
 	padding-bottom 20px
+	overflow-x hidden
 	overflow-y auto
 
 body *

src/app/index.svelte

@@ -1,7 +1,7 @@
-<Settings />
 <Header />
 <Main />
 <ContextMenu />
+<Settings />
 
 <script>
 import Settings from '../settings';

src/lib/lib.styl

@@ -1,47 +1,3 @@
-// VARS
-main-font = system,-apple-system,".SFNSDisplay-Regular","Helvetica Neue",Helvetica,"Segoe UI",sans-serif;
-
-
-// // Color Palette
-// color-bg-dark0 = nord0
-// color-bg-dark1 = nord1
-// color-bg-dark2 = nord2
-// color-bg-dark3 = nord3
-
-// color-bg-light0 = nord4
-// color-bg-light1 = nord5
-// color-bg-light2 = nord6
-
-
-
-// color-text-dark0 = nord0
-// color-text-dark1 = nord1
-// color-text-dark2 = nord2
-// color-text-dark3 = nord3
-
-// color-text-light0 = nord4
-// color-text-light1 = nord5
-// color-text-light2 = nord6
-
-// color-link0 = nord7
-// color-link1 = nord8
-// color-link2 = nord9
-// color-link3 = nord10
-
-
-// color-highlight = nord3
-// color-accent = nord12
-// color-accent-alt = nord15
-
-// color-info = nord10
-// color-danger = nord11
-// color-warning = nord13
-// color-success = nord14
-
-
-
-
-
 //*** SHORTCUTS ************************************************************************************
 b(n) { if n is 0 { font-weight: normal } else { font-weight: bold } }				// b:1 -> font-weight: bold;
 i(n) { if n is 0 { font-style: normal } else { font-style: italic } }				// i:1 -> font-style: italic;
@@ -77,14 +33,6 @@ bottom(n = 0) { bottom: px(n) }
 z(n = 0) { z-index: n }
 //*** SHORTCUTS ************************************************************************************
 
-multiline-ellipsis(lines)
-	display block
-	display -webkit-box
-	-webkit-line-clamp lines
-	-webkit-box-orient vertical
-	overflow hidden
-	text-overflow ellipsis
-	word-wrap break-word
 
 
 

src/main/index.svelte

@@ -77,7 +77,7 @@ function folderChanged (folderId) {
 
 onMount(() => {
 	new Sortable(document.querySelector('.bookmarks'), {
-		animation: 150,
+		animation: 200,
 		ghostClass: 'sortable-ghost',
 		onStart: e => e.item.classList.add('sortable-plate'),
 		onEnd: e => e.item.classList.remove('sortable-plate'),

src/settings/index.styl

@@ -20,7 +20,6 @@
 	right 0
 	bottom 0
 	width 300
-	padding 20
 	min-height 300
 	box-shadow -2px 0 5px #0008
 	transition transform .1s, opacity .1s
@@ -29,10 +28,9 @@
 
 	&.hidden
 		transform translateX(300px)
-		opacity 0
 
 	h1
-		margin-bottom 20
+		margin 20
 
 
 	label
@@ -116,9 +114,13 @@
 	flex-flow column
 	align-items stretch
 	padding 10 0
+	margin 0 20
 	font inherit
 	font-size 15px
 
+	&.hidden
+		display none
+
 
 .settings-row
 	display flex

src/settings/index.svelte

@@ -5,7 +5,7 @@
 <div class="settings-pane {isVisible ? '' : 'hidden'}">
 	<h1>Settings</h1>
 
-	<form class="settings-form" on:change="{onchange}">
+	<form class="settings-form {isVisible ? '' : 'hidden'}" on:change="{onchange}">
 		<label>Bookmarks folder</label>
 		<div class="settings-row">
 			<select name="rootfolder" bind:value="{$options.rootFolder}">

src/store/index.js

@@ -7,7 +7,7 @@ export const options = writable({
 	columns    : 6,
 	iconWidth  : 150,
 	iconHeight : 140,
-	gridGap    : 30,
+	gridGap    : 35,
 	pageColor  : '#ffffff',
 	pageBg     : '#333333',
 	css        : '',