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

(Refactor) Hero: Markup / BEM / Spacing / Responsive Height / Variables (#20)

Browse source 
* (Refactor) Hero: Markup / BEM / Spacing / Responsive Height / Variables

* (Fix) Header: adjust spacing with padding
This commit is contained in:
0xfff 2016-09-26 01:40:16 +02:00 • committed by GitHub
parent 251405a23e
commit 69d9d2c1d1
14 changed files with 151 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

36
_includes/hero/community.html
View file

@ -1,4 +1,4 @@
<div id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.community.hero-image %}" class="background-video"> <video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.community.hero-image %}" class="background-video">
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> <!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -6,27 +6,25 @@
<source src="assets/videos/Home-BG" type="video/ogg"> --> <source src="assets/videos/Home-BG" type="video/ogg"> -->
</video> </video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
{% include nav-desktop.html %} {% include nav-desktop.html %}
<!-- Hero content --> <!-- Hero content -->
<h1 class="content">{% t pages.community.hero-heading %}</h1> <div class="hero__content">
<p class="content">{% t pages.community.hero-text %}</p> <h1 class="hero__title">{% t pages.community.hero-heading %}</h1>
<p class="hero__lead">{% t pages.community.hero-text %}</p>
<div class="content"> <div class="hero__buttons">
<a href="#" class="btn-blue-solid">{% t pages.community.hero-forum-btn %}</a> <a href="#" class="btn-blue-solid">{% t pages.community.hero-forum-btn %}</a>
</div>
<div class="hero__buttons">
<a href="#community-forum" class="btn-white-solid">{% t pages.community.hero-discussion-btn %}</a>
<a href="#community-social" class="btn-white-solid">{% t pages.community.hero-social-btn %}</a>
<a href="#community-news" class="btn-white-solid">{% t pages.community.hero-news-btn %}</a>
<a href="#community-development" class="btn-white-solid">{% t pages.community.hero-development-btn %}</a>
<a href="#community-masternode" class="btn-white-solid">{% t pages.community.hero-masternodes-btn %}</a>
<a href="#community-media" class="btn-white-solid">{% t pages.community.hero-video-btn %}</a>
</div>
</div> </div>
</div>
<br />
<div class="content">
<a href="#community-forum" class="btn-white-solid">{% t pages.community.hero-discussion-btn %}</a>
<a href="#community-social" class="btn-white-solid">{% t pages.community.hero-social-btn %}</a>
<a href="#community-news" class="btn-white-solid">{% t pages.community.hero-news-btn %}</a>
<a href="#community-development" class="btn-white-solid">{% t pages.community.hero-development-btn %}</a>
<a href="#community-masternode" class="btn-white-solid">{% t pages.community.hero-masternodes-btn %}</a>
<a href="#community-media" class="btn-white-solid">{% t pages.community.hero-video-btn %}</a>
</div>
</div>

23
_includes/hero/currency.html
View file

@ -1,4 +1,4 @@
<div id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.currency.hero-image %}" class="background-video"> <video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.currency.hero-image %}" class="background-video">
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> <!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -6,20 +6,21 @@
<source src="assets/videos/Home-BG" type="video/ogg"> --> <source src="assets/videos/Home-BG" type="video/ogg"> -->
</video> </video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
{% include nav-desktop.html %} {% include nav-desktop.html %}
<!-- Hero content --> <!-- Hero content -->
<h1 class="content">{% t pages.currency.hero-heading %}</h1> <div class="hero__content">
<h1 class="hero__title">{% t pages.currency.hero-heading %}</h1>
<p>Visualizer Goes Here</p> <p class="hero__lead">Visualizer Goes Here</p>
<div class="content"> <div class="hero__buttons">
<a href="#" class="btn-white-solid">{% t pages.currency.hero-markets-btn %}</a> <a href="#" class="btn-white-solid">{% t pages.currency.hero-markets-btn %}</a>
<a href="#" class="btn-white-solid">{% t pages.currency.hero-governance-btn %}</a> <a href="#" class="btn-white-solid">{% t pages.currency.hero-governance-btn %}</a>
<a href="#" class="btn-white-solid">{% t pages.currency.hero-network-btn %}</a> <a href="#" class="btn-white-solid">{% t pages.currency.hero-network-btn %}</a>
<a href="#" class="btn-white-solid">{% t pages.currency.hero-blockchain-btn %}</a> <a href="#" class="btn-white-solid">{% t pages.currency.hero-blockchain-btn %}</a>
</div>
</div> </div>
</div>
</div>

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

@ -1,4 +1,4 @@
<div id="hero"> <div class="hero" id="hero">
<div id="background-video"> <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"> <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"> <!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -6,28 +6,24 @@
<source src="assets/videos/Home-BG" type="video/ogg"> --> <source src="assets/videos/Home-BG" type="video/ogg"> -->
</video> </video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
{% include nav-desktop.html %} {% include nav-desktop.html %}
<!-- Hero content --> <!-- Hero content -->
<h1 class="content">{% t pages.get-dash.hero-heading %}</h1> <div class="hero__content">
<p class="content">{% t pages.get-dash.hero-text %}<br /> <h1 class="hero__title">{% t pages.get-dash.hero-heading %}</h1>
{% t pages.get-dash.hero-wallet-version %}<br /> <p class="hero__lead">{% t pages.get-dash.hero-text %}</p>
{% t pages.get-dash.hero-wallet-version-select %}
</p>
<div class="content"> <div class="hero__buttons">
<a href="#" class="btn-blue-solid">{% t pages.get-dash.hero-download-btn %}</a> <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>
<div class="hero__buttons">
<a href="#getdash-wallet-setup" class="btn-white-solid">{% t pages.get-dash.hero-guide-btn %}</a>
<a href="#getdash-buy" class="btn-white-solid">{% t pages.get-dash.hero-buy-btn %}</a>
<a href="#getdash-shop" class="btn-white-solid">{% t pages.get-dash.hero-spend-btn %}</a>
<a href="#getdash-trade" class="btn-white-solid">{% t pages.get-dash.hero-trade-btn %}</a>
</div>
</div> </div>
</div>
<br />
<div class="content">
<a href="#getdash-wallet-setup" class="btn-white-solid">{% t pages.get-dash.hero-guide-btn %}</a>
<a href="#getdash-buy" class="btn-white-solid">{% t pages.get-dash.hero-buy-btn %}</a>
<a href="#getdash-shop" class="btn-white-solid">{% t pages.get-dash.hero-spend-btn %}</a>
<a href="#getdash-trade" class="btn-white-solid">{% t pages.get-dash.hero-trade-btn %}</a>
</div>
</div>

14
_includes/hero/home.html
View file

@ -1,4 +1,4 @@
<div id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/home/stock-photo-90982809-the-monthly-finances.jpg" class="background-video"> <video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/home/stock-photo-90982809-the-monthly-finances.jpg" class="background-video">
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> <!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -6,17 +6,17 @@
<source src="assets/videos/Home-BG" type="video/ogg"> --> <source src="assets/videos/Home-BG" type="video/ogg"> -->
</video> </video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
{% include nav-desktop.html %} {% include nav-desktop.html %}
<!-- Hero content --> <!-- Hero content -->
<div class="content"> <div class="hero__content">
<h1>{% t pages.home.hero-heading %}</h1> <h1 class="hero__title">{% t pages.home.hero-heading %}</h1>
<p>{% t pages.home.hero-text %}</p> <p class="hero__lead">{% t pages.home.hero-text %}</p>
<div> <div class="hero__buttons">
<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a> <a href="#" class="btn-blue-solid btn-large">{% t nav.get-dash %}</a>
</div> </div>
</div> </div>
</div> </div>

21
_includes/hero/participate.html
View file

@ -1,4 +1,4 @@
<div id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.participate.hero-image %}" class="background-video"> <video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/hero/{% t pages.participate.hero-image %}" class="background-video">
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> <!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -6,18 +6,19 @@
<source src="assets/videos/Home-BG" type="video/ogg"> --> <source src="assets/videos/Home-BG" type="video/ogg"> -->
</video> </video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
{% include nav-desktop.html %} {% include nav-desktop.html %}
<!-- Hero content --> <!-- Hero content -->
<h1 class="content">{% t pages.participate.hero-heading %}</h1> <div class="hero__content">
<p class="content">{% t pages.participate.hero-text %}</p> <h1 class="hero__title">{% t pages.participate.hero-heading %}</h1>
<p class="hero__lead">{% t pages.participate.hero-text %}</p>
<div class="content"> <div class="hero__buttons">
<a href="#participate-masternode" class="btn-blue-solid">{% t pages.participate.hero-masternodes-btn %}</a> <a href="#participate-masternode" class="btn-blue-solid">{% t pages.participate.hero-masternodes-btn %}</a>
<a href="#participate-mining" class="btn-blue-solid">{% t pages.participate.hero-mining-btn %}</a> <a href="#participate-mining" class="btn-blue-solid">{% t pages.participate.hero-mining-btn %}</a>
<a href="#participate-budgets" class="btn-blue-solid">{% t pages.participate.hero-funding-btn %}</a> <a href="#participate-budgets" class="btn-blue-solid">{% t pages.participate.hero-funding-btn %}</a>
</div>
</div> </div>
</div>
</div>

9
_includes/hero/team.html
View file

@ -1,4 +1,4 @@
<div id="hero"> <div class="hero" id="hero">
<div id="background-video"> <div id="background-video">
<video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/dashorg-nodes.jpg" class="background-video"> <video loop autoplay width="100%" height="auto" poster="{{ base }}/assets/img/dashorg-nodes.jpg" class="background-video">
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4"> <!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -6,10 +6,11 @@
<source src="assets/videos/Home-BG" type="video/ogg"> --> <source src="assets/videos/Home-BG" type="video/ogg"> -->
</video> </video>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
{% include nav-desktop.html %} {% include nav-desktop.html %}
<!-- Hero content --> <!-- Hero content -->
<div class="hero__content">
</div> </div>
</div>

54
get-dash/index.html
View file

@ -8,27 +8,27 @@ description: pages.get-dash.description
<div class="page-getdash"> <div class="page-getdash">
<!-- <!--
HOW-TO SETUP YOUR WALLET HOW-TO SETUP YOUR WALLET
.getdash-wallet-setup-graphic .getdash-wallet-setup-graphic
--> -->
<section id="getdash-wallet-setup"> <section class="section section--getdash-wallet-setup" id="getdash-wallet-setup">
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<h2>{% t pages.get-dash.setup-heading %}</h2> <h2>{% t pages.get-dash.setup-heading %}</h2>
{% tmd pages.get-dash.setup-text %} {% tmd pages.get-dash.setup-text %}
<a href="#" class="btn-blue">{% t pages.get-dash.setup-btn %}</a> <a href="#" class="btn-blue">{% t pages.get-dash.setup-btn %}</a>
</div> </div>
<div class="col-sm-6 getdash-wallet-setup-graphic"> <div class="col-sm-6 getdash-wallet-setup-graphic">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- <!--
BUY DASH ONLINE BUY DASH ONLINE
.getdash-buy-graphic .getdash-buy-graphic
--> -->
@ -36,7 +36,7 @@ description: pages.get-dash.description
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-sm-6 getdash-buy-graphic"> <div class="col-sm-6 getdash-buy-graphic">
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<h2>{% t pages.get-dash.buy-heading %}</h2> <h2>{% t pages.get-dash.buy-heading %}</h2>
@ -47,8 +47,8 @@ description: pages.get-dash.description
</div> </div>
</div> </div>
</section> </section>
<!-- <!--
TRADE DASH ON AN EXCHANGE TRADE DASH ON AN EXCHANGE
.getdash-exchange-graphic .getdash-exchange-graphic
--> -->
@ -62,21 +62,21 @@ description: pages.get-dash.description
<a href="#" class="btn-blue">{% t pages.get-dash.trade-btn %}</a> <a href="#" class="btn-blue">{% t pages.get-dash.trade-btn %}</a>
</div> </div>
<div class="col-sm-6 getdash-exchange-graphic"> <div class="col-sm-6 getdash-exchange-graphic">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- <!--
BUY DASH AT AN ATM BUY DASH AT AN ATM
.getdash-atm-graphic .getdash-atm-graphic
--> -->
<section> <section>
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-sm-6 getdash-atm-graphic"> <div class="col-sm-6 getdash-atm-graphic">
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<h2>{% t pages.get-dash.atm-heading %}</h2> <h2>{% t pages.get-dash.atm-heading %}</h2>
@ -87,9 +87,9 @@ description: pages.get-dash.description
</div> </div>
</div> </div>
</section> </section>
<!-- <!--
SHOP DIRECT WITH DASH SHOP DIRECT WITH DASH
.getdash-shop-graphic .getdash-shop-graphic
--> -->
<section id="getdash-shop"> <section id="getdash-shop">
@ -99,16 +99,16 @@ description: pages.get-dash.description
<h2>{% t pages.get-dash.shop-heading %}</h2> <h2>{% t pages.get-dash.shop-heading %}</h2>
{% tmd pages.get-dash.shop-text %} {% tmd pages.get-dash.shop-text %}
<a href="#" class="btn-blue">{% t pages.get-dash.shop-btn %}</a> <a href="#" class="btn-blue">{% t pages.get-dash.shop-btn %}</a>
</div> </div>
<div class="col-sm-6 getdash-shop-graphic"> <div class="col-sm-6 getdash-shop-graphic">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- <!--
SHOP AT VISA STORES SHOP AT VISA STORES
.getdash-visa-graphic .getdash-visa-graphic
--> -->
@ -125,8 +125,8 @@ description: pages.get-dash.description
</div> </div>
</div> </div>
</section> </section>
<!-- <!--
NEED SOME DASH NEED SOME DASH
.getdash-need-graphic .getdash-need-graphic
--> -->
@ -138,13 +138,13 @@ description: pages.get-dash.description
{% tmd pages.get-dash.need-text %} {% tmd pages.get-dash.need-text %}
<a href="#" class="btn-blue">{% t pages.get-dash.need-btn %}</a> <a href="#" class="btn-blue">{% t pages.get-dash.need-btn %}</a>
{% tmd pages.get-dash.need-input %} {% tmd pages.get-dash.need-input %}
</div> </div>
<div class="col-sm-6 getdash-need-graphic"> <div class="col-sm-6 getdash-need-graphic">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</div> </div>

3
src/scss/_buttons.scss
View file

@ -2,6 +2,7 @@
border-radius: 4px; border-radius: 4px;
border: 0px solid; border: 0px solid;
padding: 5px 15px; padding: 5px 15px;
margin-right: 10px;
line-height: 30px; line-height: 30px;
height: 40px; height: 40px;
display: inline-block; display: inline-block;
@ -16,7 +17,7 @@
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
} }
} }
.btn.btn-large { .btn-large {
font-size: 24px; font-size: 24px;
padding: 10px 25px; padding: 10px 25px;
height: 50px; height: 50px;

63
src/scss/_header.scss
View file

@ -3,34 +3,47 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
#hero { .hero {
height: 600px;
color: $white;
position: relative; position: relative;
min-height: 500px;
padding: 0 $size-gutter;
color: $white;
> .content { &__title, &__lead, &__text {
> h1, > p { text-shadow: 2px 2px 5px rgba(black, 0.2);
text-shadow: 2px 2px 5px rgba(black, 0.2); }
}
> h1 {
margin-top: 2.5em;
margin-bottom: 20px; /*optical*/
font-size: 60px;
line-height: 1.2;
letter-spacing: -0.01em;
}
> p {
font-family: $font-heading;
font-weight: 200;
font-size: 24px;
line-height: 1.25;
margin-bottom: 34px; /*optical*/
}
.btn-blue-solid { &__title {
font-size: 24px; margin-bottom: 15px; /*optical*/
padding: 10px 25px; font-size: 60px;
height: 50px; line-height: 1.2;
letter-spacing: -0.01em;
}
&__lead {
font-family: $font-heading;
font-weight: 200;
font-size: 24px;
line-height: 1.25;
}
&__lead,
&__text {
& + * {
margin-top: 34px; /*optical*/
}
& + .hero__buttons {
margin-top: 20px; /*optical*/
} }
} }
&__content {
max-width: $content-max-width;
padding: ($size-gutter * 4) 0 ($size-gutter * 5);
margin: 0 auto;
}
&__buttons {
margin-bottom: 20px; /*optical*/
}
} }

4
src/scss/_layout.scss
View file

@ -6,8 +6,8 @@ body {
} }
.content { .content {
width: 1280px; width: $content-max-width;
max-width: calc(100% - 40px); padding: 0 $size-gutter;
@media (max-width: 1024px) { @media (max-width: 1024px) {
max-width: 96.1%; // at 1024px 40px is 3.9% of screen width max-width: 96.1%; // at 1024px 40px is 3.9% of screen width
} }

4
src/scss/_nav.scss
View file

@ -1,3 +1,5 @@
$nav-height: 90px;
.nav { .nav {
float: right; float: right;
text-align: right; text-align: right;
@ -12,7 +14,7 @@
text-transform: uppercase; text-transform: uppercase;
font-size: 14px; font-size: 14px;
letter-spacing: 0.02em; letter-spacing: 0.02em;
line-height: 90px; line-height: $nav-height;
&:last-child > .nav__link { &:last-child > .nav__link {
padding-right: 0; padding-right: 0;
} }

6
src/scss/_variables.scss Normal file
View file

@ -0,0 +1,6 @@
/**
* Global Variables
**/
$content-max-width: 1280px;
$size-gutter: 20px;

6
src/scss/_video.scss
View file

@ -6,7 +6,7 @@
left: 0; left: 0;
overflow: hidden; overflow: hidden;
z-index: -100; z-index: -100;
height: 600px; height: 100%;
overflow: hidden; overflow: hidden;
&:after { &:after {
content: ''; content: '';
@ -19,8 +19,8 @@
} }
.background-video { .background-video {
position: relative; position: relative;
top: 40%; top: 20%;
transform: translateY(-40%); transform: translateY(-20%);
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 100%; min-height: 100%;

4
src/scss/main.scss
View file

@ -1,16 +1,16 @@
// stuff every page really needs // stuff every page really needs
@import "reset"; @import "reset";
@import "grid"; @import "grid";
@import "colors"; @import "colors";
@import "variables";
@import "typography"; @import "typography";
@import "mediaqueries"; @import "mediaqueries";
@import "layout"; @import "layout";
@import "directives"; @import "directives";
//stuff every page needss //stuff every page needss
@import "header";
@import "nav"; @import "nav";
@import "header";
@import "logo"; @import "logo";
@import "buttons"; @import "buttons";
@import "forms"; @import "forms";