Skip to content

Commit 4a0f383

Browse files
zyedidiazyedidia
committed
Make navbar responsive
1 parent 9f10a64 commit 4a0f383

5 files changed

Lines changed: 100 additions & 24 deletions

File tree

‎about.html‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,19 @@
2626

2727
<div class="container">
2828
<div class="header clearfix">
29-
<nav>
30-
<ul class="nav nav-pills pull-right">
31-
<li role="presentation"><a href="index.html">Home</a></li>
32-
<li role="presentation" class="active"><a href="about.html">About</a></li>
33-
<li role="presentation"><a href="https://github.com/zyedidia/micro">Development</a></li>
29+
<div class="navbar-header pull-left">
30+
<h3 class="micro-logo">Micro</h3>
31+
</div>
32+
33+
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
34+
35+
<div class="collapse navbar-collapse navbar-right">
36+
<ul class="nav navbar-nav pull-right">
37+
<li><a href="index.html">home</a></li>
38+
<li class="active"><a href="about.html">about</a></li>
39+
<li><a href="https://github.com/zyedidia/micro">development</a></li>
3440
</ul>
35-
</nav>
36-
<h3 class="micro-logo">Micro</h3>
41+
</div>
3742
</div>
3843

3944
<div class="row about">
@@ -55,17 +60,17 @@ <h2>About</h2>
5560
<h2>Documentation and Help</h2>
5661
</div>
5762
</div>
58-
<div class="col-lg-8">
63+
<div class="col-sm-8">
5964
<p>Micro has a built-in help system which you can access by pressing <code>Ctrl-E</code> and typing <code>help topic</code>. You can also press Ctrl-g to open the main help file. The help files are also viewable online in the Github repository.</p>
6065
<p>I also recommend reading the <a href="https://github.com/zyedidia/micro/tree/master/runtime/help/tutorial.md">tutorial</a> for
6166
a brief introduction to the more powerful configuration features micro offers.</p>
6267

6368
<br>
6469
<p>If you have any questions, feel free to open an issue in the <a href="https://github.com/zyedidia/micro/issues">Github issue tracker</a> or to ask more informally in the <a href="https://gitter.im/zyedidia/micro">Gitter chat</a></p>
6570
</div>
66-
<div class="col-lg-1">
71+
<div class="col-sm-1">
6772
</div>
68-
<div class="col-lg-3">
73+
<div class="col-sm-3">
6974
<h4>Help topics</h4>
7075
<ul style="list-style-type:none; padding:0;">
7176
<li><a href="https://github.com/zyedidia/micro/tree/master/runtime/help/help.md">main help</a></li>

‎index.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,22 @@
2727

2828
<div class="container">
2929
<div class="header clearfix">
30-
<nav>
31-
<ul class="nav nav-pills pull-right">
32-
<li role="presentation" class="active"><a href="index.html">Home</a></li>
33-
<li role="presentation"><a href="about.html">About</a></li>
34-
<li role="presentation"><a href="https://github.com/zyedidia/micro">Development</a></li>
30+
<div class="navbar-header pull-left">
31+
<h3 class="micro-logo">Micro</h3>
32+
</div>
33+
34+
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
35+
36+
<div class="collapse navbar-collapse navbar-right">
37+
<ul class="nav navbar-nav pull-right">
38+
<li class="active"><a href="index.html">home</a></li>
39+
<li><a href="about.html">about</a></li>
40+
<li><a href="https://github.com/zyedidia/micro">development</a></li>
3541
</ul>
36-
</nav>
37-
<h3 class="micro-logo">Micro</h3>
42+
</div>
3843
</div>
3944

4045
<div class="jumbotron">
41-
<!-- <h1>micro</h1> -->
4246
<p class="lead">a modern and intuitive terminal-based text editor</p>
4347
<p><a class="btn btn-lg btn-success" onclick="download_page()" role="button">Download</a></p>
4448
<a aria-label="Star zyedidia/micro on GitHub" data-count-aria-label="# stargazers on GitHub" data-count-api="/repos/zyedidia/micro#stargazers_count" data-count-href="/zyedidia/micro/stargazers" data-style="mega" href="https://github.com/zyedidia/micro" class="github-button">Star</a>

‎micro_files/logo.png‎

-10.7 KB
Binary file not shown.

‎micro_files/micro-logo-mark.svg‎

Lines changed: 53 additions & 0 deletions
Loading

‎micro_files/micro.css‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ body {
55
font-size: 16px;
66
}
77
.testimonials {
8-
list-style: none;
9-
list-style-type: none;
10-
padding: 0;
8+
list-style: none;
9+
list-style-type: none;
10+
padding: 0;
1111
}
1212

1313
.micro-logo {
1414
text-indent: -9999px;
15-
width: 170px;
15+
width: 60px;
1616
height: 60px;
17-
background: url(logo.png) #ffffff no-repeat;
17+
background: url(micro-logo-mark.svg) #ffffff no-repeat;
18+
background-size: 60px 60px;
1819
}
1920

2021
/* Everything but the jumbotron gets side spacing for mobile first views */
@@ -98,8 +99,21 @@ p.lead {
9899
.features p + h4 {
99100
margin-top: 28px;
100101
}
102+
.navbar-toggle .icon-bar {
103+
display: block;
104+
width: 22px;
105+
height: 2px;
106+
background-color: #2F3590;
107+
border-radius: 1px;
108+
}
109+
110+
.nav > li > a, .nav-pills > li > a:hover, .nav-pills > li > a:hover {
111+
border-radius: 5px;
112+
}
101113

102-
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
114+
.nav > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
103115
background-color: #2F3590;
116+
color: #fff;
117+
border-radius: 5px;
104118
}
105119

0 commit comments

Comments
 (0)