This commit is contained in:
Perry Woodin 2016-09-09 12:55:16 -04:00
commit f5da2712a3
7 changed files with 110 additions and 67 deletions

View file

@ -2,6 +2,8 @@ global:
english: English english: English
spanish: Español spanish: Español
russian: Русский russian: Русский
portugese: Portugese
italian: Italiano
chinese: 简体中文 chinese: 简体中文
twitter: Twitter twitter: Twitter
github: GitHub github: GitHub

View file

@ -11,23 +11,44 @@
<header id="top" class="content"> <header id="top" class="content">
<a href="{{ basenav }}/" class="logo"><img class="logo__img" src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
<a href="{{ basenav }}/" class="logo"><img src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a> <nav class="nav">
<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>
<li class="nav__item"><a href="{{ basenav }}/participate/" class="nav__link">{% t nav.participate %}</a></li>
<li class="nav__item"><a href="{{ basenav }}/currency/" class="nav__link">{% t nav.currency %}</a></li>
<li class="nav__item"><a href="{{ basenav }}/community/" class="nav__link">{% t nav.community %}</a></li>
<li class="nav__item"><a href="{{ basenav }}/blog/" class="nav__link">{% t nav.blog %}</a></li>
<li class="nav__item"><a href="{{ basenav }}" class="nav__link">{% t nav.project %}</a></li>
<nav> <li class="nav__item nav__item--languages">
<ul> <a href="#" class="nav__link">{{ site.lang }}</a>
<li><a href="{{ basenav }}/">{% t nav.what-is-dash %}</a></li> <ul class="nav__sublist">
<li><a href="{{ basenav }}/get-dash/">{% t nav.get-dash %}</a></li> <!-- TODO: dynamically generate this list -->
<li><a href="{{ basenav }}/participate/">{% t nav.participate %}</a></li> <li class="nav__subitem">
<li><a href="{{ basenav }}/currency/">{% t nav.currency %}</a></li> <a href="{{ base }}{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">{% t global.english %}</a>
<li><a href="{{ basenav }}/community/">{% t nav.community %}</a></li> </li>
<li><a href="{{ basenav }}/blog/">{% t nav.blog %}</a></li> <li class="nav__subitem">
<li><a href="{{ basenav }}">{% t nav.project %}</a></li> <a href="{{ base }}/es{{ page.url }}" class="nav__link {% if site.lang == 'es' %}is-active{% endif %}">{% t global.spanish %}</a>
</li>
<li class="nav__subitem">
<a href="{{ base }}/pt{{ page.url }}" class="nav__link {% if site.lang == 'pt' %}is-active{% endif %}">{% t global.portugese %}</a>
</li>
<li class="nav__subitem">
<a href="{{ base }}/it{{ page.url }}" class="nav__link {% if site.lang == 'it' %}is-active{% endif %}">{% t global.italian %}</a>
</li>
<li class="nav__subitem">
<a href="{{ base }}/cn{{ page.url }}" class="nav__link {% if site.lang == 'cn' %}is-active{% endif %}">{% t global.chinese %}</a>
</li>
<li class="nav__subitem">
<a href="{{ base }}/ru{{ page.url }}" class="nav__link {% if site.lang == 'ru' %}is-active{% endif %}">{% t global.russian %}</a>
</li>
</ul>
</li>
<li><a href="{{ base }}{{ page.url }}">{% t global.english %}</a></li> <li class="nav__item"><a href="{{ basenav }}" class="nav__link" title="{% t nav.search %}">S</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> </ul>
</nav> </nav>

View file

@ -1,19 +1,13 @@
#top {
border-bottom: 1px solid rgba($white, 0.35);
margin-bottom: 20px;
}
#hero { #hero {
height: 600px; height: 600px;
color: $white; color: $white;
position: relative; position: relative;
#top {
border-bottom: 1px solid rgba($white, 0.35);
nav li a {
color: rgba($white, 0.9);
&:hover {
color: rgba($white, 1);
text-shadow: 0 0 2em black;
}
}
}
> .content { > .content {
> h1, > p { > h1, > p {
text-shadow: 2px 2px 5px rgba(black, 0.2); text-shadow: 2px 2px 5px rgba(black, 0.2);

11
_sass/_logo.scss Normal file
View file

@ -0,0 +1,11 @@
.logo {
width: 180px;
height: 90px;
display: inline-block;
&__img {
position: relative;
top: 50%;
transform: translateY(-50%);
max-width: 100%;
}
}

View file

@ -1,46 +1,60 @@
#top { .nav {
border-bottom: 1px solid $blue; float: right;
margin-bottom: 20px; text-align: right;
@extend %clearfix;
nav { &__list {
float: right; list-style: none;
text-align: right; }
li {
display: inline-block;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
line-height: 90px;
a { &__item {
padding: 0 10px; position: relative;
display: inline-block; display: inline-block;
text-decoration: none; text-transform: uppercase;
color: rgba($black, 0.9); font-size: 14px;
letter-spacing: 0.02em;
font-weight: 600;
line-height: 90px;
&:last-child > .nav__link {
padding-right: 0;
}
&:hover { &--languages {
color: rgba($black, 1.0); & > .nav__link {
} padding: 0 25px;
} }
&:last-child > a { }
padding-right: 0;
}
.status {
color: $blue;
}
}
}
.logo { &:hover {
width: 180px; .nav__sublist {
height: 90px; display: block;
display: inline-block; opacity: 1;
> img { animation: fadein 0.4s;
position: relative; }
top: 50%; }
transform: translateY(-50%); }
max-width: 100%;
} &__sublist {
} display: none;
position: absolute;
top: 100%;
right: 0;
padding-top: 10px;
}
&__subitem {
line-height: 45px;
}
&__link {
display: inline-block;
padding: 0 10px;
text-decoration: none;
color: rgba($white, 1);
}
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
} }

View file

@ -14,6 +14,7 @@
//stuff every page needs //stuff every page needs
@import "header"; @import "header";
@import "nav"; @import "nav";
@import "logo";
@import "buttons"; @import "buttons";
@import "forms"; @import "forms";
@import "footer"; @import "footer";