evie-jekyll 1.0.0

data/_sass/components/_cta.scss

@@ -0,0 +1,33 @@
+.cta{
+	background: linear-gradient(to right, $primary, $secondary);
+	color: #fff;
+	padding: 48pt 0;
+	text-align: center;
+}
+
+.cta--reverse{
+	background: linear-gradient(to left, $primary, $secondary);
+}
+
+.cta--plain{
+	background: $primary;
+}
+
+.cta--secondary{
+	background: $secondary;
+}
+
+.cta__title{
+	color: inherit;
+}
+
+.cta__sub{
+	opacity: 0.85;
+	max-width: 58ch;
+	margin: 16pt auto 24pt auto;
+	
+
+	&--center{
+		text-align: center;
+	}
+}

data/_sass/components/_expanded.scss

@@ -0,0 +1,66 @@
+.expanded{
+	padding: 72pt 0;
+}
+
+.expanded__inner{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-direction: column;
+
+	@include desktop{
+		flex-direction: row;
+	}
+}
+
+.expanded__media{
+	order: 1;
+	text-align: center;
+	
+	@include desktop{
+		width: 50%;
+		flex-shrink: 0;
+		order: unset;
+	}
+}
+
+.expanded__content{
+	order: 2;
+	
+	@include desktop{
+		padding: 0 16pt;
+		width: 50%;
+		flex-shrink: 0;
+		order: unset;
+	}
+
+}
+
+.expanded:nth-child(even){
+	.expanded__media{
+		order: 1;
+
+		@include desktop{
+			order: 1;
+		}
+	}
+}
+
+/* Actual content */
+.expanded__image{
+	width: 90%;
+	max-width: 220px;
+	padding: 16pt 0;
+
+	@include desktop{
+		max-width: 280px;
+	}
+}
+
+.expanded__title{
+	max-width: 550px;
+}
+
+.expanded__text{
+	max-width: 60ch;
+}

data/_sass/components/_footer.scss

@@ -0,0 +1,98 @@
+.footer{
+	background-color: $background;
+	padding: 36pt 0;
+}
+
+.footer__inner{
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+
+	@include tablet{
+		flex-direction: row;
+	}
+}
+
+.footer__textLogo{
+	flex-shrink: 0;
+	padding-right: 16pt;
+	display: block;
+	cursor: pointer;
+	color: $primary;
+	font-size: 1.225rem;
+	min-width: 33%;
+	margin-bottom: 1.5rem;
+
+	@include tablet{
+		margin-bottom: 0;
+	}
+	
+	@include desktop{
+		min-width: 25%;
+		font-size: 1.325rem;
+	}
+}
+
+.footer__data{
+	display: flex;
+	flex-grow: 1;
+	justify-content: space-between;
+	padding-top: 0.25rem;
+	flex-wrap: wrap;
+	flex-direction: column;
+	font-size: 0.9rem;
+
+	@include desktop{
+		flex-wrap: nowrap;
+		flex-direction: row;
+	}
+}
+
+.footer__data__item{
+	padding-bottom: 0.5rem;
+	display: inline-block;
+	margin-bottom: 8pt;
+}
+
+.footer__link{
+	color: $primary;
+	border-bottom: 1px dotted $primary;
+	padding-bottom: 1pt;
+	transition: 0.7s;
+
+	@include desktop{
+		&:hover{
+			color: #fafafa;
+			border-color: #fafafa;
+		}
+	}
+}
+
+.footer__row{
+	margin-bottom: 8pt;
+}
+
+/*--- Modifiers---*/
+.footer--dark{
+	background-color: $background-dark;
+
+	.footer__textLogo{
+		color: #fff;
+	}
+	
+	.footer__inner{
+		color: darken(#fff,15%);
+	}
+
+	.footer__link{
+		color: darken(#fff,15%);
+		border-color: darken(#fff,15%);
+
+		@include desktop{
+			&:hover{
+				color: #fff;
+				border-color: #fff;
+			}
+		}
+	}
+}

data/_sass/components/_hero.scss

@@ -0,0 +1,136 @@
+.hero{
+	position: relative;
+	width: 100%;
+	background-image: url("/assets/images/evie_default_bg.jpeg");
+	box-shadow: $hero-shadow;
+	background-size: cover; 
+	background-position: center center;
+	background-repeat: no-repeat;
+	color: $hero-color;
+
+	&__inner{
+		position: relative;
+		z-index: 3;
+	}
+}
+
+// Hero overlays
+// It contains two divs between the image and the content
+// The one is the SVG mask and the second one a colored overlay with high opacity
+
+// Color overlay
+.hero__overlay{
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	opacity: $hero-color-opacity;
+	z-index: 1;
+	background-color: $primary;
+}
+
+.hero__overlay--gradient{
+	background: linear-gradient(to right, $primary, $secondary);
+}
+
+.hero__overlay--gradientVertical{
+	background: linear-gradient(to bottom, $primary, $secondary);
+}
+
+// Mask
+.hero__mask{
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><linearGradient id="06714b97-aec8-4b7e-bf3d-1e20f95f612e" y1="809.5" x2="958" y2="809.5" gradientTransform="matrix(1, 0, 0, -1, 0, 1082)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.05"/></linearGradient></defs><title>hero</title><rect id="0567095b-2cf7-4407-b8ab-ec2abe52d830" data-name="&lt;Path&gt;" y="545" width="1920" height="535" fill="#fff" opacity="0.05" style="isolation:isolate"/><polygon id="82ca9a61-a0a1-49cc-9805-a3533c693bad" data-name="&lt;Path&gt;" points="958 545 0 545 0 0 770.96 0 958 545" fill="url(#06714b97-aec8-4b7e-bf3d-1e20f95f612e)"/></svg>');
+	background-size: cover; 
+	background-position: center center;
+	background-repeat: no-repeat;
+	opacity: $hero-mask-opacity;
+	z-index: 2;
+}
+
+// Actual content
+.hero__content{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: calc( 100vh - 50px );
+	padding: calc( #{$navbar-height + 24pt}) 0; // Padding added to avoid overlapping with fixed navigation bars
+	overflow: auto;
+	
+	// This div allows normal behaviors for contained elements instead of flexbox aligning them 
+	&__inner{
+		width: 100%;
+		max-width: 600px;
+		text-align: center;
+	}
+}
+
+/*--- CONTENT STYLING ---*/
+.hero__title{
+	color: inherit;
+	margin-bottom: 1.25em;
+}
+
+.hero__text{
+	opacity: 0.85;
+	line-height: 1.7;
+	text-align: left;
+	font-size: 1.1em;
+}
+
+.hero .button{
+	margin: 12pt 8pt;
+}
+
+.hero__button{
+	color: $hero-color;
+	border-color: $hero-color;
+
+	@include desktop{
+		&:hover{
+			color: darken($hero-color,11%);
+			border-color: darken($hero-color,11%);
+		}
+	}
+}
+
+// Sub-hero
+.hero__sub{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 50px;
+}
+
+.hero__sub__down{
+	width: $hero-down-size;
+	height: $hero-down-size;
+	color: $text;
+	transition: 0.7s;
+	cursor: pointer;
+
+	@include desktop{
+		&:hover{
+			color: $primary;
+		}
+	}
+}
+
+#scrollToNext{
+	transition: 0.7s;
+}
+
+
+/*--- MODIFICATIONS ---*/
+
+// With the class "hero-full" the white line between the hero gets hidden and the hero expands
+.hero--full{
+	.hero__content{
+		min-height: 100vh;
+	}
+}
+
+.hero--full + .hero__sub{
+	display: none;
+}

data/_sass/components/_landing.scss

@@ -0,0 +1,9 @@
+.landing__section{
+	padding: 24pt 0;
+}
+
+.landing__section:nth-child(odd){
+	background-color: $background-alt;
+	border-top: 1px solid $line;
+	border-bottom: 1px solid $line;
+}

data/_sass/components/_navbar.scss

@@ -0,0 +1,160 @@
+.navbar{
+	position: fixed;
+	z-index: 100;
+	width: 100%;
+	background-color: $primary;
+	transition: 0.7s;
+
+	&--nofixed{
+		position: relative;
+		z-index: 3;
+	}
+}
+
+.navbar__inner{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: $navbar-height;
+	color: #fff;
+	transition: 0.7s;
+}
+
+// Content
+.navbar__logo{
+	font-size: 1.325rem;
+	transition: 0;
+	color: #fff;
+	text-decoration: none;
+}
+
+.navbar__menu{
+	display: none;
+
+	&--noMob{
+		display: block;
+	}
+
+	@include desktop{
+		display: block;
+	}
+
+	li{
+		margin-left: 4pt;
+		backface-visibility: hidden;
+    	display: inline-block;
+
+		@include desktop{
+			margin-left: 16pt;
+		}
+	}
+
+	a{
+		color: #fff;
+		@include desktop{
+			opacity: 0.75;
+
+			&:hover{
+				opacity: 1;
+			}
+
+			&:after {
+				display:block;
+				content: '';
+				border-bottom: solid 1px #fff;  
+				transform: scaleX(0);  
+				transition: transform 250ms ease-in-out;
+			}
+
+			&:hover:after { transform: scaleX(1); }	
+		}
+	}
+}
+
+.navbar__menu-mob{
+	display: block;
+
+	&--noMob{
+		display: none;
+	}
+
+	@include desktop{
+		display: none;
+	}
+}
+
+/*--- Extended and transparent version ---*/
+.navbar--extended{
+	background-color: transparent;
+	
+	.navbar__inner{
+		height: $navbar-height;
+		color: $hero-color; // Since this is transparent whatever color is used in the hero, fits here
+	}
+}
+
+/*! responsive-nav.js 1.0.39 by @viljamis */
+
+.nav__mobile ul {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	display: block;
+	list-style: none;
+	background-color: $background-dark;
+	color: #fff;
+}
+
+.nav__mobile li {
+  width: 60%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1em 0;
+  display: block;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+
+  &:last-child{
+  	border-bottom: none;
+  }
+}
+
+.js .nav__mobile {
+  clip: rect(0 0 0 0);
+  max-height: 0;
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  zoom: 1;
+}
+
+.nav__mobile.opened {
+  max-height: 9999px;
+}
+
+.nav-toggle {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+@include desktop{
+  .js .nav__mobile {
+    position: relative;
+  }
+  .js .nav__mobile.closed {
+    max-height: none;
+  }
+  .nav-toggle {
+    display: none;
+  }
+}
+
+#toggle svg{
+	height: 1.2em;
+	width: 1.2em;
+	vertical-align: middle;
+}