accordion and buttons, collections list, hero, news

This commit is contained in:
jorge 2021-04-27 21:10:41 +02:00
parent 72bceb8ea7
commit e8b63462b0
11 changed files with 194 additions and 85 deletions

View File

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

View File

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

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

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

View File

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

View File

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

View File

@ -9,7 +9,7 @@
From the 15th to the 19th of March, Elisava Research, Elisavas 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. From the 15th to the 19th of March, Elisava Research, Elisavas 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> </p>
<nav> <nav>
<button type="button" class="button hollow archive-secondary">collections</button> <button type="button" class="button hollow">apply</button>
</nav> </nav>
</section> </section>
</section> </section>

View File

@ -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, Elisavas 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>

View File

@ -11,8 +11,8 @@
</main> </main>
<aside> <aside>
<nav> <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> </nav>
</aside> </aside>
</section> </section>

View File

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