accordion and buttons, collections list, hero, news

src/assets/scss/_settings.scss

@@ -92,7 +92,7 @@ $body-background: $white;
 $body-font-color: $black;
 $body-font-family: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 $body-antialiased: true;
-$global-margin: 1rem;
+$global-margin: 2rem;
 $global-padding: 1rem;
 $global-position: 1rem;
 $global-weight-normal: normal;
@@ -248,13 +248,13 @@ $accordion-plusminus: true;
 $accordion-plus-content: '\002B';
 $accordion-minus-content: '\2013';
 $accordion-title-font-size: rem-calc(12);
-$accordion-item-color: $primary-color;
+$accordion-item-color: $body-font-color;
-$accordion-item-background-hover: $light-gray;
+$accordion-item-background-hover: none;
-$accordion-item-padding: 1.25rem 1rem;
+$accordion-item-padding: $global-padding*1.5 0;
 $accordion-content-background: $white;
-$accordion-content-border: 1px solid $light-gray;
+$accordion-content-border: none;
 $accordion-content-color: $body-font-color;
-$accordion-content-padding: 1rem;
+$accordion-content-padding: $global-padding*1.5 0;
 
 // 8. Accordion Menu
 // -----------------
@@ -304,8 +304,8 @@ $breadcrumbs-item-separator-color: $medium-gray;
 $button-font-family: inherit;
 $button-font-weight: null;
 $button-font-variant: all-petite-caps;
-$button-padding: 1em 2em;
+$button-padding: $global-padding $global-padding*3;
-$button-margin: 0 0 $global-margin 0;
+$button-margin: 0;
 $button-fill: solid;
 $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
@@ -317,8 +317,8 @@ $button-hollow-border-width: 2px;
 $button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
-  default: 0.9rem,
+  default: 1.2rem,
-  large: 1.25rem,
+  large: 1.5rem,
 );
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.25;
@@ -363,7 +363,7 @@ $card-border: none;
 $card-shadow: none;
 $card-border-radius: $global-radius;
 $card-padding: $global-padding*4;
-$card-margin-bottom: $global-margin;
+$card-margin-bottom: $global-margin*2;
 
 // 15. Close Button
 // ----------------

src/assets/scss/app.scss

@@ -79,6 +79,8 @@
 
 // Componentes
 @import "components/cards";
+@import "components/buttons";
+@import "components/accordion";
 
 // Templates
 //@import "templates/front";

src/assets/scss/components/_accordion.scss

@@ -0,0 +1,16 @@
+.accordion-item {
+  border-bottom: 1px solid $body-font-color;
+}
+.accordion-title {
+  ul,ol {
+    list-style: none;
+    //@include flex;
+    //@include flex-align(justify,middle);
+    @include xy-grid;
+  }
+  li {
+    display:inline;
+    @include xy-cell(3);
+    text-align:left;
+  }
+}

src/assets/scss/components/_buttons.scss

@@ -0,0 +1,14 @@
+button,.button {
+    min-width: 20rem;
+}
+.hero {
+  button,.button {
+    color: $button-color-alt;
+    border-color: $button-color-alt;
+//    margin: $global-margin*2 0;
+    &:hover{
+      color: $anchor-color;
+      border-color: $anchor-color;
+    }
+  }
+}

src/assets/scss/modules/_content.scss

@@ -8,20 +8,17 @@
     
     .news {
       @include xy-grid;
-      margin: $global-margin*2 0;
+      header,main,aside {
-      header {
         @include xy-cell(12);
         @include flex;
-        @include flex-align(center,middle);
+        @include flex-align(center,top);
+        padding: $global-padding*3 0;
       }
       main {
-        @include xy-cell(12);
+        //@include xy-cell(12);
         @include xy-grid;
         article{
           text-align:center;
-          > *{
-            padding: $global-padding/2 0;
-          }
           @include card-container();
           @include breakpoint(small){
             @include xy-cell(12);
@@ -34,6 +31,44 @@
           }
         }
       }
+      aside {
+      }
+    }
+    // end news category
+
+
+    //
+    // collections category
+    //--------------
+    
+    .collections-list {
+      @include xy-grid;
+      header,main,aside {
+        @include xy-cell(12);
+        @include flex;
+        @include flex-align(center,top);
+        padding: $global-padding*3 0;
+      }
+      header {
+        border-top: 1px solid $body-font-color;
+        padding: $global-padding*4 0;
+      }
+      main {
+        @include xy-grid;
+        article{
+          text-align:center;
+          @include card-container();
+          @include breakpoint(small){
+            @include xy-cell();
+          }
+          @include breakpoint(medium){
+          }
+          @include breakpoint(large){
+          }
+        }
+      }
+      aside {
+      }
     }
     // end news category
 
@@ -46,7 +81,6 @@
 $hero-padding: $global-padding * 3; 
 
   .hero {
-    margin-bottom: $hero-padding;
     border-top: 2px solid $primary-color;
     background-color: $primary-color;
     .slide {
@@ -65,10 +99,16 @@ $hero-padding: $global-padding * 3;
       }
       .claim{
         color: $white;
-          //font-variant: all-small-caps;
+        @include xy-grid;
         @include breakpoint(medium) {
           font-size: $lead-font-size;
         }
+        > * {
+          @include xy-cell(full);
+          @include flex;
+          @include flex-align(center,bottom);
+
+        }
       }
       figure {
         background-color: $white;
@@ -86,25 +126,13 @@ $hero-padding: $global-padding * 3;
         @include xy-cell(auto);
         @include flex;
         @include flex-align(spaced,middle);
-        min-height: 5rem;
+        min-height: 8rem;
-        button.archive-secondary {
-          //font-variant:all-small-caps;
-          color: $black;
-          border-color: $black;
-          margin: 0;
-          padding: $global-padding*1.2 $global-padding*5;
-          &:hover{
-            color: $anchor-color;
-            border-color: $anchor-color;
-          }
-        }
         }
       }
     //hero secondary
     &.secondary {
       border-top: none;
       background-color: $secondary-color;
-      min-height: 10vh;
       .slide{
         .claim {
           color: $body-font-color;

src/assets/scss/modules/_header.scss

@@ -10,9 +10,6 @@
       @include xy-cell(auto);
       @include flex;
       @include flex-align(right, middle);
-      //font-variant:all-small-caps;
-      //.menu, .menu-horizontal {
-      //}
       a, button {
         color: $black;
         &:hover {

src/partials/section-collections-latest.html

@@ -0,0 +1,66 @@
+<section class="collections-list">
+
+  <header>
+    <h2> Latest in collections</h2>
+  </header>
+  <main class="">
+    <article class="">
+      <ul class="accordion" data-responsive-accordion-tabs="accordion small-accordion" data-allow-all-closed="true">
+        <li class="accordion-item" data-accordion-item>
+          <a href="#" class="accordion-title">
+            <ul class="">
+              <li class="title">Title</li>
+              <li class="artist">Artist</li>
+              <li class="main">Main</li>
+              <li class="category">Category</li>
+            </ul>
+          </a>
+          <div class="accordion-content" data-tab-content>
+          </div>
+        </li>
+        <li class="accordion-item" data-accordion-item>
+          <a href="#" class="accordion-title">
+            <ul class="">
+              <li class="title">Conservation and Digitzation</li>
+              <li class="artist">Marta Louro</li>
+              <li class="category">Instalation</li>
+              <li class="year">2021</li>
+            </ul>
+          </a>
+          <div class="accordion-content" data-tab-content>
+          </div>
+        </li>
+        <li class="accordion-item" data-accordion-item>
+          <a href="#" class="accordion-title">
+            <ul class="">
+              <li class="title">Light Scapes</li>
+              <li class="artist">Kim Doan</li>
+              <li class="category">Performance</li>
+              <li class="year">2021</li>
+            </ul>
+          </a>
+          <div class="accordion-content" data-tab-content>
+          </div>
+        </li>
+        <li class="accordion-item" data-accordion-item>
+          <a href="#" class="accordion-title">
+            <ul class="">
+              <li class="title">I will grow my burger</li>
+              <li class="artist">Oron Catts and Andy Gracie</li>
+              <li class="category">Research</li>
+              <li class="year">2021</li>
+            </ul>
+          </a>
+          <div class="accordion-content" data-tab-content>
+          </div>
+        </li>
+      </ul>
+    </article>
+  </main>
+  <aside>
+    <nav>
+      <a href="#" class="button hollow">More than 200 Biomedia Artworks</a>
+    </nav>
+  </aside>
+</section>
+

src/partials/section-hero-secondary.html

@@ -9,7 +9,7 @@
   From the 15th to the 19th of March, Elisava Research, Elisava’s Master in Design through New Materials and Hangar presented the Biolab week, a week of conferences and workshops on bio materials hosted in the framework of Biofriction.
           </p>
           <nav>
-            <button type="button" class="button hollow archive-secondary">collections</button>
+            <button type="button" class="button hollow">apply</button>
           </nav>
         </section>
       </section>

src/partials/section-hero-secondaryw.html

@@ -1,19 +0,0 @@
-<section class="hero secondary">
-  <main>
-     <section class="slide">
-          <figure>
-            <img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
-          </figure>
-        <section class="claim">
-          <p>
-  From the 15th to the 19th of March, Elisava Research, Elisava’s Master in Design through New Materials and Hangar presented the Biolab week, a week of conferences and workshops on bio materials hosted in the framework of Biofriction.
-          </p>
-          <nav>
-            <button type="button" class="button hollow archive-secondary">collections</button>
-          </nav>
-        </section>
-      </section>
-   </main>
-   <aside>
-   </aside>
-</section>

src/partials/section-hero.html

@@ -11,8 +11,8 @@
   </main>
   <aside>
     <nav>
-      <button type="button" class="button hollow archive-secondary">search</button>
+      <button type="button" class="button hollow">search</button>
-      <button type="button" class="button hollow archive-secondary">collections</button>
+      <button type="button" class="button hollow">collections</button>
     </nav>
   </aside>
 </section>

src/partials/section-news.html

@@ -44,5 +44,10 @@
       </p>
     </article>
   </main>
+  <aside>
+    <nav>
+      <a href="#" class="button hollow">see more news</a>
+    </nav>
+  </aside>
 </section>