SCSS Cards Demo

by Victor Melnik

HTML

<div id="content">
<ul class="admins">
    <li>
        <a href="#">
            <img src="http://annimon.com/files/avatar/1.png" />
            <h3>aNNiMON</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
            <small>11 января 2010 года</small>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://annimon.com/files/avatar/2.png" />
            <h3>web_demon</h3>
            <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
            <small>11 января 2010 года</small>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://annimon.com/files/avatar/553.png" />
            <h3>Oak</h3>
            <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>
            <small>02 июня 2010 года</small>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="http://annimon.com/files/avatar/1251.png" />
            <h3>deamonsik</h3>
            <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
            <small>28 декабря 2010 года</small>
        </a>
    </li>
</ul>
</div>

SCSS

$max_width: 800px;

$card_z_index: 2;
$card_hover_bg: false;
$accent_color: #cafeba;
$card_bg: #FEFEFE;


/** Миксин (aka функция) для установки теней блоку */
@mixin card-z-index($z, $color) {
    box-shadow: (0px + $z) (1px + $z) (2px + 2px * $z) $color;
}

* { margin: 0;  padding: 0;  border: 0; }

#content {
    max-width: $max_width;
    margin: 10px auto;
    
    ul {
        list-style: none;
    }
}

.admins {
    width: 70%;
    margin: 0 auto;
    
    $icon_size: 20px;
    $card_border: $card_bg;
    $card_padding: 15px;
    $icon_margin_right: 10px;
    
    a {
        color: inherit;
        text-decoration: none;
    }
    
    li:hover {
        @if $card_hover_bg {
            background-color: mix($accent_color, $card_bg, 5%);
            border: 2px solid mix($accent_color, $card_border, 5%);
        }
        @include card-z-index($card_z_index, rgba(34, 25, 25, 0.4));
    }
    li {
        display: block;
        position: relative;
        background-color: $card_bg;
        border: 2px solid $card_border;
        margin: 0 2px 15px; /* top right+left bottom */
        padding: $card_padding;
        padding-bottom: 5px;
        @include card-z-index(0, rgba(34, 25, 25, 0.4));

        h3 {
            font-size: 120%;
            font-weight: bold;
            margin-bottom: 8px;
        }
        img {
            float: left;
            width: $icon_size;
            height: $icon_size;
            margin-right: $icon_margin_right;
        }
        p {
            text-indent: $icon_size + $icon_margin_right;
            padding-bottom: 15px;
        }
        small {
            font-size: 80%;
            color: darken(white, 25%);
            
            position: absolute;
            right: $card_padding;
            bottom: 0;
        }
    }
}

body {
    background-color: darken(white, 5%);
}