From 6a77a2cfefd259f611eb4db90394b96be679d8c9 Mon Sep 17 00:00:00 2001 From: kor Date: Wed, 18 Jul 2018 21:17:35 +1200 Subject: [PATCH 1/2] Changed name. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c9e660f..ff1766f 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Simple bookmarks and notes. Formatted for long term storage (['Long site'](https://www.gwern.net/About)) and review (sorting/filtering). -[Live version here](https://kormyen.github.io/Memex/). +[Live version here](https://kormyen.github.io/memex/). ## Goals: From 1ca0582cf877a093d67f2feb182d3d402ff76632 Mon Sep 17 00:00:00 2001 From: kor Date: Wed, 18 Jul 2018 22:06:56 +1200 Subject: [PATCH 2/2] Improved css color setup. SIETA colors. --- asset/style.css | 88 ++++++++++++++++++++++---------------------- content/Memex.ndtl | 20 ++++++++++ logic/viewmasonry.js | 31 ++++++++-------- 3 files changed, 80 insertions(+), 59 deletions(-) diff --git a/asset/style.css b/asset/style.css index e49f274..bafc365 100644 --- a/asset/style.css +++ b/asset/style.css @@ -1,17 +1,24 @@ /* VARIABLES */ :root { /* COLOR */ - --color-menu0: #000; /* bg */ - --color-menu1: #333; /* low */ - --color-menu2: #999; /* mid */ - --color-menu3: #ddd; /* high */ + --color-main-bg-i: #ddd; /*idle*/ + --color-main-bg-e: #ddd; /*enabled*/ + + --color-content-bg-i: #ccc; /*idle*/ + --color-content-bg-e: #bbb; /*enabled*/ - --color-bg: #ddd; /* bg main */ + --color-menu-bg-i: #000; /*idle*/ + --color-menu-bg-e: #000; /*enabled*/ - --color-content0: #ccc; /* bg */ - --color-content1: #bbb; /* low */ - --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 */ --menu-width: 150px; @@ -34,7 +41,7 @@ html { 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; padding: 0em; margin: 0; @@ -51,7 +58,7 @@ body { /* MENU */ .menu { - background: var(--color-menu0); + background: var(--color-menu-bg-i); padding-top: var(--size-gutter); width: var(--menu-width); position: fixed; @@ -61,13 +68,13 @@ body { top: 0px; } .menu a { - color: var(--color-menu1); + color: var(--color-menu-item-i); } .menu:hover a { - color: var(--color-menu2); + color: var(--color-menu-item-e); } .menu:hover a:hover { - color: var(--color-menu3); + color: var(--color-menu-item-a); } .menu-spacer { height: var(--menu-item-spacer); @@ -110,14 +117,14 @@ body { 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-menu1); + color: var(--color-menu-item-i); display: table-row; text-align: center; width: 100%; float: left; } .menu:hover .menu-tag-container i { - color: var(--color-menu2); + color: var(--color-menu-item-e); } .menu-tag { padding-bottom: calc(var(--menu-tag-sep) / 2); @@ -152,15 +159,14 @@ body { clear: both; } .grid-item, .grid-item--width2 { - text-decoration: none; border-radius: var(--size-item-corner); margin-bottom: var(--size-gutter); - background: var(--color-content0); + background: var(--color-content-bg-i); width: var(--size-grid-column); padding: var(--size-gutter); box-sizing: border-box; + text-decoration: none; float: left; - color: #000; } @media screen and (min-width: 886px) { .grid-item--width2 { @@ -176,7 +182,7 @@ body { } .grid-item:hover { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1); - background: var(--color-content1); + background: var(--color-content-bg-e); } /* LINK */ @@ -190,42 +196,36 @@ body { display: inline-block; } .grid-item .link .title { - color: var(--color-content3); + color: var(--color-content-item-t); font-size: var(--size-font-title); text-decoration: none; float: left; clear: both; } .grid-item .link .link-line { - color: var(--color-content2); margin-top: var(--size-item-elem-padding); float: left; clear: both; } .grid-item .link i { - color: var(--color-content2); float: left; } .grid-item .link .link-title { - color: var(--color-content2); + color: var(--color-content-item-i); font-size: var(--size-font-body); float: left; } .grid-item:hover .link .link-title { - color: var(--color-content3); -} -.grid-item .link:hover .title { - /*background-color: var(--color-content3); - color: var(--color-content1);*/ + color: var(--color-content-item-e); } .grid-item .link:hover .link-title { - background-color: var(--color-content3); - color: var(--color-content1); + background-color: var(--color-content-item-a); + color: var(--color-content-bg-e); } /* TYPE */ .grid-item a .type { - color: var(--color-content2); + color: var(--color-content-item-s); font-size: var(--type-icon-size); padding-top: var(--size-gutter); padding-bottom: var(--size-gutter); @@ -237,17 +237,17 @@ body { top: 0px; } .grid-item:hover a .type { - color: var(--color-content2); + color: var(--color-content-item-i); } .grid-item:hover a .type:hover { - color: var(--color-content3); + color: var(--color-content-item-a); } /* LINK, NOTE, QUOTE, TERM, TAGS */ .note, .quote, .term, .tags, .prog { padding-top: var(--size-item-elem-padding); + color: var(--color-content-item-i); font-size: var(--size-font-body); - color: var(--color-content2); float: left; clear: both; } @@ -255,27 +255,27 @@ body { .grid-item:hover .note, .grid-item:hover .quote, .grid-item:hover .term, -.grid-item:hover .prog -{ - color: var(--color-content3); +.grid-item:hover .tags, +.grid-item:hover .prog { + color: var(--color-content-item-e); } .tags a { - color: var(--color-content2); + color: var(--color-content-item-i); text-decoration:none; } .grid-item:hover .tags a { - color: var(--color-content3); + color: var(--color-content-item-e); } .grid-item:hover .tags a:hover { - background-color: var(--color-content3); - color: var(--color-content1); + background-color: var(--color-content-item-a); + color: var(--color-content-bg-e); } /* SMALL ICONS */ .textIcon { - color: var(--color-content1); + color: var(--color-content-item-s); margin-right: var(--size-item-elem-sep); } .grid-item:hover .textIcon { - color: var(--color-content2); + color: var(--color-content-item-i); } \ No newline at end of file diff --git a/content/Memex.ndtl b/content/Memex.ndtl index 4c55ffe..5d882b2 100644 --- a/content/Memex.ndtl +++ b/content/Memex.ndtl @@ -1662,4 +1662,24 @@ APPLIED MINIMALISM DATE : 12018-07-18 TYPE : music 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 ` \ No newline at end of file diff --git a/logic/viewmasonry.js b/logic/viewmasonry.js index 79b66cd..63076b9 100644 --- a/logic/viewmasonry.js +++ b/logic/viewmasonry.js @@ -4,7 +4,8 @@ function ViewMasonry() this.msnry = null; this.grid = null; this.menu = null; - + var parent = this; + // SETTINGS this.statsNumTags = 5; this.statsNumTypes = 10; @@ -30,21 +31,21 @@ function ViewMasonry() fitWidth: true, transitionDuration: 0, }); - console.log(3); + console.log(3 + ' ' + this.msnry); - var imgLoad = imagesLoaded('.grid'); - function onAlways( instance ) { - console.log('all images are loaded'); - //this.msnry.layout(); - console.log(this.msnry); - } - imgLoad.on( 'always', onAlways ); - // imgLoad.off( 'always', onAlways ); - imgLoad.on( 'progress', function(instance, image) - { - var result = image.isLoaded ? 'loaded' : 'broken'; - console.log( 'image is ' + result + ' for ' + image.img.src ); - }); + // var imgLoad = imagesLoaded('.grid'); + // function onAlways( instance ) { + // console.log('all images are loaded'); + // parent.msnry.reloadItems(); + // parent.msnry.layout(); + // } + // imgLoad.on( 'always', onAlways ); + // // imgLoad.off( 'always', onAlways ); + // imgLoad.on( 'progress', function(instance, image) + // { + // var result = image.isLoaded ? 'loaded' : 'broken'; + // console.log( 'image is ' + result + ' for ' + image.img.src ); + // }); } }