Fixed mobile layout
This commit is contained in:
parent
061dd04df1
commit
1cc31ca554
37
app.py
37
app.py
@ -58,7 +58,7 @@ HTML_FORM = '''
|
|||||||
box-shadow: 0 0 12px 0 #000a;
|
box-shadow: 0 0 12px 0 #000a;
|
||||||
padding: 2em 2em 1.5em 2em;
|
padding: 2em 2em 1.5em 2em;
|
||||||
color: #b6c8e0;
|
color: #b6c8e0;
|
||||||
font-size: 1.08em;
|
font-size: 1.08rem;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -67,7 +67,7 @@ HTML_FORM = '''
|
|||||||
.markdown-ref h4 {
|
.markdown-ref h4 {
|
||||||
margin: 0 0 0.4em 0;
|
margin: 0 0 0.4em 0;
|
||||||
color: #88e0ff;
|
color: #88e0ff;
|
||||||
font-size: 1.12em;
|
font-size: 1.12rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.01em;
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
@ -83,7 +83,7 @@ HTML_FORM = '''
|
|||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
padding: 0.12em 0.46em;
|
padding: 0.12em 0.46em;
|
||||||
color: #aef6cb;
|
color: #aef6cb;
|
||||||
font-size: 0.98em;
|
font-size: 0.98rem;
|
||||||
margin-left: 0.18em;
|
margin-left: 0.18em;
|
||||||
}
|
}
|
||||||
textarea {
|
textarea {
|
||||||
@ -94,7 +94,7 @@ HTML_FORM = '''
|
|||||||
border: 1.5px solid #444;
|
border: 1.5px solid #444;
|
||||||
background: #181c1f;
|
background: #181c1f;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
font-size: 1.06em;
|
font-size: 1.06rem;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
font-family: 'DejaVu Sans Mono', 'Fira Mono', 'monospace';
|
font-family: 'DejaVu Sans Mono', 'Fira Mono', 'monospace';
|
||||||
@ -111,7 +111,7 @@ HTML_FORM = '''
|
|||||||
background: linear-gradient(90deg, #8ee3c1, #35a7ff);
|
background: linear-gradient(90deg, #8ee3c1, #35a7ff);
|
||||||
color: #222;
|
color: #222;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.12em;
|
font-size: 1.12rem;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0.7em;
|
border-radius: 0.7em;
|
||||||
padding: 0.5em 1.6em;
|
padding: 0.5em 1.6em;
|
||||||
@ -150,7 +150,7 @@ HTML_FORM = '''
|
|||||||
}
|
}
|
||||||
.status-msg {
|
.status-msg {
|
||||||
margin: 0.6em 0 0.1em 0;
|
margin: 0.6em 0 0.1em 0;
|
||||||
font-size: 1.12em;
|
font-size: 1.12rem;
|
||||||
border-radius: 0.7em;
|
border-radius: 0.7em;
|
||||||
background: #294b3a;
|
background: #294b3a;
|
||||||
color: #9fffc6;
|
color: #9fffc6;
|
||||||
@ -167,7 +167,14 @@ HTML_FORM = '''
|
|||||||
box-shadow: 0 0 8px #22000690;
|
box-shadow: 0 0 8px #22000690;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
|
body {
|
||||||
|
font-size: 1.28em !important; /* Big bump */
|
||||||
|
}
|
||||||
|
h2, h3, h4 {
|
||||||
|
font-size: 2em !important;
|
||||||
|
}
|
||||||
|
|
||||||
.centered-flex {
|
.centered-flex {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -178,11 +185,26 @@ HTML_FORM = '''
|
|||||||
.form-card,
|
.form-card,
|
||||||
.preview-card,
|
.preview-card,
|
||||||
.markdown-ref {
|
.markdown-ref {
|
||||||
|
font-size: 1.18em !important;
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0.8em 0;
|
margin: 0.8em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
font-size: 1.16em !important;
|
||||||
|
padding: 1em;
|
||||||
|
min-height: 12em;
|
||||||
|
}
|
||||||
|
.status-msg {
|
||||||
|
font-size: 1.25em !important;
|
||||||
|
padding: 0.8em 1.6em;
|
||||||
|
}
|
||||||
|
button[type=submit] {
|
||||||
|
font-size: 1.3em !important;
|
||||||
|
padding: 0.9em 2.2em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.print-frame {
|
.print-frame {
|
||||||
@ -222,6 +244,7 @@ HTML_FORM = '''
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<div class="centered-flex">
|
<div class="centered-flex">
|
||||||
<div class="form-card">
|
<div class="form-card">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user