artifact 0.0.2

data/lib/artifact/public/css/dropzone.css

@@ -0,0 +1,155 @@
+/* The MIT License */
+.dropzone,
+.dropzone *,
+.dropzone-previews,
+.dropzone-previews * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.dropzone {
+  position: relative;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: rgba(0,0,0,0.02);
+  padding: 1em;
+}
+.dropzone.dz-clickable {
+  cursor: pointer;
+}
+.dropzone.dz-clickable .dz-message,
+.dropzone.dz-clickable .dz-message span {
+  cursor: pointer;
+}
+.dropzone.dz-clickable * {
+  cursor: default;
+}
+.dropzone .dz-message {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.dropzone.dz-drag-hover {
+  border-color: rgba(0,0,0,0.15);
+  background: rgba(0,0,0,0.04);
+}
+.dropzone.dz-started .dz-message {
+  display: none;
+}
+.dropzone .dz-preview,
+.dropzone-previews .dz-preview {
+  background: rgba(255,255,255,0.8);
+  position: relative;
+  display: inline-block;
+  margin: 17px;
+  vertical-align: top;
+  border: 1px solid #acacac;
+  padding: 6px 6px 6px 6px;
+}
+.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
+.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
+  display: none;
+}
+.dropzone .dz-preview .dz-details,
+.dropzone-previews .dz-preview .dz-details {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  background: #ebebeb;
+  padding: 5px;
+  margin-bottom: 22px;
+}
+.dropzone .dz-preview .dz-details .dz-filename,
+.dropzone-previews .dz-preview .dz-details .dz-filename {
+  overflow: hidden;
+  height: 100%;
+}
+.dropzone .dz-preview .dz-details img,
+.dropzone-previews .dz-preview .dz-details img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+}
+.dropzone .dz-preview .dz-details .dz-size,
+.dropzone-previews .dz-preview .dz-details .dz-size {
+  position: absolute;
+  bottom: -28px;
+  left: 3px;
+  height: 28px;
+  line-height: 28px;
+}
+.dropzone .dz-preview.dz-error .dz-error-mark,
+.dropzone-previews .dz-preview.dz-error .dz-error-mark {
+  display: block;
+}
+.dropzone .dz-preview.dz-success .dz-success-mark,
+.dropzone-previews .dz-preview.dz-success .dz-success-mark {
+  display: block;
+}
+.dropzone .dz-preview:hover .dz-details img,
+.dropzone-previews .dz-preview:hover .dz-details img {
+  display: none;
+}
+.dropzone .dz-preview .dz-success-mark,
+.dropzone-previews .dz-preview .dz-success-mark,
+.dropzone .dz-preview .dz-error-mark,
+.dropzone-previews .dz-preview .dz-error-mark {
+  display: none;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  font-size: 30px;
+  text-align: center;
+  right: -10px;
+  top: -10px;
+}
+.dropzone .dz-preview .dz-success-mark,
+.dropzone-previews .dz-preview .dz-success-mark {
+  color: #8cc657;
+}
+.dropzone .dz-preview .dz-error-mark,
+.dropzone-previews .dz-preview .dz-error-mark {
+  color: #ee162d;
+}
+.dropzone .dz-preview .dz-progress,
+.dropzone-previews .dz-preview .dz-progress {
+  position: absolute;
+  top: 100px;
+  left: 6px;
+  right: 6px;
+  height: 6px;
+  background: #d7d7d7;
+  display: none;
+}
+.dropzone .dz-preview .dz-progress .dz-upload,
+.dropzone-previews .dz-preview .dz-progress .dz-upload {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 0%;
+  background-color: #8cc657;
+}
+.dropzone .dz-preview.dz-processing .dz-progress,
+.dropzone-previews .dz-preview.dz-processing .dz-progress {
+  display: block;
+}
+.dropzone .dz-preview .dz-error-message,
+.dropzone-previews .dz-preview .dz-error-message {
+  display: none;
+  position: absolute;
+  top: -5px;
+  left: -20px;
+  background: rgba(245,245,245,0.8);
+  padding: 8px 10px;
+  color: #800;
+  min-width: 140px;
+  max-width: 500px;
+  z-index: 500;
+}
+.dropzone .dz-preview:hover.dz-error .dz-error-message,
+.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
+  display: block;
+}

data/lib/artifact/public/css/main.css

@@ -0,0 +1,222 @@
+/*
+-----------------------------------------
+Artifact CSS
+By Tomas Pollak, Fork Ltd. (forkhq.com)
+GPLv3
+-----------------------------------------
+*/
+
+html{
+  background-color: #fafafa;
+}
+
+body {
+  background-color: #fff;
+}
+
+/* container
+-------------------------------------------------------------*/
+
+#main{
+  background: #fff;
+  margin-top: 50px;
+  padding-bottom: 40px;
+  position: relative;
+}
+
+/* fonts
+-------------------------------------------------------------*/
+
+
+html,body,div,p,input,button,select{
+  font-family: "Open Sans", Arial, sans-serif;
+}
+
+h1, h2, h3, button, input[type=submit]{
+  font-family: 'Lato', Helvetica, sans-serif;
+}
+
+h1 {
+  margin-bottom: 18px;
+}
+
+h2 {
+  margin-bottom: 10px;
+}
+
+/* form elements, buttons
+--------------------------------------------------------------*/
+
+.form input[type=text],
+.form input[type=password],
+.form input[type=email],
+.form input[type=search],
+.form textarea {
+  border-width: 2px;
+}
+
+.btn {
+  border: 2px solid #ccc;
+  color: #ccc;
+  border-radius: 5px;
+  background: none;
+  font-weight: 900;
+}
+
+.btn-primary {
+  border-color: #0078e7;
+  color: #0078e7;
+}
+
+.btn-success {
+  border-color: #40bd4f;
+  color: #40bd4f;
+}
+
+.btn-danger {
+  border-color: #d6564b;
+  color: #d6564b;
+}
+
+.btn:hover, .btn:focus {
+  border-color: #000;
+  color: #000;
+  background: none;
+}
+
+.dark .btn:hover, .dark .btn:focus  {
+  border-color: #fff;
+  color: #fff;
+}
+
+.menu .btn {
+  position: relative;
+  top: 3px;
+}
+
+
+/* search
+--------------------------------------------------------------*/
+
+#search-input {
+  width: 150px;
+}
+
+/* uploads
+--------------------------------------------------------------*/
+
+#uploads-bar {
+  width: 100%;
+  background: #333;
+  opacity: 0.85;
+  padding: 10px 0;
+}
+
+#uploads-bar:hover {
+  opacity: 1;
+}
+
+#uploads-bar li {
+  display: inline-block;
+  position: relative;
+  margin-right: 10px;
+}
+
+#uploads-bar img {
+  max-height: 100px;
+  padding: 4px;
+}
+
+#uploads-bar .insert-image {
+  position: absolute;
+  right: 10px;
+  bottom: 5px;
+}
+
+
+/* post list
+-------------------------------------------------------------*/
+
+.post-list {
+  margin: 30px 0 20px 0;
+  padding-top: 10px;
+}
+
+.post-list li {
+  border-bottom: 1px solid #ddd;
+  padding: 15px 0;
+  position: relative;
+  list-style: none;
+  font-size: 12px;
+}
+
+.post-list .links {
+  position: absolute;
+  right: 0;
+  top: 14px;
+  background: #fff;
+  padding: 0px 8px;
+  visibility: hidden;
+}
+
+.post-list li:hover .links {
+  visibility: visible;
+}
+
+.post-list li .btn {
+  padding: 2px 7px;
+}
+
+/* post edit
+-------------------------------------------------------------*/
+
+#post-meta {
+  width: 500px;
+  z-index: 10;
+  border: 3px solid #ccc;
+  border-radius: 5px;
+  background: #f2f2f2;
+}
+
+#post-title,
+#post-content {
+  width: 100%;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+#post-title {
+  font-size: 30px;
+  border-bottom: 1px solid #ccc;
+}
+
+#post-content {
+  resize: none;
+  font-size: 20px;
+  line-height: 30px;
+}
+
+/* footer
+-------------------------------------------------------------*/
+
+#footer {
+  background-color: #fafafa;
+  text-align: center;
+  padding:10px 5%;
+  line-height: 150%;
+  border-top: 1px solid #ddd;
+  padding-top:10px;
+}
+
+#footer p {
+  color: #999;
+  font-size: 85%;
+}
+
+#footer p a {
+  color: #999;
+  text-decoration: underline;
+}

data/lib/artifact/public/css/pagoda.css

@@ -0,0 +1,782 @@
+/* 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[type=text] {
+  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[type=submit],
+#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[type=submit]: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[type=submit].post-saving {
+  background: #40A4FB;
+}
+
+@media only screen and (max-device-width: 480px) {
+  #publish-bar .delete-bar, #publish-bar #draft_label {
+    display: none;
+  }
+}