/*\
layout
\*/
html {
width:100%;
height:100%;
}
body {
display:flex;
flex-direction:column;
}
nav {
width:19em;
}
body > nav:first-of-type {
overflow:hidden;
flex-grow:0;
flex-shrink:0;
}
body > nav:not(:first-of-type) {
display:flex;
flex-direction:column;
/**/
overflow:auto;
flex-grow:0;
flex-shrink:1;
}
main {
display:flex;
flex-direction:column;
/**/
overflow:auto;
flex-grow:0;
flex-shrink:1;
}
aside {
display:flex;
flex-direction:column;
justify-content:flex-end;
/**/
width:19em;
/**/
box-sizing:border-box;
padding:0.25em;
/**/
overflow:auto;
flex-grow:1;
flex-shrink:1;
}
body > aside > [data-module] {
width:100%;
border-radius:0 1em 0 0;
/**/
overflow:hidden;
flex-grow:0;
flex-shrink:0;
}
body > footer {
display:flex;
justify-content:space-between;
align-items:center;
/**/
width:19em;
min-height:1em;
border-radius:0 1em 0 0;
/**/
box-sizing:border-box;
padding:0.25em;
}
body > footer > a {
display:inline-block;
vertical-align:middle;
}
/*\
gallery
\*/
.gallery {
width:19em;
height:100%;
}
.gallery > nav:not(:first-of-type) {
margin-top:-1em;
}
.gallery > main {
position:absolute;
left:19em;
top:0;
/**/
display:inline-block;
/**/
width:auto;
height:100%;
/**/
box-sizing:border-box;
padding:0.5em;
/**/
white-space:nowrap;
}
@media (min-height:900px) {
.gallery > main {
top:50%;
height:900px;
transform:translateY(-50%);
}
}
.gallery > main > section {
display:inline-block;
vertical-align:middle;
/**/
width:auto;
height:100%;
/**/
box-sizing:border-box;
padding:0.25em;
border-radius:1em;
/**/
overflow:hidden;
}
.gallery > main > section > header {
margin:0 0.5em;
}
.gallery > main > section > article {
position:relative;
top:1.5em;
/**/
display:inline-block;
vertical-align:middle;
/**/
width:12em;
height:calc(100% - 4em);
/**/
box-sizing:border-box;
padding:0 0.75em;
border-radius:0.75em 0 0 0.75em;
/**/
margin-left:-1.5em;
/**/
overflow:hidden;
/**/
transform-origin:left;
transform:skewY(-12.5deg);
}
.gallery > main > section > article:first-of-type {
margin-left:initial;
}
.gallery > main > section > article > header {
margin:0.25em;
}
.gallery > main > section > article > header > a {
display:block;
}
.gallery > main > section > article > nav {
display:none;
}
/*\
\*/
.gallery > main > section > article > nav > a {
display:inline-block;
vertical-align:top;
/**/
width:12em;
height:100%;
/**/
margin-right:-11.75em;
/**/
transform-origin:left;
transform:skewY(-15deg);
/**/
color:transparent;
/**/
border-radius:1em 0 0 1em;
border-style:none none none solid;
border-width:1px;
border-color:rgb(102,104,106);
}
.gallery > main > section > article > aside > nav > a:first-of-type {
margin-left:initial;
}
.gallery > main > section > article > aside > nav > a:nth-last-child(n+9) {
display:none;
}
/*\
\*/
.gallery > main > section > article > div {
height:calc(100% - 2.5em);
/**/
overflow:hidden;
border-radius:0.75em 0 0 0.75em;
}
.gallery > main > section > article > div > * {
max-height:100%;
/**/
overflow:hidden;
pointer-events:none;
}
.gallery > main > section > article > div > nav {
}
.gallery > main > section > article > div > nav > a {
border-radius:1em 0 0 0;
box-shadow:0 0 0.25em 0.1em rgb(58,60,62);
}
.gallery > main > section > article > div > a[data-module] {
height:calc(100% - 1.5em);
margin:1.5em 0 0 1em;
/**/
box-sizing:border-box;
padding:1em 0.5em;
/**/
border-radius:0.5em 0 0 0;
box-shadow:0 0 0.25em 0.1em rgb(49,51,53);
background-color:rgb(34,36,38);
background-color:rgb(66,68,70);
}
.gallery > main > section > article > a.hitbox {
position:absolute;
left:0;
bottom:0;
/**/
display:block;
width:100%;
height:calc(100% - 2.5em);
/**/
background-color:transparent;
}
.gallery > footer > a,
.gallery > footer > button {
display:none;
}
/*\
focus
\*/
body:not(.gallery) {
width:19em;
height:100%;
}
body:not(.gallery) > nav {
position:relative;
left:0;
z-index:2;
}
body:not(.gallery) > nav:not(:first-of-type) {
display:none;
}
body:not(.gallery) > main {
position:relative;
left:0;
margin-top:-1em;
}
body:not(.gallery) > main > section:not(.focus) {
display:none;
}
section.focus > header {
display:none;
}
section.focus > article:not(.focus) {
display:none;
}
article.focus > header {
position:relative;
z-index:2;
/**/
height:3.5em;
}
article.focus > nav {
position:relative;
z-index:2;
/**/
margin-top:-1em;
/**/
overflow:auto;
flex-shrink:1;
}
article.focus > nav > a {
border-radius:0 1em 0 0;
}
article.focus > div {
position:fixed;
right:0;
top:0;
/*transform:translateY(-50%);*/
width:100vw;
height:100vh;
/**/
box-sizing:border-box;
border-radius:0.75em;
/**/
/*transition:width .5s ease;*/
}
@media (min-width:900px) {
body:not(.gallery):not(.menu) article.focus > div {
width:calc(100vw - (20em));
}
}
article.focus > a.hitbox {
display:none;
}
body:not(.gallery) > aside {
position:relative;
left:0;
z-index:2;
/**/
box-sizing:border-box;
padding-bottom:3em;
}
body:not(.gallery) > footer {
position:fixed;
left:0;
bottom:0;
z-index:2;
}
/*\
menu
\*/
@media (max-width:900px) {
body:not(.gallery) article.focus > div {
height:calc(100% - 3em);
}
body:not(.gallery) > footer {
width:100vw;
}
body:not(.gallery).menu > nav,
body:not(.gallery).menu > main,
body:not(.gallery).menu > aside {
left:0;
}
body:not(.gallery):not(.menu) > nav,
body:not(.gallery):not(.menu) > main,
body:not(.gallery):not(.menu) > aside {
left:-19em;
}
}
@media (min-width:900px) {
body:not(.gallery).menu > nav,
body:not(.gallery).menu > main,
body:not(.gallery).menu > aside {
left:-19em;
/*height:calc(100% - 3em);*/
}
}
/*\
dataloader
\*/
article > div {
overflow:auto;
}
article > div > img,
article > div > object,
article > div > iframe,
article > div > pre,
article > div > code,
article > div > div {
display:inline-block;
vertical-align:middle;
/**/
width:auto;
height:auto;
}
article > div > a {
display:block;
height:100%;
}
article.focus > div > img,
article.focus > div > object[data$='.svg'] {
max-width:100%;
}
article.focus > div > *:not(img) {
min-width:100%;
min-height:100%;
}
article.focus > div > audio {
height:100%;
}
.gallery article > div > object,
.gallery article > div > iframe,
.gallery article > div > pre,
.gallery article > div > code {
min-height:100%;
max-height:100%;
}
article > div > .terminal {
width:20em;
/**/
box-sizing:border-box;
padding:1em;
}