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

initial new header

Browse source
This commit is contained in:
Justin Cooper 2019-10-30 15:37:13 -05:00
parent 45f476c8ff
commit 66e7d6dd2a
2 changed files with 60 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
_includes/header.html
View file

@ -1,4 +1,15 @@
<header id="site-header">
<div class="top-navigation">
<div>
<div class="navigation">
<a href="{{ "/contributing" | relative_url }}">Contributing</a>
<a href="https://blog.adafruit.com/category/circuitpython">News</a>
<a href="{{ "/awesome" | relative_url }}">Awesome</a>
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Help</a>
<a href="https://adafru.it/discord"><i class="fab fa-discord"></i></a>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="site-brand">
@ -12,17 +23,14 @@
height="60" width="136">
</a>
</div>
</div>
<div class="site-navigation">
<a href="{{ "/downloads" | relative_url }}">DOWNLOADS</a>
<a href="{{ "/libraries" | relative_url }}">LIBRARIES</a>
<a href="{{ "/contributing" | relative_url }}">CONTRIBUTING</a>
<a href="{{ "/blinka" | relative_url }}">BLINKA</a>
<a href="https://blog.adafruit.com/category/circuitpython">NEWS</a>
<a href="https://adafru.it/discord">DISCORD</a>
<a href="{{ "/awesome" | relative_url }}">AWESOME</a>
<a href="https://learn.adafruit.com/welcome-to-circuitpython">HELP</a>
<a class="downloads" href="{{ "/downloads" | relative_url }}">Downloads</a>
<a href="{{ "/libraries" | relative_url }}">Libraries</a>
<a href="{{ "/blinka" | relative_url }}">Blinka</a>
</div>
<div class="get-started">
<a href="#">Get Started</a>
</div>
</div>
</div>
</div>

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

@ -1,6 +1,6 @@
#site-header {
display: grid;
grid-template-rows: 1fr 3px;
grid-template-rows: 40px 1fr 3px;
grid-column: full;
&> * {
@ -23,20 +23,36 @@
.content {
display: grid;
grid-template-columns: 2fr 1fr;
padding-bottom: 20px;
}
}
.top-navigation {
background-color: #151515;
padding-top: 10px;
.navigation {
display: flex;
align-items: flex-end;
justify-content: flex-end;
a {
margin-left: 40px;
font-size: 14px;
color: #999999;
}
}
}
.site-brand {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
}
.site-logo {
position: absolute;
top: 20px;
}
.site-banner {
@ -48,19 +64,34 @@
}
}
.site-navigation {
display:flex;
align-items: flex-end;
justify-content: flex-end;
.get-started {
margin-left: auto;
padding-bottom: 10px;
a {
display: block;
padding: 7px 50px 7px 50px;
color: #fff;
margin-left: 10px;
border-radius: 50px;
border: 3px solid #fff;
}
}
.site-navigation {
padding: 0 0 10px 0;
a {
margin-left: 40px;
color: #999999;
&.downloads {
color: #fff;
}
}
}
.bottom-bar {
background-color: #e90e8b;
background-color: #e71c8c;
}
@media (max-width: $screen-xs-max) {