added cards, modified font styles, reoder scss files

src/assets/scss/_settings.scss

@@ -73,7 +73,6 @@
 // ---------
 
 $global-font-size: 100%;
-//$global-width: rem-calc(1200);
 $global-width: 100vw;
 $global-lineheight: 1.5;
 
@@ -357,13 +356,13 @@ $callout-link-tint: 30%;
 // 14. Card
 // --------
 
-$card-background: $white;
+$card-background: unset;
 $card-font-color: $body-font-color;
 $card-divider-background: $light-gray;
-$card-border: 1px solid $light-gray;
+$card-border: none;
 $card-shadow: none;
 $card-border-radius: $global-radius;
-$card-padding: $global-padding;
+$card-padding: $global-padding*4;
 $card-margin-bottom: $global-margin;
 
 // 15. Close Button

src/assets/scss/app.scss

@@ -74,12 +74,11 @@
 // Modules
 @import "modules/navigation";
 @import "modules/header";
-@import "modules/hero";
 @import "modules/content";
 @import "modules/footer";
 
 // Componentes
-//@import "components/buttons";
+@import "components/cards";
 
 // Templates
 //@import "templates/front";

src/assets/scss/components/_cards.scss

@@ -0,0 +1,3 @@
+.card {
+  padding: $global-padding;
+}

src/assets/scss/global/_typography.scss

@@ -19,3 +19,20 @@
   font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-weight: normal;
 } 
+
+
+//
+// mods on fonts and typography 
+// not in foundation variables
+// -----------------------------
+
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h4,.h5,.h6,
+button,.button,
+header nav,
+.hero .claim
+{
+  font-variant:all-small-caps;
+}
+
+

src/assets/scss/modules/_content.scss

@@ -1,5 +1,121 @@
-@include breakpoint(small){
   content {
-//    @include xy-grid-container(100vw,0);
+    section {
+    }
+
+    //
+    // news category
+    //--------------
+    
+    .news {
+      @include xy-grid;
+      margin: $global-margin*2 0;
+      header {
+        @include xy-cell(12);
+        @include flex;
+        @include flex-align(center,middle);
+      }
+      main {
+        @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);
+          }
+          @include breakpoint(medium){
+            @include xy-cell(6);
+          }
+          @include breakpoint(large){
+            @include xy-cell(4);
           }
         }
+      }
+    }
+    // end news category
+
+
+    //
+    // hero
+    // for big announcemnts
+    //---------------------
+
+$hero-padding: $global-padding * 3; 
+
+  .hero {
+    margin-bottom: $hero-padding;
+    border-top: 2px solid $primary-color;
+    background-color: $primary-color;
+    .slide {
+        @include xy-grid();
+        .claim, figure {
+          @include breakpoint(small){
+            @include xy-cell(full);
+          }
+          @include breakpoint(medium){
+            @include xy-cell(auto);
+            @include xy-cell-gutters(0,margin);
+            @include flex;
+            @include flex-align(center,middle);
+          }
+          padding: $hero-padding;
+        }
+        .claim{
+          color: $white;
+          //font-variant: all-small-caps;
+            @include breakpoint(medium){
+          font-size: $lead-font-size;
+        }
+        }
+        figure {
+          background-color: $white;
+          .logo {
+            @include breakpoint(medium){
+              max-width: 80%;
+            }
+          }
+        }
+    }
+    aside {
+      @include xy-grid();
+      background-color: $secondary-color;
+      nav {
+        @include xy-cell(auto);
+        @include flex;
+        @include flex-align(spaced,middle);
+        min-height: 5rem;
+        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;
+          }
+          figure {
+            background-color: unset;
+          }
+        }
+    }
+  } 
+  //end hero
+
+}
+// end content

src/assets/scss/modules/_footer.scss

@@ -2,9 +2,9 @@
  footer {
  // @include xy-grid-container();
   background-color: $secondary-color;
-  .h1,.h2,.h3,.h4,.h5,.h6 {
+  //.h1,.h2,.h3,.h4,.h5,.h6 {
-    font-variant:all-small-caps;
+    //font-variant:all-small-caps;
-  }
+  //}
   a {
     color: $body-font-color;
     &:hover {

src/assets/scss/modules/_header.scss

@@ -1,4 +1,3 @@
-@include breakpoint(small){
   header {
     @include xy-grid();
     @include xy-gutters(0);
@@ -11,9 +10,9 @@
       @include xy-cell(auto);
       @include flex;
       @include flex-align(right, middle);
-      font-variant:all-small-caps;
+      //font-variant:all-small-caps;
-      .menu, .menu-horizontal {
+      //.menu, .menu-horizontal {
-      }
+      //}
       a, button {
         color: $black;
         &:hover {
@@ -22,4 +21,5 @@
       }
     }
   }
+@include breakpoint(small){
 }

src/assets/scss/modules/_hero.scss

@@ -1,68 +0,0 @@
-$hero-padding: $global-padding * 3; 
-
-@include breakpoint(small){
-  .hero {
-    margin-bottom: $hero-padding;
-    border-top: 2px solid $primary-color;
-    background-color: $primary-color;
-    .slide {
-        @include xy-grid();
-        .claim, figure {
-          @include xy-cell(auto);
-          @include xy-cell-gutters(0,margin);
-          @include flex;
-          @include flex-align(center,middle);
-          padding: $hero-padding;
-        }
-        .claim{
-          color: $white;
-          font-variant: all-small-caps;
-          font-size: $lead-font-size;
-        }
-        figure {
-          background-color: $white;
-          .logo {
-            @include breakpoint(medium){
-              max-width: 80%;
-            }
-          }
-        }
-    }
-    aside {
-      @include xy-grid();
-      background-color: $secondary-color;
-      nav {
-        @include xy-cell(auto);
-        @include flex;
-        @include flex-align(spaced,middle);
-        min-height: 5rem;
-        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;
-          }
-          figure {
-            background-color: unset;
-          }
-        }
-    }
-  } 
-  //end hero
-}

src/partials/section-news.html

@@ -0,0 +1,48 @@
+<section class="news">
+  <header>
+    <h2> News</h2>
+  </header>
+  <main class="">
+    <article class="">
+      <figure>
+        <img src="{{root}}assets/imgexample/img0001.jpg" />
+      </figure>
+      <aside class="date">12.03.2021</aside>
+      <h3> FACTT 20|21 - Improbable Times </h3>
+      <p class="excerpt">
+      ARC-HIVE is a curatorial space that gathers artworks that work int eh continuum of biomateriality
+      </p>
+    </article>
+    <article class="">
+      <figure>
+        <img src="{{root}}assets/imgexample/img0002.jpg" />
+      </figure>
+      <aside class="date">12.03.2021</aside>
+      <h3> Conservtion and digitzation Workshop </h3>
+      <p class="excerpt">
+      They can be manipulation, modification or (re)creation of life and living processes.
+      </p>
+    </article>
+    <article class="">
+      <figure>
+        <img src="{{root}}assets/imgexample/img0003.jpg" />
+      </figure>
+      <aside class="date">12.03.2021</aside>
+      <h3>Summer School 2021 | Elements of Care </h3>
+      <p class="excerpt">
+      This ARCHIVE is a curatorial space that gathers artworks that work in the continuum of biomateriality, from DNA, proteins.
+      </p>
+    </article>
+    <article class="">
+      <figure>
+        <img src="{{root}}assets/imgexample/img0004.jpg" />
+      </figure>
+      <aside class="date">12.03.2021</aside>
+      <h3>ARC-HIVE Kick-off Meeting</h3>
+      <p class="excerpt">
+      This ARCHIVE is a curatorial space that gathers artworks that work in the continuum of biomateriality, from DNA, proteins.
+      </p>
+    </article>
+  </main>
+</section>
+