@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Fira+Mono&display=swap'); body { font-family: 'Fira Sans', sans-serif; color: #252525; padding: 0; margin: 0; box-sizing: border-box; } a { color: #0077a4; } code { font-family: 'Fira Mono', monospace; } .gist .gist-file { overflow: auto; margin: 0; margin-bottom: 1.5em; } .gist table { table-layout: fixed; } #copyright { padding: 20px 0; } hr { border-color: #eee; } .blog-page { position: absolute; width: 100%; top: 20vh; } .blog-center { max-width: 700px; padding: 2em 2.5em; margin: 0 auto; font-size: 1em; line-height: 1.5; background-color: #fff; } .blog-center h1 { margin-top:0; } .blog-center h2 { margin-top:1em; margin-bottom:0.25em; } .blog-center h2 a { color: #252525; text-decoration: none; } .blog-center h2 a:hover { text-decoration: underline; } .blog-center p, ul { margin-top:0; margin-bottom:1em; } .blog-banner { width:100%; height: 40vh; background-size: cover; background-position: center; margin: 0; user-select: none; } .blog-banner.thumb { height: 250px; } h1.blog-top-1 { margin-top:1em; margin-bottom:0; } p.blog-top-2 { margin-top:0; } .blog-img-full { max-width: 100%; display: inline-block; margin: 10px 0 10px 0; } .blog-img-right { max-height: 500px; max-width: 50%; margin: 0 0 10px 20px; float: right; } .blog-img-left { max-height: 500px; max-width: 50%; margin: 0 20px 10px 0; float: left; } .blog-listing { box-shadow: 0 4px 8px 0 #b5b5b5; border-radius: 10px; margin-bottom: 4em; transition: 0.2s box-shadow; } .blog-listing .blog-top-1 { margin-top: 0; } .blog-listing .blog-banner { border-radius: 10px 10px 0 0; } .blog-listing:hover { box-shadow: 0 4px 8px 0 #959595; } .blog-listing-container { padding:1em; } .blog-listing code { margin-right: 10px; } @media (max-width: 840px) { .blog-center { padding: 1em; } .blog-page { top: 40vw; } .blog-banner { height: 40vw; } .blog-img-right, .blog-img-left { max-width: 50%; } }