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

footer styles and structure

This commit is contained in:
jorge 2021-04-27 11:28:11 +02:00
parent f7babaee9a
commit 7dfcb1fd99
11 changed files with 288 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
.site-brand { .brand-logo,.site-brand {
.site-name { .site-name {
display: none; display: none;
} }

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

@ -1,5 +1,5 @@
@include breakpoint(small){ @include breakpoint(small){
content{ content{
@include xy-grid-container(100vw,0); // @include xy-grid-container(100vw,0);
} }
} }

34
src/assets/scss/modules/_footer.scss
View File

@ -1,11 +1,41 @@
@include breakpoint(small) { @include breakpoint(small) {
footer { footer {
// @include xy-grid-container();
background-color: $secondary-color; background-color: $secondary-color;
.h1,.h2,.h3,.h4,.h5,.h6 {
font-variant:all-small-caps;
}
a {
color: $body-font-color;
&:hover {
color: $primary-color;
}
}
p {
margin: 0;
}
ul,ol {
list-style: none;
padding: 0;
margin: 0;
}
li {
float:left;
padding-right: $global-padding;
}
.logo {
}
.subsection { .subsection {
@include xy-grid; @include xy-grid;
@include flex;
@include flex-align(left,bottom);
border-top: 1px solid black; border-top: 1px solid black;
section{ padding: $global-padding 0;
@include xy-cell(4); aside {
@include xy-cell(3);
&.double {
@include xy-cell(6);
}
} }
} }
} }

15
src/layouts/default.html
View File

@ -17,23 +17,10 @@
{{> header}} {{> header}}
</header> </header>
<section class="hero"> {{> section-hero}}
{{> hero}}
</section>
<article> <article>
<main> <main>
{{> section-news}}
{{> section-collections-latest}}
{{> section-breaker}}
<section class="hero secondary">
{{> section-hero}}
</section>
{{> section-about}}
{{> section-description}}
{{> section-partners}}
{{> section-collections}}
{{> body}} {{> body}}
</main> </main>
<aside> <aside>

161
src/pages/index.html
View File

@ -1,153 +1,10 @@
<main class="grid-container"> {{> section-news}}
<header class="grid-x grid-padding-x"> {{> section-collections-latest}}
<div class="large-12 cell"> {{> section-breaker}}
<h1>arcHIVE project kitchen sink</h1> {{> section-hero-secondary}}
</div> {{> section-about}}
</header> {{> section-description}}
{{> section-partners}}
{{> section-breaker}}
{{> section-collections}}
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<div class="callout">
<h3>We&rsquo;re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 cell">
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 cell">
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
</div>
<div class="large-4 medium-4 cell">
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 medium-push-2 cell">
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 medium-pull-2 cell">
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-8 medium-8 cell">
<h5>Here&rsquo;s your basic grid:</h5>
<!-- Grid Example -->
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<div class="primary callout">
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<div class="primary callout">
<p>Six cell</p>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class="primary callout">
<p>Six cell</p>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
</div>
<hr />
<h5>We bet you&rsquo;ll need a form somewhere:</h5>
<form>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Input Label</label>
<input type="text" placeholder="large-12.cell" />
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 cell">
<label>Input Label</label>
<input type="text" placeholder="large-4.cell" />
</div>
<div class="large-4 medium-4 cell">
<label>Input Label</label>
<input type="text" placeholder="large-4.cell" />
</div>
<div class="large-4 medium-4 cell">
<div class="grid-x">
<label>Input Label</label>
<div class="input-group">
<input type="text" placeholder="small-9.cell" class="input-group-field" />
<span class="input-group-label">.com</span>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Select Box</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<label>Choose Your Favorite</label>
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
</div>
<div class="large-6 medium-6 cell">
<label>Check these out</label>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Textarea Label</label>
<textarea placeholder="small-12.cell"></textarea>
</div>
</div>
</form>
</div>
<div class="large-4 medium-4 cell">
<h5>Try one of these buttons:</h5>
<p><a href="#" class="button">Simple Button</a><br/>
<a href="#" class="success button">Success Btn</a><br/>
<a href="#" class="alert button">Alert Btn</a><br/>
<a href="#" class="secondary button">Secondary Btn</a></p>
<div class="callout">
<h5>So many components, girl!</h5>
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
<a href="https://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
</div>
</div>
</div>
</main>

153
src/pages/kitchensink.html Normal file
View File

@ -0,0 +1,153 @@
<main class="grid-container">
<header class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>arcHIVE project kitchen sink</h1>
</div>
</header>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<div class="callout">
<h3>We&rsquo;re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 cell">
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 cell">
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
</div>
<div class="large-4 medium-4 cell">
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 medium-push-2 cell">
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 medium-pull-2 cell">
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-8 medium-8 cell">
<h5>Here&rsquo;s your basic grid:</h5>
<!-- Grid Example -->
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<div class="primary callout">
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<div class="primary callout">
<p>Six cell</p>
</div>
</div>
<div class="large-6 medium-6 cell">
<div class="primary callout">
<p>Six cell</p>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
<div class="large-4 medium-4 small-4 cell">
<div class="primary callout">
<p>Four cell</p>
</div>
</div>
</div>
<hr />
<h5>We bet you&rsquo;ll need a form somewhere:</h5>
<form>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Input Label</label>
<input type="text" placeholder="large-12.cell" />
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-4 medium-4 cell">
<label>Input Label</label>
<input type="text" placeholder="large-4.cell" />
</div>
<div class="large-4 medium-4 cell">
<label>Input Label</label>
<input type="text" placeholder="large-4.cell" />
</div>
<div class="large-4 medium-4 cell">
<div class="grid-x">
<label>Input Label</label>
<div class="input-group">
<input type="text" placeholder="small-9.cell" class="input-group-field" />
<span class="input-group-label">.com</span>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Select Box</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-6 medium-6 cell">
<label>Choose Your Favorite</label>
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
</div>
<div class="large-6 medium-6 cell">
<label>Check these out</label>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<label>Textarea Label</label>
<textarea placeholder="small-12.cell"></textarea>
</div>
</div>
</form>
</div>
<div class="large-4 medium-4 cell">
<h5>Try one of these buttons:</h5>
<p><a href="#" class="button">Simple Button</a><br/>
<a href="#" class="success button">Success Btn</a><br/>
<a href="#" class="alert button">Alert Btn</a><br/>
<a href="#" class="secondary button">Secondary Btn</a></p>
<div class="callout">
<h5>So many components, girl!</h5>
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
<a href="https://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
</div>
</div>
</div>
</main>

65
src/partials/footer.html
View File

@ -1,49 +1,58 @@
<footer class=""> <footer class="">
<section class="subsection"> <section class="subsection">
<section class="site-brand"> <aside class="site-brand">
<a href="#" class="site-brand"> <a href="#" class="site-brand">
<h1 class="site-name">arcHIVE</h1> <h1 class="site-name">arcHIVE</h1>
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/> <img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
</a> </a>
</section> </aside>
<section class="newsletter"> <aside class="double newsletter">
<p> subscribe to our <br/> <p> subscribe to our <br/>
<span class="h2"><a href="#">news letter</a></span> <span class="h3"><a href="#">news letter</a></span>
</p> </p>
</section> </aside>
<section class="social-links"> <aside class="newsletter">
<p>follow us on: <br /> <p> follow us on <br/>
<span class="h2"><a href="#">instagram</a></span> <span class="h3"><a href="#">instagram</a></span>
<span class="h2"><a href="#">twittera></span> <span class="h3"><a href="#">twitter</a></span>
</p> </p>
</section> </aside>
</section> </section>
<section class="subsection"> <section class="subsection">
<section class="contact"> <aside class="contact">
<p><a href="mailto:info@arc-hive.zone">info@arc-hive.zone</a></p> <p><a href="mailto:info@arc-hive.zone">info@arc-hive.zone</a></p>
<p class="address">Emilia Coranty 16 <br /> 08018 Barcelona Spain</p> <p class="address">Emilia Coranty 16 <br /> 08018 Barcelona Spain</p>
</section> </aside>
<section class="partners"> <aside class="double partners">
<p>ARC-HIVE partners are:</p>
<ul> <ul>
<li> Cultivamos Cultura</li> <li class="h5"> <a href="#">Cultivamos Cultura</a></li>
<li> Bioart Society</li> <li class="h5"> <a href="#">Bioart Society</a></li>
<li> Kersnikova</li> <li class="h5"> <a href="#">Kersnikova</a></li>
<li> Institute of natural sciences</li> <li class="h5"> <a href="#">Institute of natural sciences</a></li>
<li> Kontejner</li> <li class="h5"> <a href="#">Kontejner</a></li>
<li> Hangar</li> <li class="h5"> <a href="#">Hangar</a></li>
</ul> </ul>
</section> </aside>
<section class="co-founded"> <aside class="co-founded">
<a href="#" class="site-brand"> <a href="#" class="brand-logo">
<h1 class="site-name">Co-Funded bye the Creative Europe Programme of the European Union</h1> <h1 class="site-name">Co-Funded bye the Creative Europe Programme of the European Union</h1>
<img src="{{root}}assets/img/eu_flag_creative_europe_co_funded_left.svg" class="logo"/> <img src="{{root}}assets/img/eu_flag_creative_europe_co_funded_left.svg" class="logo"/>
</a> </a>
</section> </aside>
</section>
<section class="subsection">
<aside class="copyright">
<p> ARC-HIVE is part of: <span class="h5"><a href="#">Biofriction</a></span></p>
</aside>
<aside class="double">
</aside>
<aside class="legal-credits">
<ul>
<li><a href="#">Legal note</a></li>
<li><a href="#">Crédits</a></li>
</ul>
</aside>
</section> </section>
<nav>
</nav>
<aside>
</aside>
</footer> </footer>

17
src/partials/hero.html
View File

@ -1,17 +0,0 @@
<main>
<section class="slide">
<section class="claim">
<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>
</section>
<figure>
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
</figure>
</section>
</main>
<aside>
<nav>
<button type="button" class="button hollow archive-secondary">search</button>
<button type="button" class="button hollow archive-secondary">collections</button>
</nav>
</aside>

19
src/partials/section-hero-secondary.html Normal file
View File

@ -0,0 +1,19 @@
<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>

19
src/partials/section-hero-secondaryw.html Normal file
View File

@ -0,0 +1,19 @@
<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>

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

@ -1,18 +1,18 @@
<main> <section class="hero">
<section class="slide"> <main>
<figure> <section class="slide">
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
</figure>
<section class="claim"> <section class="claim">
<p> <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>
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>
<figure>
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
</figure>
</section> </section>
</main> </main>
<aside> <aside>
</aside> <nav>
<button type="button" class="button hollow archive-secondary">search</button>
<button type="button" class="button hollow archive-secondary">collections</button>
</nav>
</aside>
</section>