diff --git a/src/index.js b/src/index.js
index f8aa457..dd3fcdd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,6 @@
+import './style/typography.css'
import './style'
+
import App from './app'
export default App
diff --git a/src/routes/editor/index.js b/src/routes/editor/index.js
index d49bdd6..a78046c 100644
--- a/src/routes/editor/index.js
+++ b/src/routes/editor/index.js
@@ -1,16 +1,21 @@
import {h} from 'preact'
import {Link} from 'preact-router/match'
+import style from './style.css'
+
const Editor = ({markdown, setMarkdown}) => (
)
+
+ )
export default Editor
diff --git a/src/routes/editor/style.css b/src/routes/editor/style.css
new file mode 100644
index 0000000..f5fa1f2
--- /dev/null
+++ b/src/routes/editor/style.css
@@ -0,0 +1,14 @@
+.textarea {
+ font-family: 'Fira Code', monospace;
+ display: block;
+ resize: vertical;
+ min-height: 50vh;
+ width: 100%;
+ box-sizing: border-box;
+ outline: none;
+
+ border: 4px solid hsl(0, 0%, 0%, 0.7);
+ padding: 0.7em 1em;
+
+ margin-bottom: 1em;
+}
diff --git a/src/style/index.css b/src/style/index.css
index 0671a37..684a288 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -1,3 +1,81 @@
-html, body {
+/* Links */
+a {
+ border-bottom: 2px solid hsl(0, 0%, 0%, 0.2);
+ color: inherit;
+ text-decoration: none;
+}
+
+a:focus {
+ background-color: hsl(0, 0%, 0%, 0.1);
+}
+
+a:hover {
+ border-color: currentColor;
+}
+
+/* Code and quotes*/
+
+pre, blockquote {
+ border-left: 4px solid hsl(0, 0%, 0%, 0.7);
+ margin-left: 0;
+ padding-left: 1.0rem;
+}
+
+pre {
+ background-color: hsl(0, 0%, 0%, 0.04);
+ overflow-x: auto;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+pre > code {
+ background-color: unset;
+ padding: 0;
+}
+
+code {
+ font-family: 'Fira Code', monospace;
+ background-color: hsl(0, 0%, 0%, 0.04);
+ padding: 0.2rem 0.4rem;
+}
+
+/* Lists */
+
+ul {
+ list-style: square;
+}
+
+/* Layout */
+
+main {
+ box-sizing: content-box;
+ max-width: 45rem;
+ padding: 3% 5%;
+}
+
+header ul {
+ display: flex;
+ flex-wrap: wrap;
+ font-size: 1.5rem;
+ list-style: none;
+ margin: 0;
+ margin-bottom: 3%;
+}
+
+header li {
+ margin-bottom: 0;
+}
+
+header li::after {
+ content: ' / ';
+ white-space: pre;
+}
+
+header li:last-child::after {
+ content: '';
+}
+
+footer {
+ color: hsl(0, 0%, 0%, 0.6);
}
diff --git a/src/style/typography.css b/src/style/typography.css
new file mode 100644
index 0000000..c97f0e6
--- /dev/null
+++ b/src/style/typography.css
@@ -0,0 +1 @@
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font:112.5%/1.5 'Open Sans',sans-serif;box-sizing:border-box;overflow-y:scroll;}*{box-sizing:inherit;}*:before{box-sizing:inherit;}*:after{box-sizing:inherit;}body{color:hsl(0, 0%, 0%, 0.8);font-family:'Open Sans',sans-serif;font-weight:normal;word-wrap:break-word;font-kerning:normal;-moz-font-feature-settings:"kern", "liga", "clig", "calt";-ms-font-feature-settings:"kern", "liga", "clig", "calt";-webkit-font-feature-settings:"kern", "liga", "clig", "calt";font-feature-settings:"kern", "liga", "clig", "calt";}img{max-width:100%;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}h1{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:hsl(0, 0%, 0%, 0.7);font-family:'Open Sans Condensed',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:3rem;line-height:1.1;}h2{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:hsl(0, 0%, 0%, 0.7);font-family:'Open Sans Condensed',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1.93318rem;line-height:1.1;}h3{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:hsl(0, 0%, 0%, 0.7);font-family:'Open Sans Condensed',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1.55185rem;line-height:1.1;}h4{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:hsl(0, 0%, 0%, 0.7);font-family:'Open Sans Condensed',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.1;}h5{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:hsl(0, 0%, 0%, 0.7);font-family:'Open Sans Condensed',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:0.80274rem;line-height:1.1;}h6{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;color:hsl(0, 0%, 0%, 0.7);font-family:'Open Sans Condensed',sans-serif;font-weight:bold;text-rendering:optimizeLegibility;font-size:0.71922rem;line-height:1.1;}hgroup{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}ul{margin-left:1.5rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;list-style-position:outside;list-style-image:none;}ol{margin-left:1.5rem;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;list-style-position:outside;list-style-image:none;}dl{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}dd{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}p{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}figure{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}pre{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;font-size:0.85rem;line-height:1.5rem;}table{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;font-size:1rem;line-height:1.5rem;border-collapse:collapse;width:100%;}fieldset{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}blockquote{margin-left:1.5rem;margin-right:1.5rem;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}form{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}noscript{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}iframe{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}hr{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:calc(1.5rem - 1px);background:hsla(0,0%,0%,0.2);border:none;height:1px;}address{margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:1.5rem;}b{font-weight:bold;}strong{font-weight:bold;}dt{font-weight:bold;}th{font-weight:bold;}li{margin-bottom:calc(1.5rem / 2);}ol li{padding-left:0;}ul li{padding-left:0;}li > ol{margin-left:1.5rem;margin-bottom:calc(1.5rem / 2);margin-top:calc(1.5rem / 2);}li > ul{margin-left:1.5rem;margin-bottom:calc(1.5rem / 2);margin-top:calc(1.5rem / 2);}blockquote *:last-child{margin-bottom:0;}li *:last-child{margin-bottom:0;}p *:last-child{margin-bottom:0;}li > p{margin-bottom:calc(1.5rem / 2);}code{font-size:0.85rem;line-height:1.5rem;}kbd{font-size:0.85rem;line-height:1.5rem;}samp{font-size:0.85rem;line-height:1.5rem;}abbr{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}acronym{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;}abbr[title]{border-bottom:1px dotted hsla(0,0%,0%,0.5);cursor:help;text-decoration:none;}thead{text-align:left;}td,th{text-align:left;border-bottom:1px solid hsla(0,0%,0%,0.12);font-feature-settings:"tnum";-moz-font-feature-settings:"tnum";-ms-font-feature-settings:"tnum";-webkit-font-feature-settings:"tnum";padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:calc(0.75rem - 1px);}th:first-child,td:first-child{padding-left:0;}th:last-child,td:last-child{padding-right:0;}
\ No newline at end of file
diff --git a/src/template.html b/src/template.html
index 770c48b..5b07f36 100644
--- a/src/template.html
+++ b/src/template.html
@@ -1,15 +1,16 @@
-
-
- <% preact.title %>
-
-
-
-
- <% preact.headEnd %>
-
-
- <% preact.bodyEnd %>
-
+
+
+ <% preact.title %>
+
+
+
+
+
+ <% preact.headEnd %>
+
+
+ <% preact.bodyEnd %>
+