tabloid-fake-closure/static/css/main.css

242 lines
3.6 KiB
CSS
Raw Normal View History

2020-09-24 05:45:33 -04:00
html {
--ff-mono: 'IBM Plex Mono', monospace;
--ff-sans: 'IBM Plex Sans', sans-serif;
--ff-tabloid: 'Alfa Slab One', sans-serif;
font-size: 18px;
}
2020-09-24 07:30:52 -04:00
/* blocks.css bug shim */
.fixed.inline.block {
pointer-events: none;
line-height: 1.5em;
}
2020-09-24 06:42:23 -04:00
/* resets */
2020-09-24 05:45:33 -04:00
html,
body {
--block-accent-color: #e02345;
margin: 0;
2020-09-24 06:42:23 -04:00
background: #f8f5f5;
2020-09-24 05:45:33 -04:00
}
main {
width: calc(100% - 1.5em);
max-width: 840px;
margin: 1em auto;
font-family: var(--ff-sans);
}
h1,
h2,
h3 {
font-family: var(--ff-tabloid);
font-weight: normal;
color: var(--block-accent-color);
2020-09-24 06:42:23 -04:00
margin: .5rem 0;
}
p {
margin-top: .5em;
margin-bottom: 1em;
2020-09-24 05:45:33 -04:00
}
2020-09-24 06:42:23 -04:00
button {
font-size: 1em;
}
code,
2020-09-24 05:45:33 -04:00
input,
textarea {
font-family: var(--ff-mono);
}
2020-09-24 06:42:23 -04:00
/* layout */
header,
footer {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 3em;
}
nav {
margin: .8em 0;
2020-09-24 07:30:52 -04:00
width: 96%;
max-width: 400px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
2020-09-24 06:42:23 -04:00
}
nav a {
color: var(--block-accent-color);
}
header .subtitle {
font-size: 1.2em;
2020-09-24 07:30:52 -04:00
line-height: 1.5em;
2020-09-24 06:42:23 -04:00
}
header .lang.block {
--block-background-color: #000;
font-size: 1.4em;
font-family: var(--ff-tabloid);
font-weight: normal;
color: #fff;
display: inline-block; /* for transforms */
2020-09-24 07:30:52 -04:00
transform: rotate(-10deg) translateY(6px);
2020-09-24 06:42:23 -04:00
pointer-events: none;
}
.editor {
display: flex;
flex-direction: column;
position: relative;
margin-bottom: 3em;
}
.editor .code,
.editor .output,
.editor .errors {
width: 100%;
2020-09-24 07:30:52 -04:00
padding: .8em 1em;
2020-09-24 06:42:23 -04:00
border-bottom: 3px solid var(--block-text-color);
box-sizing: border-box;
}
.editor > :last-child {
border-bottom: 0;
}
.editor.block {
padding: 0;
2020-09-24 07:30:52 -04:00
padding-top: 24px;
2020-09-24 06:42:23 -04:00
}
.editor .controls {
position: absolute;
top: -24px;
right: 0;
width: 100%;
box-sizing: border-box;
padding: 0 1em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
2020-09-24 07:30:52 -04:00
.editor .code {
padding: 0;
position: relative;
}
2020-09-24 06:42:23 -04:00
.editor .output {
min-height: 5em;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.5em;
}
.editor .output .output-line {
width: 100%;
}
.editor .errors {
color: var(--block-accent-color);
}
.filler,
textarea.editor-input {
font-family: var(--ff-mono);
font-size: 1em;
line-height: 1.3em;
margin: 0;
2020-09-24 06:42:23 -04:00
padding: .5em 1em;
border: 0;
width: 100%;
box-sizing: border-box;
overflow-y: auto;
resize: none;
white-space: pre-wrap;
2020-09-24 06:42:23 -04:00
}
textarea.editor-input {
position: absolute;
background: var(--block-background-color);
top: 0;
left: 0;
right: 0;
bottom: 0;
2020-10-02 16:36:42 -04:00
width: 100%;
height: 100%;
2020-09-24 06:42:23 -04:00
}
textarea.editor-input:focus {
outline: none;
}
.filler p {
margin: 0;
padding: 0;
word-wrap: break-word;
}
.output .no-output {
color: #777;
}
2020-09-24 07:30:52 -04:00
main > h2 {
margin-top: 1.5em;
}
main > p,
2020-09-24 08:37:50 -04:00
main > ul li,
footer {
2020-09-24 07:30:52 -04:00
line-height: 1.5em;
}
main > ul {
padding-left: 0;
}
2020-09-24 07:30:52 -04:00
main > ul li {
list-style: none;
2020-09-24 07:30:52 -04:00
margin-bottom: .5em;
}
main > p a {
color: var(--block-accent-color);
}
footer {
margin-top: 2em;
}
2020-09-24 06:42:23 -04:00
footer a {
color: var(--block-accent-color);
}
2020-09-24 07:30:52 -04:00
@media only screen and (max-width: 600px) {
header .subtitle {
line-height: 1.7em;
}
header .lang.block {
transform: rotate(-5deg) translateY(4px);
}
.filler,
textarea.editor-input {
font-size: .8em;
}
2020-09-24 08:22:22 -04:00
.desktop {
display: none;
}
2020-09-24 07:30:52 -04:00
}