Test card

dabblet.css

/**
 * Test card
 */
 
 @import  "http://fonts.googleapis.com/css?family=Comfortaa|Ubuntu:400,300&subset=latin,latin-ext";

@import  "http://weloveiconfonts.com/api/?family=entypo"; 

* {
	box-sizing: border-box;
}

body {
	font: 1.05em Ubuntu;
	background: #222;
	min-height: 100%;
	padding: 0;
	margin: 20px 0 0 0;
}

.card {
	width: 100%;
	max-width: 1200px;
	background: #333;
	margin: auto;
	border-top: 3px solid hsl(140, 80%, 40%);
}

.cover {
	width: 200px;
	height: 300px;
	margin: 9px 10px 10px 10px;
	position: absolute;
}

.info {
	display: flex;
	flex-direction: column;
	flex-flow: column wrap;
	color: white;
	width: 100%;
	min-height: 320px;
	padding: 10px 20px 10px 230px;
}

#ep-bg {
    fill: #201F1D;
    stroke: url(#linear-green);
}

#ep-ring {
    stroke: #333;
}

#ep-text {
    fill: #eee;
}

.mainhead {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
}

.mainhead h1 {
	display: inline-block;
	font: 300 1.7em Ubuntu;
	margin: 0 0 0 5px;
}

.mainhead img {
	width: 55px;
	margin: 5px;
	border: 3px solid #555;
	border-radius: 50%; 
}

.actions {
	display: flex;
	flex-flow: row wrap;
	margin-top: 10px;
}

.actions a {
	color: white;
	text-decoration: none;
}

.action {
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 7px 15px;
    border: 1px solid;
    border-radius: 3px;
    transition: all .2s;
    user-select: none;
}

.action:active, .onlineEp:not([data-vid="-"]):active {
    transform: translateY(0px) !important;
    box-shadow: 0 0 transparent !important;
    transition: none;
}

.c--sub {
    border-color: hsl(205,95%,45%);
    background: hsla(205,95%,45%,.3)
}

.c--sub:hover {
    border-color: hsl(205,95%,55%);
    box-shadow: 0 3px hsl(205,95%,55%);
    transform: translateY(-3px);
}

.c--mega {
    border-color: hsl(10,95%,45%);
    background: hsla(10,95%,45%,.3)
}

.c--mega:hover {
    border-color: hsl(10,95%,55%);
    box-shadow: 0 3px hsl(10,95%,55%);
    transform: translateY(-3px);
}

.c--online {
    border-color: hsl(140,95%,45%);
    background: hsla(140,95%,45%,.3);
    cursor: pointer
}

.c--online:hover {
    border-color: hsl(140,95%,55%);
    box-shadow: 0 3px hsl(140,95%,55%);
    transform: translateY(-3px);
}

/**/

dabblet.html

<div class="card">
	<div class="cover"><img src="//bio-senpai.tk/cover/medaka%20box%20abnormal.png" /></div>
	<div class="info">
		<div class="mainhead">
		
		
		
			<svg
width="60"
height="60"
viewPort="0 0 30 30"
>
<defs>
<linearGradient id="linear-green" x1="0%" y1="0%" x2="100%" y2="40%">
  <stop offset="0%"   stop-color="hsl(140, 95%, 45%)"/>
  <stop offset="100%" stop-color="hsl(140, 95%, 35%)"/>
</linearGradient>
<linearGradient id="linear-orange" x1="0%" y1="0%" x2="100%" y2="40%">
  <stop offset="0%"   stop-color="hsl(30, 95%, 45%)"/>
  <stop offset="100%" stop-color="hsl(30, 95%, 55%)"/>
</linearGradient>
</defs>
<circle cx="30" cy="30" r="25" stroke-width="3" id="ep-bg"></circle>
<circle cx="30" cy="30" r="25" stroke-width="4" id="ep-ring" fill="transparent" stroke-dasharray="188.5" stroke-dashoffset="-157" transform="rotate(270 30 30)"></circle>
          <text x="30" y="37" id="ep-text" text-anchor="middle" style="font-size: 1.3em">12</text>
</svg>

<img src="//bio-senpai.tk/data/lidi/Machy.png">
<img src="//bio-senpai.tk/data/lidi/Ovi.png">

<h1>Medaka Box Abnormal</h1>

		</div>
		
		<div class="actions">
			<a href="#" class="action c--sub entypo-download"> ZIP archiv titulků</a>
         	<a href="#" class="action c--mega entypo-download"> Přeložená videa (MEGA)</a>
         	<span class="action c--online entypo-play"> Sledovat online</span>
         </div>
		
		<div class="desc">
			<p>Co začalo jako nevinná pomoc studentům, se zvrtlo a Medaka teď stojí před překážkami, na které už zřejmě sama nestačí. Snaží se odhalit ďábelský plán ředitele školy, který pro jeho realizaci shromáždil studenty, jejichž schopnosti překračují limity obyčejných smrtelníků. Říkají si „Abnormal“.</p>
			<div style="font-size: .8em">(Tsubame na anime.akihabara.cz)</div>
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}