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

meh

Browse source
This commit is contained in:
ajuvercr 2020-09-10 23:41:07 +02:00
parent ab10be6fff
commit 24eff647ee
2 changed files with 62 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
content/stylesheets/main.css
View file

@ -314,13 +314,22 @@ fieldset p label input {
} }
} }
.tile-grid { .tile-grid--flex {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.tile-grid {
display: grid;
gap: 0.5rem;
align-items: center;
justify-items: center;
grid-template-columns: repeat(3, minmax(33%, 12vw));
}
.tile { .tile {
min-width: 200px; min-width: 200px;
max-width: 300px; max-width: 300px;
@ -333,12 +342,12 @@ fieldset p label input {
.tile--small { .tile--small {
min-width: 50px; min-width: 50px;
max-width: 100px; max-width: 50px;
} }
.tile--medium { .tile--medium {
min-width: 150px; min-width: 150px;
max-width: 200px; max-width: 33%;
} }
.tile::before { .tile::before {
@ -388,3 +397,39 @@ fieldset p label input {
cursor: pointer; cursor: pointer;
transform: scale(1.05); transform: scale(1.05);
} }
.split-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.split-2-1,
.split-2-2 {
min-width: 400px;
flex-basis: 1;
}
.split-2-2 {
width: 45%;
}
.split-title {
text-align: center;
}
@media only screen and (max-width: 600px) {
.tile-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.1rem;
}
}
@media only screen and (max-width: 400px) {
.tile-grid {
grid-template-columns: auto;
gap: 0.1rem;
}
}

25
layouts/verenigingen.erb
View file

@ -1,15 +1,18 @@
<div> <div class="split-2">
<div class="horz-child"> <div class="split-2-1">
<h1> Thema's </h1> <h1 class="split-title"> Thema's </h1>
<ul>
<% for thema in themas %>
<li> <%= thema[:naam] %> </li>
<% end %>
</ul>
</div>
<div>
<h1> Konventen en projecten </h1>
<div class="tile-grid"> <div class="tile-grid">
<% for thema in themas %>
<div class="tile clickable tile--medium" onclick="window.location.href = '<%= thema.path %>'">
<img class="tile__image" src="/content/assets/themas/<%= thema[:naam] %>.jpg" alt="<%= thema[:naam] %>">
<p class="tile__title tile__title--medium"> <%= thema[:naam] %> </p>
</div>
<% end %>
</div>
</div>
<div class="split-2-2">
<h1 class="split-title"> Konventen en projecten </h1>
<div class="tile-grid--flex">
<% for item in konventen %> <% for item in konventen %>
<div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'"> <div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'">
<img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>"> <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">