/* TODO: pull out coloring into variables */ div:before, div:after {
content: ''; display: table;
}
aside {
position: relative; display: block;
}
ul {
list-style-type: none;
}
.hide {
visibility: hidden; height: 1px; clip: rect(0 0 0 0); position: absolute;
}
input, textarea {
outline: none; background: none;
}
body {
background: #fff; color: #222;
}
body, textarea, pre, input {
font-family: 'Lato', Helvetica, sans-serif; line-height: 1.8em; font-size: 16px; font-weight: 400;
}
h1, h2, h3, h4, h5, text-title pre {
font-weight: 900; word-wrap: break-word; line-height: 1.3em;
}
h1, text-title pre, text-title textarea {
font-weight: 900; font-size: 35px;
}
p {
color: #555;
}
a, a:visited a:active {
color: #000; text-decoration: none; border-bottom: 1px solid #ddd;
}
a:hover, admin published h3 a:hover {
color: red;
}
header {
width: 162px; border-right: 1px solid #DDD; position: fixed; top: 0; bottom: 0; padding: 20px 40px;
} header span {
color: #888; font-weight: 500;
} header span.powered-by {
position: absolute; bottom: 30px; font-size: 11px;
} header ul {
padding: 0; margin: 50px 0;
} header li {
margin: 0 0 3px 0;
} header li a {
padding: 2px 0; color: #888; border-bottom: 2px solid #eee;
} header li a:hover {
border-color: #777; color: #444;
}
container {
margin-left: 243px; position: relative;
} container time {
display: block; padding: 20px 0 20px 50px; text-transform: uppercase; font-weight: 900; font-size: 12px; border-bottom: 1px solid #ddd;
}
content section {
padding: 26px 0 40px 50px; border-bottom: 1px solid #ddd; position: relative;
} content h1.external {
margin-top: 25px; font-size: 18px;
} content h1.external .permalink {
margin-left: 8px; font-size: 19px; color: #999; border: none;
}
.show content section {
border-bottom: none;
}
code {
font-size: 13px; background: #F2F2F2; padding: 20px; margin: 20px; display: block;
}
.contain {
width: 960px; position: relative;
}
.contain img {
max-width: 100%; height: auto;
}
publish-bar {
position: fixed; bottom: 0; left: 0; background: #bbb; color: #fff; width: 100%; text-align: center; padding: 10px 0 3px; border-top: 1px solid #999; -webkit-box-shadow: rgba(68, 68, 68, 0.9) 0 0 5px; -moz-box-shadow: rgba(68, 68, 68, 0.9) 0 0 5px; box-shadow: rgba(68, 68, 68, 0.9) 0 0 5px;
} @media only screen and (max-device-width: 480px) {
#publish-bar { padding: 2px 0; }
} publish-bar .contain {
margin: 0 auto; width: 960px;
} @media only screen and (max-device-width: 480px) {
#publish-bar .contain { width: 300px; padding: 3px 10px; }
} publish-bar input {
border: none; border-bottom: 1px solid #333; padding: 2px; width: 220px; font-size: 12px; color: #999;
} publish-bar .menu.active {
background: #fff; color: #000;
} publish-bar .sub-menu {
margin: 0; background: #222; padding: 20px; position: absolute; bottom: 0; left: 60px; visibility: hidden; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
} publish-bar .sub-menu.visible {
visibility: visible;
} publish-bar .sub-menu li {
margin: 0 0 15px 0;
} publish-bar .yaml-block {
display: inline-block;
} publish-bar .yaml-block .button {
cursor: pointer;
} publish-bar .yaml-block .arrow-box {
position: relative; background: #aaa; border: 2px solid #444444;
} publish-bar .yaml-block .arrow-box:after, publish-bar .yaml-block .arrow-box:before {
top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
} publish-bar .yaml-block .arrow-box:after {
border-color: rgba(119, 119, 119, 0); border-top-color: #aaa; border-width: 10px; left: 50%; margin-left: -10px;
} publish-bar .yaml-block .arrow-box:before {
border-color: rgba(68, 68, 68, 0); border-top-color: #444444; border-width: 13px; left: 50%; margin-left: -13px;
} publish-bar .yaml-block .yaml-table {
position: absolute; background-color: #fff; bottom: 10px; left: -60px; float: left; background-color: #aaa; display: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; padding: 0px;
} publish-bar .yaml-block .yaml-table .yaml-table-inner {
background-color: #fff; margin: 1px; border: 1px solid rgba(68, 68, 68, 0.4);
} publish-bar .yaml-block .yaml-table ul {
margin: 0; padding: 0;
} publish-bar .yaml-block .yaml-table ul li .key input, publish-bar .yaml-block .yaml-table ul li .value input {
width: 90px; border: 0 none; margin: 0; padding: 0; color: #333; font-family: 'Titillium Web', sans-serif; font-size: 14px; padding-left: 10px;
} publish-bar .yaml-block .yaml-table ul li .key, publish-bar .yaml-block .yaml-table ul li .value {
border-bottom: 1px solid #777; margin: 0; padding: 0; padding-bottom: 2px; display: inline-block;
} publish-bar .yaml-block .yaml-table ul li .key {
border-right: 1px solid #777;
} publish-bar .yaml-block .yaml-table ul li .value {
margin-left: -3px;
} publish-bar .yaml-block .yaml-table ul li .value input {
width: 250px;
} publish-bar .yaml-block .yaml-table ul li:last-child .key, publish-bar .yaml-block .yaml-table ul li:last-child .value {
border-bottom: 0 none;
} publish-bar .yaml-block .yaml-table ul li.add-yaml-entry {
color: #fff; text-shadow: 0px 0px 5px #000; background-color: #aaa; font-size: 14px; line-height: 20px; cursor: pointer;
} publish-bar .yaml-block .yaml-table ul li.add-yaml-entry:hover {
text-shadow: 0px 0px 20px #000;
}
publish-bar input, publish-bar a, .button {
display: inline-block; background: #000; padding: 8px 12px; font-weight: bold; border: none; color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-appearance: none;
} @media only screen and (max-device-width: 480px) {
#publish-bar input[type=submit], #publish-bar a, .button { padding: 2px 10px; font-size: 12px; }
}
@media only screen and (max-device-width: 480px) {
#publish-bar input[type=submit] { padding-top: 5px; padding-bottom: 5px; margin-top: -1px; }
}
.button.secondary {
padding: 0 5px; background: #aaa; font-size: 12px;
}
publish-bar input:hover, publish-bar a:hover, .col h1 a:hover, .col h2 a:hover, .button:hover, .button.secondary:hover {
background: red; color: #fff;
}
.button.space-top {
margin-top: 100px;
}
.left {
float: left;
}
.right {
float: right;
}
.actions {
position: absolute; top: 0; right: -60px; font-size: 12px; margin: 0; padding: 0;
}
.actions li {
display: inline-block; margin: 0 10px 0 0;
}
label {
font-size: 16px; color: #fff; font-weight: bold; margin: 0 8px 0 0;
}
.admin-links {
position: absolute; text-align: right; top: 18px; right: 20px; margin: 0;
} .admin-links li {
float: left; margin-left: 6px;
} .admin-links a {
float: left;
}
.notice {
position: absolute; top: 0; background: lightYellow; width: 100%; display: block; text-align: center; padding: 3px 0; font-size: 12px;
}
body.posts.edit admin, body.posts.new admin {
width: 100%;
}
admin {
width: 808px; margin: 0 auto; position: relative;
} @media only screen and (max-device-width: 480px) {
#admin { width: 320px; }
} admin .draft-options {
display: inline-block; border: 3px solid #000; border-radius: 5px; padding: 1px;
} @media only screen and (max-device-width: 480px) {
#admin .draft-options { display: none; }
} admin .draft-options a {
font-size: 15px; padding: 4px 10px; background-color: transparent; color: #000; border-radius: 4px;
} admin .draft-options a.selected, admin .draft-options a:hover {
background-color: #000; color: #fff;
} admin .draft-options a.override-select {
background-color: inherit; color: #000;
} admin save-button {
width: 90px;
} admin save-button.saved {
color: #999;
} admin save-button.saved:hover {
cursor: normal;
} admin drafts {
float: left; border: 4px solid #000; border-top: none; background: #fff; margin: 0 0 20px 0; padding-top: 10px;
} admin drafts form {
margin: 20px 0 20px -20px; padding: 0 0 0 20px; border-left: 4px solid lightblue;
} admin drafts post-title {
width: 350px; font-size: 16px; font-weight: 400; margin: 0; border-bottom: 1px solid #ddd;
} @media only screen and (max-device-width: 480px) {
#admin #drafts #post-title { width: 260px; margin-left: -5px; }
} admin published {
float: right;
} admin published h2 {
color: #999;
} admin published h2 a {
margin-top: -2px;
} admin published h3 a {
color: #999;
} @media only screen and (max-device-width: 480px) {
#admin #published { float: none; display: block; }
} admin .col h1, admin .col h2 {
position: relative; text-transform: uppercase;
} @media only screen and (max-device-width: 480px) {
#admin .col h1 { margin-top: 0; }
} admin .col h1 a, admin .col h2 a {
position: absolute; top: 0; right: 0; font-size: 12px; padding: 2px 10px; line-height: 2.7em; margin: 5px 0 0;
} admin .col {
width: 360px; padding: 20px;
} @media only screen and (max-device-width: 480px) {
#admin .col { width: 272px; }
} admin .col h2 a {
background: #999;
} admin .col h2 a:hover {
background: red;
} admin .col ul {
padding: 0;
} admin .col ul li {
border-bottom: 1px solid #ddd; padding: 15px 0; position: relative;
} admin .col ul li:hover .links {
visibility: visible;
} admin .col ul li .links {
position: absolute; right: 0; top: 14px; background: #fff; padding: 1px 8px; visibility: hidden;
} admin .col ul li .links a {
color: #999; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
} admin .col ul li .links a:hover {
color: red;
} admin .col ul li h3 {
margin: 0; font-size: 16px; max-width: 100%; text-overflow: ellipsis; overflow: hidden;
} admin .col ul li h3 a {
border: none;
} admin textarea, admin pre {
margin: 0; padding: 0; outline: 0; border: 0;
} admin .expandingArea > textarea, admin .expandingArea > pre {
background: transparent; white-space: pre-wrap; word-wrap: break-word;
} admin .expandingArea > textarea {
/* The border-box box model is used to allow * padding whilst still keeping the overall width * at exactly that of the containing element. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; width: 100%;
} admin .expandingArea.active > textarea {
resize: none;
} admin .expandingArea > pre {
display: none;
} admin .expandingArea.active > pre {
display: block; /* Hide the text; just using it for sizing */ visibility: hidden;
}
fieldset.markdown {
position: relative; border: none; margin: 0; padding: 0;
}
split {
width: 960px; margin: 0 auto;
} split post-editor {
width: 960px; float: left;
} @media only screen and (max-device-width: 480px) {
#split #post-editor { width: 310px; padding: 5px; }
} split fullscreen {
float: right; position: relative; top: 35px; border: 0 none;
} @media only screen and (max-device-width: 480px) {
#split #fullscreen { display: none; }
}
.fullScreen fullscreen {
visibility: hidden;
}
.markdown:before {
display: block; content: ""; width: 39px; height: 24px; position: absolute; top: 4px; left: -60px; background: url(/assets/markdown.png) no-repeat top left;
}
text-title {
margin: 23px 0 0 0;
} @media only screen and (max-device-width: 480px) {
#text-title { margin: 0; }
}
text-content {
margin-top: -25px;
} @media only screen and (max-device-width: 480px) {
#text-content { margin-top: -45px; }
}
post-title {
width: 100%; border: none; background: none; line-height: 45px;
}
post-content {
border: none; width: 100%; position: relative; margin: 0; resize: none; font-size: 20px; line-height: 30px;
} @media only screen and (max-device-width: 480px) {
#post-content { font-size: 15px; line-height: 20px; }
} post-content.scrolled {
border-top: 1px solid rgba(30, 30, 30, 0.1);
}
textarea#post-title {
resize: none; font-family: 'Asap', sans-serif; font-size: 40px; font-weight: normal;
} @media only screen and (max-device-width: 480px) {
textarea#post-title { font-size: 25px; }
}
form .permalink {
position: absolute; left: -34px; top: 12px; border: none; color: #ddd;
}
.admin-view {
font-size: 11px; margin: 0 10px 2px 0; font-weight: 900; text-transform: uppercase;
}
nav.pagination {
text-align: right; font-size: 16px; font-weight: 900; text-transform: uppercase; margin: 0; padding: 0;
}
nav.pagination a {
margin-left: 10px;
}
body {
margin: 0;
}
.settings .settings-bd {
border: 4px solid #000; border-top: none; background: #fff; margin: 0 auto; padding: 10px 20px; width: 760px;
} .settings .admin-btn {
float: right; margin-top: 30px;
} .settings .left-col {
display: inline-block; width: 350px;
}
publish-bar input.post-saving {
background: #40A4FB;
}
@media only screen and (max-device-width: 480px) {
#publish-bar .delete-bar, #publish-bar #draft_label { display: none; }
}