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

[Fix] Overlay-Menu: Enable Languages + Font-Sizes

Browse source
This commit is contained in:
0xfff 2016-11-05 20:41:00 +01:00
parent c77ef66b02
commit 69c3ad9b8b
2 changed files with 103 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

54
_includes/nav-mobile.html
View file

@ -1,22 +1,44 @@
{% include base.html %} {% include base.html %}
<nav class="overlay-menu" id="overlaynavigation" aria-hidden="true"> <nav class="overlay-menu" id="overlaynavigation" aria-hidden="true">
<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>
</ul>
<!-- Secondary Navigation Languages-->
<!-- {% if page.layout != 'post' %}
<ul>
<li><a href="{{ basenav }}{{ page.url }}">{% t global.english %}</a></li> <div class="overlay-menu__nav">
<li><a href="{{ basenav }}{{ page.url }}">{% t global.spanish %}</a></li> <ul class="overlay-menu__list">
<li class="overlay-menu__item"><a href="{{ basenav }}/" class="overlay-menu__link">{% t nav.what-is-dash %}</a></li>
<li class="overlay-menu__item"><a href="{{ basenav }}/get-dash/" class="overlay-menu__link">{% t nav.get-dash %}</a></li>
<li class="overlay-menu__item"><a href="{{ basenav }}/participate/" class="overlay-menu__link">{% t nav.participate %}</a></li>
<li class="overlay-menu__item"><a href="{{ basenav }}/currency/" class="overlay-menu__link">{% t nav.currency %}</a></li>
<li class="overlay-menu__item"><a href="{{ basenav }}/community/" class="overlay-menu__link">{% t nav.community %}</a></li>
<li class="overlay-menu__item"><a href="{{ basenav }}/blog/" class="overlay-menu__link">{% t nav.blog %}</a></li>
<li class="overlay-menu__item"><a href="{{ basenav }}/team" class="overlay-menu__link">{% t nav.team %}</a></li>
{% if page.layout != 'post' %}
<li class="overlay-menu__item overlay-menu__item--languages">
<ul class="overlay-menu__sublist">
<!-- TODO: dynamically generate this list -->
<li class="overlay-menu__subitem">
<a href="{{ page.url }}" class="overlay-menu__link {% if site.lang == 'en' %}is-active{% endif %}">{% t global.english %}</a>
</li>
<li class="overlay-menu__subitem">
<a href="/es{{ page.url }}" class="overlay-menu__link {% if site.lang == 'es' %}is-active{% endif %}">{% t global.spanish %}</a>
</li>
<li class="overlay-menu__subitem">
<a href="/pt{{ page.url }}" class="overlay-menu__link {% if site.lang == 'pt' %}is-active{% endif %}">{% t global.portugese %}</a>
</li>
<li class="overlay-menu__subitem">
<a href="/it{{ page.url }}" class="overlay-menu__link {% if site.lang == 'it' %}is-active{% endif %}">{% t global.italian %}</a>
</li>
<li class="overlay-menu__subitem">
<a href="/cn{{ page.url }}" class="overlay-menu__link {% if site.lang == 'cn' %}is-active{% endif %}">{% t global.chinese %}</a>
</li>
<li class="overlay-menu__subitem">
<a href="/ru{{ page.url }}" class="overlay-menu__link {% if site.lang == 'ru' %}is-active{% endif %}">{% t global.russian %}</a>
</li>
</ul>
</li>
{% endif %}
</ul> </ul>
{% endif %} </div>
-->
</nav> </nav>

102
src/scss/_overlay-menu.scss
View file

@ -34,6 +34,71 @@
} }
} }
.overlay-menu {
&__nav {
position: relative;
height: 100%;
height: 100vh;
padding-top: 120px;
padding-bottom: 120px;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
text-align: center;
@include font-title-xlarge();
line-height: 60px;
}
&__link {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
&, &:visited, &:hover, &:active {
color: $color-white;
}
}
&__list {
list-style: none;
padding: 0;
margin: 0 auto;
margin-top: 0px;
display: inline-block;
position: relative;
height: 50%;
}
&__item {
display: block;
position: relative;
opacity: 0;
&--languages {
margin-top: 20px;
}
}
&__sublist {
width: 100%;
max-width: 320px;
text-align: center;
display: inline-block;
}
&__subitem {
display: inline-block;
text-align: center;
@include font-base();
line-height: 40px;
margin-right: 10px;
margin-left: 10px;
}
}
.overlay { .overlay {
position: fixed; position: fixed;
background: $color-black; background: $color-black;
@ -55,43 +120,6 @@
position: absolute; position: absolute;
} }
nav {
position: relative;
height: 100%;
padding-top: 120px;
padding-bottom: 120px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
font-size: 36px;
font-weight: 200;
text-align: center;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
margin-top: 0px;
display: inline-block;
position: relative;
height: 50%;
li {
display: block;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
color: $color-white;
text-decoration: none;
overflow: hidden;
}
a:hover:after, a:focus:after, a:active:after {
width: 100%;
}
}
.sign-up-btn { .sign-up-btn {
border: none; border: none;
padding: 30px; padding: 30px;