Skip to content

Instantly share code, notes, and snippets.

@macrat
Created March 9, 2018 13:52
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save macrat/9cda9f479c926e4200166e198fa9f266 to your computer and use it in GitHub Desktop.
<!doctype html>
<title>new blankdown design</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<body>
<nav>
<div id=nav-inner>
<textarea id=search-box cols=1 placeholder="search"></textarea>
<ul id=tag-area>
<li>all</li>
<li><span class=tag>this</span></li>
<li><span class=tag>is</span></li>
<li><span class=tag>tag</span>
<ul>
<li><span class=tag><span class=tag-path>tag/</span>in</span>
<ul>
<li><span class=tag><span class=tag-path>tag/in/</span>tag</span></li>
</ul>
</li>
</ul>
</li>
<li><span class=tag>long_long_tag_name</span></li>
<li><span class=tag>t</span></li>
<li><span class=tag>tag-name</span></li>
<li><span class=tag>tagset</span>
<ul>
<li><span class=tag><span class=tag-path>tagset/</span>tagname</span></li>
<li><span class=tag><span class=tag-path>tagset/</span>foo</span></li>
<li><span class=tag><span class=tag-path>tagset/</span>bar</span>
<ul>
<li><span class=tag><span class=tag-path>tagset/bar/</span>baz</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div id=main-pane>
<div id=card-area>
<div class="card card-file">
<div class=card-inner>
something document something document something document
something document something document something document
something document something document something document
something document something document something document
</div>
</div>
<div class="card card-file">
<div class=card-inner>
something another document
something document
something another document
something document
something another document
something document
</div>
</div>
<div class="card card-file">
<div class=card-inner>
something document
something document
something document
something document
</div>
</div>
<div class="card card-file">
<div class=card-inner>
something document something document
something document something document
something document something document
something document something document
</div>
</div>
<div class="card card-file">
<div class=card-inner>
something another document
something document
something another document
something document
something another document
something document
</div>
</div>
<div id=create-card class=card>
<svg width="260" height="220">
<path style="stroke: #505e60; stroke-width: 8px; stroke-opacity: .3;" d="m -28,0 l 56,0 m -28,-28 l 0,56" transform="translate(130, 110)" />
</svg>
</div>
</div>
<svg width="64" height="64" id=close-button>
<path style="fill: #303e40; stroke: none;" d="m 0,0 l 64,0 l -64,64" />
<path style="stroke: white; stroke-width: 4px;" d="m 10,0 l -10,10 l 10,10 m -10,-10 l 20,0" transform="translate(10, 10)" />
</svg>
<svg width="64" height="64" id=create-button>
<path style="fill: #303e40; stroke: none;" d="m 64,0 l 0,64 l -64,0" />
<path style="stroke: white; stroke-width: 4px;" d="m -20,-10 l 20,0 m -10,-10 l 0,20" transform="translate(54, 54)" />
</svg>
</div>
</body>
<style>
body {
display: flex;
margin: 0;
height: 100vh;
}
nav {
flex: 0 0 auto;
width: 200px;
overflow: scroll;
color: #eee;
z-index: 3;
}
#nav-inner {
position: relative;
height: 100%;
padding: 16px 12px;
background-color: #303e40;
top: 0;
left: 0;
transition: .2s top, .2s left;
}
#search-box {
display: block;
box-sizing: border-box;
width: 100%;
height: 32px;
margin-bottom: 12px;
padding: 4px 8px;
resize: none;
overflow: hidden;
background-color: #505e60;
color: white;
border: none;
border-radius: 0;
font: initial;
}
#search-box:focus {
outline: none;
}
#tag-area {
margin: 0;
padding: 0;
}
#tag-area li {
display: block;
cursor: pointer;
padding: 1px 0;
}
#tag-area ul {
padding-left: 16px;
}
.tag:before {
content: '# ';
color: #888;
}
.tag-path {
display: none;
}
#main-pane {
width: 100%;
overflow: scroll;
}
#card-area {
display: flex;
padding: 6px;
flex-wrap: wrap;
}
.card {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 260px;
height: 220px;
margin: 6px;
border: 1px solid #505e60;
cursor: pointer;
overflow: hidden;
}
.card-inner {
box-sizing: border-box;
overflow: hidden;
background-color: white;
}
#create-card {
text-align: center;
opacity: .5;
}
.card-file {
padding: 6px;
}
.card-file:after {
content: ' ';
position: absolute;
top: 0;
right: 0;
border: 10px solid transparent;
border-top-color: #303e40;
border-right-color: #303e40;
}
#close-button {
position: fixed;
top: -32px;
left: -32px;
z-index: 2;
transition: .1s top, .1s left;
}
#create-button {
position: fixed;
bottom: 0;
right: 0;
}
#create-button *, #close-button * {
cursor: pointer;
}
@media (max-width: 780px) {
body {
flex-direction: column;
}
nav {
width: auto;
}
#nav-inner {
padding: 12px;
}
#search-box {
margin-bottom: 8px;
}
#tag-area {
text-align: center;
}
#tag-area ul, #tag-area li {
display: inline;
padding: 0;
}
.tag {
display: inline-block;
margin: 0 .5em;
}
.tag:before {
content: '#';
}
.tag-path {
display: inline;
color: #888;
}
#main-pane {
display: flex;
justify-content: center;
overflow: initial;
}
#card-area {
width: 544px;
}
}
@media (max-width: 556px) {
.card {
width: auto;
height: 180px;
flex-grow: 1;
}
#create-card svg {
margin-top: -20px;
}
}
</style>
<script>
document.querySelectorAll('.card').forEach(elm => {
elm.addEventListener('click', () => {
const pos = elm.getBoundingClientRect();
const inner = elm.querySelector('.card-inner');
document.querySelector('#card-area').style.overflow = 'hidden';
inner.style.overflow = 'auto';
inner.style.position = 'fixed';
inner.style.padding = '6px';
inner.style.border = '1px solid #505e60';
inner.style.left = pos.x + 'px';
inner.style.top = pos.y + 'px';
inner.style.width = elm.offsetWidth + 'px';
inner.style.height = elm.offsetHeight + 'px';
inner.style.zIndex = 1;
inner.style.transition = '.2s width, .2s height, .2s top, .2s left, .2s border-width, .2s padding';
const close = document.querySelector('#close-button');
close.style.top = '0px';
close.style.left = '0px';
setTimeout(() => {
inner.style.top = '0px';
inner.style.left = '0px';
inner.style.width = '100%';
inner.style.height = '100%';
inner.style.borderWidth = '0px';
inner.style.padding = '32px';
}, 10);
const nav = document.querySelector('#nav-inner');
if (document.querySelector('nav').clientWidth === window.innerWidth) {
nav.style.top = '-' + nav.clientHeight + 'px';
} else {
nav.style.left = '-' + nav.clientWidth + 'px';
}
setTimeout(() => {
nav.style.display = 'none';
nav.style.top = '0px';
nav.style.left = '0px';
}, 300);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment