new header and hero structure with scss styles
This commit is contained in:
jorge-vitrubio
parent
a507e3f04f
commit
a97699f01c
Binary file not shown.
Binary file not shown.
|
|
@ -65,19 +65,9 @@
|
|||
|
||||
// 0. arcHIVE specific styles
|
||||
// ---------
|
||||
|
||||
$stone-grey: #CCCCCC;
|
||||
$acid-green: #69E344;
|
||||
$bubblegum-pink: #F096F9;
|
||||
$desert-red: #D75930;
|
||||
$mustard-yellow: #F5C042;
|
||||
$beach-blue: #5CC8D1;
|
||||
$hyperlink-blue: #0000DD;
|
||||
$bloody-red: #D32D1F;
|
||||
$mid-grey: #808080;
|
||||
$antracite-grey: #333333;
|
||||
$forest-green: #1E6041;
|
||||
$raspberry-purple: #54367B;
|
||||
// global project styles
|
||||
@import "global/colors";
|
||||
@import "global/typography";
|
||||
|
||||
// 1. Global
|
||||
// ---------
|
||||
|
|
@ -88,7 +78,7 @@ $global-lineheight: 1.5;
|
|||
|
||||
$foundation-palette: (
|
||||
primary: $hyperlink-blue,
|
||||
secondary: #E94E1B,
|
||||
secondary: $desert-red,
|
||||
success: $acid-green,
|
||||
warning: $bloody-red,
|
||||
alert: $bloody-red,
|
||||
|
|
@ -100,7 +90,7 @@ $black: #0a0a0a;
|
|||
$white: #fefefe;
|
||||
$body-background: $white;
|
||||
$body-font-color: $black;
|
||||
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
|
||||
$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-padding: 1rem;
|
||||
|
|
@ -184,7 +174,7 @@ $header-styles: (
|
|||
);
|
||||
$header-text-rendering: optimizeLegibility;
|
||||
$small-font-size: 80%;
|
||||
$header-small-font-color: $medium-gray;
|
||||
$header-small-font-color: $dark-gray;
|
||||
$paragraph-lineheight: 1.6;
|
||||
$paragraph-margin-bottom: 1rem;
|
||||
$paragraph-text-rendering: optimizeLegibility;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
// foundation styles
|
||||
@import 'settings';
|
||||
@import 'foundation';
|
||||
@import 'motion-ui';
|
||||
|
|
@ -62,3 +63,33 @@
|
|||
// Motion UI
|
||||
@include motion-ui-transitions;
|
||||
@include motion-ui-animations;
|
||||
|
||||
// arcHIVE styles
|
||||
|
||||
// global project styles
|
||||
@import "global/colors";
|
||||
@import "global/typography";
|
||||
|
||||
// Modules
|
||||
@import "modules/navigation";
|
||||
@import "modules/header";
|
||||
@import "modules/hero";
|
||||
@import "modules/content";
|
||||
@import "modules/footer";
|
||||
|
||||
// Componentes
|
||||
//@import "components/buttons";
|
||||
|
||||
// Templates
|
||||
//@import "templates/front";
|
||||
|
||||
// Vendors
|
||||
//
|
||||
// fontawesome as shown here:
|
||||
// https://stackoverflow.com/questions/49195144/add-font-awesome-to-gulp-project-correctly#51491927
|
||||
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
|
||||
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands";
|
||||
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular";
|
||||
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid";
|
||||
//@import "../../../node_modules/@fortawesome/fontawesome-free/scss/v4-shims";
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
$stone-grey: #CCCCCC;
|
||||
$acid-green: #69E344;
|
||||
$bubblegum-pink: #F096F9;
|
||||
$desert-red: #D75930;
|
||||
$mustard-yellow: #F5C042;
|
||||
$beach-blue: #5CC8D1;
|
||||
$hyperlink-blue: #0000DD;
|
||||
$bloody-red: #D32D1F;
|
||||
$mid-grey: #808080;
|
||||
$antracite-grey: #333333;
|
||||
$forest-green: #1E6041;
|
||||
$raspberry-purple: #54367B;
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
@font-face {
|
||||
font-family: 'worksans-medium';
|
||||
src: url('../fonts/WorkSans-Medium.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'worksans-mediumitalic';
|
||||
src: url('../fonts/WorkSans-MediumItalic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@mixin font-worksans-medium {
|
||||
font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
@mixin font-worksans-mediumitalic {
|
||||
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@include breakpoint(small){
|
||||
header {
|
||||
min-height: 6rem;
|
||||
.logo {
|
||||
max-width: 10rem;
|
||||
}
|
||||
slide {
|
||||
min-height: 10rem;
|
||||
content {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
@include breakpoint(small){
|
||||
hero {
|
||||
background-color: $secondary-color ;
|
||||
slide {
|
||||
min-height: 20vh;
|
||||
content {
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
}
|
||||
figure {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
aside {
|
||||
min-height:5vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// navigation scss
|
||||
|
|
@ -13,47 +13,54 @@
|
|||
|
||||
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
|
||||
|
||||
<main class="off-canvas-content" data-off-canvas-content>
|
||||
|
||||
<content class="grid-container fluid">
|
||||
{{> header}}
|
||||
<header data-sticky-container>
|
||||
<div class="title-bar" data-sticky data-options="marginTop:0;" data-top-anchor="1">
|
||||
<div class="title-bar-left">
|
||||
<a href="#">
|
||||
<h1 class="site-name hide">arcHIVE</h1>
|
||||
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title-bar-right">
|
||||
<button type="button" class="menu-icon show-for-small-only" data-toggle="offCanvasNestedPush">
|
||||
</button>
|
||||
<div class="off-canvas position-right is-closed" id="offCanvasNestedPush" data-off-canvas>
|
||||
<!-- Content -->
|
||||
<ul class="menu">
|
||||
<li><a href="#">News</a></li>
|
||||
<li><a href="#">Collections</a></li>
|
||||
<li class="is-active"><a href="#">Digital kit</a></li>
|
||||
<li><a href="#">Publishing</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Info</a></li>
|
||||
<li><a href="#">Login</a></li>
|
||||
<li><a href="#"><i class="fi-list"></i>Search</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<header class="grid-x grid-padding-x">
|
||||
<main class="cell shrink">
|
||||
<a href="#">
|
||||
<h1 class="site-name hide">arcHIVE</h1>
|
||||
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
|
||||
</a>
|
||||
</main>
|
||||
<menu class=" cell auto align-right">
|
||||
<!-- Content -->
|
||||
<ul class="menu">
|
||||
<li><a href="#">News</a></li>
|
||||
<li><a href="#">Collections</a></li>
|
||||
<li class="is-active"><a href="#">Digital kit</a></li>
|
||||
<li><a href="#">Publishing</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Info</a></li>
|
||||
<li><a href="#">Login</a></li>
|
||||
<li><a href="#"><i class="fi-list"></i>Search</a></li>
|
||||
</ul>
|
||||
</menu>
|
||||
</header>
|
||||
|
||||
{{> hero}}
|
||||
<hero class="grid-x">
|
||||
<div class="cell small-12 ">
|
||||
<h1> big old hero</h1>
|
||||
</div>
|
||||
<hero class="grid-y">
|
||||
<main class="cell small-10">
|
||||
<slide class="grid-x">
|
||||
<content class="cell small-6">
|
||||
<p> big old hero</p>
|
||||
</content>
|
||||
<figure class="cell small-6">
|
||||
<img src="{{root}}assets/img/ARC-HIVE-logo.svg" class="logo"/>
|
||||
</figure>
|
||||
</slide>
|
||||
</main>
|
||||
<aside class="cell small-2">
|
||||
<button type="button" class="button hollow"> search </button>
|
||||
<button type="button" class="button hollow"> collections </button>
|
||||
</aside>
|
||||
</hero>
|
||||
|
||||
{{> body}}
|
||||
</main>
|
||||
{{> footer}}
|
||||
<footer class="grid-x">
|
||||
<main>
|
||||
{{> body}}
|
||||
</main>
|
||||
<aside>
|
||||
</aside>
|
||||
{{> footer}}
|
||||
<footer class="grid-x">
|
||||
<div class="cell small-4">
|
||||
<ul class="menu">
|
||||
<li><a href="#">One</a></li>
|
||||
|
|
@ -79,7 +86,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</content>
|
||||
<script src="{{root}}assets/js/app.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue