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

16
_includes/hero/community.html
View file

@ -1,4 +1,4 @@
<div id="hero">
<div class="hero" id="hero">
<div id="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">
@ -11,16 +11,14 @@
{% include nav-desktop.html %}
<!-- Hero content -->
<h1 class="content">{% t pages.community.hero-heading %}</h1>
<p class="content">{% t pages.community.hero-text %}</p>
<div class="hero__content">
<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>
</div>
<br />
<div class="content">
<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>
@ -28,5 +26,5 @@
<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>

11
_includes/hero/currency.html
View file

@ -1,4 +1,4 @@
<div id="hero">
<div class="hero" id="hero">
<div id="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">
@ -11,15 +11,16 @@
{% include nav-desktop.html %}
<!-- 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-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-blockchain-btn %}</a>
</div>
</div>
</div>

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

@ -1,4 +1,4 @@
<div id="hero">
<div class="hero" 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">
@ -11,23 +11,19 @@
{% include nav-desktop.html %}
<!-- Hero content -->
<h1 class="content">{% t pages.get-dash.hero-heading %}</h1>
<p class="content">{% t pages.get-dash.hero-text %}<br />
{% t pages.get-dash.hero-wallet-version %}<br />
{% t pages.get-dash.hero-wallet-version-select %}
</p>
<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="content">
<a href="#" class="btn-blue-solid">{% t pages.get-dash.hero-download-btn %}</a>
<div class="hero__buttons">
<a href="#" class="btn-blue-solid btn-large">{% t pages.get-dash.hero-download-btn %}</a>
</div>
<br />
<div class="content">
<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>

12
_includes/hero/home.html
View file

@ -1,4 +1,4 @@
<div id="hero">
<div class="hero" id="hero">
<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">
<!-- <source src="assets/videos/Home-BG.m4v" type="video/mp4">
@ -11,12 +11,12 @@
{% include nav-desktop.html %}
<!-- Hero content -->
<div class="content">
<h1>{% t pages.home.hero-heading %}</h1>
<p>{% t pages.home.hero-text %}</p>
<div class="hero__content">
<h1 class="hero__title">{% t pages.home.hero-heading %}</h1>
<p class="hero__lead">{% t pages.home.hero-text %}</p>
<div>
<a href="#" class="btn-blue-solid">{% t nav.get-dash %}</a>
<div class="hero__buttons">
<a href="#" class="btn-blue-solid btn-large">{% t nav.get-dash %}</a>
</div>
</div>
</div>

11
_includes/hero/participate.html
View file

@ -1,4 +1,4 @@
<div id="hero">
<div class="hero" id="hero">
<div id="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">
@ -11,13 +11,14 @@
{% include nav-desktop.html %}
<!-- Hero content -->
<h1 class="content">{% t pages.participate.hero-heading %}</h1>
<p class="content">{% t pages.participate.hero-text %}</p>
<div class="hero__content">
<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-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>
</div>
</div>
</div>

5
_includes/hero/team.html
View file

@ -1,4 +1,4 @@
<div id="hero">
<div class="hero" id="hero">
<div id="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">
@ -11,5 +11,6 @@
{% include nav-desktop.html %}
<!-- Hero content -->
<div class="hero__content">
</div>
</div>

2
get-dash/index.html
View file

@ -12,7 +12,7 @@ description: pages.get-dash.description
HOW-TO SETUP YOUR WALLET
.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="row">
<div class="col-sm-6">

3
src/scss/_buttons.scss
View file

@ -2,6 +2,7 @@
border-radius: 4px;
border: 0px solid;
padding: 5px 15px;
margin-right: 10px;
line-height: 30px;
height: 40px;
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);
}
}
.btn.btn-large {
.btn-large {
font-size: 24px;
padding: 10px 25px;
height: 50px;

41
src/scss/_header.scss
View file

@ -3,34 +3,47 @@
margin-bottom: 20px;
}
#hero {
height: 600px;
color: $white;
.hero {
position: relative;
min-height: 500px;
padding: 0 $size-gutter;
color: $white;
> .content {
> h1, > p {
&__title, &__lead, &__text {
text-shadow: 2px 2px 5px rgba(black, 0.2);
}
> h1 {
margin-top: 2.5em;
margin-bottom: 20px; /*optical*/
&__title {
margin-bottom: 15px; /*optical*/
font-size: 60px;
line-height: 1.2;
letter-spacing: -0.01em;
}
> p {
&__lead {
font-family: $font-heading;
font-weight: 200;
font-size: 24px;
line-height: 1.25;
margin-bottom: 34px; /*optical*/
}
.btn-blue-solid {
font-size: 24px;
padding: 10px 25px;
height: 50px;
&__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 {
width: 1280px;
max-width: calc(100% - 40px);
width: $content-max-width;
padding: 0 $size-gutter;
@media (max-width: 1024px) {
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 {
float: right;
text-align: right;
@ -12,7 +14,7 @@
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.02em;
line-height: 90px;
line-height: $nav-height;
&:last-child > .nav__link {
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;
overflow: hidden;
z-index: -100;
height: 600px;
height: 100%;
overflow: hidden;
&:after {
content: '';
@ -19,8 +19,8 @@
}
.background-video {
position: relative;
top: 40%;
transform: translateY(-40%);
top: 20%;
transform: translateY(-20%);
width: 100%;
height: auto;
min-height: 100%;

4
src/scss/main.scss
View file

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