Navigation

- Split the navigation out to separate files.
- Set the navigation items to i18n strings.
- Updated the overlay css to accommodate the number of nav items.
This commit is contained in:
Perry Woodin 2016-07-12 10:21:59 -04:00
parent fecf2766d0
commit fd43071a3c
14 changed files with 145 additions and 133 deletions

View file

@ -9,3 +9,12 @@ pages:
titles: titles:
home: Official Website | Private Digital Currency home: Official Website | Private Digital Currency
participate: Participate participate: Participate
nav:
what-is-dash: What is Dash
get-dash: Get Dash
participate: Participate
currency: Currency
community: Community
blog: Blog
project: Project
search: Search

View file

@ -0,0 +1,13 @@
<nav class="desktop">
<ul>
<li><a href="#">{% t nav.what-is-dash %}</a></li>
<li><a href="#">{% t nav.get-dash %}</a></li>
<li><a href="#">{% t nav.participate %}</a></li>
<li><a href="#">{% t nav.currency %}</a></li>
<li><a href="#">{% t nav.community %}</a></li>
<li><a href="#">{% t nav.blog %}</a></li>
<li><a href="#">{% t nav.project %}</a></li>
<li><a href="#">{% t global.english %}</a></li>
<li><a href="#">{% t nav.search %}</a></li>
</ul>
</nav>

12
_includes/nav-mobile.html Normal file
View file

@ -0,0 +1,12 @@
<nav class="overlay-menu">
<ul>
<li><a href="#">{% t nav.what-is-dash %}</a></li>
<li><a href="#">{% t nav.get-dash %}</a></li>
<li><a href="#">{% t nav.participate %}</a></li>
<li><a href="#">{% t nav.currency %}</a></li>
<li><a href="#">{% t nav.community %}</a></li>
<li><a href="#">{% t nav.blog %}</a></li>
<li><a href="#">{% t nav.project %}</a></li>
<li><a href="#">{% t global.english %}</a></li>
</ul>
</nav>

View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% if page.title %}{{ t page.title }} &mdash; {% endif %}Dash</title> <title>{% if page.title %}{% t page.title %} &mdash; {% endif %}Dash</title>
<meta name="description" content="{{ page.description }}"> <meta name="description" content="{{ page.description }}">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@ -47,19 +47,7 @@
<a href="#"><img src="assets/img/logo-white.png" alt="Dash" class="logo"></a> <a href="#"><img src="assets/img/logo-white.png" alt="Dash" class="logo"></a>
<!-- Navigation --> <!-- Navigation -->
<nav class="desktop"> {% include nav-desktop.html %}
<ul>
<li><a href="#">WHAT IS DASH</a></li>
<li><a href="#">GET DASH</a></li>
<li><a href="#">PARTICIPATE</a></li>
<li><a href="#">CURRENCY</a></li>
<li><a href="#">COMMUNITY</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">ENGLISH</a></li>
<li><a href="#">S</a></li>
</ul>
</nav>
<div class="button_container" id="toggle"> <div class="button_container" id="toggle">
<span class="top"></span> <span class="top"></span>
@ -75,7 +63,7 @@
</div> </div>
</div> </div>
<!-- {{ content }} --> {{ content }}
<!-- Footer --> <!-- Footer -->
<footer class="content"> <footer class="content">
@ -87,18 +75,7 @@
<!-- Mobile Nav --> <!-- Mobile Nav -->
<div class="overlay" id="overlay"> <div class="overlay" id="overlay">
<a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a> <a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a>
<nav class="overlay-menu"> {% include nav-mobile.html %}
<ul>
<li><a href="#">WHAT IS DASH</a></li>
<li><a href="#">GET DASH</a></li>
<li><a href="#">PARTICIPATE</a></li>
<li><a href="#">CURRENCY</a></li>
<li><a href="#">COMMUNITY</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">ENGLISH</a></li>
</ul>
</nav>
</div> </div>
<script src="/assets/js/full-menu.js"></script> <script src="/assets/js/full-menu.js"></script>

View file

@ -16,6 +16,7 @@
margin-left: 10px; margin-left: 10px;
a { a {
color: rgba($black, 0.9); color: rgba($black, 0.9);
text-transform: uppercase;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
font-family: 'montserratregular'; font-family: 'montserratregular';

View file

@ -182,7 +182,7 @@
margin-top: 0px; margin-top: 0px;
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 100%; height: 50%;
li { li {
display: block; display: block;
height: 16%; height: 16%;

View file

@ -121,6 +121,7 @@ a.blog_link {
margin-left: 10px; } margin-left: 10px; }
#top nav li a { #top nav li a {
color: rgba(47, 47, 47, 0.9); color: rgba(47, 47, 47, 0.9);
text-transform: uppercase;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
font-family: 'montserratregular'; } font-family: 'montserratregular'; }
@ -389,7 +390,7 @@ footer {
margin-top: 0px; margin-top: 0px;
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 100%; } height: 50%; }
.overlay ul li { .overlay ul li {
display: block; display: block;
height: 16%; height: 16%;

View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title> &mdash; Dash</title> <title>Web Oficial | Moneda Digital Privada e Instantánea &mdash; Dash</title>
<meta name="description" content="Dash is Digital Cash"> <meta name="description" content="Dash is Digital Cash">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@ -49,17 +49,17 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="desktop"> <nav class="desktop">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
<li><a href="#">S</a></li> <li><a href="#">Search</a></li>
</ul> </ul>
</nav> </nav>
<div class="button_container" id="toggle"> <div class="button_container" id="toggle">
<span class="top"></span> <span class="top"></span>
@ -376,16 +376,16 @@
<a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a> <a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a>
<nav class="overlay-menu"> <nav class="overlay-menu">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<script src="/assets/js/full-menu.js"></script> <script src="/assets/js/full-menu.js"></script>

View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title> &mdash; Dash</title> <title>Participate &mdash; Dash</title>
<meta name="description" content="Participate"> <meta name="description" content="Participate">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@ -49,17 +49,17 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="desktop"> <nav class="desktop">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
<li><a href="#">S</a></li> <li><a href="#">Search</a></li>
</ul> </ul>
</nav> </nav>
<div class="button_container" id="toggle"> <div class="button_container" id="toggle">
<span class="top"></span> <span class="top"></span>
@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<!-- <div class="intro-header"> <div class="intro-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
@ -202,7 +202,7 @@
<div class="col-lg-2"></div> <div class="col-lg-2"></div>
</div> </div>
</div> </div>
</div> --> </div>
<!-- Footer --> <!-- Footer -->
<footer class="content"> <footer class="content">
@ -216,16 +216,16 @@
<a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a> <a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a>
<nav class="overlay-menu"> <nav class="overlay-menu">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<script src="/assets/js/full-menu.js"></script> <script src="/assets/js/full-menu.js"></script>

View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title> &mdash; Dash</title> <title>Official Website | Private Digital Currency &mdash; Dash</title>
<meta name="description" content="Dash is Digital Cash"> <meta name="description" content="Dash is Digital Cash">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@ -49,17 +49,17 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="desktop"> <nav class="desktop">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
<li><a href="#">S</a></li> <li><a href="#">Search</a></li>
</ul> </ul>
</nav> </nav>
<div class="button_container" id="toggle"> <div class="button_container" id="toggle">
<span class="top"></span> <span class="top"></span>
@ -373,16 +373,16 @@
<a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a> <a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a>
<nav class="overlay-menu"> <nav class="overlay-menu">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<script src="/assets/js/full-menu.js"></script> <script src="/assets/js/full-menu.js"></script>

View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title> &mdash; Dash</title> <title>Participate &mdash; Dash</title>
<meta name="description" content="Participate"> <meta name="description" content="Participate">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@ -49,17 +49,17 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="desktop"> <nav class="desktop">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
<li><a href="#">S</a></li> <li><a href="#">Search</a></li>
</ul> </ul>
</nav> </nav>
<div class="button_container" id="toggle"> <div class="button_container" id="toggle">
<span class="top"></span> <span class="top"></span>
@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<!-- <div class="intro-header"> <div class="intro-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
@ -202,7 +202,7 @@
<div class="col-lg-2"></div> <div class="col-lg-2"></div>
</div> </div>
</div> </div>
</div> --> </div>
<!-- Footer --> <!-- Footer -->
<footer class="content"> <footer class="content">
@ -216,16 +216,16 @@
<a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a> <a href="/"><img src="/assets/img/logo-white.png" alt="Dash" class="logo"></a>
<nav class="overlay-menu"> <nav class="overlay-menu">
<ul> <ul>
<li><a href="#">WHAT IS DASH</a></li> <li><a href="#">What is Dash</a></li>
<li><a href="#">GET DASH</a></li> <li><a href="#">Get Dash</a></li>
<li><a href="#">PARTICIPATE</a></li> <li><a href="#">Participate</a></li>
<li><a href="#">CURRENCY</a></li> <li><a href="#">Currency</a></li>
<li><a href="#">COMMUNITY</a></li> <li><a href="#">Community</a></li>
<li><a href="#">BLOG</a></li> <li><a href="#">Blog</a></li>
<li><a href="#">PROJECT</a></li> <li><a href="#">Project</a></li>
<li><a href="#">ENGLISH</a></li> <li><a href="#">English</a></li>
</ul> </ul>
</nav> </nav>
</div> </div>
<script src="/assets/js/full-menu.js"></script> <script src="/assets/js/full-menu.js"></script>

View file

@ -4,8 +4,7 @@ title: titles.home
description: Dash is Digital Cash description: Dash is Digital Cash
--- ---
<!-- {% tf home/intro-header.html %}
{% tf home/intro-header.html %}
{% tf home/what-is-dash.html %} {% tf home/what-is-dash.html %}
@ -178,4 +177,4 @@ description: Dash is Digital Cash
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->