Merge pull request 'fix/issue53-backgrond-collections' (#54) from fix/issue53-backgrond-collections into main

Reviewed-on: #54

asset/scss/_settings.scss

@@ -250,14 +250,14 @@ $input-error-font-weight: $global-weight-bold;
 // ------------
 
 $accordion-background: $white;
-$accordion-plusminus: true;
+$accordion-plusminus: false;
 $accordion-plus-content: '\002B';
 $accordion-minus-content: '\2013';
 $accordion-title-font-size: $global-font-size;//rem-calc(12);
 $accordion-item-color: $body-font-color;
 $accordion-item-background-hover: none;
 $accordion-item-padding: $global-padding*1.5 0;
-$accordion-content-background: $white;
+$accordion-content-background: transparent;
 $accordion-content-border: none;
 $accordion-content-color: $body-font-color;
 $accordion-content-padding: $global-padding*1.5 0;

asset/scss/components/_accordion.scss

@@ -24,8 +24,8 @@
     @include xy-grid;
   }
   li {
-    display:inline;
     @include xy-cell(3);
+    display:inline;
     text-align:left;
   }
 }

asset/scss/components/_buttons.scss

@@ -67,3 +67,9 @@ button,.button {
   margin:  $global-margin auto;
   padding: $global-padding*0.5 $global-padding*5;
 }
+.accordion-item.is-active {
+  & button, & .button {
+   // @extend .button;
+    background-color: $input-background;
+  }
+}

asset/scss/modules/_content.scss

@@ -214,10 +214,6 @@ main {
   }
   header {
     display: none;
-
-  //  margin-top: 2*$global-margin;
-  //  border-top: 1px solid $body-font-color;
-  //  padding: $global-padding*2 0;
   }
   main {
     @include xy-grid;
@@ -244,6 +240,42 @@ main {
     flex-direction: column;
     align-items: center;
   }
+  .accordion-item {
+    &:not(.title).is-active {
+      background-color:$input-background;
+    }
+   }
+  .accordion-title {
+    ul,ol{
+    }
+    @include breakpoint(small){
+      li {
+        &.title, 
+        &.curator,
+        &.collection-name,
+        &.date {
+          @include xy-cell(12);
+        }
+      }
+    }
+    @include breakpoint(medium){
+      li {
+        &.title {
+          @include xy-cell(4);
+        }
+        &.curator {
+          @include xy-cell(4);
+        }
+        &.collection-name {
+          @include xy-cell(2);
+        }
+        &.date {
+          @include xy-cell(shrink);
+          margin-left: auto; //aligns to right
+        }
+      }
+    }
+  }
   .accordion-content {
     padding-top: 0;
     section {
@@ -270,11 +302,11 @@ main {
       }
       @include breakpoint(medium){
         figure {
-          @include xy-cell(3);
+          @include xy-cell(4);
           margin-left: 0;
         }
         p {
-          @include xy-cell(9);
+          @include xy-cell(8);
         }
       }
       @include breakpoint(large){