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

Reviewed-on: #55

.gitignore

@@ -2,5 +2,6 @@
 bower_components
 node_modules
 npm-debug.log
+_
 index*
-index.html
+index*.html

asset/scss/modules/_content.scss

@@ -240,79 +240,143 @@ main {
     flex-direction: column;
     align-items: center;
   }
+
+  // accordion for colletions list
   .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(auto);
+    &.title {
+      .accordion-title {
+        @include breakpoint(small){
+          li {
+            @include xy-cell(3);
+            @include xy-cell-offset(0);
+            &.title,&.curator,&.collection-name,&.date {
+              &::before {content: none;}
+            }
+            &.date {
+              margin-left: auto;
+            }
+            .ascToggle{
+              position:absolute;
+              padding-left: 0.21rem;
+            }
+          }
         }
-      }
-    }
-    @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 {
-      @include xy-grid;
-      padding-top: 0;
-      padding-bottom: 0;
-      @include breakpoint(small){
-        figure {
-          @include xy-cell(12);
-          margin-left:0;
-          margin-right:0;
-        }
-        p {
-          @include xy-cell(12);
-          position: relative;
-          padding: $global-padding;
-          padding-bottom: $global-padding * 3;
-          .button {
-            position:absolute;
-            right:0;
-            margin-top: $global-padding * 3;
+        @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
+            }
           }
         }
       }
-      @include breakpoint(medium){
-        figure {
-          @include xy-cell(4);
-          margin-left: 0;
-        }
-        p {
-          @include xy-cell(8);
-        }
+    }
+    &:not(.title){
+      &.is-active {
+        background-color:$input-background;
       }
-      @include breakpoint(large){
+      .accordion-title {
+        @include breakpoint(small){
+          li {
+            &.title,
+            &.curator,
+            &.collection-name,
+            &.date {
+              @include xy-cell(10);
+              @include xy-cell-offset(2);
+              min-height: 1rem;
+              &::before {
+                display: inline-block;
+                color: $medium-gray;
+                position: absolute;
+                left:0;
+              }
+            }
+            &.title::before {content:"Title";}
+            &.curator::before  {content:"Artist";}
+            &.collection-name::before  {content:"Collection";}
+            &.date::before  {content:"Date";}
+          }
+        }
+        @include breakpoint(medium){
+          li {
+            &.title,
+            &.curator,
+            &.collection-name,
+            &.date {
+              min-height:unset;
+              &::before {
+                content: none;
+                // content:"";
+              }
+            }
+            &.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-title {
+      ul,ol {
+        margin: 0;
+      }
+    }
+    .accordion-content {
+      padding-top: 0;
+      section {
+        @include xy-grid;
+        @include breakpoint(small){
+        padding: 0;
+          figure {
+            @include xy-cell(12);
+          }
+          p {
+            @include xy-cell(12);
+            position: relative;
+            padding-top: $global-padding * 1;
+            padding-bottom: $global-padding * 3;
+            .button {
+              position:absolute;
+              right:0;
+              margin-top: $global-padding * 3;
+            }
+          }
+        }
+        @include breakpoint(medium){
+          figure {
+            @include xy-cell(4);
+            @include xy-gutters;
+          }
+          p {
+            @include xy-cell(8);
+            padding-top: 0;
+          }
+        }
+        @include breakpoint(large){
+        }
+      }
+    }
+   }
 }
 // end collections category