beenull/Pico
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update default theme; responsive/mobile navigation.

Browse source
This commit is contained in:
theshka 2015-04-25 07:51:47 -07:00
parent c4af6eef9d
commit 7513f88e6c
2 changed files with 116 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
themes/default/index.html
View file

@ -19,12 +19,15 @@
<header id="header">
<div class="inner clearfix">
<h1><a href="{{ base_url }}">{{ site_title }}</a></h1>
<ul class="nav">
{% for page in pages %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
<h1><a href="{{ base_url }}" id="logo">{{ site_title }}</a></h1>
<nav>
<a href="#" class="menu-icon"></a>
<ul>
{% for page in pages %}
<li><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
</nav>
</div>
</header>

111
themes/default/style.css
View file

@ -219,18 +219,33 @@ blockquote {
margin: 0;
float: left;
}
#header .nav {
#header .menu-icon {
display: none;
width: 35px;
height: 35px;
background: #afe1da url(menu-icon.png) center;
}
#header nav {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#header .nav li { display: inline; }
#header .nav a {
#header nav a {
font-weight: bold;
margin-left: 20px;
}
#header a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
#header ul {
list-style: none;
}
#header li {
display: inline-block;
float: left;
}
#footer {
background: #707070;
padding: 60px 0;
@ -254,3 +269,91 @@ blockquote {
*zoom: 1;
}
/* Media Queries
/*---------------------------------------------*/
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.inner {
width: 85%;
}
.inner img {
width:100%;
}
#header {
margin-bottom: 40px;
}
#header h1 a {
font-size:1em;
}
#header .menu-icon {
display:inline-block;
}
#header nav a { color: #000; }
#header nav a:hover { color: #afe1da; }
#header nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 2.7em;
top: 100px;
width: 80%;
border-radius: 4px 0 4px 4px;
z-index: 9999;
}
#header nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
#header nav:hover ul {
display: block;
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.inner {
width: 85%;
}
.inner img {
width:100%;
}
#header {
margin-bottom: 30px;
}
#header h1 a {
font-size:1em;
}
#header .menu-icon {
display:inline-block;
}
#header nav a { color: #000; }
#header nav a:hover { color: #afe1da; }
#header nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 0em;
top: 100px;
width: auto;
border-radius: 4px 0 4px 4px;
}
#header nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
#header nav:hover ul {
display: block;
}
}