extras
/
voltTab
mirror of https://github.com/zombieFox/voltTab.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add more config options

This commit is contained in:
zombieFox 2022-05-24 18:28:27 +01:00
parent 9decb07ccf
commit d5da194342
8 changed files with 151 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/component/Body/index.css
View File

@ -1,7 +1,3 @@
:root {
--font-size: calc(var(--theme-scale) * 0.025vmax);
}
::selection {
background-color: rgb(var(--theme-accent));
color: hsl(var(--theme-text));
@ -13,10 +9,9 @@ body {
font-size: var(--font-size);
line-height: 1.6;
font-family: var(--theme-font);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: var(--font-weight-regular);
font-style: normal;
color: hsl(var(--theme-text));
transition: background-color var(--layout-transition-extra-fast);
}
body {

11
src/component/Bookmark/index.css
View File

@ -2,13 +2,12 @@
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template-columns: calc(var(--bookmark-panel-size) * 1%) 1fr;
grid-template-columns: calc(var(--bookmark-panel) * 1%) 1fr calc(var(--bookmark-panel) * 1%);
align-items: center;
z-index: var(--z-index-bookmark);
}
.bookmark-panel {
grid-column: 1 / 2;
grid-row: 1 / -1;
align-self: normal;
background-color:
@ -20,3 +19,11 @@
pointer-events: none;
z-index: 1;
}
.bookmark-panel-left {
grid-column: 1 / 2;
}
.bookmark-panel-right {
grid-column: 3 / 4;
}

22
src/component/Bookmark/index.js
View File

@ -15,7 +15,13 @@ export const Bookmark = function() {
this.style = () => {
applyCSSVar('--bookmark-panel-size', config.bookmark.panel.size);
applyCSSVar('--bookmark-panel', config.bookmark.panel);
applyCSSVar('--bookmark-icon-spacing', config.bookmark.iconSpacing);
applyCSSVar('--bookmark-group-spacing', config.bookmark.groupSpacing);
applyCSSVar('--bookmark-tab-spacing', config.bookmark.tabSpacing);
}
@ -67,6 +73,18 @@ export const Bookmark = function() {
this.node.panel.classList.add('bookmark-panel');
switch (config.bookmark.direction) {
case 'left':
this.node.panel.classList.add('bookmark-panel-left');
break;
case 'right':
this.node.panel.classList.add('bookmark-panel-right');
break;
}
this.node.bookmark.appendChild(this.node.panel);
this.node.bookmark.appendChild(this.node.group);
@ -75,4 +93,4 @@ export const Bookmark = function() {
}
}
}

49
src/component/BookmarkGroup/index.css
View File

@ -3,28 +3,39 @@
grid-row: 1 / -1;
display: flex;
flex-direction: column;
gap: 3em;
gap: calc((var(--bookmark-group-spacing) / 10) * 1em);
padding: 3em 0;
z-index: 2;
}
.bookmark-group-item {
display: grid;
grid-template-columns: calc(var(--bookmark-panel-size) * 1%) 1fr;
grid-template-columns: calc(var(--bookmark-panel) * 1%) 1fr calc(var(--bookmark-panel) * 1%);
position: relative;
}
.bookmark-group-tab {
grid-row: 1 / 2;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
text-align: right;
justify-content: flex-end;
color: hsl(var(--bookmark-group-color-primary-hsl-h),
calc(var(--bookmark-group-color-primary-hsl-s) * 1%),
calc(var(--bookmark-group-color-primary-hsl-l) * 1%));
gap: 3em;
padding: 0 3em;
gap: calc((var(--bookmark-tab-spacing) / 10) * 1em);
padding: 0 calc((var(--bookmark-tab-spacing) / 10) * 1em);
}
.bookmark-group-item-left .bookmark-group-tab {
grid-column: 1 / 2;
flex-direction: row;
text-align: right;
}
.bookmark-group-item-right .bookmark-group-tab {
grid-column: 3 / 4;
flex-direction: row-reverse;
text-align: left;
}
.bookmark-group-label {
@ -39,8 +50,8 @@
font-size: 2em;
margin: 0;
padding: 0;
font-family: "Ubuntu", sans-serif;
font-weight: 100;
font-family: var(--theme-font), sans-serif;
font-weight: var(--font-weight-light);
color: hsl(var(--bookmark-group-color-primary-hsl-h),
calc((var(--bookmark-group-color-primary-hsl-s) - 30) * 1%),
calc((var(--bookmark-group-color-primary-hsl-l) - 20) * 1%));
@ -59,8 +70,8 @@
font-size: 1em;
margin: 0;
padding: 0;
font-family: "Ubuntu", sans-serif;
font-weight: 500;
font-family: var(--theme-font), sans-serif;
font-weight: var(--font-weight-medium);
color: hsl(var(--bookmark-group-color-secondary-hsl-h),
calc((var(--bookmark-group-color-secondary-hsl-s) - 30) * 1%),
calc((var(--bookmark-group-color-secondary-hsl-l) - 20) * 1%));
@ -76,9 +87,21 @@
}
.bookmark-group-list {
grid-row: 1 / 2;
display: flex;
flex-wrap: wrap;
gap: 1em;
padding: 0 1em;
flex-direction: row;
gap: calc((var(--bookmark-icon-spacing) / 10) * 1em);
padding: 0 calc((var(--bookmark-icon-spacing) / 10) * 1em);
align-items: center;
}
.bookmark-group-item-left .bookmark-group-list {
grid-column: 2 / 4;
justify-content: flex-start;
}
.bookmark-group-item-right .bookmark-group-list {
grid-column: 1 / 3;
justify-content: flex-end;
}

14
src/component/BookmarkGroup/index.js
View File

@ -55,6 +55,18 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
this.node.groupItem.classList.add('bookmark-group-item');
switch (config.bookmark.direction) {
case 'left':
this.node.groupItem.classList.add('bookmark-group-item-left');
break;
case 'right':
this.node.groupItem.classList.add('bookmark-group-item-right');
break;
}
if (config.bookmark.alwaysVisible) {
this.node.groupItem.classList.add('bookmark-group-active');
@ -127,4 +139,4 @@ export const BookmarkGroup = function(bookmarkGroupData, allBookmarkGroup) {
this.group = () => this.node.groupItem;
}
}

10
src/component/Theme/index.css
View File

@ -1,3 +1,11 @@
:root {
--font-size: calc(var(--theme-scale) * 0.025vmax);
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
}
:root {
--theme-accent:
hsl(var(--theme-accent-hsl-h),
@ -23,4 +31,4 @@
--theme-transition-medium-ease: calc(var(--theme-transition-speed-medium) * 1s) ease-in-out;
--theme-transition-slow-ease: calc(var(--theme-transition-speed-slow) * 1s) ease-in-out;
--theme-transition-xslow-ease: calc(var(--theme-transition-speed-xslow) * 1s) ease-in-out;
}
}

27
src/config.js
View File

@ -4,16 +4,25 @@ export const config = {
// open the bookmarks in a new tab: true or false
newTab: true, // boolean: true|false
// the bookmark panel and group name position and direction the bookmarks flow
direction: 'left', // string: left|right
// bookmark icons show when a bookmark group gains focus or on cursor hover
// if set to true bookmarks are always shown
alwaysVisible: false, // boolean: true|false
// bookmark left side panel
// area contains bookmark group name, description and open all button
panel: {
// width of the left panel
size: 35 // range: min:0|max:100
},
// bookmark left side panel size
// this area contains bookmark group name, description and open all button
panel: 35, // range: min:0|max:100
// spacing between bookmark icons
iconSpacing: 10, // range: min:0|max:*
// spacing between bookmark group rows
groupSpacing: 30, // range: min:0|max:*
// spacing between bookmark group name, description and open all button
tabSpacing: 30, // range: min:0|max:*
// bookmark grouping
// each object in this array definesa group
@ -67,7 +76,7 @@ export const config = {
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [250, 60, 70] } },
list: [
{ icon: 'fa-brands fa-reddit-alien', url: 'https://reddit.com/' },
{ icon: 'fa-brands fa-deviantart', url: 'https://www.deviantart.com/' },
{ icon: 'fa-brands fa-artstation', url: 'https://www.artstation.com/' },
{ icon: 'fa-brands fa-discord', url: 'https://discord.com/' },
{ icon: 'fa-solid fa-paperclip', url: 'https://www.decisionproblem.com/paperclips/' },
{ icon: 'fa-solid fa-dice-d20', url: 'https://zombiefox.github.io/diceRoller/' },
@ -75,7 +84,7 @@ export const config = {
]
}, {
name: 'Entertainment',
description: 'Films and videos',
description: 'Films, videos, streams',
color: { primary: { hsl: [0, 0, 100] }, secondary: { hsl: [0, 60, 70] } },
list: [
{ icon: 'fa-brands fa-vimeo', url: 'https://vimeo.com/' },
@ -192,4 +201,4 @@ export const config = {
}
}
};
};

89
src/style/typography/index.css
View File

@ -7,74 +7,74 @@ h6 {
margin: 0 0 1em 0;
font-weight: normal;
line-height: 1.6;
color: hsl(var(--theme-primary-text-010));
color: hsl(var(--theme-text));
}
h1 {
font-size: 1.5em;
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
font-family: var(--theme-font);
font-weight: var(--font-weight-light);
font-style: normal;
}
h2 {
font-size: 1.3em;
font-family: var(--theme-font-display-name);
font-weight: var(--theme-font-display-weight);
font-style: var(--theme-font-display-style);
font-family: var(--theme-font);
font-weight: var(--font-weight-light);
font-style: normal;
}
h3 {
font-size: 1.1em;
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-family: var(--theme-font);
font-weight: var(--font-weight-light);
font-style: normal;
}
h4 {
font-size: 1em;
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-family: var(--theme-font);
font-weight: var(--font-weight-medium);
font-style: normal;
}
h5 {
font-size: 1em;
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: bold;
font-family: var(--theme-font);
font-weight: var(--font-weight-medium);
font-style: normal;
font-weight: var(--font-weight-bold);
}
h6 {
font-size: 0.75em;
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: bold;
font-family: var(--theme-font);
font-weight: var(--font-weight-medium);
font-style: normal;
font-weight: var(--font-weight-bold);
}
p {
color: hsl(var(--theme-primary-text-010));
color: hsl(var(--theme-text));
margin: 0;
line-height: 1.6;
}
hr {
border: 0;
border-top: var(--layout-horizontal-rule-small);
border-radius: calc(var(--theme-radius) * 0.01em);
margin: calc(var(--wrap-space) * 2) 0;
border-top: 2px;
border-radius: 0.5em;
margin: 1em;
clear: both;
transition: border-color var(--layout-transition-extra-fast);
transition: border-color var(--theme-transition-xfast-ease);
}
b,
caption,
strong {
color: hsl(var(--theme-primary-text-010));
font-family: var(--theme-font-ui-name);
font-weight: 600;
color: hsl(var(--theme-text));
font-family: var(--theme-font);
font-weight: var(--font-weight-bold);
}
i {
@ -82,29 +82,29 @@ i {
}
a {
color: hsl(var(--theme-primary-text-010));
color: hsl(var(--theme-text));
text-decoration: underline;
transition: text-decoration var(--layout-transition-extra-fast);
transition: text-decoration var(--theme-transition-xfast-ease);
}
a:link,
a:visited {
color: hsl(var(--theme-primary-text-010));
color: hsl(var(--theme-text));
}
a:focus {
text-decoration-color: hsl(var(--theme-primary-text-010));
text-decoration-color: hsl(var(--theme-text));
outline: none;
}
a:hover {
color: hsl(var(--theme-primary-text-010));
color: hsl(var(--theme-text));
text-decoration-color: rgb(var(--theme-accent));
}
a:active {
color: hsl(var(--theme-primary-text-010));
text-decoration-color: hsl(var(--theme-primary-text-010));
color: hsl(var(--theme-text));
text-decoration-color: hsl(var(--theme-text));
}
ol,
@ -146,21 +146,20 @@ table {
table thead tr td,
table thead tr th {
background-color: hsl(var(--theme-primary-030));
background-color: hsl(var(--theme-text));
border: 0;
border-bottom: 1px solid hsl(var(--theme-primary-040));
border-bottom: 1px solid hsl(var(--theme-text));
padding: 0.5em;
margin: 0;
text-align: left;
font-family: var(--theme-font-ui-name);
font-weight: var(--theme-font-ui-weight);
font-style: var(--theme-font-ui-style);
font-weight: bold;
font-family: var(--theme-font);
font-weight: var(--font-weight-bold);
font-style: normal;
box-sizing: border-box;
}
table tr:nth-child(odd) {
background-color: hsl(var(--theme-primary-020));
background-color: hsl(var(--theme-text));
}
table tbody tr td,
@ -173,7 +172,7 @@ table tbody tr th {
}
code {
background-color: hsl(var(--theme-primary-040));
background-color: hsl(var(--theme-text));
padding: 0.2em 0.5em;
border-radius: calc(var(--theme-radius) * 0.01em);
border-radius: 0.5em;
}