Kelder/durfdoen-2.0
33
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improve styles for smaller screens

Browse source
This commit is contained in:
Ilion Beyst 2020-09-18 15:16:45 +02:00
parent 8b4d8186f7
commit 08a3460dcd
2 changed files with 43 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
content/stylesheets/main.css
View file

@ -238,6 +238,10 @@ details[open] {
margin: 0;
width: 100%;
}
.detail_title > h2 {
width: 100%;
}
}
/* Large screens */
@ -657,6 +661,7 @@ h2 {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-around;
flex-wrap: wrap;
gap: 12px;
}
@ -687,11 +692,13 @@ h2 {
text-align: center;
}
.social-container {
margin: auto;
}
.social-container > ul {
list-style: none;
padding: 0;
/* gap: 0.5rem; */
margin: auto;
justify-content: space-around;
}
@ -700,7 +707,8 @@ h2 {
max-width: 1200px;
padding: 2rem 10%;
position: relative;
display: flex;
flex-direction: column;
}
.social {
@ -741,6 +749,12 @@ h2 {
height: 3rem;
}
.detail_title_themas {
display: flex;
gap: inherit;
}
.footer {
max-width: 100%;
width: 100%;
@ -807,14 +821,26 @@ h2 {
.details-contact {
padding: 1rem;
padding-left: 100px;
margin: auto;
display: flex;
flex-direction: column;
}
.contact-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 1em;
}
.contact-container > a {
text-align: center;
}
@media only screen and (max-width: 700px) {
.details-contact {
padding-bottom: 2rem;
padding-left: 1rem;
}
}

10
layouts/detail.erb
View file

@ -3,6 +3,7 @@
<a target="_blank" href="<%= item[:website] %>"><img src="<%= small_image_url(item) %>" alt="<%= item[:naam] %>" height=100></a>
<h2><%= item[:naam] %></h2>
<% if item[:themas] %>
<div class="detail_title_themas">
<% for thema in item[:themas] %>
<div class="vereniging_thema">
<a href="/themas/<%= thema %>.html">
@ -10,22 +11,21 @@
</a>
</div>
<% end %>
</div>
<% end %>
</div>
<div class="details-contact">
<%if item[:deelname_link] || item[:contact] || item[:website]%>
<% if item[:deelname_link] %><a href="<%= item[:deelname_link] %>"><%= item[:deelname_link] %></a><% end %>
<div class="contact-container">
<% if item[:contact] %><p>Email: <a href="<%= item[:contact] %>"><%= item[:contact] %></a></p><%end%>
<% if item[:website] %><p>Website: <a href="<%= item[:website] %>"><%= item[:website] %></a></p><%end%>
<% if item[:contact] %><a href="<%= item[:contact] %>"><%= item[:contact] %></a><%end%>
<% if item[:website] %><a href="<%= item[:website] %>"><%= item[:website] %></a><%end%>
</div><%end%>
<% if item[:social] %>
<div class="social-container">
<ul>
<% for social in item[:social] %>
<a class="social" href="<%= social[:link] %>">
<img src="/assets/social/<%= social[:platform].downcase %>_small.png">
</a>
<a class="social" href="<%= social[:link] %>"><img src="/assets/social/<%= social[:platform].downcase %>_small.png"></a>
<% end %>
</ul>
</div>