article{ border-bottom: 1px solid $border; border-top: 1px solid $light-shadow; padding: 30px 0; position: relative; h1.title, .entry{ margin-left: 200px; } h1.title{ font-size: 25px; font-weight: 300; line-height: 35px; margin-bottom: 20px; a{ color: $font-main; } } .entry{ line-height: 2; text-align: justify; a{ &:hover{ text-decoration: underline; } } .more-link{ display: block; margin-top: 20px; } strong{ font-weight: bold; } ol, ul{ margin-left: 20px; margin-top: 10px; ol, ul{ margin-top: 0; } } p{ margin-top: 10px; code{ background: $border; border: 1px solid #ccc; padding: 1px 3px; border-radius: 5px; margin: 0 3px; } } h2{ font-weight: 300; margin-top: 10px; border-bottom: 1px solid $border; position: relative; &:before{ content: ""; position: absolute; bottom: -2px; border-bottom: 1px solid $light-shadow; width: 100%; } } h3{ margin-top: 10px; } img{ max-width: 100%; height: auto; } blockquote{ background: $border; border-left: 5px solid #ccc; padding: 15px 20px; margin-top: 10px; & > p:first-of-type{ margin-top: 0; } } iframe[src*="youtube"]{ margin-top: 10px; } code{ font-family: $monospace; } pre{ line-height: 1.5; } figure.code{ background: $border; padding: 5px 15px; margin-top: 10px; border: 1px solid #ccc; border-radius: 5px; .line-numbers{ border-right: 1px solid #ccc; color: #000; font-family: $monospace; padding-right: 15px; } td.code{ padding-left: 15px; font-size: 13px; overflow-x: auto; } } } .meta{ position: absolute; top: 85px; line-height: 2; font-size: 13px; color: $font-meta; width: 170px; a{ color: $font-meta; @include transition(0.3s); &:hover{ color: $font-main; } } } }