Commit 4311880d authored by Pietro Albini's avatar Pietro Albini

navbar: make responsive

parent ddf21ea6
......@@ -47,11 +47,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<li><a href="#">Chat</a></li>
<li><a href="#">Cerca</a></li>
<li><a href="#">Planet</a></li>
<li class="right"><a href="#">Telegram</a></li>
<li class="right"><a href="#">YouTube</a></li>
<li class="right"><a href="#">Google+</a></li>
<li class="right"><a href="#">Twitter</a></li>
<li class="right"><a href="#">Facebook</a></li>
</ul>
<ul class="right">
<li><a href="#">Telegram</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</nav>
......
......@@ -14,7 +14,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@mixin navbar-style($background, $color, $hover_color) {
@mixin navbar-style($background, $color, $hover_color, $font_size) {
background: $background;
ul li {
......@@ -22,6 +22,8 @@
border-right: 1px solid mix(#000, $background, 5%);
border-left: 1px solid mix(#000, $background, 5%);
font-size: $font_size;
a {
color: $color;
......@@ -44,18 +46,30 @@
nav {
box-shadow: 0 0.15em 0.15em rgba(100, 100, 100, 0.1);
font-size: 0;
width: 100%;
overflow: auto;
white-space: nowrap;
ul {
padding: 0;
margin: 0;
font-size: 0;
float: left;
&.right {
float: right;
}
li {
padding: 0;
padding-right: 0.1em;
padding-right: 1px;
margin: 0;
margin-left: -0.1em;
margin-left: -1px;
display: block;
float: left;
display: inline-block;
vertical-align: top;
a {
display: inline-block;
......@@ -68,16 +82,13 @@ nav {
}
}
&.right {
float: right;
}
&.site-name a {
font-size: 1.4em;
padding: 0.45em 0.7em 0.45em 0.4em;
line-height: 100%;
}
}
}
&:after {
clear: both;
......@@ -86,22 +97,21 @@ nav {
visibility: hidden;
display: block;
}
}
@include navbar-style(
mix(#fff, $color_warm_gray, 90%),
mix(#000, $color_warm_gray, 40%),
mix(#000, $color_warm_gray, 60%)
mix(#000, $color_warm_gray, 60%),
1rem,
);
&.main-navbar {
font-weight: 400;
@include navbar-style($color_orange, #fff, #fff);
@include navbar-style($color_orange, #fff, #fff, 1rem);
}
&.sites-list {
font-size: 0.8em;
@include navbar-style($color_cool_gray, $color_warm_gray, #fff);
@include navbar-style($color_cool_gray, $color_warm_gray, #fff, 0.8rem);
ul li a {
padding: 0.5em 0.7em;
......@@ -110,4 +120,15 @@ nav {
}
}
}
@media all and (max-width: $page_size) {
div.container {
display: inline-block;
}
ul {
display: inline-block;
float: none !important;
}
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment