/** * Reset some basic elements */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } /** * Basic styling */ body { font: 200 16px/1.5 "Hammersmith One", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #888; background-color: #090909; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; } /** * Set `margin-bottom` to maintain vertical rhythm */ h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; } /** * Images */ img { max-width: 100%; vertical-align: middle; } /** * Figures */ figure > img { display: block; } figcaption { font-size: 14px; } /** * Lists */ ul, ol { margin-left: 30px; } li > ul, li > ol { margin-bottom: 0; } /** * Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 200; } /** * Links */ a { color: #e82; text-decoration: none; } a:visited { color: #b6620e; } a:hover { color: #888; text-decoration: underline; } /** * Blockquotes */ blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; } blockquote > :last-child { margin-bottom: 0; } /** * Code formatting */ pre, code { font-size: 15px; /*border: 1px solid $grey-color-light;*/ border-radius: 3px; background: #424242; } code { padding: 1px 5px; } pre { padding: 8px 12px; overflow-x: auto; } pre > code { border: 0; padding-right: 0; padding-left: 0; } /** * Wrapper */ .wrapper { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; } @media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } } /** * Clearfix */ .wrapper:after { content: ""; display: table; clear: both; } /** * Icons */ .icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; } .icon > svg path { fill: #828282; } body { background-color: #333; font-family: 'Hammersmith One', sans-serif; color: white; display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } .navbar-list .navbar-item { text-transform: uppercase; font-weight: 400; display: inline-block; margin: 1em; } ul.navbar-list { border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 2rem; } .header { padding-top: 6rem; text-align: center; } @media (min-width: 700px) { .header { padding-top: 14rem; } } .head { padding: 0 1rem 6rem 1rem; } @media (max-width: 700px) { .navbar-list .navbar-item { width: 100%; } } .navbar-item a { color: #e82; } ul.post-list, ul.navbar-list { list-style-type: none; margin-left: 0; margin-right: 0; } .header, footer { background-color: rgba(0, 0, 0, 0.25); } footer { padding-top: 1rem; } footer .author { text-align: center; text-transform: uppercase; } .container { padding-top: 1rem; padding-bottom: 1rem; } .icons { text-align: center; } a.icon { display: inline-table; background-color: rgba(255, 255, 255, 0.5); border-radius: 1.75em; width: 3.5em; height: 3.5em; text-align: center; line-height: 3.5em; margin: .5em; color: white; cursor: pointer; } a.icon:hover { text-decoration: none; } a.icon i.fa { font-size: 2em; display: table-cell; vertical-align: middle; } /** * Syntax highlighting styles */ .highlight { background: #fff; } .highlighter-rouge .highlight { background: #eef; } .highlight td.code > pre { background: #323232; } .highlight pre.lineno { background: #212121; } .highlight .c { color: #998; font-style: italic; } .highlight .err { color: #a61717; background-color: #e3d2d2; } .highlight .k { font-weight: bold; } .highlight .o { font-weight: bold; } .highlight .cm { color: #998; font-style: italic; } .highlight .cp { color: #999; font-weight: bold; } .highlight .c1 { color: #998; font-style: italic; } .highlight .cs { color: #999; font-weight: bold; font-style: italic; } .highlight .gd { color: #000; background-color: #fdd; } .highlight .gd .x { color: #000; background-color: #faa; } .highlight .ge { font-style: italic; } .highlight .gr { color: #a00; } .highlight .gh { color: #999; } .highlight .gi { color: #000; background-color: #dfd; } .highlight .gi .x { color: #000; background-color: #afa; } .highlight .go { color: #888; } .highlight .gp { color: #555; } .highlight .gs { font-weight: bold; } .highlight .gu { color: #aaa; } .highlight .gt { color: #a00; } .highlight .kc { font-weight: bold; } .highlight .kd { font-weight: bold; } .highlight .kp { font-weight: bold; } .highlight .kr { font-weight: bold; } .highlight .kt { color: #458; font-weight: bold; } .highlight .m { color: #099; } .highlight .s { color: #d14; } .highlight .na { color: #008080; } .highlight .nb { color: #0086B3; } .highlight .nc { color: #458; font-weight: bold; } .highlight .no { color: #008080; } .highlight .ni { color: #800080; } .highlight .ne { color: #900; font-weight: bold; } .highlight .nf { color: #900; font-weight: bold; } .highlight .nn { color: #555; } .highlight .nt { color: #000080; } .highlight .nv { color: #008080; } .highlight .ow { font-weight: bold; } .highlight .w { color: #bbb; } .highlight .mf { color: #099; } .highlight .mh { color: #099; } .highlight .mi { color: #099; } .highlight .mo { color: #099; } .highlight .sb { color: #d14; } .highlight .sc { color: #d14; } .highlight .sd { color: #d14; } .highlight .s2 { color: #d14; } .highlight .se { color: #d14; } .highlight .sh { color: #d14; } .highlight .si { color: #d14; } .highlight .sx { color: #d14; } .highlight .sr { color: #009926; } .highlight .s1 { color: #d14; } .highlight .ss { color: #990073; } .highlight .bp { color: #999; } .highlight .vc { color: #008080; } .highlight .vg { color: #008080; } .highlight .vi { color: #008080; } .highlight .il { color: #099; }