[18/18] 100% все ли логично?


#1

Сделал на 100%, но решение немного отличается от одной из тем с пошаговым руководством. Допустим ли мой вариант решения?

  html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        width: 280px;
        min-height: 250px;
        padding-top: 50px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 12px;
        font-family: "Arial", sans-serif;
        line-height: 1.2;
        color: #7f8c8d;
        background: #ecf0f1;
    }

    .post-stats .icon {
        width: 15px;
        height: 15px;
    }
    .post{
        position:relative;
        width:280px;
        padding-left:75px;
    }
    .post a{
        text-decoration:none;
        color:#2980b9;
    }
    .post-title{
        font-size:20px;
        color:#2980b9;
    }
    .post-date{
        position:absolute;
        top:0px;
        left:0px;
        width:55px;
        height:55px;
        line-height:55px;
        text-align:center;
        font-size:15px;
        font-weight:bold;
        color:#7f8c8d;
        background-color:#ffffff;
        border-bottom:solid 5px #bdc3c7;
    }
    .post-type{
        position:absolute;
        left:0px;
        top:70px;
        width:55px;
        height:55px;
        border-bottom:solid 5px #bdc3c7;
        background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
    }
    .post-author{
        margin-top:5px;
    }
    .post-stats{
        display:inline-block;
        position:relative;
        margin-top:5px;
        padding-left:20px;
    }
    .post-stats:nth-child(6){
        margin-left:10px;
    }
    .icon{
        position:absolute;
        width:10px;
        height:10px;
    }
    .icon-tags{
        top:0px;
        left:0px;
        background-image:url("/assets/course14/post-challenge.png");
    }
    .icon-comments{
        top:0px;
        left:0px;
        background-image:url("/assets/course14/post-challenge.png");
        background-position:-20px 0;
    }
    .post-text{
        width:165px;
        background-color:#ffffff;
        padding:10px 15px;
        border-bottom:solid 5px #bdc3c7;
    }

#2

Почему изменили размеры иконок?


#3

Похоже, что виной всему невнимательность - торопился сделать, чтобы лечь спать. Это единственный спорный момент в коде?


#4

Еще здесь нехорошо получилось. Подумайте.


#6

Поменял. Так лучше? Спасибо за помощь!

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 250px;
    padding-top: 50px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    color: #7f8c8d;
    background: #ecf0f1;
}
.post{
    position:relative;
    width:280px;
    padding-left:75px;
}
.post a{
    text-decoration:none;
    color:#2980b9;
}
.post-title{
    font-size:20px;
    color:#2980b9;
}
.post-date{
    position:absolute;
    top:0px;
    left:0px;
    width:55px;
    height:55px;
    line-height:55px;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#7f8c8d;
    background-color:#ffffff;
    border-bottom:solid 5px #bdc3c7;
}
.post-type{
    position:absolute;
    left:0px;
    top:70px;
    width:55px;
    height:55px;
    border-bottom:solid 5px #bdc3c7;
    background:#7f8c8d url("/assets/course14/quotes.png") no-repeat 50% 50%;
}
.post-author{
    margin-top:5px;
}
.post-stats{
    display:inline-block;
    position:relative;
    margin-top:5px;
    padding-left:20px;
}
.post .post-stats{
    margin-right:10px;
}
.icon{
    position:absolute;
    width:15px;
    height:15px;
}
.icon-tags{
    top:0px;
    left:0px;
    background-image:url("/assets/course14/post-challenge.png");
}
.icon-comments{
    top:0px;
    left:0px;
    background-image:url("/assets/course14/post-challenge.png");
    background-position:-20px 0;
}
.post-text{
    width:165px;
    background-color:#ffffff;
    padding:10px 15px;
    border-bottom:solid 5px #bdc3c7;
}

#7

А почему отдельным правилом?


#8

И действительно. Понял, спасибо за отзывчивость!