joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

(Update) GetDash: Add module infogrid / refactor page scss / add inverted navigation style 'black'

Browse source
This commit is contained in:
0xfff 2016-09-26 22:43:04 +02:00
parent 69693de9a6
commit 1cfddb82c7
18 changed files with 500 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

9
_includes/hero/get-dash.html
View file

@ -1,4 +1,4 @@
<div class="hero" id="hero">
<div class="hero hero--light" id="hero">
<div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.get-dash.hero-image %}" class="background-video">
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -8,14 +8,14 @@
</div>
<!-- Navigation -->
{% include nav-desktop.html %}
{% include nav-desktop.html logo-color='black' %}
<!-- Hero content -->
<div class="hero__content">
<h1 class="hero__title">{% t pages.get-dash.hero-heading %}</h1>
<p class="hero__lead">{% t pages.get-dash.hero-text %}</p>
<div class="hero__buttons">
<div class="hero__buttons hero__buttons--get-dash">
<a href="#" class="btn-blue-solid btn-large">{% t pages.get-dash.hero-download-btn %}</a>
</div>
<p class="hero__text">{% t pages.get-dash.hero-wallet-version %} – (<a href="#" class="hero__link">{% t pages.get-dash.hero-wallet-version-select %}</a>)</p>
@ -26,4 +26,7 @@
<a href="#getdash-trade" class="btn-white-solid">{% t pages.get-dash.hero-trade-btn %}</a>
</div>
</div>
<!-- Hero stripe -->
<div class="hero__stripe hero__stripe--grey-blue"></div>
</div>

3
_includes/hero/home.html
View file

@ -19,4 +19,7 @@
<a href="#" class="btn-blue-solid btn-large">{% t nav.get-dash %}</a>
</div>
</div>
<!-- Hero stripe -->
<div class="hero__stripe"></div>
</div>

2
_includes/nav-desktop.html
View file

@ -13,7 +13,7 @@
<a href="{{ basenav }}" class="logo"><img class="logo__img" src="/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
<nav class="nav">
<nav class="nav nav--{{ logo-color }}">
<ul class="nav__list">
<li class="nav__item"><a href="{{ basenav }}/" class="nav__link">{% t nav.what-is-dash %}</a></li>
<li class="nav__item"><a href="{{ basenav }}/get-dash/" class="nav__link">{% t nav.get-dash %}</a></li>

BIN
assets/img/logo-black.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

215
get-dash/index.html
View file

File diff suppressed because one or more lines are too long

2
index.html
View file

@ -7,7 +7,7 @@ description: pages.home.description
{% include hero/home.html %}
<div class="page-home">
<div class="page page--home">
<!--
WHAT IS DASH?

68
src/scss/_header.scss
View file

@ -1,12 +1,53 @@
#top {
border-bottom: 1px solid rgba($color-white, 0.35);
// border-bottom: 1px solid rgba($color-white, 0.35);
margin-bottom: 20px;
position: relative;
z-index: 2;
}
.hero {
position: relative;
min-height: 600px;
color: $color-white;
overflow: hidden;
&__stripe {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
transform: skewY(-5deg);
transform-origin: 0;
background: $color-white;
z-index: 2;
// TODO: Make this dependent on hero modifier not a separate modifier for stripe
&--grey {
background: $color-gray-light;
}
&--grey-blue {
background: $color-gray-light-blueish;
}
}
#background-video {
z-index: 1;
}
&__content {
@extend .content; // DEV: Todo
padding: 60px 0 120px;
margin: 0 auto;
position: relative;
z-index: 3;
}
&__buttons {
margin-bottom: 20px; /*optical*/
&--get-dash {
margin-bottom: 0;
}
}
&__title, &__lead, &__text {
text-shadow: 2px 2px 5px rgba(black, 0.2);
@ -15,7 +56,7 @@
&__title {
@include font-title-xxlarge();
margin-bottom: 15px; /*optical*/
margin-left: -7px; /*optical*/
margin-left: -7px; /*optical*/
}
&__lead {
@ -23,7 +64,11 @@
}
&__text {
opacity: 0.8;
background: rgba(0,0,0,0.05);
border-radius: 17px;
padding: 1px 10px;
display: inline-block;
font-size: 15px;
}
&__lead,
@ -36,13 +81,16 @@
}
}
&__content {
@extend .content; // DEV: Todo
padding: ($size-gutter * 4) 0 ($size-gutter * 5);
margin: 0 auto;
}
&--light {
color: $color-black;
&__buttons {
margin-bottom: 20px; /*optical*/
.hero {
&__title, &__lead, &__text {
text-shadow: none;
}
}
#background-video::after {
background: none;
}
}
}

2
src/scss/_home.scss
View file

@ -1,7 +1,7 @@
$homeSectionPaddingTop: 40px;
.page-home {
.page--home {
> section {
padding: $homeSectionPaddingTop 0;
overflow: hidden;

56
src/scss/_info-grid.scss Normal file
View file

@ -0,0 +1,56 @@
$m: 'info-grid';
.#{$m} {
&__content {
@include clearfix();
}
&__item {
@extend .col-md-4;
@extend .col-sm-6;
margin-bottom: 70px;
@include mq($to: small) {
width: 100%;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
&-icon {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
// border: 1px solid rgba($color-gray-dark, 0.1);
background-color: rgba($color-white, 0.5);
margin-bottom: 40px;
svg {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
@include mq($to: small) {
margin-left: auto;
margin-right: auto;
}
}
&-title {
@include font-title-small();
text-transform: none;
margin-bottom: 0.5em;
}
&-text {
color: $color-gray-dark;
margin-bottom: 0.5em;
}
&-link {
&::after {
content: '→';
margin-left: 0.5em;
}
}
}
}

16
src/scss/_nav.scss
View file

@ -1,6 +1,8 @@
$m: 'nav';
$nav-height: 90px;
.nav {
.#{$m} {
float: right;
text-align: right;
@ -55,6 +57,18 @@ $nav-height: 90px;
$active: rgba($color-white, 1));
letter-spacing: -0.008em;
}
&--black {
.#{$m} {
&__link {
@include link-style(
$link: rgba($color-black, 1),
$visited: rgba($color-black, 1),
$hover: rgba($color-black, 1),
$active: rgba($color-black, 1));
}
}
}
}

11
src/scss/_page.scss Normal file
View file

@ -0,0 +1,11 @@
$m: 'page';
.#{$m} {
&--home {
}
&--get-dash {
background-color: $color-gray-light-blueish;
padding-top: 70px;
}
}

25
src/scss/_section.scss Normal file
View file

@ -0,0 +1,25 @@
$m: 'section';
.#{$m} {
padding-bottom: 100px;
&--claim {
text-align: center;
.#{$m} {
&__icon {
display: inline-block;
margin-bottom: 50px;
}
&__title {
@include font-claim();
margin-bottom: 17px;
}
&__lead {
@include font-lead();
color: $color-gray-dark;
}
}
}
}

1
src/scss/global/_colors.scss
View file

@ -3,6 +3,7 @@ $color-black: #131415;
$color-black-light: #353535;
$color-gray: #f0f0f0;
$color-gray-light: #f7f9fa;
$color-gray-light-blueish: #e8eef2;
$color-gray-dark: #555555;
$color-white: #ffffff;

3
src/scss/global/_typography.scss
View file

@ -39,9 +39,10 @@ $line-height-heading: 1.2;
font-size: pxToRem($font-size-medium);
}
@mixin font-claim() {
font-weight: $font-weight-light;
font-weight: $font-weight-regular;
font-size: pxToRem($font-size-medium);
letter-spacing: 0.017em;
text-transform: uppercase;
}
@mixin font-title-small() {
font-weight: $font-weight-regular;

7
src/scss/main.scss
View file

@ -17,16 +17,19 @@
@import "buttons";
@import "forms";
@import "footer";
@import "page";
@import "section";
//stuff most pages need
@import "overlay-menu";
@import "video";
@import "magnific-popup";
@import "info-grid";
//styles for specific pages
@import "home";
@import "pages/home";
@import "interior";
@import "post";
@import "junk-drawer";
@import "styleguide";
@import "pages/styleguide";
@import "code-highlight";

234
src/scss/pages/_home.scss Normal file
View file

@ -0,0 +1,234 @@
$homeSectionPaddingTop: 40px;
.page--home {
> section {
padding: $homeSectionPaddingTop 0;
overflow: hidden;
position: relative;
text-align: center;
&:nth-child(2n) {
background-color: $color-gray-light;
}
.row {
text-align: left;
}
h2 {
margin-top: 0px;
}
p {
max-width: 50em;
margin: 20px auto;
}
.features-collection {
text-align: center;
h2 {
margin-top: 20px;
}
p {
margin: 0 auto;
}
}
img {
max-width: 100%;
@media (min-width: 768px) {
max-width: calc(100% - 20px);
}
}
}
.col-sm-6 {
z-index: 2; // Lets me use z-index:1 for columns that underlap
}
.home-architecture-graphic,
.home-budgets-graphic,
.home-network-graphic,
.home-evolution-graphic {
min-height: 350px;
@media (min-width: 768px) {
> img {
position: absolute;
}
}
@media (max-width: 767px) {
text-align: center;
> img {
margin-top: 20px;
}
}
}
.home-architecture-graphic {
> img {
max-width: 100%;
box-shadow: -5px 0 10px $color-black;
border-radius: 8px 0 0 0;
}
}
.home-budgets-graphic {
@media (min-width: 768px) {
min-height: 385px;
> img {
bottom: 10px;
}
}
}
.home-network-graphic {
min-height: 250px;
max-width: none;
@media (min-width: 768px) {
z-index: 1;
> img {
right: -20px;
bottom: -50px;
max-width: 150%;
}
&:after {
content: '';
position: absolute;
right: -20px;
bottom: -50px;
width: 819px;
height: 339px;
max-width: 150%;
background: linear-gradient(to right, $color-gray-light, rgba($color-gray-light, 0.5) 33%, rgba($color-gray-light, 0) 75%);
}
}
}
.home-evolution-graphic {
@media (min-width: 768px) {
z-index: 1;
> img {
top: -$homeSectionPaddingTop;
bottom: -$homeSectionPaddingTop;
max-width: none;
max-height: calc(100% + 80px);
}
&:after {
content: '';
position: absolute;
top: -$homeSectionPaddingTop;
bottom: -$homeSectionPaddingTop;
width: 200%;
background: linear-gradient(to left, $color-white 50%, rgba($color-white, 0) 87.5%);
}
}
}
.home-get-started-cta {
background-color: $color-blue;
color: white;
padding-bottom: 0;
h1, h2, h3 {
color: white;
}
img {
margin-top: 30px;
vertical-align: text-top;
}
.btn-white-solid {
color: $color-blue;
}
}
.home-latest-news {
.btn-blue {
margin-top: 20px;
}
}
}
.logo-collection {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 20px;
&__logo {
flex: 1 1 auto;
margin: 20px 10px;
}
&__image {
max-height: 100%;
}
}
.news-post {
background-color: $color-white;
box-shadow: 0 1px 4px rgba($color-black, 0.25);
margin: 20px 0;
.news-image {
position: relative;
overflow: hidden;
padding-bottom: 60%;
background-color: #999;
> img {
position: absolute;
top: 0;
left: 0;
width: 100%;
@supports (object-fit: cover) {
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
}
}
.news-body {
position: relative;
padding: 20px;
height: 220px;
overflow: hidden;
&:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 90px;
background: linear-gradient(to top, white 50%, rgba(white, 0));
pointer-events: none;
}
h3 {
font-size: 18px;
color: $color-blue;
line-height: 1.2;
}
.date {
color: lighten($color-black, 50%);
font-size: 14px;
}
p {
margin: 0;
position: absolute;
left: 20px;
right: 20px;
overflow: hidden;
}
a.read-more {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
z-index: 1;
}
}
}

0
src/scss/_styleguide.scss → src/scss/pages/_styleguide.scss
View file