jepler/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial mobile menu

Browse source
This commit is contained in:
Justin Cooper 2019-11-06 10:22:40 -06:00
parent baeffcfd0b
commit 94fd101858
7 changed files with 102 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_includes/head.html
View file

@ -11,4 +11,5 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<script src="{{ "/assets/javascript/header_mobile.js" | relative_url }}"></script>
</head>

38
_includes/header_mobile.html Normal file
View file

@ -0,0 +1,38 @@
<header id="mobile-header">
<div class="site-logo">
<a href="{{ "/" | relative_url }}">
<img src="{{ "/assets/images/logo.png" | relative_url }}"
srcset="{{ "/assets/images/logo.png" | relative_url }} 1x,
{{ "/assets/images/logo@2x.png" | relative_url }} 2x,
{{ "/assets/images/logo@3x.png" | relative_url }} 3x"
alt="CircuitPython Logo"
height="60" width="136">
</a>
</div>
<div id="mobile-menu">
<div class="menu-toggle">
<a href="#" id="mobile-menu-button"><i class="fa fa-bars"></i></a>
</div>
</div>
<div class="clear"></div>
<div id="mobile-menu-contents" class="hidden">
<ul>
<li><a {% if current[1] == 'downloads' %}class='active'{% endif %}
href="{{ "/downloads" | relative_url }}">Downloads</a></li>
<li><a {% if current[1] == 'libraries' %}class='active'{% endif %}
href="{{ "/libraries" | relative_url }}">Libraries</a></li>
<li><a {% if current[1] == 'blinka' %}class='active'{% endif %}
href="{{ "/blinka" | relative_url }}">Blinka</a></li>
<li><a {% if current[1] == 'contributing' %}class='active'{% endif %}
href="{{ "/contributing" | relative_url }}">Contributing</a></li>
<li><a href="https://blog.adafruit.com/category/circuitpython">News</a></li>
<li><a {% if current[1] == 'awesome' %}class='active'{% endif %}
href="{{ "/awesome" | relative_url }}">Awesome</a></li>
<li><a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a></li>
<li><a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a></li>
<li><a href="https://adafru.it/discord">Discord</a></li>
</ul>
</div>
</header>

1
_layouts/default.html
View file

@ -5,6 +5,7 @@
<body>
{% include header.html %}
{% include header_mobile.html %}
<div class="wrapper">
{{ content }}
</div>

1
assets/css/main.scss
View file

@ -11,6 +11,7 @@
@import 'layout/grid';
@import 'layout/header';
@import 'layout/header_mobile';
@import 'pages/home';
@import 'pages/downloads';

11
assets/javascript/header_mobile.js Normal file
View file

@ -0,0 +1,11 @@
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("mobile-menu-button").addEventListener('click', handleMobileToggle);
});
function handleMobileToggle(event) {
event.preventDefault();
var menuContainer = document.getElementById('mobile-menu-contents');
menuContainer.classList.toggle('hidden');
}

2
assets/sass/layout/_header.scss
View file

@ -96,6 +96,8 @@
@media (max-width: $screen-xs-max) {
#site-header {
display: none;
.wrapper {
height: auto;
}

48
assets/sass/layout/_header_mobile.scss Normal file
View file

@ -0,0 +1,48 @@
#mobile-header {
background-color: #333;
padding: 5px;
.site-logo {
float: left;
}
#mobile-menu {
float: right;
.menu-toggle {
font-size: 34px;
padding: 10px 20px 10px 0;
a {
color: #fff;
}
}
}
#mobile-menu-contents {
&.hidden {
display: none;
}
ul {
list-style: none;
padding-left: 20px;
font-size: 20px;
li {
padding: 5px 0 5px 0;
a {
color: #fff;
}
}
}
}
}
@media (min-width: $screen-xs-max) {
#mobile-header {
display: none;
}
}