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 grid-item link hitbox and fix grid-item type link hover.

Browse Source
This commit is contained in:
kor 2018-07-18 19:20:53 +12:00
parent eb317a18a2
commit 4dba144a34
2 changed files with 43 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
asset/style.css vendored
View File

@ -180,47 +180,71 @@ body {
} }
/* LINK */ /* LINK */
.grid-item a { .grid-item .link {
text-decoration: none; width: calc(100% - var(--type-icon-size)*2);
float: left;
clear: both;
} }
.grid-item a .title { .grid-item .link {
color: var(--color-content2); text-decoration: none;
margin-right: calc(var(--type-icon-size) * 2); display: inline-block;
font-size: var(--size-font-title); }
.grid-item .link .title {
color: var(--color-content3); color: var(--color-content3);
font-size: var(--size-font-title);
text-decoration: none; text-decoration: none;
float: left; float: left;
clear: both; clear: both;
} }
.grid-item a .link-line { .grid-item .link .link-line {
color: var(--color-content2); color: var(--color-content2);
font-size: var(--size-font-body);
margin-top: var(--size-item-elem-padding); margin-top: var(--size-item-elem-padding);
float: left; float: left;
clear: both; clear: both;
} }
.grid-item a i { .grid-item .link i {
color: var(--color-content2); color: var(--color-content2);
float: left; float: left;
} }
.grid-item a .link-title { .grid-item .link .link-title {
color: var(--color-content2); color: var(--color-content2);
font-size: var(--size-font-body);
float: left; float: left;
} }
.grid-item:hover a .link-title { .grid-item:hover .link .link-title {
color: var(--color-content3); color: var(--color-content3);
} }
.grid-item a:hover .title { .grid-item .link:hover .title {
/*background-color: var(--color-content3); /*background-color: var(--color-content3);
color: var(--color-content1);*/ color: var(--color-content1);*/
} }
.grid-item a:hover .link-title { .grid-item .link:hover .link-title {
background-color: var(--color-content3); background-color: var(--color-content3);
color: var(--color-content1); color: var(--color-content1);
} }
/* TYPE */
.grid-item a .type {
color: var(--color-content2);
font-size: var(--type-icon-size);
padding-top: var(--size-gutter);
padding-bottom: var(--size-gutter);
width: calc(var(--type-icon-size)*2 + var(--size-gutter));
vertical-align: top;
text-align: center;
position: absolute;
right: 0px;
top: 0px;
}
.grid-item:hover a .type {
color: var(--color-content2);
}
.grid-item:hover a .type:hover {
color: var(--color-content3);
}
/* LINK, NOTE, QUOTE, TERM, TAGS */ /* LINK, NOTE, QUOTE, TERM, TAGS */
.link, .note, .quote, .term, .tags, .prog { .note, .quote, .term, .tags, .prog {
padding-top: var(--size-item-elem-padding); padding-top: var(--size-item-elem-padding);
font-size: var(--size-font-body); font-size: var(--size-font-body);
color: var(--color-content2); color: var(--color-content2);
@ -247,6 +271,7 @@ body {
color: var(--color-content1); color: var(--color-content1);
} }
/* SMALL ICONS */
.textIcon { .textIcon {
color: var(--color-content1); color: var(--color-content1);
margin-right: var(--size-item-elem-sep); margin-right: var(--size-item-elem-sep);
@ -254,21 +279,3 @@ body {
.grid-item:hover .textIcon { .grid-item:hover .textIcon {
color: var(--color-content2); color: var(--color-content2);
} }
/* TYPE */
#type a {
color: var(--color-content1);
font-size: var(--type-icon-size);
padding: var(--size-gutter);
vertical-align: top;
text-align: center;
position: absolute;
right: 0px;
top: 0px;
}
.grid-item:hover #type a {
color: var(--color-content2);
}
.grid-item:hover #type a:hover {
color: var(--color-content3);
}

7
logic/viewmasonry.js
View File

@ -100,7 +100,7 @@ function ViewMasonry()
} }
// LINK START // LINK START
entry += `<a href="${String(value.LINK)}" id="${idUrl} class="link">`; entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="link">`;
} }
// TITLE // TITLE
@ -115,8 +115,9 @@ function ViewMasonry()
// TYPE // TYPE
if (typeof value.TYPE !== 'undefined') if (typeof value.TYPE !== 'undefined')
{ {
entry += `<div id="type">`;
entry += `<a href='#type-${String(value.TYPE)}'>`; entry += `<a href='#type-${String(value.TYPE)}'>`;
entry += `<div class="type">`;
if (value.TYPE == 'article') if (value.TYPE == 'article')
{ {
entry += `<i class="far fa-newspaper"></i>`; entry += `<i class="far fa-newspaper"></i>`;
@ -162,8 +163,8 @@ function ViewMasonry()
entry += `<i class="fas fa-music"></i>`; entry += `<i class="fas fa-music"></i>`;
} }
entry += `</a>`;
entry += `</div>`; entry += `</div>`;
entry += `</a>`;
} }
// TAGS // TAGS