Make list of organisations expandable

site/layouts/partials/organisations.html

@@ -6,6 +6,9 @@
         <hr />
         <!-- replace the URL defined in config.toml because this snipped is used in sub-pages too -->
         <p>{{ replace .Site.Params.organisations.text "openletter/" ("/openletter" | relLangURL)  | markdownify }}</p>
+        <div class="expand" tabindex="0">
+          <i class="fa fa-share" aria-hidden="true"></i>
+        </div>
         <div class="orgs">
           <ul>
             {{ $orgs := getJSON "data/organisations/organisations.json" }}
@@ -15,7 +18,7 @@
               {{ $.Scratch.Add "lower_names" (lower .name) }}
             {{ end }}
             
-            {{ range sort ($.Scratch.Get "lower_names") }}
+            {{ range shuffle ($.Scratch.Get "lower_names") }}
 
               {{ $lower_int := . }}
               {{ range $int := $orgs }}
@@ -24,7 +27,6 @@
                 {{ end }}
               {{ end }}
             {{ end }}
-              
           </ul>
         </div>
       </div>

site/static/css/custom.css

@@ -101,11 +101,10 @@ blockquote p {
 #organisations ul li a {
   display: block;
   position: relative;
-  width: 12vw;
-  height: 8vw;
   max-width: 120px;
   max-height: 80px;
   min-width: 120px;
+  min-height: 80px;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
@@ -118,6 +117,44 @@ blockquote p {
   transform: scale(0.9);
   z-index: 5;
 }
+/* expand organisation grid */
+.orgs {
+  position: relative;
+  height: 350px;
+  overflow: hidden;
+  transition: height 0s 10000s;
+  -webkit-transition: height 0s 10000s;
+  background-color: white;
+}
+.expand {
+  position: relative;
+  top: 400px;
+  width: 94%;
+  padding: 15px 0;
+  margin: -80px 3% 0 3%;
+  font-size: 40px;
+  background-color: white;
+  box-shadow: 0px -20px 50px 30px rgba(255, 255, 255, 1);
+  z-index: 1;
+  transition: z-index 0s 10000s;
+  -webkit-transition: z-index 0s 10000s;
+  cursor: pointer;
+}
+.expand i {
+  transform: rotate(-35deg) scaleY(-1) ;
+}
+.expand:focus {
+  z-index: 0;
+  transition: z-index 0s;
+  -webkit-transition: z-index 0s;
+}
+.expand:focus + .orgs {
+  height: 100%;
+  overflow: unset;
+  transition: height 0s;
+  -webkit-transition: height 0s;
+}
+
 
 /* SIGN FORM */
 #actionintro strong {