/* * 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 color -*/ /*- 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: #008A3C; text-decoration: none; font-weight: 700; } a:hover, a:focus { color: #007131; } /*- 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, ul, ol { font-size: 1em; /* 16px */ line-height: 1.5em; /* 24px/16px */ margin-bottom: 1.5em; /* 24px/16px */ } 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; -ms-border-radius: 4px; border-radius: 4px; background-color: #f0f0f0; padding: 0 1.5em; /* 24px/18px */ } blockquote p, blockquote ul, blockquote ol { padding: 1.5em 0; /* 24px/18px */ } /*- Typography for big screen, based on 18px font-size -*/ @media (min-width: 940px) { p, ul, ol { font-size: 1em; /* 18px */ line-height: 1.3334em; /* 24px/18px */ margin-bottom: 1.3334em; /* 24px/18px */ } 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) */ } 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; -ms-border-radius: 4px; border-radius: 4px; background-color: #f0f0f0; padding: 0 1.33334em; /* 24px/18px */ } blockquote p, blockquote ul, blockquote ol { padding: 1.33334em 0; /* 24px/18px */ } } /* -- General Layout -- */ /* Navigation */ #nav a, #nav-left a { display: block; color: #FDFDFD; padding: 0.33334em 0; font-size: 1.5em; font-weight: 400; } @media (min-width: 940px) { #nav a, #nav-left a { font-size: 1em; } } #nav a:hover, #nav-left a:hover { background-color: #00a447; } #nav span, #nav-left span { font-weight: 200; } #nav { width: 14rem; position: fixed; background-color: #008A3C; top: 0; bottom: 0; right: -14rem; color: #FDFDFD; opacity: 0.95; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; z-index: 1; padding: 72px 0; text-align: center; } #nav-left { width: 14rem; position: fixed; background-color: #008A3C; top: 0; bottom: 0; left: -14rem; color: #FDFDFD; opacity: 0.95; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in; z-index: 1; padding: 72px 0; text-align: center; } /* Toggle class to open menu */ #nav.menu-open { -webkit-transform: translateX(-14rem); -moz-transform: translateX(-14rem); -ms-transform: translateX(-14rem); transform: translateX(-14rem); width: 100%; } @media (min-width: 940px) { #nav.menu-open { width: 30%; } } #nav-left.menu-open-left { -webkit-transform: translateX(14rem); -moz-transform: translateX(14rem); -ms-transform: translateX(14rem); transform: translateX(14rem); width: 100%; } @media (min-width: 940px) { #nav-left.menu-open-left { width: 30%; } } /* Separator after menu */ #nav-list:after { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: #FDFDFD; } /* Icon menu */ #nav-menu { display: block; position: fixed; top: 35px; right: 25px; z-index: 10; height: 24px; } #nav-menu-left { display: block; position: fixed; top: 35px; left: 25px; z-index: 10; height: 24px; } #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; } #menu.btn-close { background: none; } #menu.btn-close:before { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #FDFDFD; } #menu.btn-close:after { top: -4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #FDFDFD; } /* Main content */ .fixed { position: fixed; } @media (min-width: 940px) { .fixed { position: static; } } #container { margin: 0 auto; max-width: 730px; padding: 0 1.5rem; } #header { text-align: center; padding: 24px 0; 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; } /* Posts */ #posts li { list-style-type: none; } #post-page { margin-bottom: 1.5em; } @media (min-width: 940px) { #post-page { margin-bottom: 1.3334em; } } .post + .post:before { display: block; content: ''; width: 5rem; height: 1px; margin: 23px auto; background-color: #d5d5d5; } .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; } } img { max-width: 100%; display: block; margin: 0 auto; margin-bottom: 24px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-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 */ } } /* Pages */ #page ul, #page ol { padding-left: 1.5em; } /* Paginator */ .pagination { text-align: center; margin: 2.666668em; } .pagination span { background-color: #f0f0f0; color: #222222; } .pagination a:hover { background-color: #00a447; } .page-item { background-color: #008A3C; color: #FDFDFD; padding: 4px 8px; font-weight: 400; padding: 0.5em 1em; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } /* Footer */ footer { background-color: #008A3C; color: #FDFDFD; text-align: center; padding: 0.6667em 0; } /* * 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 */ /*- Custom style -*/ .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert h4 { margin-top: 0; color: inherit; } .alert .alert-link { font-weight: 700; } .alert > p, .alert > ul { margin-bottom: 0; } .alert > p + p { margin-top: 5px; } .alert-dismissable, .alert-dismissible { padding-right: 35px; } .alert-dismissable .close, .alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; } .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert-success hr { border-top-color: #c9e2b3; } .alert-success .alert-link { color: #2b542c; } .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .alert-info hr { border-top-color: #a6e1ec; } .alert-info .alert-link { color: #245269; } .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .alert-warning hr { border-top-color: #f7e1b5; } .alert-warning .alert-link { color: #66512c; } .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .alert-danger hr { border-top-color: #e4b9c0; } .alert-danger .alert-link { color: #843534; } /*# sourceMappingURL=main.css.map */