improve header styles, button styles, fonts

This commit is contained in:
Joshua Seigler 2016-07-29 00:09:27 -04:00
parent 14f66a0182
commit f819f148bb
48 changed files with 189 additions and 141 deletions

View file

@ -9,8 +9,8 @@ pages:
home:
title: Official Website | Private Digital Currency
description: Dash is Digital Cash
hero-heading: Dash is Digital Cash
hero-text: The first truly-decentralized digital money system<br />Meet Digital Cash.
hero-heading: Dash is Digital Cash!
hero-text: The first truly-decentralized digital money system.<br />Meet Digital Cash.
video-heading: Dash is Digital Cash You Can Spend Online
video-text: Use Dash to make instant, anonymous payments online or in-store using our secure open-source platform hosted by thousands of users around the world.
@ -228,4 +228,4 @@ nav:
github: GitHub
tos: Terms of Use
sitemap: Sitemap
sitemap: Sitemap

View file

@ -9,11 +9,11 @@
{% assign logo-color = include.logo-color %}
{% endif %}
<div id="top" class="content">
<a href="#"><img src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash" class="logo"></a>
<header id="top" class="content">
<a href="#" class="logo"><img src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
<nav class="desktop">
<ul class="menu">
<nav>
<ul>
<li><a href="{{ basenav }}/">{% t nav.what-is-dash %}</a></li>
<li><a href="{{ basenav }}/get-dash/">{% t nav.get-dash %}</a></li>
<li><a href="{{ basenav }}/participate/">{% t nav.participate %}</a></li>
@ -21,19 +21,12 @@
<li><a href="{{ basenav }}/community/">{% t nav.community %}</a></li>
<li><a href="{{ basenav }}/blog/">{% t nav.blog %}</a></li>
<li><a href="{{ basenav }}">{% t nav.project %}</a></li>
<li><a href="{{ base }}{{ page.url }}">{% t global.english %}</a></li>
<li><a href="{{ base }}/es{{ page.url }}">{% t global.spanish %}</a></li>
<li><a href="{{ basenav }}" title="{% t nav.search %}">S</a></li>
</ul>
</nav>
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<span class="clear"></span>
</div>
</header>

View file

@ -1,20 +1,28 @@
.btn-white-solid {
.btn {
border-radius: 5px;
border: 2px solid $white;
background-color: darken($white, 3);
border: 2px solid;
padding: 5px 10px;
display: inline-block;
font-family: $font-heading;
font-weight: 500;
}
.btn-white-solid {
@extend .btn;
border-color: $white;
background-color: darken($white, 3);
margin-bottom: 10px;
color: lighten($black, 5) !important;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
box-sizing: border-box;
&:hover {
background-color: $white;
}
}
.btn-green {
@extend .btn;
background-color: $green;
padding: 10px 20px 10px 20px;
color: $white !important;
@ -29,9 +37,9 @@
}
.btn-blue {
@extend .btn;
border-radius: 5px;
border: 2px solid $blue;
padding: 5px 10px;
border-color: $blue;
color: $blue !important;
text-decoration: none;
&:hover {
@ -41,16 +49,13 @@
}
.btn-blue-solid {
border-radius: 5px;
@extend .btn;
background-color: lighten($blue, 5);
padding: 5px 10px;
margin-bottom: 10px;
color: $white !important;
text-decoration: none;
border: none;
font-size: 16px;
text-transform: uppercase;
box-sizing: border-box;
&:hover {
background-color: darken($blue, 3);
color: $white !important;

11
_sass/_directives.scss Normal file
View file

@ -0,0 +1,11 @@
/*
This is for time-saving base classes that get @extend -ed
*/
%clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}

View file

@ -1,44 +1,34 @@
#header {
text-align: left;
#hero {
height: 600px;
color: $white;
padding: 1px 0;
#top {
border-bottom: 1px solid $blue;
text-align: left;
.logo {
width: 180px;
height: auto;
display: inline-block;
}
nav {
float: right;
text-align: right;
margin-bottom: 5px;
li {
display: inline;
margin-left: 20px;
a {
color: $blue;
text-decoration: none;
font-size: 12px;
&:hover {
color: lighten($blue, 25);
}
}
border-bottom: 1px solid $white;
nav li a {
color: rgba($white, 0.9);
&:hover {
color: rgba($white, 1);
}
}
}
.page-info {
background-color: #fff;
> h1, > p {
text-shadow: 2px 2px 2px rgba(black, 0.4);
}
h1 {
color: $blue;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
> h1 {
margin-top: 2em;
font-size: 56px;
line-height: 1.2;
}
> p {
font-family: $font-heading;
font-size: 35px;
line-height: 1.25;
margin-bottom: 0.5em;
}
p {
color: $blue;
margin-bottom: 50px;
.btn-blue-solid {
font-size: 20px;
padding: 5px 25px;
}
}

View file

@ -1,43 +1,3 @@
#hero {
background-color: rgba(#000, .25);
text-align: left;
color: $white;
padding: 1px 0 265px 0;
#top {
border-bottom: 1px solid $white;
text-align: left;
.logo {
width: 180px;
height: auto;
display: inline-block;
}
nav {
float: right;
text-align: right;
margin-bottom: 5px;
li {
display: inline;
margin-left: 20px;
a {
color: rgba($white, 0.9);
text-decoration: none;
font-size: 12px;
&:hover {
color: rgba($white, 1.0);
}
}
}
}
}
h1 {
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}
p {
margin-bottom: 50px;
}
}
#info {
.col {
width: 33%;

View file

@ -1,31 +1,42 @@
#top {
border-bottom: 1px solid $white;
text-align: left;
margin-top: 30px;
margin-bottom: 40px;
.logo {
width: 180px;
height: auto;
display: inline-block;
}
border-bottom: 1px solid $blue;
margin-bottom: 20px;
@extend %clearfix;
nav {
float: right;
text-align: right;
li {
display: inline;
margin-left: 10px;
display: inline-block;
margin-left: 20px;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
line-height: 90px;
a {
color: rgba($black, 0.9);
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-size: 16px;
color: rgba($black, 0.9);
&:hover {
color: rgba($black, 1.0);
}
}
.status {
color: $blue;
}
}
.status {
color: $blue !important;
}
.logo {
width: 180px;
height: 90px;
display: inline-block;
> img {
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
}
}
}

View file

@ -1,16 +1,19 @@
@import "fonts/worksans/bold";
@import "fonts/worksans/semibold";
@import "fonts/worksans/medium";
@import "fonts/open-sans/regular";
@import "fonts/open-sans/italic";
$font-body: 'Open Sans', Helvetica, Arial, sans-serif;
$font-heading: 'Work Sans', Helvetica, Arial, sans-serif;
body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-family: $font-body;
line-height: 1.5;
}
p {
font-size: 14px;
line-height: 22px;
line-height: 1.5;
a {
color: $blue;
text-decoration: none;
@ -21,7 +24,7 @@ p {
}
h1, h2, h3 {
font-family: 'Work Sans', Helvetica, Arial, sans-serif;
font-family: $font-heading;
}
h1 {

View file

@ -1,19 +1,29 @@
#background-video {
position: absolute;
top: -150px;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
height: 700px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
height: 600px;
overflow: hidden;
&:after {
content: '';
background-image: linear-gradient(to bottom, rgba(black, 0.6), transparent);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
position: relative;
top: 40%;
transform: translateY(-40%);
width: 100%;
height: auto;
min-height: 100%;
}
}
@ -38,4 +48,4 @@
display: none;
}
}
}
}

View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-black-webfont.eot');
src: url('../fonts/worksans/worksans-black-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/worksans/worksans-black-webfont.woff2') format('woff2'),
url('../fonts/worksans/worksans-black-webfont.woff') format('woff'),
url('../fonts/worksans/worksans-black-webfont.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}

View file

@ -1,5 +1,3 @@
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on July 27, 2016 */
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-bold-webfont.eot');

View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-extrabold-webfont.eot');
src: url('../fonts/worksans/worksans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/worksans/worksans-extrabold-webfont.woff2') format('woff2'),
url('../fonts/worksans/worksans-extrabold-webfont.woff') format('woff'),
url('../fonts/worksans/worksans-extrabold-webfont.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}

View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-extralight-webfont.eot');
src: url('../fonts/worksans/worksans-extralight-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/worksans/worksans-extralight-webfont.woff2') format('woff2'),
url('../fonts/worksans/worksans-extralight-webfont.woff') format('woff'),
url('../fonts/worksans/worksans-extralight-webfont.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}

View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-hairline-webfont.eot');
src: url('../fonts/worksans/worksans-hairline-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/worksans/worksans-hairline-webfont.woff2') format('woff2'),
url('../fonts/worksans/worksans-hairline-webfont.woff') format('woff'),
url('../fonts/worksans/worksans-hairline-webfont.ttf') format('truetype');
font-weight: 50;
font-style: normal;
}

View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-light-webfont.eot');
src: url('../fonts/worksans/worksans-light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/worksans/worksans-light-webfont.woff2') format('woff2'),
url('../fonts/worksans/worksans-light-webfont.woff') format('woff'),
url('../fonts/worksans/worksans-light-webfont.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-medium-webfont.eot');
src: url('../fonts/worksans/worksans-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/worksans/worksans-medium-webfont.woff2') format('woff2'),
url('../fonts/worksans/worksans-medium-webfont.woff') format('woff'),
url('../fonts/worksans/worksans-medium-webfont.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

View file

@ -1,5 +1,3 @@
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on July 27, 2016 */
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-regular-webfont.eot');

View file

@ -1,5 +1,3 @@
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on July 27, 2016 */
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-semibold-webfont.eot');

View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'Work Sans';
src: url('../fonts/worksans/worksans-thin-webfont.eot');
src: url('../fonts/worksans/worksans-thin-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/worksans/worksans-thin-webfont.woff2') format('woff2'),
url('../fonts/worksans/worksans-thin-webfont.woff') format('woff'),
url('../fonts/worksans/worksans-thin-webfont.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}

View file

@ -8,6 +8,7 @@
@import "colors";
@import "typography";
@import "layout";
@import "directives";
//stuff every page needs
@import "header";

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.