.archives{ position: relative; &:last-of-type{ &:before{ content: ""; position: absolute; bottom: 0; width: 200px; border-top: 1px solid $color-gray04; } } .year{ line-height: 35px; width: 200px; position: absolute; top: 0; padding-top: 30px; border-top: 1px solid #fff; &:before{ content: ""; position: absolute; top: -2px; width: 100%; border-top: 1px solid $color-gray04; } @media screen and (max-width: 600px){ position: relative; width: 100%; } } article{ margin-left: 200px; @media screen and (max-width: 600px){ margin-left: 0; &:first-of-type{ border-top: none; padding-top: 30px; } } .title{ margin-bottom: 0; } .meta{ color: $color-gray02; line-height: 2; margin-top: 15px; @media screen and (max-width: 600px){ display: none; } span{ margin-right: 30px; @include inline-block; &:before{ color: $color-gray03; font: 1.3em $font-icon; padding-right: 10px; } } a{ color: $color-gray02; @include transition(0.3s); &:hover{ color: $color-gray01; } } .date:before{content: "\f073";} .tags:before{content: "\f02c";} .comments:before{content: "\f075";} } } }