@charset "UTF-8"; body { line-height: 1.65em; font-family: Merriweather, serif; font-weight: 400; font-size: 16px; background-color: #fff; } a { color: #8f65ca; text-decoration: none; } .site-header { text-align: center; font-size: 10px; padding: 30px 0; } .site-header a { padding-bottom: 4px; color: #555; letter-spacing: 2px; margin-right: 30px; white-space: nowrap; font-family: helvetica, sans-serif; } .site-header a.active { opacity: .2; border-bottom: 1px solid #333; } .site-header a:last-child { margin-right: 0; } .instagram { text-align: center; margin-bottom: 20px; height: 140px; } .instagram .img { padding: 0; transition: all 1s; opacity: 0; display: inline-block; background: #eee; margin-right: 20px; } .instagram .img:hover { box-shadow: inset 0 0 5px #000; } .instagram .img, .instagram img { border-radius: 200px; width: 140px; height: 140px; } .wrapper { max-width: 700px; width: 100%; margin: auto; } .posts { list-style: none; padding-left: 0; margin-top: 0; } .posts a { color: #333; } .posts .post { margin-bottom: 30px; } .content { padding: 35px; } .meta { font-size: 9px; } .meta, .meta * { color: #a0a0a0; } .post-title { font-size: 20px; } .post-header { text-align: center; border-bottom: 1px solid #eee; padding-bottom: 30px; margin-bottom: 30px; position: relative; } .post-header:after { content: ""; display: block; width: 6px; height: 6px; background: #eee; position: absolute; border: 6px solid #fff; left: 50%; border-radius: 15px; margin-left: -9px; bottom: -9px; } article img { max-width: 100%; } article h3 { border-bottom: 1px solid #777; line-height: 0.9em; display: inline-block; text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff; } .a-cat, .a-house, .a-person, .a-page { display: inline-block; background: #333; vertical-align: middle; margin-bottom: 2px; position: relative; } .a-cat { background: #333; height: 13px; width: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 0 -2px #333; } .a-cat:before, .a-cat:after { content: ''; display: block; } .a-cat:before { width: 10px; height: 10px; background: #fff; -webkit-transform: rotate(45deg) skew(-20deg, -20deg); -moz-transform: rotate(45deg) skew(-20deg, -20deg); transform: rotate(45deg) skew(-20deg, -20deg); margin-top: -6px; } .a-cat:after { height: 1px; width: 16px; margin-left: -3px; margin-top: 2px; box-shadow: 0 2px 0 #333; background: #333; } .a-house { width: 10px; height: 8px; border-radius: 2px; } .a-house:before { top: -13px; left: -3px; position: absolute; content: ''; display: block; border: 8px solid transparent; border-bottom: 6px solid #333; } .a-page { width: 11px; height: 13px; border-radius: 2px; } .a-page:before, .a-page:after { content: ''; display: block; } .a-page:before { position: absolute; border: 2px solid transparent; border-top-color: #fff; border-right-color: #fff; width: 0; right: 0; } .a-page:after { height: 1px; width: 7px; margin: auto; margin-top: 4px; box-shadow: 0 2px 0 #fff, 0 4px 0 #fff, 0 6px 0 #fff; background: #fff; } .a-person { width: 13px; height: 13px; border-radius: 15px; overflow: hidden; } .a-person:before, .a-person:after { content: ''; display: block; position: absolute; background: #fff; } .a-person:before { width: 5px; height: 5px; border-radius: 10px; left: 4px; top: 3px; } .a-person:after { top: 8px; left: 3px; height: 4px; width: 7px; border-radius: 10px; } .site-footer { font-size: 11px; padding: 30px 30px 50px; text-align: center; } .pagination { position: relative; margin: auto; text-align: center; opacity: .4; transition: opacity .4s; } .pagination:hover { opacity: 1; } .page-nav { display: inline-block; height: 9px; width: 10px; background: #333; font-size: 0; border-radius: 3px; top: -30px; position: absolute; } .page-nav:before, .page-nav:after { content: ''; display: block; position: absolute; } .page-nav:before { width: 6px; left: -3px; height: 2px; border-radius: 4px; background: #333; } .page-nav:after { height: 1px; top: 2px; width: 3px; margin: auto; box-shadow: 0 2px 0 #fff, 0 4px 0 #fff; background: #fff; } .previous { left: -60px; } .next { right: -60px; -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); transform: scale(-1, 1); } blockquote { margin: 0; padding: 30px; position: relative; color: #555; } blockquote:before, blockquote:after { font-family: georgia, serif; font-size: 50px; color: #e0e0e0; position: absolute; } blockquote:before { line-height: 1em; left: 0; top: 0; content: '“'; } blockquote:after { right: 0; bottom: 0; content: '”'; } blockquote p:first-child { margin-top: 0; } blockquote p:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid #eee; margin: 30px 0; text-align: center; } hr:before { content: '///'; line-height: 1em; margin-top: -6px; font-size: 10px; color: #ddd; padding: 1px 3px; background: #fff; display: inline-block; } .fork-me { padding: 5px 35px 3px 10px; color: #fff; text-align: center; background: #333; position: absolute; right: 0; top: 30px; font-size: 12px; overflow: hidden; transition: all .3s; } .fork-me:before, .fork-me:after { transition: all .3s; content: ''; display: block; position: absolute; } .fork-me:hover:before, .fork-me:hover:after { right: 15px; } .fork-me:before { width: 10px; height: 7px; border: 1px solid #eee; border-left: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; top: 12px; right: 10px; } .fork-me:after { height: 1px; width: 47px; background: #eee; top: 12px; right: 10px; margin-top: 4px; margin-right: -36px; } .about { text-align: center; } .links { font-size: 0; } .links a { text-transform: uppercase; font-size: 12px; text-align: center; padding: 3px 0; display: inline-block; color: #333; width: 20%; position: relative; } .links a:before { content: ''; position: absolute; left: 50%; margin-left: -3px; margin-top: -25px; transition: .4s; height: 3px; width: 3px; border: 3px solid transparent; -webkit-transform: rotate(-45deg) skew(-10deg, -10deg); -moz-transform: rotate(-45deg) skew(-10deg, -10deg); transform: rotate(-45deg) skew(-10deg, -10deg); } .links a:hover:before { margin-top: -15px; border-bottom-color: #d8badc; border-left-color: #d8badc; } @media (max-width: 480px) { .links a { width: auto; height: 50px; margin-right: 70%; } .links a:before { -webkit-transform: rotate(-135deg) skew(-10deg, -10deg); -moz-transform: rotate(-135deg) skew(-10deg, -10deg); transform: rotate(-135deg) skew(-10deg, -10deg); left: -15px; margin-top: 6px !important; } } /*# sourceMappingURL=style.css.map */