added cards, modified font styles, reoder scss files
This commit is contained in:
parent
7dfcb1fd99
commit
72bceb8ea7
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 242 KiB After Width: | Height: | Size: 242 KiB |
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.card {
|
||||
padding: $global-padding;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,121 @@
|
|||
@include breakpoint(small){
|
||||
content {
|
||||
// @include xy-grid-container(100vw,0);
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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){
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue