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 */
.grid-item a {
text-decoration: none;
.grid-item .link {
width: calc(100% - var(--type-icon-size)*2);
float: left;
clear: both;
}
.grid-item a .title {
color: var(--color-content2);
margin-right: calc(var(--type-icon-size) * 2);
font-size: var(--size-font-title);
.grid-item .link {
text-decoration: none;
display: inline-block;
}
.grid-item .link .title {
color: var(--color-content3);
font-size: var(--size-font-title);
text-decoration: none;
float: left;
clear: both;
}
.grid-item a .link-line {
.grid-item .link .link-line {
color: var(--color-content2);
font-size: var(--size-font-body);
margin-top: var(--size-item-elem-padding);
float: left;
clear: both;
}
.grid-item a i {
.grid-item .link i {
color: var(--color-content2);
float: left;
}
.grid-item a .link-title {
.grid-item .link .link-title {
color: var(--color-content2);
font-size: var(--size-font-body);
float: left;
}
.grid-item:hover a .link-title {
.grid-item:hover .link .link-title {
color: var(--color-content3);
}
.grid-item a:hover .title {
.grid-item .link:hover .title {
/*background-color: var(--color-content3);
color: var(--color-content1);*/
}
.grid-item a:hover .link-title {
.grid-item .link:hover .link-title {
background-color: var(--color-content3);
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, .prog {
.note, .quote, .term, .tags, .prog {
padding-top: var(--size-item-elem-padding);
font-size: var(--size-font-body);
color: var(--color-content2);
@ -247,6 +271,7 @@ body {
color: var(--color-content1);
}
/* SMALL ICONS */
.textIcon {
color: var(--color-content1);
margin-right: var(--size-item-elem-sep);
@ -254,21 +279,3 @@ body {
.grid-item:hover .textIcon {
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
entry += `<a href="${String(value.LINK)}" id="${idUrl} class="link">`;
entry += `<a href="${String(value.LINK)}" id="${idUrl}" class="link">`;
}
// TITLE
@ -115,8 +115,9 @@ function ViewMasonry()
// TYPE
if (typeof value.TYPE !== 'undefined')
{
entry += `<div id="type">`;
entry += `<a href='#type-${String(value.TYPE)}'>`;
entry += `<div class="type">`;
if (value.TYPE == 'article')
{
entry += `<i class="far fa-newspaper"></i>`;
@ -162,8 +163,8 @@ function ViewMasonry()
entry += `<i class="fas fa-music"></i>`;
}
entry += `</a>`;
entry += `</div>`;
entry += `</a>`;
}
// TAGS