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

update mobile header and first headline based on redlines for new design

Browse source
This commit is contained in:
Justin Cooper 2020-01-14 11:26:43 -06:00
parent 3e7bd1b58d
commit 79f6422696
4 changed files with 60 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
_includes/header_mobile.html
View file

@ -1,42 +1,44 @@
<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">
<span class="sr-only">Open Mobile Menu</span>
<i class="fa fa-bars" aria-hidden='true'></i>
<div class="header-contents">
<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">
<span class="sr-only">Open Mobile Menu</span>
<i class="fa fa-bars" aria-hidden='true'></i>
</a>
</div>
</div>
<div class="clear"></div>
<nav id="mobile-menu-contents" role="navigation" class="hidden"
aria-expanded='false' aria-label='Mobile Menu'>
<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>
</nav>
</div>
<div class="clear"></div>
<nav id="mobile-menu-contents" role="navigation" class="hidden"
aria-expanded='false' aria-label='Mobile Menu'>
<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>
</nav>
<div class="bottom-bar"></div>
</header>

9
assets/sass/layout/_header_mobile.scss
View file

@ -1,6 +1,9 @@
#mobile-header {
background-color: #333;
padding: 5px;
.header-contents {
padding: 5px;
}
/* screen reader only */
.sr-only {
@ -51,6 +54,10 @@
}
}
}
.bottom-bar {
height: 3px;
}
}
@media (min-width: $screen-xs-max) {

9
assets/sass/pages/_home.scss
View file

@ -178,6 +178,15 @@
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
img.pinball {
object-fit: fill;
}

9
index.html
View file

@ -4,10 +4,11 @@ layout: home
<div id="home-page">
<div class="headline-banner">
<img class="image-headline" alt="hero image"
src="{{ "assets/images/CircuitPython_Hero.jpg" |
relative_url }}"
/>
<div class="img-overlay"></div>
<img class="image-headline" alt="hero image"
src="{{ "assets/images/CircuitPython_Hero.jpg" |
relative_url }}"
/>
<div class="text">
<div class="title"><span>The easiest way to program microcontrollers</span></div>
<div class="tagline">