arcHIVE-tech/arc-hive-HTML-template
arcHIVE-tech
/
arc-hive-HTML-template
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

accordion and buttons, collections list, hero, news

This commit is contained in:
jorge-vitrubio 2021-04-27 21:10:41 +02:00
parent 72bceb8ea7
commit e8b63462b0
11 changed files with 194 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/scss/_settings.scss
View File

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

2
src/assets/scss/app.scss
View File

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

16
src/assets/scss/components/_accordion.scss Normal file
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;
}
}

14
src/assets/scss/components/_buttons.scss Normal file
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;
}
}
}

126
src/assets/scss/modules/_content.scss
View File

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

3
src/assets/scss/modules/_header.scss
View File

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

66
src/partials/section-collections-latest.html
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>

2
src/partials/section-hero-secondary.html
View File

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

19
src/partials/section-hero-secondaryw.html
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, 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>

4
src/partials/section-hero.html
View File

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

5
src/partials/section-news.html
View File

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