Merge branch 'landing-page'
3
app/assets/js/App.js
Normal file
@ -0,0 +1,3 @@
|
||||
import MobileMenu from './modules/MobileMenu';
|
||||
|
||||
var mobileMenu = new MobileMenu();
|
1
app/assets/js/Vendor.js
Normal file
@ -0,0 +1 @@
|
||||
import '../temp/modernizr';
|
26
app/assets/js/modules/MobileMenu.js
Normal file
@ -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;
|
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 1.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 10.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 11.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 12.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 13.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 14.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 2.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 3.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 4.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 5.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 6.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 7.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 8.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT 9.woff
Normal file
BIN
app/assets/media/fonts/bahnschrift/BAHNSCHRIFT.woff
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose Pro Italic-trial.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_bold.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_extraBold.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_extraLight.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_light.ttf
Normal file
BIN
app/assets/media/fonts/cocogoose/Cocogoose_medium.ttf
Normal file
BIN
app/assets/media/images/bbb_logo.png
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
app/assets/media/images/bbb_logo_white.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
app/assets/media/images/boxes_small.jpg
Normal file
After Width: | Height: | Size: 81 KiB |
BIN
app/assets/media/images/logo.jpg
Normal file
After Width: | Height: | Size: 2.4 KiB |
BIN
app/assets/media/images/netherlands_flag.gif
Normal file
After Width: | Height: | Size: 513 B |
BIN
app/assets/media/images/veg.png
Normal file
After Width: | Height: | Size: 3.7 MiB |
BIN
app/assets/media/images/veg_large.png
Normal file
After Width: | Height: | Size: 3.7 MiB |
BIN
app/assets/media/images/veg_medium.png
Normal file
After Width: | Height: | Size: 2.6 MiB |
BIN
app/assets/media/images/veg_small.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
BIN
app/assets/media/images/veg_smaller.png
Normal file
After Width: | Height: | Size: 1.1 MiB |
19
app/assets/scss/base/_fonts.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
18
app/assets/scss/modules/_btn.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
74
app/assets/scss/modules/_large-hero.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
62
app/assets/scss/modules/_primary-nav.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
152
app/assets/scss/modules/_site-header.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
12
app/assets/scss/modules/_wrapper.scss
Normal file
@ -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>
|
BIN
app/temp/media/fonts/cocogoose/Cocogoose Pro Italic-trial.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_bold.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_extraBold.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_extraLight.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_light.ttf
Normal file
BIN
app/temp/media/fonts/cocogoose/Cocogoose_medium.ttf
Normal file
25
app/temp/scripts/App.js
Normal file
1
app/temp/scripts/Vendor.js
Normal file
@ -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);
|
||||
};
|
||||
|
3559
package-lock.json
generated
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"
|
||||
}
|
||||
}
|
||||
|
26
webpack.config.js
Normal file
@ -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']
|
||||
}
|
||||
}
|