main { max-width: 750px; word-wrap: break-word; } /* Header */ .global-header { background: #222 no-repeat center center; background-size: cover; } .header-text { position: relative; padding-bottom: 1px; height: 100%; background-color: rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.9); } .header-text .tag-line { margin: 10px auto; padding: 0 10px; max-width: 430px; color: rgba(255, 255, 255, 0.7); text-align: center; font-weight: 300; } .header-text .sns-links { margin: 20px auto; text-align: center; } .header-text .sns-links a { display: inline-block; margin: 0 2px; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 15px; color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 20px; line-height: 30px; transition: color,border-color 0.1s linear; } .header-text .sns-links a:hover { border-color: rgba(255, 255, 255, 1.0); color: rgba(255, 255, 255, 1.0); } .header-text h1 { margin: 0 auto; padding-top: 30px; text-align: center; font-weight: 200; } .header-text h1 a { color: rgba(255, 255, 255, 1.0); text-decoration: none; } a.btn-header { position: absolute; top: 20px; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, 1.0); border-radius: 3px; background-color: rgba(0, 0, 0, 0.1); color: rgba(255, 255, 255, 1.0); text-decoration: none; font-weight: 300; font-size: 13px; transition: color,background-color 0.1s linear; } a.btn-header:hover { background-color: rgba(255, 255, 255, 1.0); color: rgba(0, 0, 0, 1.0); } a.btn-subscribe { right: 20px; } a.btn-back { left: 20px; } /* Footer */ .global-footer { margin-top: 10px; padding-top: 10px; max-width: 750px; height: 100px; border-top: 1px solid rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.4); } .global-footer .sns-links { float: right; } .global-footer .sns-links a { display: inline-block; width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 12px; color: rgba(0, 0, 0, 0.4); vertical-align: top; text-align: center; text-decoration: none; font-size: 13px; transition: color,border-color 0.1s linear; } .global-footer .sns-links a i { vertical-align: middle; } .global-footer .sns-links a:hover { border: 1px solid rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.7); } /* Article */ .article-list h2 a { text-decoration: none; transition: color 0.1s linear; } .post-meta { margin: 5px 0; } .post-date { color: rgba(0, 0, 0, 0.4); } .post-tag a { padding: 0 10px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 12px; color: rgba(0, 0, 0, 0.3); text-decoration: none; transition: color,border-color,background-color 0.1s linear; } .post-tag a:hover { background-color: rgba(0, 0, 0, 1.0); color: rgba(255, 255, 255, 1.0); } .not-found h1 { color: rgba(0, 0, 0, 0.2); font-weight: 200; font-size: 80px; } .not-found { text-align: center; } .author-info { padding: 25px 0; border-top: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .author-name { margin: 0 0 5px 0; font-size: 30px; } .author-bio { color: rgba(0, 0, 0, 0.5); } .author-avatar img { max-width: 100px; max-height: 100px; width: 100px; height: 100px; border-radius: 50px; } .author-contact { position: relative; display: inline-block; padding-top: 10px; height: 100px; text-align: center; } .author-contact a { display: inline-block; padding: 7px 16px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; color: rgba(0, 0, 0, 0.7); text-decoration: none; font-weight: 300; font-size: 13px; transition: background-color,border-color,color 0.1s linear; } .author-contact a:hover { border: 1px solid rgba(51, 122, 182, 1.0); background-color: rgba(51, 122, 183, 1.0); color: rgba(255, 255, 255, 1.0); } /* Override some of Bootstrap's styles */ pre { font-size: 14px; } pre code { overflow: auto; white-space: pre; word-wrap: normal; } .pager li>a { transition: background-color 0.1s linear; } blockquote { font-style:italic; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Source Sans Pro", "Kozuka Gothic Pr6N", Meiryo, sans-serif !important; } article section img { max-width: 100%; height: auto; margin: 13px auto; }