tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improved css color setup. SIETA colors.

Browse Source
This commit is contained in:
kor 2018-07-18 22:06:56 +12:00
parent 6a77a2cfef
commit 1ca0582cf8
3 changed files with 80 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
asset/style.css vendored
View File

@ -1,17 +1,24 @@
/* VARIABLES */ /* VARIABLES */
:root { :root {
/* COLOR */ /* COLOR */
--color-menu0: #000; /* bg */ --color-main-bg-i: #ddd; /*idle*/
--color-menu1: #333; /* low */ --color-main-bg-e: #ddd; /*enabled*/
--color-menu2: #999; /* mid */
--color-menu3: #ddd; /* high */
--color-bg: #ddd; /* bg main */ --color-content-bg-i: #ccc; /*idle*/
--color-content-bg-e: #bbb; /*enabled*/
--color-content0: #ccc; /* bg */ --color-menu-bg-i: #000; /*idle*/
--color-content1: #bbb; /* low */ --color-menu-bg-e: #000; /*enabled*/
--color-content2: #999; /* mid */
--color-content3: #000; /* high */ --color-content-item-s: #bbb; /*sub*/
--color-content-item-i: #999; /*idle*/
--color-content-item-e: #666; /*enabled*/
--color-content-item-t: #000; /*title*/
--color-content-item-a: #000; /*ascent*/
--color-menu-item-i: #333; /*idle*/
--color-menu-item-e: #999; /*enabled*/
--color-menu-item-a: #ddd; /*ascent*/
/* SIZE */ /* SIZE */
--menu-width: 150px; --menu-width: 150px;
@ -34,7 +41,7 @@
html { html {
font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace; font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
background: var(--color-bg); background: var(--color-main-bg-i);
box-sizing: border-box; box-sizing: border-box;
padding: 0em; padding: 0em;
margin: 0; margin: 0;
@ -51,7 +58,7 @@ body {
/* MENU */ /* MENU */
.menu { .menu {
background: var(--color-menu0); background: var(--color-menu-bg-i);
padding-top: var(--size-gutter); padding-top: var(--size-gutter);
width: var(--menu-width); width: var(--menu-width);
position: fixed; position: fixed;
@ -61,13 +68,13 @@ body {
top: 0px; top: 0px;
} }
.menu a { .menu a {
color: var(--color-menu1); color: var(--color-menu-item-i);
} }
.menu:hover a { .menu:hover a {
color: var(--color-menu2); color: var(--color-menu-item-e);
} }
.menu:hover a:hover { .menu:hover a:hover {
color: var(--color-menu3); color: var(--color-menu-item-a);
} }
.menu-spacer { .menu-spacer {
height: var(--menu-item-spacer); height: var(--menu-item-spacer);
@ -110,14 +117,14 @@ body {
padding-bottom: calc(var(--menu-item-vert-sep) / 2); padding-bottom: calc(var(--menu-item-vert-sep) / 2);
padding-top: calc(var(--menu-item-vert-sep) / 2); padding-top: calc(var(--menu-item-vert-sep) / 2);
font-size: var(--type-icon-size); font-size: var(--type-icon-size);
color: var(--color-menu1); color: var(--color-menu-item-i);
display: table-row; display: table-row;
text-align: center; text-align: center;
width: 100%; width: 100%;
float: left; float: left;
} }
.menu:hover .menu-tag-container i { .menu:hover .menu-tag-container i {
color: var(--color-menu2); color: var(--color-menu-item-e);
} }
.menu-tag { .menu-tag {
padding-bottom: calc(var(--menu-tag-sep) / 2); padding-bottom: calc(var(--menu-tag-sep) / 2);
@ -152,15 +159,14 @@ body {
clear: both; clear: both;
} }
.grid-item, .grid-item--width2 { .grid-item, .grid-item--width2 {
text-decoration: none;
border-radius: var(--size-item-corner); border-radius: var(--size-item-corner);
margin-bottom: var(--size-gutter); margin-bottom: var(--size-gutter);
background: var(--color-content0); background: var(--color-content-bg-i);
width: var(--size-grid-column); width: var(--size-grid-column);
padding: var(--size-gutter); padding: var(--size-gutter);
box-sizing: border-box; box-sizing: border-box;
text-decoration: none;
float: left; float: left;
color: #000;
} }
@media screen and (min-width: 886px) { @media screen and (min-width: 886px) {
.grid-item--width2 { .grid-item--width2 {
@ -176,7 +182,7 @@ body {
} }
.grid-item:hover { .grid-item:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
background: var(--color-content1); background: var(--color-content-bg-e);
} }
/* LINK */ /* LINK */
@ -190,42 +196,36 @@ body {
display: inline-block; display: inline-block;
} }
.grid-item .link .title { .grid-item .link .title {
color: var(--color-content3); color: var(--color-content-item-t);
font-size: var(--size-font-title); font-size: var(--size-font-title);
text-decoration: none; text-decoration: none;
float: left; float: left;
clear: both; clear: both;
} }
.grid-item .link .link-line { .grid-item .link .link-line {
color: var(--color-content2);
margin-top: var(--size-item-elem-padding); margin-top: var(--size-item-elem-padding);
float: left; float: left;
clear: both; clear: both;
} }
.grid-item .link i { .grid-item .link i {
color: var(--color-content2);
float: left; float: left;
} }
.grid-item .link .link-title { .grid-item .link .link-title {
color: var(--color-content2); color: var(--color-content-item-i);
font-size: var(--size-font-body); font-size: var(--size-font-body);
float: left; float: left;
} }
.grid-item:hover .link .link-title { .grid-item:hover .link .link-title {
color: var(--color-content3); color: var(--color-content-item-e);
}
.grid-item .link:hover .title {
/*background-color: var(--color-content3);
color: var(--color-content1);*/
} }
.grid-item .link:hover .link-title { .grid-item .link:hover .link-title {
background-color: var(--color-content3); background-color: var(--color-content-item-a);
color: var(--color-content1); color: var(--color-content-bg-e);
} }
/* TYPE */ /* TYPE */
.grid-item a .type { .grid-item a .type {
color: var(--color-content2); color: var(--color-content-item-s);
font-size: var(--type-icon-size); font-size: var(--type-icon-size);
padding-top: var(--size-gutter); padding-top: var(--size-gutter);
padding-bottom: var(--size-gutter); padding-bottom: var(--size-gutter);
@ -237,17 +237,17 @@ body {
top: 0px; top: 0px;
} }
.grid-item:hover a .type { .grid-item:hover a .type {
color: var(--color-content2); color: var(--color-content-item-i);
} }
.grid-item:hover a .type:hover { .grid-item:hover a .type:hover {
color: var(--color-content3); color: var(--color-content-item-a);
} }
/* LINK, NOTE, QUOTE, TERM, TAGS */ /* LINK, NOTE, QUOTE, TERM, TAGS */
.note, .quote, .term, .tags, .prog { .note, .quote, .term, .tags, .prog {
padding-top: var(--size-item-elem-padding); padding-top: var(--size-item-elem-padding);
color: var(--color-content-item-i);
font-size: var(--size-font-body); font-size: var(--size-font-body);
color: var(--color-content2);
float: left; float: left;
clear: both; clear: both;
} }
@ -255,27 +255,27 @@ body {
.grid-item:hover .note, .grid-item:hover .note,
.grid-item:hover .quote, .grid-item:hover .quote,
.grid-item:hover .term, .grid-item:hover .term,
.grid-item:hover .prog .grid-item:hover .tags,
{ .grid-item:hover .prog {
color: var(--color-content3); color: var(--color-content-item-e);
} }
.tags a { .tags a {
color: var(--color-content2); color: var(--color-content-item-i);
text-decoration:none; text-decoration:none;
} }
.grid-item:hover .tags a { .grid-item:hover .tags a {
color: var(--color-content3); color: var(--color-content-item-e);
} }
.grid-item:hover .tags a:hover { .grid-item:hover .tags a:hover {
background-color: var(--color-content3); background-color: var(--color-content-item-a);
color: var(--color-content1); color: var(--color-content-bg-e);
} }
/* SMALL ICONS */ /* SMALL ICONS */
.textIcon { .textIcon {
color: var(--color-content1); color: var(--color-content-item-s);
margin-right: var(--size-item-elem-sep); margin-right: var(--size-item-elem-sep);
} }
.grid-item:hover .textIcon { .grid-item:hover .textIcon {
color: var(--color-content2); color: var(--color-content-item-i);
} }

20
content/Memex.ndtl
View File

@ -1662,4 +1662,24 @@ APPLIED MINIMALISM
DATE : 12018-07-18 DATE : 12018-07-18
TYPE : music TYPE : music
DONE : true DONE : true
VELADYA CHAPMAN VANLIFE
LINK : http://shareaslicepodcast.com/2018/07/16/vanlife/
DATE : 12018-07-18
TYPE : podcast
DONE : true
PROJ : Van
AMISH ATHEIST
LINK : http://shareaslicepodcast.com/2018/05/09/copp1/
DATE : 12018-07-18
TYPE : podcast
DONE : true
JOHN LAW
LINK : http://shareaslicepodcast.com/2017/10/24/dada/
NOTE : DADA, Burning Man, Cacophony Society & Suicide Club
DATE : 12018-07-18
TYPE : podcast
DONE : true
` `

29
logic/viewmasonry.js
View File

@ -4,6 +4,7 @@ function ViewMasonry()
this.msnry = null; this.msnry = null;
this.grid = null; this.grid = null;
this.menu = null; this.menu = null;
var parent = this;
// SETTINGS // SETTINGS
this.statsNumTags = 5; this.statsNumTags = 5;
@ -30,21 +31,21 @@ function ViewMasonry()
fitWidth: true, fitWidth: true,
transitionDuration: 0, transitionDuration: 0,
}); });
console.log(3); console.log(3 + ' ' + this.msnry);
var imgLoad = imagesLoaded('.grid'); // var imgLoad = imagesLoaded('.grid');
function onAlways( instance ) { // function onAlways( instance ) {
console.log('all images are loaded'); // console.log('all images are loaded');
//this.msnry.layout(); // parent.msnry.reloadItems();
console.log(this.msnry); // parent.msnry.layout();
} // }
imgLoad.on( 'always', onAlways ); // imgLoad.on( 'always', onAlways );
// imgLoad.off( 'always', onAlways ); // // imgLoad.off( 'always', onAlways );
imgLoad.on( 'progress', function(instance, image) // imgLoad.on( 'progress', function(instance, image)
{ // {
var result = image.isLoaded ? 'loaded' : 'broken'; // var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src ); // console.log( 'image is ' + result + ' for ' + image.img.src );
}); // });
} }
} }