From 72bceb8ea76f18e3fb4996ecc4162104bc9f7029 Mon Sep 17 00:00:00 2001 From: jorge-vitrubio Date: Tue, 27 Apr 2021 16:55:49 +0200 Subject: [PATCH] added cards, modified font styles, reoder scss files --- src/assets/{img => }/imgexample/img0001.jpg | Bin src/assets/{img => }/imgexample/img0002.jpg | Bin src/assets/{img => }/imgexample/img0003.jpg | Bin src/assets/{img => }/imgexample/img0004.jpg | Bin src/assets/scss/_settings.scss | 7 +- src/assets/scss/app.scss | 3 +- src/assets/scss/components/_cards.scss | 3 + src/assets/scss/global/_typography.scss | 17 +++ src/assets/scss/modules/_content.scss | 124 +++++++++++++++++++- src/assets/scss/modules/_footer.scss | 6 +- src/assets/scss/modules/_header.scss | 8 +- src/assets/scss/modules/_hero.scss | 68 ----------- src/partials/section-news.html | 48 ++++++++ 13 files changed, 199 insertions(+), 85 deletions(-) rename src/assets/{img => }/imgexample/img0001.jpg (100%) rename src/assets/{img => }/imgexample/img0002.jpg (100%) rename src/assets/{img => }/imgexample/img0003.jpg (100%) rename src/assets/{img => }/imgexample/img0004.jpg (100%) create mode 100644 src/assets/scss/components/_cards.scss delete mode 100644 src/assets/scss/modules/_hero.scss diff --git a/src/assets/img/imgexample/img0001.jpg b/src/assets/imgexample/img0001.jpg similarity index 100% rename from src/assets/img/imgexample/img0001.jpg rename to src/assets/imgexample/img0001.jpg diff --git a/src/assets/img/imgexample/img0002.jpg b/src/assets/imgexample/img0002.jpg similarity index 100% rename from src/assets/img/imgexample/img0002.jpg rename to src/assets/imgexample/img0002.jpg diff --git a/src/assets/img/imgexample/img0003.jpg b/src/assets/imgexample/img0003.jpg similarity index 100% rename from src/assets/img/imgexample/img0003.jpg rename to src/assets/imgexample/img0003.jpg diff --git a/src/assets/img/imgexample/img0004.jpg b/src/assets/imgexample/img0004.jpg similarity index 100% rename from src/assets/img/imgexample/img0004.jpg rename to src/assets/imgexample/img0004.jpg diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss index 5064827..fb2f2fd 100644 --- a/src/assets/scss/_settings.scss +++ b/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 diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index b596cf1..5a93850 100644 --- a/src/assets/scss/app.scss +++ b/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"; diff --git a/src/assets/scss/components/_cards.scss b/src/assets/scss/components/_cards.scss new file mode 100644 index 0000000..fe5522f --- /dev/null +++ b/src/assets/scss/components/_cards.scss @@ -0,0 +1,3 @@ +.card { + padding: $global-padding; +} diff --git a/src/assets/scss/global/_typography.scss b/src/assets/scss/global/_typography.scss index 1fecaf1..5ed7b7c 100644 --- a/src/assets/scss/global/_typography.scss +++ b/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; +} + + diff --git a/src/assets/scss/modules/_content.scss b/src/assets/scss/modules/_content.scss index 07571cf..3676db3 100644 --- a/src/assets/scss/modules/_content.scss +++ b/src/assets/scss/modules/_content.scss @@ -1,5 +1,121 @@ -@include breakpoint(small){ - content{ -// @include xy-grid-container(100vw,0); - } + content { + 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 diff --git a/src/assets/scss/modules/_footer.scss b/src/assets/scss/modules/_footer.scss index 17d1799..8b38128 100644 --- a/src/assets/scss/modules/_footer.scss +++ b/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 { - font-variant:all-small-caps; - } + //.h1,.h2,.h3,.h4,.h5,.h6 { + //font-variant:all-small-caps; + //} a { color: $body-font-color; &:hover { diff --git a/src/assets/scss/modules/_header.scss b/src/assets/scss/modules/_header.scss index 15a7565..c463189 100644 --- a/src/assets/scss/modules/_header.scss +++ b/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; - .menu, .menu-horizontal { - } + //font-variant:all-small-caps; + //.menu, .menu-horizontal { + //} a, button { color: $black; &:hover { @@ -22,4 +21,5 @@ } } } +@include breakpoint(small){ } diff --git a/src/assets/scss/modules/_hero.scss b/src/assets/scss/modules/_hero.scss deleted file mode 100644 index 0238aa4..0000000 --- a/src/assets/scss/modules/_hero.scss +++ /dev/null @@ -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 -} diff --git a/src/partials/section-news.html b/src/partials/section-news.html index e69de29..b8ae154 100644 --- a/src/partials/section-news.html +++ b/src/partials/section-news.html @@ -0,0 +1,48 @@ +
+
+

News

+
+
+
+
+ +
+ +

FACTT 20|21 - Improbable Times

+

+ ARC-HIVE is a curatorial space that gathers artworks that work int eh continuum of biomateriality +

+
+
+
+ +
+ +

Conservtion and digitzation Workshop

+

+ They can be manipulation, modification or (re)creation of life and living processes. +

+
+
+
+ +
+ +

Summer School 2021 | Elements of Care

+

+ This ARCHIVE is a curatorial space that gathers artworks that work in the continuum of biomateriality, from DNA, proteins. +

+
+
+
+ +
+ +

ARC-HIVE Kick-off Meeting

+

+ This ARCHIVE is a curatorial space that gathers artworks that work in the continuum of biomateriality, from DNA, proteins. +

+
+
+
+