diff --git a/assets/css/app.css b/assets/css/app.css index 686f5bf..3395084 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -120,6 +120,10 @@ h1, h2, h3, h4, h5, h6 { background-color: var(--cotech-light-grey); } +.slice-subtitle { + color: var(--cotech-light-grey); +} + .metadata { display: flex; gap: var(--space-xl); @@ -143,3 +147,48 @@ h1, h2, h3, h4, h5, h6 { font-size: 2.2rem; letter-spacing: 0.02em; } + +.logo-grid { + display: grid; + grid-template-columns: repeat(1, 1fr); +} + +@media screen and (width >= 480px) { + .logo-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (width >= 720px) { + .logo-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media screen and (width >= 960px) { + .logo-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +.logo-grid_item { + width: 240px; + height: 120px; + border: 1px solid var(--cotech-light-grey); + padding: var(--space-sm); +} + +.logo-grid_link { + width: 100%; +} + +.logo-grid_img { + width: 100%; + height: 100%; + object-fit: contain; + transition: transform .2s; +} + +.logo-grid_img:hover { + transform: scale(1.1); +} diff --git a/index.html b/index.html index 85bcdc3..ae2feb7 100644 --- a/index.html +++ b/index.html @@ -39,19 +39,20 @@ layout: home <p>If you’re a tech co-op or a co-operatively minded freelancer, <a href="/join">please join us</a>. </section> -<section id="members"> - <h2>Members</h2> - <p>Take a look at who is part of the CoTech network</p> +<section id="members" class="slice"> + <h2 class="slice_title">Members</h2> + <p class="slice_subtitle">Take a look at who is part of the CoTech network</p> - <ul> + <div class="logo-grid"> {% for coop in site.coops %} - <li> - <a href="{{ coop.url | relative_url }}">{{ coop.name }} - <img src="/images/coops/{{ coop.slug }}" alt="" /> - </a> - </li> + <a class="logo-grid_link" href="{{ coop.url | relative_url }}"> + <div class="logo-grid_item"> + <img class="logo-grid_img" src="/images/coops/{{ coop.slug }}" alt="{{ coop.name }}" /> + </div> + </a> {% endfor %} - </ul> + </div> + </section> <section>