728 lines
14 KiB
CSS
728 lines
14 KiB
CSS
/*
|
|
* 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 */
|