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

Compare commits

base: arcHIVE-tech:81511ae260af13e3e7c7989ebeebed4d594a0a72
Branches Tags
arcHIVE-tech:main
arcHIVE-tech:dev
..
compare: arcHIVE-tech:a219520b081127f1d3f7dd558811098aad4f2d58
Branches Tags
arcHIVE-tech:main
arcHIVE-tech:dev

No commits in common. "81511ae260af13e3e7c7989ebeebed4d594a0a72" and "a219520b081127f1d3f7dd558811098aad4f2d58" have entirely different histories.
81511ae260 ... a219520b08

14 changed files with 66 additions and 223 deletions
Show Stats Expand all files Collapse all files

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

@ -72,7 +72,7 @@
// 1. Global
// ---------
$global-font-size:100%;
$global-font-size:100%;
$global-width: 100vw;
$global-lineheight: 1.5;
@ -108,8 +108,6 @@ $global-button-cursor: auto;
$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
$print-hrefs: true;
$global-duration-archive: 0.3s; //duration of css transitions
$global-bezier-archive: cubic-bezier(0, 0, 0.43, 1.49);
@include add-foundation-colors;
@ -307,20 +305,20 @@ $button-font-family: inherit;
$button-font-weight: null;
$button-font-variant: all-petite-caps;
$button-padding: $global-padding $global-padding*3;
$button-margin: $global-margin/4;
$button-margin: 0;
$button-fill: solid;
$button-background: $white;//$primary-color;
$button-background-hover: scale-color($primary-color, $lightness: 95%);
$button-color: $primary-color;//$white;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius-archive;
$button-border: 2px solid $button-color;//1px solid transparent;
$button-border: 1px solid transparent;
$button-hollow-border-width: 2px;
$button-sizes: (
tiny: 0.7rem,
small: 0.95rem,
default: 1.6rem,
large: 2.4rem,
tiny: 0.6rem,
small: 0.75rem,
default: 1.2rem,
large: 1.5rem,
);
$button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
@ -443,7 +441,7 @@ $flexbox-responsive-breakpoints: true;
// 20. Forms
// ---------
$fieldset-border: none; //1px solid $medium-gray;
$fieldset-border: 1px solid $medium-gray;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
@ -452,32 +450,32 @@ $helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
$input-prefix-background: none; //$light-gray;
$input-prefix-border: none; //1px solid $medium-gray;
$input-prefix-background: $light-gray;
$input-prefix-border: 1px solid $medium-gray;
$input-prefix-padding: 1rem;
$form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
$select-background: $white;
$select-triangle-color: $primary-color;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$input-color: $primary-color;
$input-placeholder-color: scale-color($primary-color, $lightness: 60%); //$antracite-grey;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal;
$input-line-height: $global-lineheight;
$input-background: scale-color($primary-color, $lightness: 95%);
$input-background-focus: scale-color($primary-color, $lightness: 85%);
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: none; //1px solid $medium-gray;
$input-border-focus: none; // 1px solid $dark-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
$input-padding: $form-spacing / 2;
$input-shadow: none; //inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: none; //0 0 5px $medium-gray;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
$input-transition: none; //box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
$form-button-radius: $global-radius;
@ -908,3 +906,4 @@ $grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width;
$xy-block-grid-max: 8;

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

@ -69,7 +69,7 @@
// global project styles
@import "global/wp-overrides"; //errors
@import "global/wp-admin"; //errors
@import "global/wp-admin"; //errors
@import "global/typography";
@import "global/gutenberg";
@import "global/colors";
@ -86,7 +86,6 @@
// Componentes
@import "components/links";
@import "components/featured-image";
@import "components/forms";
@import "components/dividers";
@import "components/cards";
@import "components/buttons";
@ -112,4 +111,4 @@
// gulp.task('icons', function() {
// return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
// .pipe(gulp.dest(dist+'/assets/webfonts/'));
// });
// });

36
src/assets/scss/components/_buttons.scss
View File

@ -1,23 +1,5 @@
button,.button {
&:not(.large,.small,.tiny){
// min-width: 20rem;
}
&.primary {
color: $white;
}
&.success {
border-color: $success-color;
}
&.alert {
border-color: $alert-color;
color: $white;
&:hover{
color:$white;
}
}
&.secondary {
border-color: $secondary-color;
}
min-width: 20rem;
}
.hero {
button,.button {
@ -26,23 +8,11 @@ button,.button {
color: $button-color-alt;
font-size: $global-font-size*1.3;
border-color: $button-color-alt;
border-radius: $global-radius-archive*2;
border-radius: 4rem;
// margin: $global-margin*2 0;
&:hover{
color: $anchor-color;
border-color: $anchor-color;
}
}
}
.search {
.button {
border-color: $primary-color;
}
button.appear{
min-width: unset;
background-color: $primary-color;
color: $white;
border-radius:$global-radius-archive;
// padding:0;
border: none;
}
}

29
src/assets/scss/components/_forms.scss
View File

@ -1,29 +0,0 @@
.search{
.button{
border-color: $primary-color;
}
button.appear{
display:none;
}
input:not(:placeholder-shown) {
+ button {
display: block;
z-index: 2;
}
}
.hollow {
border-color: $primary-color;
color: $primary-color;
&::after {
}
&::placeholder {
color: scale-color($primary-color, $lightness: -20%);
}
&:hover {
background-color: scale-color($primary-color, $lightness: 95%);
}
&:active {
background-color: scale-color($primary-color, $lightness: 85%);
}
}
}

2
src/assets/scss/global/_branding.scss
View File

@ -12,7 +12,7 @@
background-repeat: no-repeat;
background-position: center;
}
&.arc-hive{
&.archive{
&::before {
max-width: 10rem;
background-image: url('../img/ARC-HIVE-logo.svg');

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

@ -1,16 +1,20 @@
//content {
// general styles
//----------------
//
// mods on fonts and typography
// mods on fonts and typography
// not in foundation variables
// -----------------------------
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.h1,.h2,.h3,.h4,.h4,.h5,.h6,
button,.button,
header nav {
header nav,
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
font-variant:all-small-caps;
a {
color: $body-font-color;
@ -26,7 +30,7 @@
}
}
}
//
// main block
//--------------
@ -69,7 +73,7 @@
//
// news category
//--------------
.news,.news-category {
@include xy-grid;
header,main,aside {
@ -78,10 +82,9 @@
@include xy-cell(12);
@include flex;
@include flex-align(center,top);
padding-top: $global-padding*3;
h3 {
line-height: $global-lineheight/1.5;
}
}
@include breakpoint(small){
padding-top: $global-padding*3;
}
}
main {
@ -117,7 +120,7 @@
}
}
.date {
// height: 1rem;
height: 1rem;
padding-top: $global-padding*2;
}
.entry-title {
@ -125,7 +128,7 @@
line-height: 0.7;
font-size: $global-font-size*1.5;
}
}
}
aside {
@ -146,19 +149,18 @@
//
// collections category
//--------------
.collections-list {
@include xy-grid;
header,main,aside {
@include xy-cell(12);
@include flex;
@include flex-align(center,top);
padding: $global-padding*2 0;
padding: $global-padding*3 0;
}
header {
margin-top: 2*$global-margin;
border-top: 1px solid $body-font-color;
padding: $global-padding*2 0;
padding: $global-padding*4 0;
}
main {
@include xy-grid;
@ -180,7 +182,7 @@
// end news category
//
// partners
// partners
// for big announcemnts
//---------------------
@ -227,14 +229,14 @@
width: 100vw;
margin: 0;
.textwidget {
padding: $global-padding * 2;
padding: $global-padding * 2;
}
}
@include breakpoint(medium){
.textwidget {
max-width: 50rem;
margin:auto;
padding: $global-padding * 2;
padding: $global-padding * 2;
font-size: $global-font-size*1.3;
}
}
@ -254,19 +256,19 @@
}
.textwidget {
font-size: $global-font-size*1.2;
padding: $global-padding * 2;
padding: $global-padding * 2;
}
}
@include breakpoint(xlarge){
.textwidget {
font-size: $global-font-size*1.3;
padding: $global-padding*3;
padding: $global-padding*3;
}
}
@include breakpoint(xxlarge){
.textwidget {
font-size: $global-font-size*1.6;
padding: $global-padding*3;
padding: $global-padding*3;
}
}
&:first-child {
@ -309,40 +311,7 @@
}
}
}
&.omeka {
border-top: none;
max-height: unset;
@include breakpoint(small){
.slides {
background-color: $secondary-color;
.slide {
flex-direction: column;
align-content: center;
align-self: center;
margin: $global-margin auto;
&:first-child {
color: unset;
background-color: unset;
font-variant:all-small-caps;
}
figure {
margin: 0 auto;
display:flex;
justify-content: center;
}
}
}
}
aside {
background-color: $white;
flex-direction: column;
align-content: center;
h2 {
margin: $global-margin;
}
}
}
}
}
//end hero
//}

3
src/layouts/default.html
View File

@ -10,7 +10,7 @@
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>
<content class="">
<header>
@ -33,5 +33,6 @@
</content>
<script src="{{root}}assets/js/app.js"></script>
</div>
</body>
</html>

35
src/layouts/omeka.html
View File

@ -1,35 +0,0 @@
{{!-- This is the base layout for your project, and will be used on every page unless specified. --}}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>arcHIVE html/css development</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>
<content class="">
<header>
{{> header}}
</header>
{{> section-hero-omeka}}
<article>
<main>
{{> body}}
</main>
<aside>
</aside>
</article>
<footer>
{{> footer}}
</footer>
</content>
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>

1
src/pages/index.html
View File

@ -7,3 +7,4 @@
{{> section-partners}}
{{> section-breaker}}
{{> section-collections}}

5
src/pages/omeka-index.html
View File

@ -1,5 +0,0 @@
---
layout: omeka
---
{{> section-collections-latest}}

3
src/partials/footer.html
View File

@ -1,7 +1,7 @@
<footer class="">
<section class="subsection">
<aside class="site-brand arc-hive">
<aside class="site-brand archive">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="">
<h1 class="site-name">
<?php bloginfo( 'name' ); ?>
@ -59,3 +59,4 @@
</aside>
</section>
</footer>

10
src/partials/header.html
View File

@ -1,5 +1,5 @@
<main class="">
<a href="/" role="banner" class="site-brand arc-hive">
<a href="#" role="banner" class="site-brand">
<h1 class="site-name">arcHIVE</h1>
<h2 class="site-description">an integrative digital bio-art platform</h2>
</a>
@ -8,10 +8,10 @@
<menu class="">
<!-- Content -->
<ul class="menu">
<li><a href="/">News</a></li>
<li><a href="omeka-index.html">Omeka</a></li>
<li><a href="styleguide.html">StyleGuide</a></li>
<li><a href="kitchensink.html">KitchenSink</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Search</a></li>
</ul>
</menu>
</nav>

7
src/partials/search-field.html
View File

@ -1,7 +0,0 @@
<form class="search">
<label>Search</label>
<div class="input-group">
<input type="text" placeholder="search" class="input-group-field" />
<button type="submit">Go</button>
</div>
</form>

21
src/partials/section-hero-omeka.html
View File

@ -1,21 +0,0 @@
<section class="hero omeka">
<main class="slides">
<section class="slide">
<p>ARC-HIVE is a curatorial space that gathers artworks that work in the continuum of biomateriality, from DNA, proteins, and cells to full organisms. They can be manipulation, modification or (re)creation of life and living processes.</p>
<figure>
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
</figure>
</section>
</main>
<aside>
<h2>collections</h2>
<!-- https://codepen.io/liamj/pen/vYYLGZj -->
<form class="search">
<div class="input-group">
<input type="text" placeholder="search" class="input-group-field button hollow" />
<button class="appear button" type="submit">Go</button>
</div>
</form>
</aside>
</section>