Initial commit
This commit is contained in:
Arjun Patel
@@ -0,0 +1,152 @@
|
||||
/* Banner */
|
||||
|
||||
#banner {
|
||||
-ms-flex-align: center;
|
||||
-ms-flex-pack: center;
|
||||
@include color(accent2);
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('justify-content', 'center');
|
||||
background-image: url('../../images/banner.jpg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-top: 0;
|
||||
display: -ms-flexbox;
|
||||
height: 35rem !important;
|
||||
min-height: 35rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
> .inner {
|
||||
@include vendor('transform', 'scale(1.0)');
|
||||
@include vendor('transition', (
|
||||
'opacity #{_duration(banner)} ease',
|
||||
'transform #{_duration(banner)} ease'
|
||||
));
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: _palette(accent2, fg);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: _palette(accent2, fg-bold);
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
@include vendor('transform', 'translateX(50%) translateY(50%)');
|
||||
bottom: 50%;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include vendor('transition', 'opacity 3s ease');
|
||||
@include vendor('transition-delay', '#{_duration(banner) * 1.25}');
|
||||
background: _palette(accent2,bg);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.45;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: linear-gradient(135deg, _palette(accent1,bg) 0%,_palette(accent2,bg) 74%);
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
webkit-linear-gradientidth: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 30vh !important;
|
||||
min-height: 30vh;
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
video {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
height: auto !important;
|
||||
min-height: 0;
|
||||
padding: 4rem 2rem 4rem 2rem;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
body.is-preload & {
|
||||
.inner {
|
||||
@include vendor('transform', 'scale(0.99)');
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* CTA */
|
||||
|
||||
#cta {
|
||||
@include color(accent1);
|
||||
background-attachment: fixed;
|
||||
background-image: linear-gradient(transparentize(_palette(accent1,bg), 0.75), transparentize(_palette(accent1,bg), 0.75)), url(../../images/cta01.jpg);
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/* Footer */
|
||||
|
||||
#footer {
|
||||
@include color(accent2);
|
||||
@include padding(8rem, 0);
|
||||
|
||||
a {
|
||||
color: _palette(accent2, fg);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: _palette(accent1, bg);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include vendor('display', 'flex');
|
||||
|
||||
section {
|
||||
width: 25%;
|
||||
|
||||
&:first-child {
|
||||
width: 50%;
|
||||
padding-right: _size(element-margin) * 2;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: _size(element-margin) * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
border-top: 1px solid;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.5;
|
||||
padding: _size(element-margin) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
@include padding(4rem, 0);
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
.content {
|
||||
@include vendor('flex-wrap', 'wrap');
|
||||
|
||||
section {
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
@include padding(3rem, 0);
|
||||
|
||||
.content {
|
||||
section {
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
@include padding(2rem, 0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
/* Header */
|
||||
|
||||
$accent: accent2;
|
||||
|
||||
body {
|
||||
|
||||
padding-top: _size(header-height);
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
background-image: url(../../images/bg.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('justify-content', 'space-between');
|
||||
background: _palette($accent, bg);
|
||||
color: _palette($accent, fg);
|
||||
cursor: default;
|
||||
height: _size(header-height);
|
||||
left: 0;
|
||||
line-height: _size(header-height);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: _misc(z-index-base) + 1;
|
||||
|
||||
> .logo {
|
||||
color: _palette($accent, fg-bold);
|
||||
font-size: 1rem;
|
||||
font-weight: _font(weight-bold);
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0 1.25rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> nav {
|
||||
> a {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
padding: 0 0.75rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: _palette($accent, fg-bold);
|
||||
}
|
||||
|
||||
&[href="#menu"] {
|
||||
@include icon;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
&:before {
|
||||
content: '\f0c9';
|
||||
margin: 0 0.5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& + a[href="#menu"]:last-child {
|
||||
border-left: solid 1px _palette($accent, border);
|
||||
margin-left: 0.5rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
padding: 0 0.5rem;
|
||||
|
||||
& + a[href="#menu"]:last-child {
|
||||
margin-left: 0.25rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
body {
|
||||
padding-top: 44px;
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
#header {
|
||||
min-width: 320px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/* Heading */
|
||||
|
||||
#heading {
|
||||
-ms-flex-align: center;
|
||||
-ms-flex-pack: center;
|
||||
@include color(accent2);
|
||||
@include vendor('align-items', 'center');
|
||||
@include vendor('display', 'flex');
|
||||
@include vendor('justify-content', 'center');
|
||||
background-image: linear-gradient(transparentize(_palette(accent2,bg), 0.75), transparentize(_palette(accent2,bg), 0.75)), url('../../images/banner.jpg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-top: 0;
|
||||
display: -ms-flexbox;
|
||||
height: 15rem !important;
|
||||
min-height: 15rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
background: linear-gradient(135deg, _palette(accent1,bg) 0%,_palette(accent2,bg) 74%);
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* Main */
|
||||
|
||||
#main {
|
||||
.content {
|
||||
background: _palette(bg);
|
||||
border-radius: _size(border-radius);
|
||||
box-shadow: 0px 0px 4px 1px _palette(border-lt);
|
||||
margin-bottom: _size(element-margin);
|
||||
padding: 3rem;
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/* Menu */
|
||||
|
||||
$accent: accent2;
|
||||
|
||||
#menu {
|
||||
@include color-typography($accent);
|
||||
@include color-button($accent);
|
||||
@include vendor('transform', 'translateX(#{_size(menu-width)})');
|
||||
@include vendor('transition', (
|
||||
'transform #{_duration(menu)} ease',
|
||||
'box-shadow #{_duration(menu)} ease',
|
||||
'visibility #{_duration(menu)}'
|
||||
));
|
||||
-webkit-overflow-scrolling: touch;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
max-width: 80%;
|
||||
overflow-y: auto;
|
||||
padding: 3rem 2rem;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
width: _size(menu-width);
|
||||
z-index: _misc(z-index-base) + 2;
|
||||
|
||||
> ul {
|
||||
margin: 0 0 (_size(element-margin) * 0.5) 0;
|
||||
|
||||
&.links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
padding: 0;
|
||||
|
||||
> a {
|
||||
border: 0;
|
||||
border-top: solid 1px _palette($accent, border);
|
||||
color: inherit;
|
||||
display: block;
|
||||
letter-spacing: _size(letter-spacing-alt);
|
||||
line-height: 3.5rem;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: _palette($accent, fg-bold);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
> a {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
@include icon;
|
||||
@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
border: 0;
|
||||
color: _palette($accent, fg-light);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 3.25rem;
|
||||
line-height: 3.25rem;
|
||||
padding-right: 1.25rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
vertical-align: middle;
|
||||
width: 7rem;
|
||||
|
||||
&:before {
|
||||
content: '\f00d';
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: _palette($accent, fg-bold);
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
padding: 2.5rem 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
body.is-menu-visible {
|
||||
#menu {
|
||||
@include vendor('transform', 'translateX(0)');
|
||||
box-shadow: 0 0 1.5rem 0 rgba(0,0,0,0.2);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user