diff --git a/docs/asset/style.css b/docs/asset/style.css
index 10ca33d..a0ab010 100644
--- a/docs/asset/style.css
+++ b/docs/asset/style.css
@@ -1,46 +1,29 @@
-/* VARIABLES */
:root {
- /* COLOR */
- --color-main-bg-i: var(--background); /*#ddd;*/ /*idle*/
- --color-main-bg-e: var(--background); /*#ddd;*/ /*enabled*/
-
- --color-menu-bg-i: var(--b_low); /*#000;*/ /*idle*/
- --color-menu-bg-e: var(--b_low); /*#000;*/ /*enabled*/
- --color-menu-item-i: var(--b_med); /*#333;*/ /*idle*/
- --color-menu-item-e: var(--b_med); /*#999;*/ /*enabled*/
- --color-menu-item-a: var(--b_inv); /*#ddd;*/ /*ascent*/
- --alpha-i: 0.6;
- --alpha-e: 0.8;
- --alpha-a: 1.0;
+ --color-bg: var(--background);
- --color-content-bg-i: var(--b_low); /*#ccc;*/ /*idle*/
- --color-content-bg-e: var(--b_low); /*#bbb;*/ /*enabled*/
- --color-content-item-s: var(--f_high); /*#bbb;*/ /*sub*/
- --color-content-item-i: var(--f_high); /*#999;*/ /*idle*/
- --color-content-item-e: var(--f_high); /*#666;*/ /*enabled*/
- --color-content-item-t: var(--f_high); /*#000;*/ /*title*/
- --color-content-item-a: var(--b_inv); /*#000;*/ /*ascent*/
- --color-content-image-s: rgba(255, 255, 255, .1); /*sub*/
- --color-content-image-i: rgba(255, 255, 255, .3); /*idle*/
- --color-content-image-e: rgba(255, 255, 255, .5); /*enabled*/
- --color-content-image-t: #fff; /*title*/
- --color-content-image-a: #fff; /*ascent*/
+ --color-menu: var(--f_high); /*previously --b_med*/
+ --color-menubg: var(--b_low);
+ --color-menuascent: var(--b_inv);
- --color-overlay-bg-i: #000; /*idle*/
- --color-overlay-bg-e: #111; /*enabled*/
- --color-overlay-item-s: #111; /*sub*/
- --color-overlay-item-i: #222; /*idle*/
- --color-overlay-item-e: #333; /*enabled*/
- --color-overlay-item-a: #666; /*ascent*/
+ --color-item: var(--f_high);
+ --color-itembg: var(--b_low);
+ --color-itemascent: var(--b_inv);
- /* SIZE */
- --menu-width: 150px;
- --menu-item-vert-sep: 20px; /*vertical space between menu items*/
- --menu-item-elem-sep: 10px; /*horizontal space between menu item count and icon*/
- --menu-item-spacer: 30px; /*vertical space between menu types (types to terms, terms to tags)*/
- --menu-tag-sep: 10px; /*space between tag items*/
+ --color-image: #fff; /*Text overlaying an image item*/
+ --color-imagedarken: #000; /*Overlay on image as text background */
- --size-gutter: 20px;
+ --alpha-darken: 0.2;
+ --alpha-idle: 0.4;
+ --alpha-enabled: 0.8;
+ --alpha-ascent: 1.0;
+
+ --size-menu: 150px;
+ --size-menu-item-sepv: 14px; /*vertical space between menu items*/
+ --size-menu-item-seph: 10px; /*horizontal space between menu item count and icon*/
+ --size-menu-itemgroup-sepv: 30px; /*vertical space between menu types (types to terms, terms to tags)*/
+ --size-menu-tag-sepv: 10px; /*space between tag items*/
+
+ --size-grid-gutter: 20px;
--size-grid-column: 350px;
--size-item-corner: 3px;
@@ -49,9 +32,21 @@
--size-font-title: 1em;
--size-font-body: 0.8em;
- --type-icon-size: 24px; /*font size of type icon/count*/
+ --size-font-menutypes: 1em;
+ --size-font-menutags: 0.8em;
+ --size-font-bodytypes: 1em; /*font size of type icon/count*/
- --animation-time: 200ms;
+
+
+
+
+
+ /*TODO: refactor these; */
+ --color-overlay-bg-i: #000; /*idle*/
+ --color-overlay-bg-e: #111; /*enabled*/
+ --color-overlay-item-i: #222; /*idle*/
+ --color-overlay-item-e: #333; /*enabled*/
+ --color-overlay-item-a: #666; /*ascent*/
}
* {
@@ -59,7 +54,7 @@
}
html {
font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
- background: var(--color-main-bg-i);
+ background: var(--background);
padding: 0em;
margin: 0;
overflow-y: scroll;
@@ -71,124 +66,412 @@ body {
/* MENU */
.menu {
- background: var(--color-menu-bg-i);
- padding-top: var(--size-gutter);
- width: var(--menu-width);
+ background: var(--color-menubg);
+ padding-top: var(--size-grid-gutter);
+ width: var(--size-menu);
position: fixed;
height: 100%;
z-index: 100;
left: 0px;
top: 0px;
overflow-y: scroll;
+ opacity: var(--alpha-idle);
+}
+.menu:hover {
+ opacity: var(--alpha-enabled);
}
.menu::-webkit-scrollbar {
display: none;
}
-.menu:hover {
- background: var(--color-menu-bg-e);
-}
-.menu a {
- opacity: var(--alpha-i);
- color: var(--color-menu-item-i);
-}
-.menu:hover a {
- opacity: var(--alpha-e);
- color: var(--color-menu-item-e);
-}
-.menu a:hover {
- opacity: var(--alpha-a);
- color: var(--color-menu-item-a);
-}
-.menu-spacer {
- height: var(--menu-item-spacer);
+.menu-itemgroup {
+ padding-bottom: var(--size-menu-itemgroup-sepv);
width: 100%;
- float: left;
+ float: left;
}
-
-/* MENU ITEMS */
.menu-item {
- padding-bottom: calc(var(--menu-item-vert-sep) / 2);
- padding-top: calc(var(--menu-item-vert-sep) / 2);
- font-size: var(--type-icon-size);
+ color: var(--color-menu);
+ opacity: var(--alpha-idle);
+ padding-bottom: calc(var(--size-menu-item-sepv) / 2);
+ padding-top: calc(var(--size-menu-item-sepv) / 2);
+ font-size: var(--size-font-menutypes);
margin: 0px auto;
width: 100%;
float: left;
text-align: center;
}
-.menu-item .count {
- padding-right: calc(var(--menu-item-elem-sep) / 2);
+.menu-item:hover {
+ color: var(--color-menuascent);
+ opacity: var(--alpha-ascent);
+}
+.menu-itemcount {
+ padding-right: calc(var(--size-menu-item-seph) / 2);
display: inline-block;
text-align: right;
float: left;
width: 50%;
}
-.menu-item i {
- margin-left: calc(var(--menu-item-elem-sep) / 2);
- margin-top: calc(var(--type-icon-size) / 10);
- width: calc(var(--type-icon-size) * 1.25);
+.menu-itemicon {
+ margin-left: calc(var(--size-menu-item-seph) / 2);
+ margin-top: calc(var(--size-font-bodytypes) / 10);
+
+ width: calc(var(--size-font-bodytypes) * 1.25);
display: inline-block;
text-align: center;
float: left;
}
-
-/* MENU TAGS */
-.menu-tag-container {
+.menu-tagcontainer {
margin: 0 auto;
display: table;
}
-.menu-tag-container i {
- opacity: var(--alpha-i);
- padding-bottom: calc(var(--menu-item-vert-sep) / 2);
- padding-top: calc(var(--menu-item-vert-sep) / 2);
- font-size: var(--type-icon-size);
- color: var(--color-menu-item-i);
+.menu-tagicon {
+ opacity: var(--alpha-idle);
+ padding-bottom: calc(var(--size-menu-item-sepv) / 2);
+ padding-top: calc(var(--size-menu-item-sepv) / 2);
+ font-size: var(--size-font-menutags);
+ color: var(--color-menu);
display: table-row;
text-align: center;
width: 100%;
float: left;
}
-.menu:hover .menu-tag-container i {
- opacity: var(--alpha-e);
- color: var(--color-menu-item-e);
-}
-.menu-tag-container i:hover {
- opacity: var(--alpha-a);
-}
-.menu .menu-tag-container a {
-}
-.menu:hover .menu-tag-container a {
-}
-.menu .menu-tag-container a:hover {
- opacity: var(--alpha-a);
-}
.menu-tag {
- padding-bottom: calc(var(--menu-tag-sep) / 2);
- padding-top: calc(var(--menu-tag-sep) / 2);
- font-size: var(--size-font-body);
- display: table-row;
- width: 100%;
- float: left;
- clear: left;
+ opacity: var(--alpha-idle);
+ color: var(--color-menu);
+ padding-bottom: calc(var(--size-menu-tag-sepv) / 2);
+ padding-top: calc(var(--size-menu-tag-sepv) / 2);
+ font-size: var(--size-font-body);
+ width: 100%;
+ float: left;
+ clear: left;
}
-.menu-tag-count {
- padding-right: var(--menu-tag-sep);
+.menu-tagcount {
+ padding-right: var(--size-menu-tag-sepv);
text-align: right;
float: left;
}
-.menu-tag-label {
+.menu-taglabel {
text-align: left;
float: left;
}
-
-.noselect {
- -webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
- supported by Chrome and Opera */
+.menu-tag:hover {
+ opacity: var(--alpha-ascent);
}
+.menu-tag:hover .menu-taglabel {
+ color: var(--color-menubg);
+ background-color: var(--color-itemascent);
+}
+.menu-tag:hover .menu-tagcount {
+ color: var(--color-itemascent);
+}
+
+.container {
+ background: var(--background);
+ margin-left: calc(var(--size-menu) + var(--size-grid-gutter));
+ margin-right: var(--size-grid-gutter);
+}
+.grid {
+ margin: var(--size-grid-gutter) auto;
+ -webkit-transition: opacity 1000ms linear;
+ transition: opacity 1000ms linear;
+}
+.grid:after {
+ /* clearfix (reset) */
+ display: block;
+ content: '';
+ clear: both;
+}
+.grid-item, .grid-itemwide {
+ border-radius: var(--size-item-corner);
+ background: var(--color-itembg);
+ margin-bottom: var(--size-grid-gutter);
+ width: var(--size-grid-column);
+ text-decoration: none;
+ float: left;
+ padding-bottom: var(--size-grid-gutter);
+ position: relative;
+}
+.grid-item:hover, .grid-itemwide:hover {
+ opacity: var(--alpha-ascent);
+}
+@media screen and (min-width: 886px) {
+ .grid-itemwide {
+ width: calc(var(--size-grid-column) * 2 + var(--size-grid-gutter));
+ }
+}
+
+
+
+
+
+
+
+.grid-item-upper-content {
+ padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
+ display: inline-block;
+ z-index: 100;
+ width: 100%;
+}
+.grid-item-image .grid-item-upper-content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+}
+.grid-item-lower-content {
+ padding: 0 var(--size-grid-gutter) 0 var(--size-grid-gutter);
+ z-index: 100;
+}
+.grid-item-image .grid-item-lower-content {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding-bottom: var(--size-grid-gutter);
+}
+.grid-item-lower-content:empty {
+ display: none;
+}
+.grid-item-image {
+ padding-bottom: 0;
+ overflow: hidden;
+ background: transparent;
+}
+.grid-item img {
+ border-radius: var(--size-item-corner);
+ vertical-align: middle; /* vertical-align css hack removes bottom padding */
+ object-fit: cover;
+ margin-bottom: 0px;
+ width: 100%;
+ max-height: 1000px;
+ z-index: 0;
+}
+
+.grid-item:hover {
+ /*box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);*/
+ /*mix-blend-mode: multiply;*/
+ background: var(--color-itembg);
+ opacity: 1;
+}
+.image-overlay {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 10;
+ background-color: var(--color-imagedarken);
+ opacity: 0;
+}
+.grid-item-image:hover .image-overlay {
+ opacity: var(--alpha-darken);
+}
+
+/* LINK */
+.grid-item .link {
+ width: calc(100% - var(--size-font-bodytypes)*2);
+ float: left;
+ clear: both;
+}
+.grid-item .link {
+ text-decoration: none;
+ display: inline-block;
+}
+.grid-item-image .link {
+ display: none;
+}
+.grid-item-image:hover .link {
+ display: initial;
+ text-shadow: 0 0 3em #000;
+}
+.grid-item .title {
+ opacity: var(--alpha-enabled);
+ color: var(--color-item);
+ font-size: var(--size-font-title);
+ text-decoration: none;
+ float: left;
+ clear: both;
+}
+.grid-item:hover .title {
+ opacity: var(--alpha-ascent);
+}
+.grid-item-image .title {
+ display: none;
+}
+.grid-item-image:hover .title {
+ display: initial;
+ text-shadow: 0 0 3em #000;
+ color: white;
+}
+.grid-item .link .link-line {
+ margin-top: var(--size-item-elem-padding);
+ float: left;
+ clear: both;
+}
+.grid-item .link i {
+ float: left;
+}
+.grid-item .link .link-title {
+ color: var(--color-item);
+ font-size: var(--size-font-body);
+ float: left;
+}
+.grid-item:hover .link .link-title {
+ color: var(--color-item);
+}
+.grid-item .link:hover .link-title {
+ background-color: var(--color-itemascent);
+ color: var(--color-itembg);
+}
+
+/* TYPE */
+.grid-item .type {
+ opacity: var(--alpha-idle);
+ width: calc(var(--size-font-bodytypes)*2 + var(--size-grid-gutter));
+ color: var(--color-item);
+ padding-bottom: var(--size-grid-gutter);
+ font-size: var(--size-font-bodytypes);
+ padding-top: var(--size-grid-gutter);
+ vertical-align: top;
+ text-align: center;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+}
+.grid-item-image .grid-item-upper-content a .type i {
+ display: none;
+}
+.grid-item-image:hover .grid-item-upper-content a .type i {
+ display: initial;
+ color: var(--color-image);
+ opacity: var(--alpha-enabled);
+}
+.grid-item-image:hover .grid-item-upper-content a:hover .type i {
+ display: initial;
+ color: var(--color-image);
+}
+.grid-item:hover .type {
+ opacity: var(--alpha-enabled);
+ color: var(--color-item);
+}
+.grid-item:hover .type:hover {
+ opacity: var(--alpha-ascent);
+ color: var(--color-itemascent);
+}
+
+.grid-item .link-title {
+ opacity: var(--alpha-idle);
+}
+.grid-item .fas {
+ opacity: var(--alpha-idle);
+}
+.grid-item:hover .link-title {
+ opacity: var(--alpha-enabled);
+}
+.grid-item:hover a:hover .link-title {
+ opacity: var(--alpha-ascent);
+}
+/*.grid-item:hover a:hover .fas {
+ opacity: var(--alpha-ascent);
+}*/
+.grid-item:hover .fas {
+ opacity: var(--alpha-enabled);
+}
+
+
+/* NOTE, QUOTE, TERM, TAGS, AUTH, PROG */
+.note, .quote, .term, .tags, .auth, .prog {
+ opacity: var(--alpha-idle);
+ padding-top: var(--size-item-elem-padding);
+ color: var(--color-item);
+ font-size: var(--size-font-body);
+ float: left;
+ clear: both;
+}
+.grid-item:hover .note,
+.grid-item:hover .quote,
+.grid-item:hover .term,
+.grid-item:hover .tags,
+.grid-item:hover .auth,
+.grid-item:hover .prog {
+ opacity: var(--alpha-enabled);
+ color: var(--color-item);
+}
+/*.grid-item:hover .tags:hover {
+ opacity: var(--alpha-ascent);
+}*/
+.grid-item-image .grid-item-lower-content .link,
+.grid-item-image .grid-item-lower-content .note,
+.grid-item-image .grid-item-lower-content .quote,
+.grid-item-image .grid-item-lower-content .term,
+.grid-item-image .grid-item-lower-content .tags,
+.grid-item-image .grid-item-lower-content .auth,
+.grid-item-image .grid-item-lower-content .prog {
+ color: var(--color-image);
+}
+
+.grid-item-image .grid-item-lower-content {
+ display: none;
+}
+.grid-item-image:hover .grid-item-lower-content {
+ display: initial;
+}
+.tags a {
+ color: var(--color-item);
+ text-decoration:none;
+}
+.grid-item:hover .tags a {
+ color: var(--color-item);
+}
+.grid-item:hover .tags a:hover {
+ background-color: var(--color-itemascent);
+ color: var(--color-itembg);
+}
+.grid-item-image:hover .tags a {
+ color: #fff;
+}
+.grid-item-image:hover .tags a:hover {
+ color: #fff;
+}
+
+/* SMALL ICONS */
+.textIcon {
+ margin-right: var(--size-item-elem-sep);
+ color: var(--color-item);
+}
+.grid-item:hover .textIcon {
+ color: var(--color-item);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/* PAGE */
.page-overlay {
@@ -260,19 +543,19 @@ body {
border-width: 0px;
/*border-width: 1px;
border-style: solid;
- border-color: var(--color-menu-item-i);*/
+ border-color: var(--color-menu);*/
border-radius: var(--size-item-corner);
}
.page-overlay .content .row input::placeholder {
opacity: 1;
- color: var(--color-menu-item-i);
+ color: var(--color-menu);
}
.page-overlay .content .row input:hover {
- /*background-color: var(--color-content-item-a);*/
+ /*background-color: var(--color-itemascent);*/
background-color: var(--color-overlay-item-i);
}
.page-overlay .content .row input:focus {
- /*background-color: var(--color-content-item-a);*/
+ /*background-color: var(--color-itemascent);*/
background-color: var(--color-overlay-item-e);
}
.page-overlay .content .display {
@@ -319,277 +602,15 @@ body {
-/* CONTENT */
-.container {
- background: var(--color-main-bg-i);
- margin-left: calc(var(--menu-width) + var(--size-gutter));
- margin-right: var(--size-gutter);
-}
-.container:hover {
- background: var(--color-main-bg-e);
-}
-.grid {
- margin: var(--size-gutter) auto;
- opacity: 1;
- -webkit-transition: opacity 1000ms linear;
- transition: opacity 1000ms linear;
-}
-.grid:after {
- /* clearfix */
- display: block;
- content: '';
- clear: both;
-}
-
-/* GRID ITEM */
-.grid-item, .grid-item--width2 {
- border-radius: var(--size-item-corner);
- background: var(--color-content-bg-i);
- margin-bottom: var(--size-gutter);
- width: var(--size-grid-column);
- text-decoration: none;
- float: left;
- padding-bottom: var(--size-gutter);
- position: relative;
- opacity: var(--alpha-i);
-}
-.grid-item:hover, .grid-item--width2:hover {
- opacity: var(--alpha-a);
-}
-@media screen and (min-width: 886px) {
- .grid-item--width2 {
- width: calc(var(--size-grid-column) * 2 + var(--size-gutter));
- }
-}
-.grid-item-upper-content {
- padding: var(--size-gutter) var(--size-gutter) 0 var(--size-gutter);
- display: inline-block;
- z-index: 100;
- width: 100%;
-}
-.grid-item-image .grid-item-upper-content {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
-}
-.grid-item-lower-content {
- padding: 0 var(--size-gutter) 0 var(--size-gutter);
- z-index: 100;
-}
-.grid-item-image .grid-item-lower-content {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding-bottom: var(--size-gutter);
-}
-.grid-item-lower-content:empty {
- display: none;
-}
-.grid-item-image {
- padding-bottom: 0;
- overflow: hidden;
- background: transparent;
-}
-.grid-item img {
- border-radius: var(--size-item-corner);
- vertical-align: middle; /* vertical-align css hack removes bottom padding */
- object-fit: cover;
- margin-bottom: 0px;
- width: 100%;
- max-height: 1000px;
- z-index: 0;
-}
-
-.grid-item:hover {
- box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
- background: var(--color-content-bg-e);
-}
-.image-overlay {
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 10;
- background-color: #000;
- opacity: 0;
-}
-.grid-item-image:hover .image-overlay {
- opacity: 0.2;
-}
-
-/* LINK */
-.grid-item .link {
- width: calc(100% - var(--type-icon-size)*2);
- float: left;
- clear: both;
-}
-.grid-item .link {
- text-decoration: none;
- display: inline-block;
-}
-.grid-item-image .link {
- display: none;
-}
-.grid-item-image:hover .link {
- display: initial;
- text-shadow: 0 0 3em #000;
-}
-.grid-item .title {
- opacity: var(--alpha-e);
- color: var(--color-content-item-t);
- font-size: var(--size-font-title);
- text-decoration: none;
- float: left;
- clear: both;
-}
-.grid-item:hover .title {
- opacity: var(--alpha-a);
-}
-.grid-item-image .title {
- display: none;
-}
-.grid-item-image:hover .title {
- display: initial;
- text-shadow: 0 0 3em #000;
- color: white;
-}
-.grid-item .link .link-line {
- margin-top: var(--size-item-elem-padding);
- float: left;
- clear: both;
-}
-.grid-item .link i {
- float: left;
-}
-.grid-item .link .link-title {
- color: var(--color-content-item-i);
- font-size: var(--size-font-body);
- float: left;
-}
-.grid-item:hover .link .link-title {
- color: var(--color-content-item-e);
-}
-.grid-item .link:hover .link-title {
- background-color: var(--color-content-item-a);
- color: var(--color-content-bg-e);
-}
-
-/* TYPE */
-.grid-item .type {
- opacity: var(--alpha-i);
- width: calc(var(--type-icon-size)*2 + var(--size-gutter));
- color: var(--color-content-item-s);
- padding-bottom: var(--size-gutter);
- font-size: var(--type-icon-size);
- padding-top: var(--size-gutter);
- vertical-align: top;
- text-align: center;
- position: absolute;
- right: 0px;
- top: 0px;
-}
-.grid-item-image .grid-item-upper-content a .type i {
- display: none;
-}
-.grid-item-image:hover .grid-item-upper-content a .type i {
- display: initial;
- color: var(--color-content-image-i);
-}
-.grid-item-image:hover .grid-item-upper-content a:hover .type i {
- display: initial;
- color: var(--color-content-image-a);
-}
-.grid-item:hover .type {
- opacity: var(--alpha-e);
- color: var(--color-content-item-i);
-}
-.grid-item:hover .type:hover {
- opacity: var(--alpha-a);
- color: var(--color-content-item-a);
-}
-
-.grid-item .link-title {
- opacity: var(--alpha-i);
-}
-.grid-item .fas {
- opacity: var(--alpha-i);
-}
-.grid-item:hover .link-title {
- opacity: var(--alpha-e);
-}
-.grid-item:hover a:hover .link-title {
- opacity: var(--alpha-a);
-}
-.grid-item:hover a:hover .fas {
- opacity: var(--alpha-a);
-}
-.grid-item:hover .fas {
- opacity: var(--alpha-e);
-}
-/* LINK, NOTE, QUOTE, TERM, TAGS */
-.note, .quote, .term, .tags, .auth, .prog {
- opacity: var(--alpha-i);
- padding-top: var(--size-item-elem-padding);
- color: var(--color-content-item-i);
- font-size: var(--size-font-body);
- float: left;
- clear: both;
-}
-.grid-item:hover .note,
-.grid-item:hover .quote,
-.grid-item:hover .term,
-.grid-item:hover .tags,
-.grid-item:hover .auth,
-.grid-item:hover .prog {
- opacity: var(--alpha-e);
- color: var(--color-content-item-e);
-}
-.grid-item:hover .tags:hover {
- opacity: var(--alpha-a);
-}
-.grid-item-image .grid-item-lower-content .link,
-.grid-item-image .grid-item-lower-content .note,
-.grid-item-image .grid-item-lower-content .quote,
-.grid-item-image .grid-item-lower-content .term,
-.grid-item-image .grid-item-lower-content .tags,
-.grid-item-image .grid-item-lower-content .auth,
-.grid-item-image .grid-item-lower-content .prog {
- color: var(--color-content-image-t);
-}
-
-.grid-item-image .grid-item-lower-content {
- display: none;
-}
-.grid-item-image:hover .grid-item-lower-content {
- display: initial;
-}
-.tags a {
- color: var(--color-content-item-i);
- text-decoration:none;
-}
-.grid-item:hover .tags a {
- color: var(--color-content-item-e);
-}
-.grid-item:hover .tags a:hover {
- background-color: var(--color-content-item-a);
- color: var(--color-content-bg-e);
-}
-.grid-item-image:hover .tags a {
- color: #fff;
-}
-.grid-item-image:hover .tags a:hover {
- color: #fff;
-}
-
-/* SMALL ICONS */
-.textIcon {
- margin-right: var(--size-item-elem-sep);
- color: var(--color-content-item-s);
-}
-.grid-item:hover .textIcon {
- color: var(--color-content-item-i);
+/*noselect stops an unwanted selection visual on button click*/
+.noselect {
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently
+ supported by Chrome and Opera */
}
\ No newline at end of file
diff --git a/docs/logic/view.js b/docs/logic/view.js
index bb1c6f8..3f8638c 100644
--- a/docs/logic/view.js
+++ b/docs/logic/view.js
@@ -89,13 +89,13 @@ function View()
{
if (typeof value.WIDE !== 'undefined' && value.WIDE)
{
- itemClass += " grid-item--width2";
+ itemClass += " grid-itemwide";
}
else if (typeof value.QOTE !== 'undefined')
{
if (Array.isArray(value.QOTE) && value.QOTE.length > 4)
{
- itemClass += " grid-item--width2";
+ itemClass += " grid-itemwide";
}
}
}
@@ -323,194 +323,162 @@ function View()
if (window.showAdd != undefined && window.showAdd)
{
// ADD
- menuContent += ``;
- menuContent += ``;
+ menuContent += ``;
}
// TOTAL
- menuContent += ``;
- menuContent += ``;
+ menuContent += ``;
// DONE
- menuContent += ``;
+ menuContent += ``;
+ menuContent += ``;
+
// TERM
+ menuContent += ``;
// TAGS
+ menuContent += `