An image-focused wordpress theme.

_article.scss 3.1KB

    @import "related"; $article-max-width: 90ch; $comment-label-height: 1.5em; $comment-trans-speed: 0.3s; .single-post, .page { #main { font-size: 1rem; } strong { display: inline-block; margin-top: 0.5em; } article { padding: 1em; max-width: $article-max-width; margin: 0 auto; ul { list-style: disc; } li { margin: 0.5em 0; } } h1 { text-align: center; font-size: 2em; } p { line-height: 1.5; } img { // The image will take up either it's original size or as much // space as available, whichever is smallest. Then the image // is scaled to fit into this box without cropping. width: 100%; height: 100%; object-fit: contain; // Center the images, keeping 1 text line space around display: block; margin: 1em auto; padding: 0 1em; } // Small, spaced apart categories .entry-header { margin-bottom: 2em; .entry-meta { margin-bottom: 1em; font-size: 1em; .cat-links > a { margin: 0 1ch; } } } .social-share { text-align: center; width: 20ch; margin: 0 auto; overflow: hidden; > * { margin: 0.5em 0; } } #page-iletisim { > * { margin: 2ch 0; } } #comments { max-width: $article-max-width; margin: 0 auto; padding: 1ch; form p { position: relative; margin-top: $comment-label-height; } label { position: absolute; z-index: 1; top: -1 * $comment-label-height; margin-left: -1ch; } textarea, input { padding: 0.5em; border-radius: 5px; width: 100%; transition: box-shadow $comment-trans-speed; box-shadow: inset 0 0 2px 2px $secondary-text; resize: none; } textarea:focus, input:focus { outline: 0; box-shadow: inset 0 0 6px 1px $accent; } #submit { width: unset; padding: 2ch; background-color: $divider; transition: background-color $comment-trans-speed; @include lift(2); } #submit.submit-filled { background-color: $accent; } $comment-indent: 2ch; ol.comment-list { margin-left: -1 * $comment-indent; } li.comment { margin-left: $comment-indent; list-style: none; } .comment-meta img { width: 34px; height: 34px; padding: 0; float: left; margin: 0.5em; @include lift(1); } .comment-metadata, .comment-author { display: inline; } .comment-metadata { float: right; } } }