Skip to content

Commit ca8b77c

Browse files
committed
Improve organizations grid layout
1 parent c3c44dc commit ca8b77c

2 files changed

Lines changed: 26 additions & 28 deletions

File tree

source/_index.slim

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,10 @@ h3 id='organizations' class='mt-16 pt-8 mx-auto md:w-5/6 text-center tracking-ti
7474
p class='mt-2 mx-auto md:w-7/12 text-center md:leading-normal text-xl font-normal'
7575
= t("organizations.subtitle")
7676

77-
div class='mt-10 mx-auto md:w-5/6 flex flex-wrap justify-evenly gap-6 md:gap-12'
77+
div class='mt-10 mx-auto md:w-5/6 grid grid-cols-3 md:grid-cols-6 gap-y-10'
7878
- data.organizations.each do |org, data|
7979
= link_to data.url, class: 'flex items-center no-underline', title: data.name
80-
= image_tag "https://cdn.csa-admin.org/logos/#{org}", class: 'w-20 h-20 md:w-24 md:h-24 mx-auto', alt: "#{data.name} (logo)", title: data.name
80+
= image_tag "https://cdn.csa-admin.org/logos/#{org}", class: 'size-16 md:size-24 mx-auto', alt: "#{data.name} (logo)", title: data.name
8181

8282

8383
h4 id='contact' class='mt-16 pt-8 mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold'

source/stylesheets/site.css

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -667,6 +667,15 @@ strong {
667667
display: flex;
668668
}
669669

670+
.grid {
671+
display: grid;
672+
}
673+
674+
.size-16 {
675+
width: 4rem;
676+
height: 4rem;
677+
}
678+
670679
.h-1 {
671680
height: 0.25rem;
672681
}
@@ -675,10 +684,6 @@ strong {
675684
height: 2.5rem;
676685
}
677686

678-
.h-20 {
679-
height: 5rem;
680-
}
681-
682687
.h-5 {
683688
height: 1.25rem;
684689
}
@@ -691,10 +696,6 @@ strong {
691696
width: 2.5rem;
692697
}
693698

694-
.w-20 {
695-
width: 5rem;
696-
}
697-
698699
.w-5 {
699700
width: 1.25rem;
700701
}
@@ -715,6 +716,10 @@ strong {
715716
flex-grow: 1;
716717
}
717718

719+
.grid-cols-3 {
720+
grid-template-columns: repeat(3, minmax(0, 1fr));
721+
}
722+
718723
.flex-col {
719724
flex-direction: column;
720725
}
@@ -735,10 +740,6 @@ strong {
735740
justify-content: space-between;
736741
}
737742

738-
.justify-evenly {
739-
justify-content: space-evenly;
740-
}
741-
742743
.gap-2 {
743744
gap: 0.5rem;
744745
}
@@ -747,8 +748,8 @@ strong {
747748
gap: 1rem;
748749
}
749750

750-
.gap-6 {
751-
gap: 1.5rem;
751+
.gap-y-10 {
752+
row-gap: 2.5rem;
752753
}
753754

754755
.scroll-smooth {
@@ -1052,22 +1053,19 @@ strong {
10521053
display: grid;
10531054
}
10541055

1055-
.md\:h-12 {
1056-
height: 3rem;
1056+
.md\:size-24 {
1057+
width: 6rem;
1058+
height: 6rem;
10571059
}
10581060

1059-
.md\:h-24 {
1060-
height: 6rem;
1061+
.md\:h-12 {
1062+
height: 3rem;
10611063
}
10621064

10631065
.md\:w-12 {
10641066
width: 3rem;
10651067
}
10661068

1067-
.md\:w-24 {
1068-
width: 6rem;
1069-
}
1070-
10711069
.md\:w-4\/6 {
10721070
width: 66.666667%;
10731071
}
@@ -1093,6 +1091,10 @@ strong {
10931091
grid-template-columns: repeat(3, minmax(0, 1fr));
10941092
}
10951093

1094+
.md\:grid-cols-6 {
1095+
grid-template-columns: repeat(6, minmax(0, 1fr));
1096+
}
1097+
10961098
.md\:flex-row {
10971099
flex-direction: row;
10981100
}
@@ -1117,10 +1119,6 @@ strong {
11171119
justify-content: center;
11181120
}
11191121

1120-
.md\:gap-12 {
1121-
gap: 3rem;
1122-
}
1123-
11241122
.md\:gap-6 {
11251123
gap: 1.5rem;
11261124
}

0 commit comments

Comments
 (0)