Merge branch 'landing-page'
|
@ -0,0 +1,3 @@
|
|||
import MobileMenu from './modules/MobileMenu';
|
||||
|
||||
var mobileMenu = new MobileMenu();
|
|
@ -0,0 +1 @@
|
|||
import '../temp/modernizr';
|
|
@ -0,0 +1,26 @@
|
|||
import $ from 'jquery';
|
||||
|
||||
class MobileMenu{
|
||||
|
||||
constructor(){
|
||||
this.siteHeader = $(".site-header");
|
||||
this.menuIcon = $(".site-header__menu-icon");
|
||||
this.menuContent = $(".site-header__menu-content");
|
||||
this.siteHeaderLogo= $(".site-header__logo");
|
||||
this.events();
|
||||
}
|
||||
|
||||
events(){
|
||||
this.menuIcon.click(this.toggleTheMenu.bind(this));
|
||||
}
|
||||
|
||||
toggleTheMenu(){
|
||||
this.menuContent.toggleClass("site-header__menu-content--is-visible");
|
||||
this.siteHeader.toggleClass("site-header--is-expanded");
|
||||
this.menuIcon.toggleClass("site-header__menu-icon--close-x");
|
||||
this.siteHeaderLogo.toggleClass("site-header__logo--orange-bg");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default MobileMenu;
|
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 81 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 513 B |
After Width: | Height: | Size: 3.7 MiB |
After Width: | Height: | Size: 3.7 MiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 1.1 MiB |
|
@ -0,0 +1,19 @@
|
|||
@font-face {
|
||||
font-family: "CocogooseNormal";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CocogooseLight";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CocogooseBold";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CocogooseExtra";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype");
|
||||
}
|
|
@ -8,4 +8,12 @@
|
|||
|
||||
@mixin atLarge {
|
||||
@media (min-width: 1200px) { @content };
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&::after{
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
.btn{
|
||||
background-color: #00ab00;;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: .75rem 1.2rem;
|
||||
display: inline-block;
|
||||
border-radius: 30px;
|
||||
|
||||
&--large {
|
||||
padding: 1.1rem 1.9rem;
|
||||
|
||||
@include atSmall(){
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
|
@ -0,0 +1,74 @@
|
|||
.large-hero {
|
||||
border-bottom: 10px solid white;
|
||||
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
|
||||
&__image{
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__text-content {
|
||||
padding-top: 88px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
|
||||
@include atMedium(){
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: "CocogooseBold";
|
||||
color: white;
|
||||
font-size: 2.8rem;
|
||||
margin: 0;
|
||||
|
||||
@include atSmall(){
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
@include atMedium(){
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
// font-family: "CocogooseNormal";
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
|
||||
@include atSmall(){
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
@include atMedium(){
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: #FFF;
|
||||
font-weight: 00;
|
||||
font-size: 1.1rem;
|
||||
max-width: 50rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@include atSmall(){
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
@include atMedium(){
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
|
@ -0,0 +1,62 @@
|
|||
.primary-nav{
|
||||
padding-top: 10px;
|
||||
|
||||
@include atMedium(){
|
||||
padding: 31px 0px;
|
||||
}
|
||||
|
||||
&--pull-right{
|
||||
@include atMedium(){
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding-right: 7px;
|
||||
|
||||
@include atMedium(){
|
||||
float: left;
|
||||
display: block;
|
||||
padding-right: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
padding-right: 0;
|
||||
|
||||
@include atMedium(){
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
font-size: .8rem;
|
||||
background:rgba(black, .5);
|
||||
border-radius: 30px;
|
||||
|
||||
@include atMedium(){
|
||||
background:transparent;
|
||||
font-size: 1.10rem;
|
||||
padding: 12px 0;
|
||||
|
||||
&.is-current-link {
|
||||
color: #fabb69;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,152 @@
|
|||
.site-header{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
transition: background-color .3s ease-out;
|
||||
|
||||
&--is-expanded {
|
||||
background-color: orange;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
@include atMedium(){
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
background-color: rgba(#000, 0.4);
|
||||
}
|
||||
|
||||
&__btn-container{
|
||||
@include atMedium(){
|
||||
padding: 32px 0px 32px 0px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__language{
|
||||
margin: 13px auto 5px auto;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
|
||||
@include atMedium(){
|
||||
margin: 40px 20px 0px 0px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__menu-icon{
|
||||
width: 20px;
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #FFF;
|
||||
transform-origin: 0 0;
|
||||
transition: transform .3s ease-out;
|
||||
}
|
||||
|
||||
&__middle {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #FFF;
|
||||
transition: all .3s ease-out;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #FFF;
|
||||
transform-origin: 0 100%;
|
||||
transition: transform .3s ease-out;
|
||||
}
|
||||
|
||||
@include atMedium {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu-icon--close-x {
|
||||
&::before {
|
||||
transform: rotate(45deg) scaleX(1.25);
|
||||
}
|
||||
|
||||
.site-header__menu-icon__middle{
|
||||
transform: scaleX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg) scaleX(1.25) translateY(1px);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__menu-content{
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
transtion: all .3s ease-out;
|
||||
position: relative;
|
||||
z-index: -10;
|
||||
padding-top: 90px;
|
||||
text-align: center;
|
||||
|
||||
&--is-visible{
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@include atMedium(){
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
padding-top: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
padding: 5px 15px;
|
||||
left: 50%;
|
||||
transform-origin: 50% 0%;
|
||||
transform: translateX(-50%) scale(.8);
|
||||
transition: transform .3s ease-out;
|
||||
background-color: rgba(black, 0.5);
|
||||
|
||||
&--orange-bg {
|
||||
transition: background-color .3s ease-out;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
@include atMedium(){
|
||||
padding: 0;
|
||||
top: 3px;
|
||||
position: relative;
|
||||
float: left;
|
||||
left: auto;
|
||||
transform: translateX(0);
|
||||
background-color: rgba(black, 0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
.wrapper{
|
||||
overflow: hidden;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
max-width: 1300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&--medium{
|
||||
max-width: 976px;
|
||||
}
|
||||
}
|
|
@ -1,6 +1,12 @@
|
|||
@import './base/_normalize';
|
||||
@import './base/variables';
|
||||
@import './base/fonts';
|
||||
@import './base/global';
|
||||
@import './base/mixins';
|
||||
@import './modules/site-header';
|
||||
@import './modules/primary-nav';
|
||||
@import './modules/wrapper';
|
||||
@import './modules/large-hero';
|
||||
@import './modules/btn';
|
||||
|
||||
|
||||
|
|
|
@ -4,45 +4,65 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bio Bulk Bende</title>
|
||||
<meta name="keywords" content="Bio, Bulk, Bende, Food, Cooperative">
|
||||
<meta name="description" content="Bio Bulk Bende is a food cooperative.">
|
||||
<meta name="keywords" content="Bio, Bulk, Bende, Organic, Autonomous Foodcoop, Food, Cooperative">
|
||||
<meta name="description" content="Bio Bulk Bende is an autonomous organic food cooperative .">
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
|
||||
|
||||
<!-- build:js assets/scripts/Vendor.js -->
|
||||
<script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER -->
|
||||
<header>
|
||||
<div>
|
||||
<img src="#" alt="BBB logo">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<a href="#" class="btn">Join us!</a>
|
||||
<header class="site-header">
|
||||
<div class="wrapper">
|
||||
<div class="site-header__logo">
|
||||
<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#about-us">About us</a></li>
|
||||
<li><a href="#how-it-works">How it works</a></li>
|
||||
<li><a href="#agenda">Agenda</a></li>
|
||||
<li><a href="#members-area">Members area</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="site-header__menu-icon">
|
||||
<div class="site-header__menu-icon__middle"></div>
|
||||
</div>
|
||||
|
||||
<div class="site-header__menu-content">
|
||||
<div class="site-header__btn-container">
|
||||
<a href="#" class="btn ">Place your Order</a>
|
||||
</div>
|
||||
|
||||
<div class="site-header__language">
|
||||
<a href="#"><img src="./assets/media/images/netherlands_flag.gif" alt="Netherlands flag"></a>
|
||||
</div>
|
||||
|
||||
<nav class="primary-nav primary-nav--pull-right">
|
||||
<ul>
|
||||
<li><a href="#about-us">About us</a></li>
|
||||
<li><a href="#how-it-works">How it works</a></li>
|
||||
<li><a href="#agenda">Agenda</a></li>
|
||||
<li><a href="#members-area">Members area</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- STARTING SECTION -->
|
||||
<div>
|
||||
<img src="#" alt="A cool hero image">
|
||||
<div class="large-hero">
|
||||
|
||||
<picture>
|
||||
<source srcset="./assets/media/images/veg_large.png 1920w" media="(min-width: 1380px)">
|
||||
<source srcset="./assets/media/images/veg_medium.png 1380w" media="(min-width: 990px)">
|
||||
<source srcset="./assets/media/images/veg_small.png 990w" media="(min-width: 640px)">
|
||||
<img srcset="./assets/media/images/boxes_small.jpg 640w" alt="Our fresh vegetables" class="large-hero__image">
|
||||
</picture>
|
||||
|
||||
<div>
|
||||
<h1 class="large-hero__title">Bio Bulke Bende</h1>
|
||||
<h2 class="large-hero__subtitle">Organic autonomous foodcoop, every 1<sup>st</sup> Monday of the month.</h2>
|
||||
<p class="large-hero__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.n</p>
|
||||
<p><a href="#" class="btn">Join us!</a></p>
|
||||
<div class="large-hero__text-content">
|
||||
<h1 class="large-hero__title">bio bulke bende</h1>
|
||||
<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
|
||||
<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
|
||||
<p><a href="#" class="btn btn--large">Join us!</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -75,6 +95,8 @@
|
|||
</footer>
|
||||
|
||||
<!-- MODAL -->
|
||||
|
||||
<!-- build:js assets/scripts/App.js -->
|
||||
<script type="text/javascript" src="./temp/scripts/App.js"></script>
|
||||
<!-- endbuild -->
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1 @@
|
|||
!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=1)}([,function(e,n,t){"use strict";t.r(n);t(2)},function(e,n){!function(e,n,t,o){var r=[],s={_version:"3.11.3",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout((function(){n(t[e])}),0)},addTest:function(e,n,t){r.push({name:e,fn:n,options:t})},addAsyncTest:function(e){r.push({name:null,fn:e})}},a=function(){};a.prototype=s,a=new a;var i=[];var l=t.documentElement,f="svg"===l.nodeName.toLowerCase();!function(){var e,n,t,o,s,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],(n=r[f]).name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=typeof n.fn==="function"?n.fn():n.fn,s=0;s<e.length;s++)1===(l=e[s].split(".")).length?a[l[0]]=o:(a[l[0]]&&(!a[l[0]]||a[l[0]]instanceof Boolean)||(a[l[0]]=new Boolean(a[l[0]])),a[l[0]][l[1]]=o),i.push((o?"":"no-")+l.join("-"))}}(),function(e){var n=l.className,t=a._config.classPrefix||"";if(f&&(n=n.baseVal),a._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}a._config.enableClasses&&(e.length>0&&(n+=" "+t+e.join(" "+t)),f?l.className.baseVal=n:l.className=n)}(i),delete s.addTest,delete s.addAsyncTest;for(var u=0;u<a._q.length;u++)a._q[u]();e.Modernizr=a}(window,window,document)}]);
|
|
@ -304,6 +304,22 @@ template {
|
|||
[hidden] {
|
||||
display: none; }
|
||||
|
||||
@font-face {
|
||||
font-family: "CocogooseNormal";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_medium.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: "CocogooseLight";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_light.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: "CocogooseBold";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_bold.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: "CocogooseExtra";
|
||||
src: url("../media/fonts/cocogoose/Cocogoose_extraBold.ttf") format("truetype"); }
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
color: #333; }
|
||||
|
@ -312,4 +328,239 @@ img {
|
|||
max-width: 100%;
|
||||
height: auto; }
|
||||
|
||||
.site-header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
transition: background-color .3s ease-out; }
|
||||
.site-header--is-expanded {
|
||||
background-color: orange;
|
||||
padding-bottom: 18px; }
|
||||
@media (min-width: 800px) {
|
||||
.site-header {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.4); } }
|
||||
@media (min-width: 800px) {
|
||||
.site-header__btn-container {
|
||||
padding: 32px 0px 32px 0px;
|
||||
float: right; } }
|
||||
.site-header__language {
|
||||
margin: 13px auto 5px auto;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
width: 25px;
|
||||
height: 25px; }
|
||||
@media (min-width: 800px) {
|
||||
.site-header__language {
|
||||
margin: 40px 20px 0px 0px;
|
||||
float: right; } }
|
||||
.site-header__menu-icon {
|
||||
width: 20px;
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 10px;
|
||||
right: 10px; }
|
||||
.site-header__menu-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #FFF;
|
||||
transform-origin: 0 0;
|
||||
transition: transform .3s ease-out; }
|
||||
.site-header__menu-icon__middle {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #FFF;
|
||||
transition: all .3s ease-out;
|
||||
transform-origin: 0 50%; }
|
||||
.site-header__menu-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
background: #FFF;
|
||||
transform-origin: 0 100%;
|
||||
transition: transform .3s ease-out; }
|
||||
@media (min-width: 800px) {
|
||||
.site-header__menu-icon {
|
||||
display: none; } }
|
||||
.site-header__menu-icon--close-x::before {
|
||||
transform: rotate(45deg) scaleX(1.25); }
|
||||
.site-header__menu-icon--close-x .site-header__menu-icon__middle {
|
||||
transform: scaleX(0);
|
||||
opacity: 0; }
|
||||
.site-header__menu-icon--close-x::after {
|
||||
transform: rotate(-45deg) scaleX(1.25) translateY(1px); }
|
||||
.site-header__menu-content {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
transtion: all .3s ease-out;
|
||||
position: relative;
|
||||
z-index: -10;
|
||||
padding-top: 90px;
|
||||
text-align: center; }
|
||||
.site-header__menu-content--is-visible {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
z-index: 1; }
|
||||
@media (min-width: 800px) {
|
||||
.site-header__menu-content {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
padding-top: 0;
|
||||
transform: scale(1); } }
|
||||
.site-header__logo {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
padding: 5px 15px;
|
||||
left: 50%;
|
||||
transform-origin: 50% 0%;
|
||||
transform: translateX(-50%) scale(0.8);
|
||||
transition: transform .3s ease-out;
|
||||
background-color: rgba(0, 0, 0, 0.5); }
|
||||
.site-header__logo--orange-bg {
|
||||
transition: background-color .3s ease-out;
|
||||
background-color: orange; }
|
||||
@media (min-width: 800px) {
|
||||
.site-header__logo {
|
||||
padding: 0;
|
||||
top: 3px;
|
||||
position: relative;
|
||||
float: left;
|
||||
left: auto;
|
||||
transform: translateX(0);
|
||||
background-color: rgba(0, 0, 0, 0); } }
|
||||
|
||||
.primary-nav {
|
||||
padding-top: 10px; }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav {
|
||||
padding: 31px 0px; } }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav--pull-right {
|
||||
float: right; } }
|
||||
.primary-nav ul {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.primary-nav ul::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table; }
|
||||
.primary-nav li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding-right: 7px; }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav li {
|
||||
float: left;
|
||||
display: block;
|
||||
padding-right: 20px; } }
|
||||
.primary-nav li:last-child {
|
||||
padding-right: 0; }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav li:last-child {
|
||||
padding-right: 20px; } }
|
||||
.primary-nav a {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
font-size: .8rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 30px; }
|
||||
@media (min-width: 800px) {
|
||||
.primary-nav a {
|
||||
background: transparent;
|
||||
font-size: 1.10rem;
|
||||
padding: 12px 0; }
|
||||
.primary-nav a.is-current-link {
|
||||
color: #fabb69; } }
|
||||
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
max-width: 1300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
.wrapper--medium {
|
||||
max-width: 976px; }
|
||||
|
||||
.large-hero {
|
||||
border-bottom: 10px solid white;
|
||||
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
|
||||
position: relative; }
|
||||
.large-hero__image {
|
||||
display: block; }
|
||||
.large-hero__text-content {
|
||||
padding-top: 88px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center; }
|
||||
@media (min-width: 800px) {
|
||||
.large-hero__text-content {
|
||||
padding-top: 60px; } }
|
||||
.large-hero__title {
|
||||
font-family: "CocogooseBold";
|
||||
color: white;
|
||||
font-size: 2.8rem;
|
||||
margin: 0; }
|
||||
@media (min-width: 530px) {
|
||||
.large-hero__title {
|
||||
font-size: 3.2rem; } }
|
||||
@media (min-width: 800px) {
|
||||
.large-hero__title {
|
||||
font-size: 4.8rem; } }
|
||||
.large-hero__subtitle {
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
margin: 0; }
|
||||
@media (min-width: 530px) {
|
||||
.large-hero__subtitle {
|
||||
font-size: 1.8rem; } }
|
||||
@media (min-width: 800px) {
|
||||
.large-hero__subtitle {
|
||||
font-size: 2.4rem; } }
|
||||
.large-hero__description {
|
||||
color: #FFF;
|
||||
font-weight: 00;
|
||||
font-size: 1.1rem;
|
||||
max-width: 50rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
@media (min-width: 530px) {
|
||||
.large-hero__description {
|
||||
font-size: 1.3rem; } }
|
||||
@media (min-width: 800px) {
|
||||
.large-hero__description {
|
||||
font-size: 1.875rem; } }
|
||||
|
||||
.btn {
|
||||
background-color: #00ab00;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: .75rem 1.2rem;
|
||||
display: inline-block;
|
||||
border-radius: 30px; }
|
||||
.btn--large {
|
||||
padding: 1.1rem 1.9rem; }
|
||||
@media (min-width: 530px) {
|
||||
.btn--large {
|
||||
font-size: 1.25rem; } }
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
|
|
@ -4,6 +4,10 @@ const autoprefixer = require('autoprefixer'),
|
|||
postcss = require('gulp-postcss'),
|
||||
sass = require('gulp-sass'),
|
||||
sourcemaps = require('gulp-sourcemaps'),
|
||||
del = require('del'),
|
||||
webpack = require('webpack-stream'),
|
||||
webpackConfig = require('./webpack.config.js'),
|
||||
modernizr = require('gulp-modernizr'),
|
||||
browserSync = require('browser-sync').create();
|
||||
|
||||
|
||||
|
@ -58,8 +62,8 @@ const watch = function() {
|
|||
baseDir: './app'
|
||||
}
|
||||
});
|
||||
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask));
|
||||
gulp.watch("./app/assets/js/**/*.js").on('change', browserSync.reload);
|
||||
gulp.watch("./app/assets/scss/**/*.scss", {usePolling : true}, gulp.series(scssTask)).on('change', browserSync.reload);
|
||||
gulp.watch("./app/assets/js/**/*.js", {usePolling : true}, gulp.series(cleanScripts, modernizrTask, scriptsTask, endCleanModernizr));
|
||||
// gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask));
|
||||
gulp.watch("./app/*.html").on('change', browserSync.reload);
|
||||
};
|
||||
|
|
11
package.json
|
@ -9,11 +9,20 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.11.6",
|
||||
"@babel/preset-env": "^7.11.5",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"babel-loader": "^8.1.0",
|
||||
"browser-sync": "^2.26.12",
|
||||
"del": "^5.1.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-modernizr": "^4.0.1",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-sourcemaps": "^2.6.5"
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"webpack-stream": "^6.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^3.5.1"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
const path = require('path');
|
||||
|
||||
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
entry: {
|
||||
App: "./app/assets/js/App.js",
|
||||
Vendor: "./app/assets/js/Vendor.js"
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist/scripts"),
|
||||
filename: "[name].js"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js)$/,
|
||||
exclude: /node_modules/,
|
||||
use: ['babel-loader']
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['*', '.js']
|
||||
}
|
||||
}
|