From: Anton Khorev Date: Fri, 30 Aug 2024 02:10:11 +0000 (+0300) Subject: Use flex layout on error pages X-Git-Tag: live~148^2~1 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/3ba243a66a8865b8f7cdf43cef06ff06b0ee37a0 Use flex layout on error pages --- diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss index 58650785c..77b440a88 100644 --- a/app/assets/stylesheets/errors.scss +++ b/app/assets/stylesheets/errors.scss @@ -1,18 +1,43 @@ body { + margin: 1rem; + margin-top: 2rem; font-family: system-ui; } -.logo { - float: left; - margin: 10px; +main { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem 2rem; + max-width: 960px; - img { - display: block; - max-width: 100%; - height: auto; + .logo { + flex-shrink: 0; + + img { + display: block; + max-width: 100%; + height: auto; + } + } + + .details { + h1 { + margin-top: 0; + } } } -.details { - float: left; +@media (min-width: 640px) { + body { + margin: 2rem; + } + + main { + flex-direction: row; + + .logo { + align-self: start; + } + } } diff --git a/app/views/layouts/error.html.erb b/app/views/layouts/error.html.erb index 5b8e11752..40b116aa8 100644 --- a/app/views/layouts/error.html.erb +++ b/app/views/layouts/error.html.erb @@ -7,11 +7,13 @@ <%= render :partial => "layouts/meta" %> - - <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %> - -

- <%= yield %> -

+ + <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %> + +

+ <%= yield %> +