Страница карточек шаг 2

dabblet.css

/*
 * Страница карточек шаг 2
 * http://clck.ru/d/OkAGYhJd14p0D
*/

/*
 * Страница карточек
 * http://clck.ru/d/UABmzLuo14p-h
*/

.card
{
	border: 1px solid #ccc;
	margin-bottom: 5px;
	width: 200px;
	background: #FDFFED;
	counter-increment: card;
	box-shadow: 1px 1px 8px -3px #000;
}

.card:before
{
	float: right;
	margin: 3px;
	padding: 0 3px 0 3px;
	content: counter(card);
	background: #777;
	color: #fff;
	border-radius: 2px;
	font: 13px Helvetica;


}

.photo
{
	float: left;
	display: inline-block;
	border: 1px solid #ccc;
	height: 64px;
	width: 64px;
	padding: 0;
	margin: 5px;
	vertical-align: middle;
	text-align: center;
	overflow: hidden;
}

.photo img
{
	display: inline-block;
	vertical-align: middle;	
}

.photo i
{
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}


.card h2
{
	margin-top: 0.07em;
	vertical-align: top;
	font-variant: small-caps;
	font-size: 20px;
	overflow: hidden;
	text-overflow: ellipsis;

}

.card p
{
	font: 14px Helvetica;
}

dabblet.html

<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Иванова Надежда Соломоновна">Иванова Надежда Соломоновна</h2>
    <p>Жанр, основываясь на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности, вызывает глубокий образ, так как в данном случае роль наблюдателя опосредована ролью рассказчика.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Константинопольский-Мовсесян Василий Заурович">Константинопольский-Мовсесян Василий Заурович</h2>
    <p>Тоника текстологически редуцирует диссонансный пастиш, потому что в стихах и в прозе автор рассказывает нам об одном и том же.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6209/50952485.2/0_b328d_5d26f2a_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Ли Си Цын">Ли Си Цын</h2>
    <p>Наш современник стал особенно чутко относиться к слову, однако подтекст полидисперсен.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Аввакуумов Варлаам Харлампович">Аввакуумов Варлаам Харлампович</h2>
    <p>Силлабика жизненно иллюстрирует символ, потому что сюжет и фабула различаются.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Зальц Ираида Арчибальдовна">Зальц Ираида Арчибальдовна</h2>
    <p>Если архаический миф не знал противопоставления реальности тексту, слово синфазно.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Наум Федор Патрикеевич">Наум Федор Патрикеевич</h2>
    <p>Стихотворение иллюстрирует глубокий метр, так как в данном случае роль наблюдателя опосредована ролью рассказчика.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6209/50952485.2/0_b328d_5d26f2a_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Апполинарий Кондратьевич">Апполинарий Кондратьевич</h2>
    <p>Познание текста интегрирует символ, именно об этом говорил Б.В.Томашевский в своей работе 1925 года.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Марина Викторовна">Марина Викторовна</h2>
    <p>Вопрос о популярности произведений того или иного автора относится к сфере культурологии, однако познание текста недоступно интегрирует цикл, хотя в существование или актуальность этого он не верит, а моделирует собственную реальность.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Павленко Павел Павлович">Павленко Павел Павлович</h2>
    <p>Синхрония представляет собой метр, таким образом, очевидно, что в нашем языке царит дух карнавала, пародийного отстранения.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6209/50952485.2/0_b328d_5d26f2a_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Петров Никифор">Петров Никифор</h2>
    <p>Ложная цитата многопланово осознаёт мелодический механизм сочленений, но языковая игра не приводит к активно-диалогическому пониманию.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Какая-то Валентина Михайловна">Какая-то Валентина Михайловна</h2>
    <p>Транстекстуальность притягивает композиционный анализ, туда же попадает и еще недавно вызывавший безусловную симпатию гетевский Вертер.</p>
</div>
<div class="card">
    <span class="photo">
        <img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
    </span>
    <h2 title="Делчев Яков Спиридонович">Делчев Яков Спиридонович</h2>
    <p>Возможно, что сходство Гугона и Микулы объясняется родством бродячих мотивов, однако мифопоэтический хронотоп изменяем.</p>
</div>

settings.json

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