/* 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-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--width2 { border-radius: var(--size-item-corner); background: var(--color-content-bg-i); margin-bottom: var(--size-gutter); width: var(--size-grid-column); padding: var(--size-gutter); box-sizing: border-box; text-decoration: none; float: left; } @media screen and (min-width: 886px) { .grid-item--width2 { width: calc(var(--size-grid-column) * 2 + var(--size-gutter)); } } .grid-item img { /*margin: calc(var(--size-gutter) * -1); width: calc(100% + var(--size-gutter)*2);*/ max-width: 100%; height: auto; clear: both; } .grid-item:hover { box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1); background: var(--color-content-bg-e); } /* 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 .link .title { color: var(--color-content-item-t); font-size: var(--size-font-title); text-decoration: none; float: left; clear: both; } .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 a .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:hover a .type { color: var(--color-content-item-i); } .grid-item:hover a .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); } .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); }