Greek village sign

dabblet.css

/**
 * Greek village sign
 */

.ntabela {
	margin:50px auto;
	width: 200px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	transform: rotate(-5deg);
	position:relative;
}

.ntabela__sign {
	background-color:blue;
	padding:15px 0;
	border-radius:10px;
	position:relative;
	z-index:10;
}

.ntabela__inner {
	background-color:#fafaf3;
	display:block;
	padding:10px;
	text-align:center;
}

.ntabela__maderi {
	height:300px;
	width:20px;
	position:absolute;
	background-color:grey;
	top:-30px;
	left:50%;
	margin-left:-10px;
	border-radius:40% 40% 0 0;
}

.balothia {
	background-color:black;
	width:5px;
	height:5px;
	border-radius:50%;
	position:absolute;
	box-shadow:0 0 7px;
}
.balothia--topleft { top:30px; left:50px; }
.balothia--bottomcenter { bottom:25px; left:50%; }
.balothia--middleright { top:50%; right:50px; }
.balothia--big { width:7px; height:7px; box-shadow:0 0 10px 2px; }

dabblet.html

<div class="ntabela">
	<div class="ntabela__sign">
		<div class="ntabela__inner">
			<span class="ntabela__title">Μαντσεστεριανά</span>
			<span class="ntabela__title">Manchesteriana</span>
		</div>
		<div class="balothia balothia--topleft"></div>
		<div class="balothia balothia--bottomcenter balothia--big"></div>
		<div class="balothia balothia--middleright"></div>
	</div>
	<div class="ntabela__maderi"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}