fcc-challenges/markdown-previewer/markdownPreviewer.css

122 lines
1.8 KiB
CSS
Raw Normal View History

2020-04-05 04:46:13 -07:00
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;
}
#reloadButton {
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) {
2020-04-05 04:46:13 -07:00
#editorAndPreview {
flex-direction: row;
justify-content: flex-end;
}
#textEditor, #preview {
width: 50vw;
height: 95vh;
}
#editor {
resize: none;
width: 100%;
height: 100%;
padding-bottom: 3%;
2020-04-05 04:46:13 -07:00
}
@media (max-device-height: 425px) {
#textEditor, #preview {
height: 90vh;
}
2020-04-05 04:46:13 -07:00
}
}