126 lines
1.9 KiB
CSS
126 lines
1.9 KiB
CSS
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #eee8d5;
|
|
color: #073642;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#editorAndPreview {
|
|
display: flex;
|
|
}
|
|
|
|
#buttonHeader {
|
|
height: 3rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#eraseButton {
|
|
background-color: #dc322f;
|
|
color: #fdf6e3;
|
|
}
|
|
|
|
#forkOnGitHub {
|
|
font-size: x-large;
|
|
}
|
|
|
|
#reloadButton, #forkOnGitHub {
|
|
background-color: #268bd2;
|
|
color: #fdf6e3;
|
|
margin-left: 1rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
#editor {
|
|
font: monospace;
|
|
border: none;
|
|
outline: none;
|
|
background-color: #073642;
|
|
color: #eee8d5;
|
|
}
|
|
|
|
#editor, #preview {
|
|
padding: 0px 3rem 0px 3rem;
|
|
}
|
|
|
|
#preview {
|
|
overflow: auto;
|
|
}
|
|
|
|
code {
|
|
font: monospace;
|
|
background-color: LightGrey;
|
|
}
|
|
|
|
blockquote {
|
|
background: #f9f9f9;
|
|
border-left: 10px solid #ccc;
|
|
margin: 1.5em 10px;
|
|
padding: 0.5em 10px;
|
|
quotes: "\201C""\201D""\2018""\2019";
|
|
}
|
|
blockquote:before {
|
|
color: #ccc;
|
|
content: open-quote;
|
|
font-size: 4em;
|
|
line-height: 0.1em;
|
|
margin-right: 0.25em;
|
|
vertical-align: -0.4em;
|
|
}
|
|
blockquote p {
|
|
display: inline;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
#textEditor {
|
|
background-color: #073642;
|
|
}
|
|
|
|
#buttonHeader {
|
|
height: 3rem;
|
|
}
|
|
|
|
@media (orientation: portrait), (max-device-width: 768px) {
|
|
#editorAndPreview {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
#editor {
|
|
height: 30vh;
|
|
width: 100vw;
|
|
}
|
|
#preview {
|
|
overflow-y: scroll;
|
|
height: 40vh;
|
|
width: 100vw;
|
|
}
|
|
}
|
|
|
|
@media (min-device-width: 1024px), (orientation: landscape) and (max-device-height: 425px) {
|
|
#editorAndPreview {
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
#textEditor, #preview {
|
|
width: 50vw;
|
|
height: 95vh;
|
|
}
|
|
#editor {
|
|
resize: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-bottom: 3%;
|
|
}
|
|
@media (max-device-height: 425px) {
|
|
#textEditor, #preview {
|
|
height: 90vh;
|
|
}
|
|
}
|
|
}
|