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

Adjust grid to always show labels

Browse source
This commit is contained in:
Midgard 2020-09-15 20:46:04 +02:00
parent b13460a7ed
commit cb37bdf0c2
Signed by: midgard
GPG key ID: 511C112F1331BBB4
2 changed files with 50 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
content/stylesheets/main.css
View file

@ -471,67 +471,64 @@ fieldset p label input {
column-gap: 0.5rem;
row-gap: 0.5rem;
align-items: center;
align-items: top;
justify-items: center;
align-content: center;
grid-template-columns: repeat(3, minmax(33%, 170px));
}
.tile {
min-width: 200px;
max-width: 300px;
flex: 1 0 calc(25% - 10px);
flex-direction: column;
position: relative;
}
.tile--small {
min-width: 50px;
max-width: 50px;
}
.tile--medium {
min-width: 150px;
max-width: 200px;
}
.tile--blue {
background-color: var(--darkblue);
}
.tile::before {
content: "";
float: left;
padding-top: 100%;
width: 200px;
text-decoration: none;
}
.tile__image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 95%;
width: auto;
width: 200px;
height: 200px;
}
transition: ease-in 0.2s;
transition-property: filter;
.tile--small {
width: 50px;
}
.tile--small .tile__image {
width: 50px;
height: 50px;
}
.tile--medium {
width: 150px;
}
.tile--medium .tile__image {
width: 150px;
height: 150px;
}
.tile__image--blue {
background-color: var(--darkblue);
}
.tile__image {
height: 100%;
width: 100%;
padding: 1rem;
display: flex;
justify-content: center;
}
.tile__image--svg {
width: 80%;
height: auto;
fill: var(--white);
}
.tile__image svg {
width: 100%;
height: 100%;
}
.tile:hover .tile__image {
filter: blur(2px);
.tile__image img, .tile__image svg {
width: auto;
height: 100%;
}
.tile__image svg {
fill: var(--white);
}
.tile:hover .tile__title {
@ -539,24 +536,15 @@ fieldset p label input {
}
.tile__title {
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
color: black;
width: 100%;
max-width: 100%;
font-size: 1.5rem;
text-align: center;
font-weight: bold;
color: white;
text-shadow: 2px 2px #333;
padding: 5px;
transition: ease-in 0.2s;
transition-property: opacity;
}
.tile__title--medium {
@ -565,7 +553,7 @@ fieldset p label input {
.clickable {
transform: scale(1);
transition: ease-in 0.2s;
transition: ease-in 0.1s;
transition-property: transform;
}

18
layouts/verenigingen.erb
View file

@ -1,25 +1,27 @@
<div class="split-2">
<div class="split-2-1">
<h1 class="split-title"> Thema's </h1>
<h2 class="split-title">Thema's</h2>
<div class="tile-grid">
<% for thema in themas %>
<div class="tile clickable tile--medium tile--blue" onclick="window.location.href = '<%= thema.path %>'">
<div class="tile__image tile__image--svg">
<a class="tile clickable tile--medium" href="<%= thema.path %>">
<div class="tile__image tile__image--svg tile__image--blue">
<%= @items["/assets/themas_icon/"+thema[:naam]+".svg"].compiled_content %>
</div>
<p class="tile__title tile__title--medium"> <%= thema[:naam] %> </p>
</div>
</a>
<% end %>
</div>
</div>
<div class="split-2-2">
<h1 class="split-title"> Konventen </h1>
<h2 class="split-title">Konventen</h2>
<div class="tile-grid">
<% for item in konventen %>
<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] %>">
<a class="tile clickable tile--medium" href="<%= item.path %>">
<div class="tile__image">
<img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
</div>
<p class="tile__title tile__title--medium"> <%= item[:titel] || item[:naam] %> </p>
</div>
</a>
<% end %>
</div>
</div>