Skip to content

Add optional global nav class-driven font iconography #122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Phlow merged 2 commits into from Dec 4, 2016
Merged

Add optional global nav class-driven font iconography #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
daddd20
Add optional global nav class-driven font iconography
Dec 1, 2016
84d29de
Update _navigation.html
Phlow Dec 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions _includes/_navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class="icon-tree"> {{ site.title }}</a></h1>
Copy link
Author

@ghost ghost Dec 4, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for the heads-up on the German social sharing site.

</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Navigation</span></a></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Nav</span></a></li>
</ul>
<section class="top-bar-section">
{% comment %}
Expand Down Expand Up @@ -34,14 +34,14 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class
{% comment %} If right side WITHOUT dropdown menu do {% endcomment %}
{% if link.dropdown == nil %}
<li class="divider"></li>
<li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li>
<li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li>

{% comment %} If right side WITH dropdown menu do {% endcomment %}
{% else %}

<li class="divider"></li>
<li class="has-dropdown{% if link.url == page.url %} active{% endif %}">
<a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a>
<a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a>

<ul class="dropdown">
{% for dropdown_link in link.dropdown %}
Expand All @@ -52,7 +52,7 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class
{% assign domain = site.url %}
{% endif %}

<li><a href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li>
<li><a {% if dropdown_link.class %}class="{{dropdown_link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li>
{% endfor %}
</ul>

Expand Down Expand Up @@ -88,14 +88,14 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class

{% comment %} If left side WITHOUT dropdown menu do {% endcomment %}
{% if link.dropdown == nil %}
<li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li>
<li{% if link.url == page.url %} class="active"{% elsif page.homepage == true and link.url == '/' %} class="active"{% endif %}><a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a></li>
<li class="divider"></li>

{% comment %} If left side WITH dropdown menu do {% endcomment %}
{% else %}

<li class="has-dropdown{% if link.url == page.url %} active{% endif %}">
<a href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a>
<a {% if link.class %}class="{{link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title | escape }}</a>

<ul class="dropdown">
{% for dropdown_link in link.dropdown %}
Expand All @@ -106,7 +106,7 @@ <h1 class="show-for-small-only"><a href="{{ site.url }}{{ site.baseurl }}" class
{% assign domain = site.url %}
{% endif %}

<li><a href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li>
<li><a {% if dropdown_link.class %}class="{{dropdown_link.class}}"{% endif %} href="{{ domain }}{{ site.baseurl }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title | escape }}</a></li>
{% endfor %}
</ul>

Expand Down
4 changes: 4 additions & 0 deletions _sass/_07_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@ body.video cite { color: #fff; }
#navigation {
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);

[class^='icon-']:before, [class*=' icon-']:before {
Copy link
Author

@ghost ghost Dec 1, 2016 •
edited by ghost
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks to @TWiStErRob for this one. Modified from twisterrob.github.io.

margin-right: rem-calc(8);
}
}


Expand Down