cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use flex layout on error pages

Browse source
This commit is contained in:
Anton Khorev 2024-08-30 05:10:11 +03:00
parent fa58f34b2c
commit 3ba243a66a
2 changed files with 42 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

43
app/assets/stylesheets/errors.scss
View file

@ -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;
}
}
}

14
app/views/layouts/error.html.erb
View file

@ -7,11 +7,13 @@
<%= render :partial => "layouts/meta" %>
</head>
<body>
<a href="<%= root_path %>" class="logo">
<%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %>
</a>
<div class="details">
<%= yield %>
</div>
<main>
<a href="<%= root_path %>" class="logo">
<%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %>
</a>
<div class="details">
<%= yield %>
</div>
</main>
</body>
</html>