Browse Source

Correction affichage sur mobile

2020
Norore 2 years ago
parent
commit
d981bfb260
  1. 16
      source/_asso.erb
  2. 57
      source/stylesheets/site.css.scss

16
source/_asso.erb

@ -12,23 +12,29 @@
<h2 class="mtm">Nous contacter</h2>
<div id="contact" class="autogrid has-gutter">
<div id="contact" class="autogrid has-gutter">
<div>
<a href="mailto:bureau@passageenseine.fr" title="Courriel, ouvre une nouvelle fenêtre" alt="Courriel" target="_blank">
<%= svg_image_tag 'logos.svg', 'email' %>
</a>
</a>
</div>
<div>
<a href="https://mamot.fr/@passageenseine" title="Mastodon, ouvre une nouvelle fenêtre" alt="Mastodon" target="_blank">
<%= svg_image_tag 'logos.svg', 'mastodon' %>
</a>
</a>
</div>
<div>
<a href="https://twitter.com/passageenseine" title="Twitter, ouvre une nouvelle fenêtre" alt="Twitter" target="_blank">
<%= svg_image_tag 'logos.svg', 'twitter' %>
</a>
</a>
</div>
</div>
<h2 class="mtm">Nos partenaires</h2>
<div id="sponsors" class="autogrid has-gutter">
<% data.partners.each do |k, p| %>
<% content_tag :div, id: k do %>
<% content_tag :div do %>
<% link_to p.link, title: p.name, alt: p.name, target: :_blank do %>
<%= image_tag p.logo %>
<% end %>

57
source/stylesheets/site.css.scss

@ -64,13 +64,12 @@ nav[role="navigation"] label.menu {
nav[role="navigation"] label.menu {
display: inline;
width: 100%;
/*font-size: 3rem;*/
margin-top: 1rem;
margin-top: .5rem;
}
nav[role="navigation"] label.menu:after {
position: absolute;
right: .25em;
top: 0;
right: 1.5rem;
top: 1.5rem;
content: "\2261";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
@ -80,6 +79,12 @@ nav[role="navigation"] label.menu {
display: block;
font-size: 1.5rem;
}
.w50, .w60 {
width: 90%;
}
.pal {
padding: 1rem;
}
}
section div.descriptions {
@ -163,10 +168,11 @@ section div.descriptions {
}
#contact svg, #sponsors img {
max-width: 200px;
max-width: 20rem;
max-height: 20rem;
background-color: $bg;
padding: 15px;
border-radius: 30px;
padding: 1.5rem;
border-radius: 3rem;
}
/* Modals */
@ -275,6 +281,23 @@ progress {
}
}
@media screen and (max-width: 800px) {
#festival {
font-size: inherit;
}
[data-modal] {
border-radius: 2rem;
padding: 2rem;
padding-top: 4rem;
}
#contact svg, #sponsors img {
max-width: 10rem;
max-height: 10rem;
padding: 1rem;
border-radius: 1rem;
}
}
#needs {
.list {
display: flex;
@ -290,3 +313,23 @@ progress {
}
}
}
@media screen and (max-width: 800px) {
#needs {
.list {
display: block;
& > ul {
padding-top: 1rem;
}
}
}
#location {
display: block;
padding: 2rem;
padding-top: 4rem;
& > img {
margin: 0;
padding-bottom: 2rem;
}
}
}
Loading…
Cancel
Save