Страница карточек

dabblet.css

/**
 * Страница карточек
 */

        body {
            margin: 0;
            text-align: justify;
        }
        .card {
            display: inline-block;
            overflow: auto;
            margin: 5px;
            padding: 5px;
            width: 190px;
            border: 1px solid #ccc;
            background: #fffeef;
            box-shadow: 1px 1px 5px #ccc;
            counter-increment: itemNo;
            vertical-align: top;
            text-align: left;
        }
        
        .photo {
            float: left;
            display: inline-block;
            margin: 0 3px 15px 0;
            width: 64px;
            height: 64px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .photo img,
        .photo i {
            vertical-align: middle;
        }
        .photo img {
            max-width: 64px;
            max-height: 64px;
        }
        .photo i {
            display: inline-block;
            height: 100%;
        }
        
        .card h2 {
            overflow: hidden;
            margin: 0 0 15px 0;
            text-overflow: ellipsis;
            word-spacing: .4ex;
            letter-spacing: .2ex;
            font-variant: small-caps;
            font-size: large;
        }
        .card p {
            clear: left;
            font: 14px Arial, sans-serif;
        }
        .card:before {
            float: right;
            width: 16px;
            border-radius: 3px;
            background: #777;
            color: #fff;
            content: counter(itemNo);
            text-align: center;
            font: 12px Arial, sans-serif;
            line-height: 16px;
        }
        
        .placeholder {
            display: inline-block;
            margin: 0 5px;
            width: 202px;
            height: 0;
        }

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>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>

settings.json

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