added cards, modified font styles, reoder scss files

This commit is contained in:
jorge 2021-04-27 16:55:49 +02:00
parent 7dfcb1fd99
commit 72bceb8ea7
13 changed files with 199 additions and 85 deletions

View File

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

View File

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View File

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

View File

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 242 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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