mirror of
https://github.com/TangentFoxy/memex.git
synced 2024-10-14 19:44:21 +00:00
375 lines
8.4 KiB
CSS
Vendored
375 lines
8.4 KiB
CSS
Vendored
/* VARIABLES */
|
|
:root {
|
|
/* COLOR */
|
|
--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-menu-bg-i: #000; /*idle*/
|
|
--color-menu-bg-e: #000; /*enabled*/
|
|
|
|
--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-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-item-i: #333; /*idle*/
|
|
--color-menu-item-e: #999; /*enabled*/
|
|
--color-menu-item-a: #ddd; /*ascent*/
|
|
|
|
/* 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*/
|
|
|
|
--size-gutter: 20px;
|
|
--size-grid-column: 350px;
|
|
|
|
--size-item-corner: 3px;
|
|
--size-item-elem-padding: 1em; /*vertical space between grid item internal elements (tags, notes, quotes etc)*/
|
|
--size-item-elem-sep: 0.75em; /*horizontal space between item element icon and element text (tag icon and tags)*/
|
|
|
|
--size-font-title: 1em;
|
|
--size-font-body: 0.8em;
|
|
--type-icon-size: 24px; /*font size of type icon/count*/
|
|
}
|
|
|
|
html {
|
|
font-family: 'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
|
|
background: var(--color-main-bg-i);
|
|
box-sizing: border-box;
|
|
padding: 0em;
|
|
margin: 0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
padding: 0em;
|
|
margin: 0;
|
|
}
|
|
|
|
/* MENU */
|
|
.menu {
|
|
background: var(--color-menu-bg-i);
|
|
padding-top: var(--size-gutter);
|
|
width: var(--menu-width);
|
|
position: fixed;
|
|
height: 100%;
|
|
z-index: 100;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
.menu:hover {
|
|
background: var(--color-menu-bg-e);
|
|
}
|
|
.menu a {
|
|
color: var(--color-menu-item-i);
|
|
}
|
|
.menu:hover a {
|
|
color: var(--color-menu-item-e);
|
|
}
|
|
.menu:hover a:hover {
|
|
color: var(--color-menu-item-a);
|
|
}
|
|
.menu-spacer {
|
|
height: var(--menu-item-spacer);
|
|
width: 100%;
|
|
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);
|
|
box-sizing: border-box;
|
|
margin: 0px auto;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
.menu-item .count {
|
|
padding-right: calc(var(--menu-item-elem-sep) / 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);
|
|
display: inline-block;
|
|
text-align: center;
|
|
float: left;
|
|
}
|
|
|
|
/* MENU TAGS */
|
|
.menu-tag-container {
|
|
margin: 0 auto;
|
|
display: table;
|
|
}
|
|
.menu-tag-container 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);
|
|
display: table-row;
|
|
text-align: center;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
.menu:hover .menu-tag-container i {
|
|
color: var(--color-menu-item-e);
|
|
}
|
|
.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;
|
|
}
|
|
.menu-tag-count {
|
|
padding-right: var(--menu-tag-sep);
|
|
text-align: right;
|
|
float: left;
|
|
}
|
|
.menu-tag-label {
|
|
text-align: left;
|
|
float: left;
|
|
}
|
|
|
|
/* CONTENT */
|
|
.container {
|
|
background: var(--color-main-bg-i);
|
|
margin-left: var(--menu-width);
|
|
}
|
|
.container:hover {
|
|
background: var(--color-main-bg-e);
|
|
}
|
|
.grid {
|
|
margin: var(--size-gutter) auto;
|
|
}
|
|
.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);
|
|
box-sizing: border-box;
|
|
text-decoration: none;
|
|
float: left;
|
|
clear: both;
|
|
padding-bottom: var(--size-gutter);
|
|
}
|
|
@media screen and (min-width: 886px) {
|
|
.grid-item--width2 {
|
|
width: calc(var(--size-grid-column) * 2 + var(--size-gutter));
|
|
}
|
|
}
|
|
.grid-item-upper-content {
|
|
z-index: 100;
|
|
padding: var(--size-gutter) var(--size-gutter) 0 var(--size-gutter);
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.grid-item-image .grid-item-upper-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.grid-item-lower-content {
|
|
z-index: 100;
|
|
padding: 0 var(--size-gutter) 0 var(--size-gutter);
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
.grid-item-lower-content:empty {
|
|
display: none;
|
|
}
|
|
.grid-item-image .grid-item-lower-content {
|
|
visibility: hidden;
|
|
}
|
|
.grid-item-image {
|
|
padding-bottom: 0;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
}
|
|
.grid-item img {
|
|
border-radius: var(--size-item-corner);
|
|
/*margin: calc(var(--size-gutter) * -1);
|
|
width: calc(var(--size-gutter) + 100%);*/
|
|
vertical-align: middle; /* vertical-align css hack removes bottom padding */
|
|
object-fit: cover;
|
|
margin-bottom: 0px;
|
|
width: 100%;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
.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.1;
|
|
}
|
|
|
|
/* 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 .link .title {
|
|
color: var(--color-content-item-t);
|
|
font-size: var(--size-font-title);
|
|
text-decoration: none;
|
|
float: left;
|
|
clear: both;
|
|
}
|
|
.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 {
|
|
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;
|
|
text-shadow: 0 0 3em #000;
|
|
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 {
|
|
color: var(--color-content-item-i);
|
|
}
|
|
.grid-item:hover .type:hover {
|
|
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);
|
|
float: left;
|
|
clear: both;
|
|
}
|
|
.grid-item:hover .link,
|
|
.grid-item:hover .note,
|
|
.grid-item:hover .quote,
|
|
.grid-item:hover .term,
|
|
.grid-item:hover .tags,
|
|
.grid-item:hover .prog {
|
|
color: var(--color-content-item-e);
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* 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);
|
|
} |