mnalis/organicmaps-website
1
Fork 0
forked from organicmaps/website
Code Pull requests Activity

Better menu styling

Browse source 
Signed-off-by: Alexander Borsuk <me@alex.bio>
This commit is contained in:
Alexander Borsuk 2021-11-05 16:44:14 +01:00
parent 248a8bc189
commit 5bbe98f80a
2 changed files with 26 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
sass/main.scss
View file

@ -140,16 +140,15 @@ footer {
margin-right: 0.5rem;
}
#menu {
.menuitems {
display: flex;
justify-content: center;
}
.menuitem {
margin: 0 0.5rem 0 0.25rem;
text-transform: uppercase;
a, svg {
vertical-align: middle;
white-space: nowrap;
a {
text-decoration: none;
}
}
@ -161,7 +160,7 @@ footer {
}
}
.donate_button {
.menuitem_selected {
text-decoration: none;
border: red 2px solid;
border-radius: 1rem;

51
templates/menu.html
View file

@ -1,33 +1,26 @@
<nav id="menu" role="navigation">
<span class="menuitem">
{% if resource.path != '/' %}<a href='/'>{% endif %}
<span class="logo"></span><span>Home</span>
{%- if resource.path != '/' %}</a>{% endif %}
</span>
<span class="menuitem">
{% if resource.path != '/donate/' %}<a class="donate_button" href='/donate/'>{% endif %}
<span>❤️ Donate</span>
{% if resource.path != '/donate/' %}</a>{% endif %}
</span>
<span class="menuitem">
{% if resource.path != '/support-us/' %}<a href='/support-us/'>{% endif %}
<span>Support Us</span>
{% if resource.path != '/support-us/' %}</a>{% endif %}
</span>
<span class="menuitem">
<a href="https://github.com/organicmaps/organicmaps" target="_blank" class="github">
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"
class="octicon octicon-mark-github v-align-middle">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg><span>GitHub</span>
</a>
<span class="logo"></span>
<span class="menu_items">
<span class="menuitem{% if resource.path != '/' %}"><a href='/'>{% else %}_active">{% endif %}
<span>Home</span>
{%- if resource.path != '/' %}</a>{% endif %}
</span>
•
<span class="menuitem{% if resource.path != '/donate/' %}"><a href='/donate/'>{% else %}_active">{% endif %}
<span>❤️Donate</span>
{% if resource.path != '/donate/' %}</a>{% endif %}
</span>
•
<span class="menuitem{% if resource.path != '/support-us/' %}"><a href='/support-us/'>{% else %}_active">{% endif %}
<span>Support Us</span>
{% if resource.path != '/support-us/' %}</a>{% endif %}
</span>
•
<span class="menuitem">
<a href="https://github.com/organicmaps/organicmaps" target="_blank" class="github">
<span>GitHub</span>
</a>
</span>
</span>
</nav>