article{ border-bottom: 1px solid $gray04; border-top: 1px solid $gray05; padding: 30px 0; position: relative; h1.title{ font-weight: 300; line-height: 35px; margin-bottom: 20px; a{ color: $gray01; } } .entry{ line-height: 2; text-align: justify; a{ &:hover{ text-decoration: underline; } } .more-link{ display: block; margin-top: 20px; padding-left: 30px; background: image-url('more.png') 0 center no-repeat; } p, blockquote, ul, ol, dl, table, iframe, h1, h2, h3, h4, h5, h6, .video-container{ margin-top: 10px; } ul, ol, dl{ margin-left: 20px; ul, ol, dl{ margin-top: 0; } } strong{ font-weight: bold; } em{ font-style: italic; } p{ margin-top: 10px; } h2{ font-weight: 300; border-bottom: 1px solid $gray04; position: relative; &:before{ content: ""; position: absolute; bottom: -2px; border-bottom: 1px solid $gray05; width: 100%; } } img, video{ max-width: 100%; height: auto; } blockquote{ background: $gray04; border-left: 5px solid $gray03; padding: 15px 20px; margin-top: 10px; & > p:first-of-type{ margin-top: 0; } } iframe{ border: none; } table{ background: $gray04; border: 1px solid $gray03; border-spacing: 0; margin-top: 10px; th{ background: $gray03; padding: 0 15px; } td{ text-align: center; } tr{ &:nth-of-type(2n){ background: #d5d5d5; } } } .caption{ background: image-url('caption.png') 0 4px no-repeat; display: block; font-size: $meta-size; color: $gray02; padding-left: 25px; } .video-container{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; iframe, object, embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } } } .share{ padding: 15px 0; @include border-shadow(); } @media screen and (max-width: 800px){ article{ padding-bottom: 15px; } } @media screen and (max-width: 600px){ article{ padding: 15px 0; } }