/* * Emerald is a simple blog theme built for Jekyll. */ /*- Base reset -*/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, img { margin: 0; padding: 0; border: 0; }/*- Base settings -*/ html { background-color: #FDFDFD; font-size: 16px; line-height: 1.5; color: #222222; } @media (min-width: 940px) { html { font-size: 18px; } }/*- Link -*/ a { color: #dd4814; text-decoration: none; font-weight: 700; } a:hover, a:focus { color: #c64012; }pre.highlight { white-space: pre-wrap; background-color: #f6f8fa; margin: 0; padding: 16px; } pre.highlight .err { background-color: transparent; }.highlight code, code.highlighter-rouge { color: #555; background-color: #f6f8fa; }/*- Typography -*/ body { font-family: 'Source Sans Pro', sans-serif; letter-spacing: 0.01em; }/*- Typography for medium and small screen, based on 16px font-size -*/ p { font-size: 1em; /* 16px */ line-height: 1.5em; /* 24px/16px */ margin-top: .75em; /* 24px/16px */ margin-bottom: .75em; }h1 { font-size: 2.25em; /* 36px/16px */ line-height: 1.3333em; /* 48px/36px */ padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }h2 { font-size: 1.5em; /* 24px/16px */ line-height: 1em; /* 24px/24px */ padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */ }h3, h4, h5, h6 { font-size: 1.125em; /* 18px/16px */ line-height: 1.3334em; /* 24px/18px */ padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }blockquote { font-style: italic; margin: 1.5em; /* 24px/18px */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #f0f0f0; padding: 1.5em; /* 24px/18px */ }/*- Typography for big screen, based on 18px font-size -*/ @media (min-width: 940px) { p { font-size: 1em; /* 18px */ line-height: 1.3334em; /* 24px/18px */ margin-top: 0.6667em; /* 24px/18px */ margin-bottom: 0.6667em; }h1 { font-size: 2.6667em; /* 48px/18px */ line-height: 1em; /* 48px/48px */ padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }nav h1 { font-size: 2.2em; }h2 { font-size: 2em; /* 36px/18px */ line-height: 1.3334em; /* 48px/36px */ padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */ }h3, h4, h5, h6 { font-size: 1.3334em; /* 24px/18px */ line-height: 1em; /* 24px/24px */ padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ }blockquote { font-style: italic; margin: 1.3334em; /* 24px/18px */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #f0f0f0; padding: 1.33334em; /* 24px/18px */ } } /*- General Layout -*/ /* Navigation */ nav { width: 14rem; position: fixed; background-color: #dd4814; top: 0; bottom: 0; left: 0; color: #FDFDFD; opacity: 0.95; transition: all 0.3s ease-in; z-index: 1; padding: 72px 0; text-align: center; } nav a { display: block; color: #FDFDFD; padding: 0.33334em 0; font-size: 1.5em; font-weight: 400; } @media (min-width: 940px) { nav a { font-size: 1em; } } nav a:hover { background-color: #eb5420; } nav span { font-weight: 200; } @media (max-width: 800px) { nav { left: -14rem; } }#open-menu-toggle:checked ~ #wrap { position: fixed; } @media (min-width: 940px) { #open-menu-toggle:checked ~ #wrap { position: static; } } #open-menu-toggle:checked ~ #wrap nav { width: 30%; } @media (max-width: 800px) { #open-menu-toggle:checked ~ #wrap nav { transform: translateX(14rem); width: 100%; } } #open-menu-toggle:checked ~ #wrap #menu { background: none; } #open-menu-toggle:checked ~ #wrap #menu:before { top: 0; transform: rotate(-45deg); background-color: #FDFDFD; } #open-menu-toggle:checked ~ #wrap #menu:after { top: -4px; transform: rotate(45deg); background-color: #FDFDFD; }#nav-menu { display: block; position: absolute; top: 35px; left: 25px; z-index: 10; height: 24px; cursor: pointer; } @media (min-width: 800px) { #nav-menu { display: none; } }#open-menu-toggle { display: none; }/* Icon menu */ #menu { height: 4px; width: 1.5em; background-color: #7b7b7b; margin-top: 8px; } #menu:after, #menu:before { content: ""; display: block; position: relative; height: 4px; width: 1.5em; background-color: #7b7b7b; transition: all 0.3s ease-in; } #menu:before { top: -8px; } #menu:after { top: 4px; }/* Main content */ @media (min-width: 800px) { #wrap { margin-top: 65px; } }#container { margin: 0 auto; max-width: 980px; padding: 0 1.5rem; } @media (min-width: 800px) { #container { margin-left: 30%; } }#header { text-align: center; position: relative; } #header a { text-decoration: none; color: #222222; display: inline-block; } #header img { max-height: 72px; margin: 0 auto; display: block; } #header h1 { font-family: 'Signika', sans-serif; font-weight: 600; } #header:after { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: #d5d5d5; }@media (max-width: 800px) { h1 { margin: 0 50px; margin-top: 7px; } }/* Posts */ #posts li { list-style-type: none; }#post-page { margin-bottom: 1.5em; } @media (min-width: 940px) { #post-page { margin-bottom: 1.3334em; } }.by-line { display: block; color: #626262; line-height: 1.5em; /* 24px/16px */ margin-bottom: 1.5em; /* 24px/16px */ font-weight: 200; } @media (min-width: 940px) { .by-line { display: block; color: #626262; line-height: 1.3334em; /* 24px/18px */ margin-bottom: 1.3334em; /* 24px/18px */ font-weight: 200; } }.post-date { color: #626262; font-weight: 200; margin-right: 10px; }img { max-width: 100%; display: block; margin: 0 auto; margin-bottom: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }img[title="Emerald"] { box-shadow: 0 2px 6px #ddd; }code { color: #7b7b7b; background-color: white; }/* Set the vertical rhythm (and padding-left) for lists inside post content */ .content ul, .content ol { line-height: 1.5em; /* 24px/16px */ padding-left: 1.5em; } @media (min-width: 940px) { .content ul, .content ol { line-height: 1.33334em; /* 24px/18px */ } }/* Paginator */ .pagination { text-align: center; margin: 2.666668em; } .pagination span { background-color: #f0f0f0; color: #222222; } .pagination a:hover { background-color: #eb5420; }.page-item { background-color: #dd4814; color: #FDFDFD; padding: 4px 8px; font-weight: 400; padding: 0.5em 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }/* Footer */ footer { background-color: #dd4814; color: #FDFDFD; text-align: center; padding: 0.6667em 0; }html.homepage { background: #e05b14; font-family: 'Source Sans Pro', Arial, sans-serif; color: #000; text-shadow: #ddd 0 1px 3px; text-align: center; background: #e05b14; }.homepage .box { /* http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text */ /* Fallback for web browsers that don't support RGBa */ background-color: white; /* RGBa with 0.6 opacity */ background-color: rgba(255, 255, 255, 0.6); /* For IE 5.5 - 7*/ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)"; padding: 1.25em 1.45em 1.25em 1.55em; -moz-box-shadow: 0 0 1.1em #666; -webkit-box-shadow: 0 0 1.1em #666; box-shadow: 0 0 1.1em #666; } .homepage h1 { margin: 0; font-family: 'Signika', Verdana, Helvetica, Arial, sans-serif; color: #242424; text-shadow: #8f8f8f 0 2px 3px, #d6d6d6 0 -2px 3px; } .homepage h2 { text-shadow: #ddd 0 1px 3px; font-size: 1.2em; clear: both; } .homepage a { display: block; text-decoration: none; color: #812400; } .homepage a:hover { text-decoration: underline; } .homepage #intro { transition: all 0.3s ease-in; margin: 3%; width: 94%; } .homepage .inside { transition: all 0.3s ease-in; margin-top: 0px; } .homepage h1 { padding: 0; } .homepage .avatar { transition: all 0.3s ease-in; height: 80px; width: 80px; }@media (max-width: 480px) { html.homepage { background: #e05b14 url("../img/bg.jpeg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-size: 120%; }.homepage a { padding-top: 1em; height: 3em; } .homepage h2 { padding: 0.5em 0 0 0; } } @media (min-width: 480px) { html.homepage { background: #e05b14 url("../img/me.jpeg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }.homepage .avatar { height: 0px; } .homepage #intro { position: absolute; margin: 0; left: 0; top: 0; bottom: 0; width: 14em; } .homepage .inside { margin-top: 65px; } .homepage h1 { background: none; padding: 0; height: auto; width: auto; } } /* * A Github stylesheet to highlight code snippet * https://github.com/mojombo/tpw/blob/master/css/syntax.css */ .lineno { color: #bdbdbd; margin-right: 1em; }.highlight .c { color: #999988; font-style: italic; }/* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2; }/* Error */ .highlight .k { font-weight: bold; }/* Keyword */ .highlight .o { font-weight: bold; }/* Operator */ .highlight .cm { color: #999988; font-style: italic; }/* Comment.Multiline */ .highlight .cp { color: #999999; font-weight: bold; }/* Comment.Preproc */ .highlight .c1 { color: #999988; font-style: italic; }/* Comment.Single */ .highlight .cs { color: #999999; font-weight: bold; font-style: italic; }/* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd; }/* Generic.Deleted */ .highlight .gd .x { color: #000000; background-color: #ffaaaa; }/* Generic.Deleted.Specific */ .highlight .ge { font-style: italic; }/* Generic.Emph */ .highlight .gr { color: #aa0000; }/* Generic.Error */ .highlight .gh { color: #999999; }/* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd; }/* Generic.Inserted */ .highlight .gi .x { color: #000000; background-color: #aaffaa; }/* Generic.Inserted.Specific */ .highlight .go { color: #888888; }/* Generic.Output */ .highlight .gp { color: #555555; }/* Generic.Prompt */ .highlight .gs { font-weight: bold; }/* Generic.Strong */ .highlight .gu { color: #aaaaaa; }/* Generic.Subheading */ .highlight .gt { color: #aa0000; }/* Generic.Traceback */ .highlight .kc { font-weight: bold; }/* Keyword.Constant */ .highlight .kd { font-weight: bold; }/* Keyword.Declaration */ .highlight .kp { font-weight: bold; }/* Keyword.Pseudo */ .highlight .kr { font-weight: bold; }/* Keyword.Reserved */ .highlight .kt { color: #445588; font-weight: bold; }/* Keyword.Type */ .highlight .m { color: #009999; }/* Literal.Number */ .highlight .s { color: #d14; }/* Literal.String */ .highlight .na { color: #008080; }/* Name.Attribute */ .highlight .nb { color: #0086B3; }/* Name.Builtin */ .highlight .nc { color: #445588; font-weight: bold; }/* Name.Class */ .highlight .no { color: #008080; }/* Name.Constant */ .highlight .ni { color: #800080; }/* Name.Entity */ .highlight .ne { color: #990000; font-weight: bold; }/* Name.Exception */ .highlight .nf { color: #990000; font-weight: bold; }/* Name.Function */ .highlight .nn { color: #555555; }/* Name.Namespace */ .highlight .nt { color: #000080; }/* Name.Tag */ .highlight .nv { color: #008080; }/* Name.Variable */ .highlight .ow { font-weight: bold; }/* Operator.Word */ .highlight .w { color: #bbbbbb; }/* Text.Whitespace */ .highlight .mf { color: #009999; }/* Literal.Number.Float */ .highlight .mh { color: #009999; }/* Literal.Number.Hex */ .highlight .mi { color: #009999; }/* Literal.Number.Integer */ .highlight .mo { color: #009999; }/* Literal.Number.Oct */ .highlight .sb { color: #d14; }/* Literal.String.Backtick */ .highlight .sc { color: #d14; }/* Literal.String.Char */ .highlight .sd { color: #d14; }/* Literal.String.Doc */ .highlight .s2 { color: #d14; }/* Literal.String.Double */ .highlight .se { color: #d14; }/* Literal.String.Escape */ .highlight .sh { color: #d14; }/* Literal.String.Heredoc */ .highlight .si { color: #d14; }/* Literal.String.Interpol */ .highlight .sx { color: #d14; }/* Literal.String.Other */ .highlight .sr { color: #009926; }/* Literal.String.Regex */ .highlight .s1 { color: #d14; }/* Literal.String.Single */ .highlight .ss { color: #990073; }/* Literal.String.Symbol */ .highlight .bp { color: #999999; }/* Name.Builtin.Pseudo */ .highlight .vc { color: #008080; }/* Name.Variable.Class */ .highlight .vg { color: #008080; }/* Name.Variable.Global */ .highlight .vi { color: #008080; }/* Name.Variable.Instance */ .highlight .il { color: #009999; }/* Literal.Number.Integer.Long */