html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
font-size: 0;
font-family: 'Inconsolata', monospace;
}
.editor {
display: flex;
flex-direction: column;
}
h1 {
color: #ccc;
flex: none;
font-weight: normal;
font-size: 28px;
margin: 20px 40px;
padding-right: 40px;
position: relative;
display: inline-block;
}
.home {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
height: 16px;
color: #999;
text-decoration: none;
font-size: 16px;
}
.home:hover {
text-decoration: underline;
}
.file-list a {
display: block;
font-size: 24px;
color: #333;
padding: 20px 40px;
transition: background .2s;
text-decoration: none;
}
.file-list a:hover {
background-color: #eee;
}
textarea {
flex: auto;
-webkit-appearance: none;
border: none;
background: none;
padding: 40px;
padding-top: 0;
font: inherit;
font-size: 16px;
line-height: 1.5;
color: #333;
}
textarea:focus {
outline: none;
}
.new-file {
-webkit-appearance: none;
font: inherit;
color: #333;
border: none;
background: none;
cursor: pointer;
border-bottom: 1px solid transparent;
}
.new-file:focus {
cursor: auto;
outline: none;
border-bottom-color: #ccc;
}
.new-file::-webkit-input-placeholder {
color: #ccc;
}