Skip to content

Instantly share code, notes, and snippets.

@juliuzfan

juliuzfan/dabblet.css

Last active June 16, 2020 19:58
Show Gist options
  • Save juliuzfan/7393478 to your computer and use it in GitHub Desktop.
Save juliuzfan/7393478 to your computer and use it in GitHub Desktop.
Download ZIP
Header Tab
Raw
dabblet.css
/**
* Header Tab
*/
body {
background: #f06;
background: linear-gradient(45deg, #FFCA2B, #ff5722);
min-height: 100vh;
font:16px/1.5 Arial, sans-serif;
}
aside { margin:60px; width:300px; }
ul { list-style-position:inside;
border:2px solid rgba(0,0,0,.38);
margin:0; padding:0; border-radius: 0 5px 5px 5px;
}
li { color: rgba(0,0,0,.62); list-style: none;
border-bottom: 1px solid rgba(0,0,0,.07);
padding:.75em 1em;
background-color: rgba(255,255,255, .75);
cursor: pointer;
transition: all .38s;
}
li:first-child { border-radius: 0 4px 0 0; }
li:last-child { border-bottom:none; border-radius: 0 0 4px 4px; }
li:hover { color:#fff; background-color: rgba(0,0,0,.75); }
h3 { color:#fff; margin-bottom:0; }
span { position:relative;display:inline-block;
background:rgba(0,0,0,.38);
padding:2px 6px 0 0; margin:0 0 0 8px;
}
span:before { position:absolute; top:0; left:-8px; content:"";
display:block; width:8px; height:30px; background:rgba(0,0,0,.38);
border-top-left-radius:5px; }
span:after { position:absolute; top:0; right:-20px; content:"";
display:block; width:0; height:0;
border-style: solid;
border-width: 30px 0 0 20px;
border-color: transparent transparent transparent rgba(0,0,0,.38);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<aside>
<h3><span>Recent Articles</span></h3>
<ul>
<li>Article headline 1</li>
<li>Article headline 2</li>
<li>Article headline 3</li>
<li>Article headline 4</li>
<li>Article headline 5</li>
<li>Article headline 6</li>
<li>Article headline 7</li>
</ul>
</aside>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment