diff --git a/flaskr/static/styles.css b/flaskr/static/styles.css index 1a8da65..67e86ff 100644 --- a/flaskr/static/styles.css +++ b/flaskr/static/styles.css @@ -6,11 +6,71 @@ body { min-height: 90%; text-size: 150%; line-height: 200%; - width: 40vw; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; + font-family: sans; +} + +/* Small screens */ +@media only screen and (max-width: 1080px) { + body { + width: 95vw; + font-size: 200%; + } + h1 { + font-size: 400%; + } + h2 { + font-size: 300%; + line-height: 100%; + margin-top: 0; + margin-bottom: 0; + } + label { + font-size: 150%; + } + input { + font-size: 200%; + width: 100%; + } + form { + width: 90%; + } + dd { + margin-bottom: 2em; + margin-left: 0; + } + textarea { + width: 80vw; + font-size: 250%; + } + .bigtext { + min-height: 40vh; + } +} + +/* Big screens */ +@media only screen and (min-width: 1081px) { + body { + width: 40vw; + } + h1 { + font-size: 3em; + } + .content, .ret { + font-size: 1.2em; + } + img, small { + width: 30vw; + } + small { + font-size: 100%; + } + #closingtext { + width: 50%; + } } form { @@ -30,7 +90,6 @@ dd { } textarea { - width: 90%; flex-grow: 1; } @@ -41,7 +100,3 @@ textarea { #body { flex-grow: 1; } - -#closingtext { - width: 50%; -} diff --git a/flaskr/templates/_formhelpers.html b/flaskr/templates/_formhelpers.html index e5056e1..a058f0b 100644 --- a/flaskr/templates/_formhelpers.html +++ b/flaskr/templates/_formhelpers.html @@ -1,5 +1,5 @@ {% macro render_field(field, extra="") %} -
{{ field.label }}: +
{{ field.label }}
{{ field(**kwargs)|safe }} {% if field.errors %}