From 3ba243a66a8865b8f7cdf43cef06ff06b0ee37a0 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Fri, 30 Aug 2024 05:10:11 +0300 Subject: [PATCH] Use flex layout on error pages --- app/assets/stylesheets/errors.scss | 43 +++++++++++++++++++++++------- app/views/layouts/error.html.erb | 14 +++++----- 2 files changed, 42 insertions(+), 15 deletions(-) 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" %> - -
- <%= yield %> -
+
+ +
+ <%= yield %> +
+
-- 2.39.5