From e8b63462b09419c954ccb965a33aef7cd6e783ce Mon Sep 17 00:00:00 2001 From: jorge-vitrubio Date: Tue, 27 Apr 2021 21:10:41 +0200 Subject: [PATCH] accordion and buttons, collections list, hero, news --- src/assets/scss/_settings.scss | 22 ++-- src/assets/scss/app.scss | 2 + src/assets/scss/components/_accordion.scss | 16 +++ src/assets/scss/components/_buttons.scss | 14 +++ src/assets/scss/modules/_content.scss | 126 +++++++++++-------- src/assets/scss/modules/_header.scss | 3 - src/partials/section-collections-latest.html | 66 ++++++++++ src/partials/section-hero-secondary.html | 2 +- src/partials/section-hero-secondaryw.html | 19 --- src/partials/section-hero.html | 4 +- src/partials/section-news.html | 5 + 11 files changed, 194 insertions(+), 85 deletions(-) create mode 100644 src/assets/scss/components/_accordion.scss create mode 100644 src/assets/scss/components/_buttons.scss delete mode 100644 src/partials/section-hero-secondaryw.html diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss index fb2f2fd..9332f8e 100644 --- a/src/assets/scss/_settings.scss +++ b/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-background-hover: $light-gray; -$accordion-item-padding: 1.25rem 1rem; +$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-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-margin: 0 0 $global-margin 0; +$button-padding: $global-padding $global-padding*3; +$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, - large: 1.25rem, + default: 1.2rem, + 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 // ---------------- diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index 5a93850..df1e934 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -79,6 +79,8 @@ // Componentes @import "components/cards"; +@import "components/buttons"; +@import "components/accordion"; // Templates //@import "templates/front"; diff --git a/src/assets/scss/components/_accordion.scss b/src/assets/scss/components/_accordion.scss new file mode 100644 index 0000000..88f3fc0 --- /dev/null +++ b/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; + } +} diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss new file mode 100644 index 0000000..a3a2f79 --- /dev/null +++ b/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; + } + } +} diff --git a/src/assets/scss/modules/_content.scss b/src/assets/scss/modules/_content.scss index 3676db3..8db816a 100644 --- a/src/assets/scss/modules/_content.scss +++ b/src/assets/scss/modules/_content.scss @@ -8,20 +8,17 @@ .news { @include xy-grid; - margin: $global-margin*2 0; - header { + header,main,aside { @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,38 +81,43 @@ $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; + @include xy-grid(); + .claim, figure { + @include breakpoint(small){ + @include xy-cell(full); } - .claim{ - color: $white; - //font-variant: all-small-caps; - @include breakpoint(medium){ + @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; + @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; + } + figure { + background-color: $white; .logo { - @include breakpoint(medium){ - max-width: 80%; - } + @include breakpoint(medium){ + max-width: 80%; } } + } } aside { @include xy-grid(); @@ -86,33 +126,21 @@ $hero-padding: $global-padding * 3; @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; - } + min-height: 8rem; } } - } //hero secondary &.secondary { border-top: none; background-color: $secondary-color; - min-height: 10vh; - .slide{ - .claim { - color: $body-font-color; - } - figure { - background-color: unset; - } + .slide{ + .claim { + color: $body-font-color; } + figure { + background-color: unset; + } + } } } //end hero diff --git a/src/assets/scss/modules/_header.scss b/src/assets/scss/modules/_header.scss index c463189..40d0939 100644 --- a/src/assets/scss/modules/_header.scss +++ b/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 { diff --git a/src/partials/section-collections-latest.html b/src/partials/section-collections-latest.html index e69de29..e8ee7b3 100644 --- a/src/partials/section-collections-latest.html +++ b/src/partials/section-collections-latest.html @@ -0,0 +1,66 @@ +
+ +
+

Latest in collections

+
+
+ +
+ +
+ diff --git a/src/partials/section-hero-secondary.html b/src/partials/section-hero-secondary.html index 51686cd..1be5b27 100644 --- a/src/partials/section-hero-secondary.html +++ b/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.

diff --git a/src/partials/section-hero-secondaryw.html b/src/partials/section-hero-secondaryw.html deleted file mode 100644 index 51686cd..0000000 --- a/src/partials/section-hero-secondaryw.html +++ /dev/null @@ -1,19 +0,0 @@ -
-
-
-
- -
-
-

- 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. -

- -
-
-
- -
diff --git a/src/partials/section-hero.html b/src/partials/section-hero.html index 9e977e0..b03c8d6 100644 --- a/src/partials/section-hero.html +++ b/src/partials/section-hero.html @@ -11,8 +11,8 @@ diff --git a/src/partials/section-news.html b/src/partials/section-news.html index b8ae154..5978e18 100644 --- a/src/partials/section-news.html +++ b/src/partials/section-news.html @@ -44,5 +44,10 @@

+