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

Refactor About header to use bootstrap and flex

Browse source 
This reduces the amount of custom CSS required for the layout, and
makes it responsive on small screen sizes.
This commit is contained in:
Andy Allan 2021-06-30 15:21:49 +01:00
parent 04ac7d9c03
commit 0c7ad10573
2 changed files with 13 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/assets/stylesheets/common.scss
View file

@ -1738,48 +1738,20 @@ div.secondary-actions {
background-size: cover;
background-attachment: fixed;
.content-inner {
position: relative;
color: #333;
min-width: 320px;
max-width: 640px;
}
.text {
background: white;
padding: 40px;
max-width: 760px;
}
.attr {
position: relative;
padding: 170px 40px 20px;
background: #333;
background: rgba(0, 0, 0, .8);
margin-bottom: 0;
margin-top: -20px;
h1 {
display: block;
color: white;
font-weight: 300;
font-size: 28px;
span {
color: $vibrant-green;
}
}
@include media-breakpoint-up(sm) {
h1 {
font-size: 34px;
}
}
.user-image {
position: absolute;
top: 0px;
right: 240px;
left: 0px;
height: 150px;
background-position: 0 50%;
background-repeat: no-repeat;
@ -1789,16 +1761,6 @@ div.secondary-actions {
}
.byosm {
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
width: 240px;
height: 150px;
padding: 20px 20px 20px 40px;
font: 500 20px/24px Helvetica, Arial, sans-serif;
white-space: nowrap;
color: #fff;
background: $vibrant-green;
}

20
app/views/site/about.html.erb
View file

@ -1,15 +1,19 @@
<%= tag.div :lang => @locale, :dir => t("html.dir", :locale => @locale) do %>
<div class='attr'>
<div class='byosm'>
<%= t ".copyright_html", :locale => @locale %>
<div class="container-lg attr">
<div class='row'>
<div class='col-sm-7 user-image'></div>
<div class='col-sm-5 px-5 py-3 byosm'>
<h5 class='text-white text-nowrap'><%= t ".copyright_html", :locale => @locale %></h4>
</div>
</div>
<div class='row'>
<div class="w-100 px-5 py-4 bg-dark">
<h1 class="text-white font-weight-light"><%= t ".used_by_html", :name => tag.span("OpenStreetMap", :class => "user-name"), :locale => @locale %></h1>
</div>
</div>
<div class='user-image'></div>
<h1><%= t ".used_by_html", :name => tag.span("OpenStreetMap", :class => "user-name"), :locale => @locale %></h1>
</div>
<div class='text'>
<div class='bg-white px-5 py-4'>
<div class='section'>
<p><strong><%= t ".lede_text", :locale => @locale %></strong></p>
<h2><div class='icon local'></div><%= t ".local_knowledge_title", :locale => @locale %></h2>