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 { body {
margin: 1rem;
margin-top: 2rem;
font-family: system-ui; font-family: system-ui;
} }
.logo { main {
float: left; display: flex;
margin: 10px; flex-direction: column;
align-items: center;
gap: 1rem 2rem;
max-width: 960px;
img { .logo {
display: block; flex-shrink: 0;
max-width: 100%;
height: auto; img {
display: block;
max-width: 100%;
height: auto;
}
}
.details {
h1 {
margin-top: 0;
}
} }
} }
.details { @media (min-width: 640px) {
float: left; 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" %> <%= render :partial => "layouts/meta" %>
</head> </head>
<body> <body>
<a href="<%= root_path %>" class="logo"> <main>
<%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %> <a href="<%= root_path %>" class="logo">
</a> <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %>
<div class="details"> </a>
<%= yield %> <div class="details">
</div> <%= yield %>
</div>
</main>
</body> </body>
</html> </html>