mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
(Update) Navigation: Add basic language menu / Refactor markup structure
This commit is contained in:
0xfff
parent
aaef5715db
commit
cea60c5c6e
7 changed files with 112 additions and 68 deletions
|
|
@ -2,6 +2,8 @@ global:
|
|||
english: English
|
||||
spanish: Español
|
||||
russian: Русский
|
||||
portugese: Portugese
|
||||
italian: Italiano
|
||||
chinese: 简体中文
|
||||
twitter: Twitter
|
||||
github: GitHub
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% include base.html %}
|
||||
|
||||
<!--
|
||||
To change the logo color, pass the parameter in the include.
|
||||
<!--
|
||||
To change the logo color, pass the parameter in the include.
|
||||
include nav-desktop.html logo-color="blue"
|
||||
-->
|
||||
{% assign logo-color = 'white' %}
|
||||
|
|
@ -10,22 +10,44 @@
|
|||
{% endif %}
|
||||
|
||||
<header id="top" class="content">
|
||||
<a href="#" class="logo"><img src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
|
||||
<a href="{{ basenav }}/" class="logo"><img class="logo__img" src="{{ base }}/assets/img/logo-{{ logo-color }}.png" alt="Dash"></a>
|
||||
|
||||
<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>
|
||||
<li><a href="{{ basenav }}/currency/">{% t nav.currency %}</a></li>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<li><a href="{{ base }}{{ page.url }}">{% t global.english %}</a></li>
|
||||
<li><a href="{{ base }}/es{{ page.url }}">{% t global.spanish %}</a></li>
|
||||
<li class="nav__item nav__item--languages">
|
||||
<a href="#" class="nav__link">{{ site.lang }}</a>
|
||||
<ul class="nav__sublist">
|
||||
<!-- TODO: dynamically generate this list -->
|
||||
<li class="nav__subitem">
|
||||
<a href="{{ base }}{{ page.url }}" class="nav__link {% if site.lang == 'en' %}is-active{% endif %}">{% t global.english %}</a>
|
||||
</li>
|
||||
<li class="nav__subitem">
|
||||
<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="{{ basenav }}" title="{% t nav.search %}">S</a></li>
|
||||
<li class="nav__item"><a href="{{ basenav }}" class="nav__link" title="{% t nav.search %}">S</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<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>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,13 @@
|
|||
#top {
|
||||
border-bottom: 1px solid rgba($white, 0.35);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#hero {
|
||||
height: 600px;
|
||||
color: $white;
|
||||
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 {
|
||||
> h1, > p {
|
||||
text-shadow: 2px 2px 2px rgba(black, 0.4);
|
||||
|
|
|
|||
11
_sass/_logo.scss
Normal file
11
_sass/_logo.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.logo {
|
||||
width: 180px;
|
||||
height: 90px;
|
||||
display: inline-block;
|
||||
&__img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +1,60 @@
|
|||
#top {
|
||||
border-bottom: 1px solid $blue;
|
||||
margin-bottom: 20px;
|
||||
@extend %clearfix;
|
||||
.nav {
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
||||
nav {
|
||||
float: right;
|
||||
text-align: right;
|
||||
li {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 90px;
|
||||
&__list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 10px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: rgba($black, 0.9);
|
||||
&__item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 600;
|
||||
line-height: 90px;
|
||||
&:last-child > .nav__link {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba($black, 1.0);
|
||||
}
|
||||
}
|
||||
&:last-child > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
.status {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--languages {
|
||||
& > .nav__link {
|
||||
padding: 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 180px;
|
||||
height: 90px;
|
||||
display: inline-block;
|
||||
> img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.nav__sublist {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
animation: fadein 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__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; }
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
//stuff every page needs
|
||||
@import "header";
|
||||
@import "nav";
|
||||
@import "logo";
|
||||
@import "buttons";
|
||||
@import "forms";
|
||||
@import "footer";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue