Fixed mobile layout

This commit is contained in:
Ignacio Rivero 2025-06-22 16:46:49 -03:00
parent 061dd04df1
commit 1cc31ca554

37
app.py
View File

@ -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">