Skip to content

Commit 4d9f9ec

Browse files
jakemaskjakemask
committed
Make navbar more mobile-friendly
1 parent 0869492 commit 4d9f9ec

File tree

3 files changed

+70
-33
lines changed

3 files changed

+70
-33
lines changed

‎_includes/themes/twitter/default.html‎

Lines changed: 36 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,53 +12,68 @@
1212
<!-- HTML5 shim, for IE6-8 support of HTML elements -->
1313
<!--[if lt IE 9]>
1414
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
15-
<![endif]-->
15+
<![endif]-->
1616

17-
<!-- styles -->
18-
<link href="{{ ASSET_PATH }}/css/theme.css" rel="stylesheet" type="text/css">
19-
<link href="{{ ASSET_PATH }}/css/style.css?body=1" rel="stylesheet" type="text/css" media="all">
20-
<link href="{{ ASSET_PATH }}/css/syntax.css" rel="stylesheet" type="text/css">
17+
<!-- styles -->
18+
<link href="{{ ASSET_PATH }}/css/theme.css" rel="stylesheet" type="text/css">
19+
<link href="{{ ASSET_PATH }}/css/style.css?body=1" rel="stylesheet" type="text/css" media="all">
20+
<link href="{{ ASSET_PATH }}/css/syntax.css" rel="stylesheet" type="text/css">
2121

22-
<!-- fav and touch icons -->
23-
<!-- Update these with your own images
24-
<link rel="shortcut icon" href="images/favicon.ico">
25-
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
26-
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
27-
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
28-
-->
22+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
23+
<!-- Latest compiled and minified JavaScript -->
24+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
2925

30-
<!-- atom & rss feed -->
31-
<link href="{{ BASE_PATH }}{{ site.JB.atom_path }}" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">
32-
<link href="{{ BASE_PATH }}{{ site.JB.rss_path }}" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed">
26+
<!-- fav and touch icons -->
27+
<!-- Update these with your own images
28+
<link rel="shortcut icon" href="images/favicon.ico">
29+
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
30+
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
31+
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
32+
-->
33+
34+
<!-- atom & rss feed -->
35+
<link href="{{ BASE_PATH }}{{ site.JB.atom_path }}" type="application/atom+xml" rel="alternate" title="Sitewide ATOM Feed">
36+
<link href="{{ BASE_PATH }}{{ site.JB.rss_path }}" type="application/rss+xml" rel="alternate" title="Sitewide RSS Feed">
3337

3438
</head>
3539

3640
<body>
3741
<nav class="navbar navbar-fixed-top">
38-
<div class="container-fluid">
39-
<div class ="navbar-header">
42+
<div class="container-fluid">
43+
<div class ="navbar-header">
44+
<button type="button" class="navbar-toggle collapsed"
45+
data-toggle="collapse"
46+
data-target="#navbar-collapse">
47+
<span class="sr-only">Toggle navigation</span>
48+
<span class="icon-bar"></span>
49+
<span class="icon-bar"></span>
50+
<span class="icon-bar"></span>
51+
</button>
4052
<a class="navbar-brand" href="{{ HOME_PATH }}">
4153
<img src="{{ ASSET_PATH }}/sigint-logo.png" alt="{{ site.title }}">
4254
</a>
43-
</div>
55+
</div>
56+
57+
<div class="collapse navbar-collapse" id="navbar-collapse">
4458
<ul class="nav navbar-nav">
4559
{% assign pages_list = site.pages %}
4660
{% assign group = 'navigation' %}
4761
{% include JB/pages_list %}
4862
</ul>
4963
</div>
64+
</div>
5065
</nav>
5166

52-
<div class="container-narrow">
67+
<div class="container">
5368

5469
<div class="content">
5570
{{ content }}
5671
</div>
5772
<hr>
5873
<footer>
5974
<p>&copy; {{ site.time | date: '%Y' }} {{ site.author.name }}
60-
with help from <a href="http://jekyllbootstrap.com" target="_blank" title="The Definitive Jekyll Blogging Framework">Jekyll Bootstrap</a>
61-
and <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a>
75+
with help from <a href="http://jekyllbootstrap.com" target="_blank" title="The Definitive Jekyll Blogging Framework">Jekyll Bootstrap</a>
76+
and <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a>
6277
</p>
6378
</footer>
6479

‎_sass/_variables.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -338,17 +338,17 @@ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
338338
//## Define the maximum width of `.container` for different screen sizes.
339339

340340
// Small screen / tablet
341-
$container-tablet: (720px + $grid-gutter-width) !default;
341+
$container-tablet: (700px + $grid-gutter-width) !default;
342342
//** For `$screen-sm-min` and up.
343343
$container-sm: $container-tablet !default;
344344

345345
// Medium screen / desktop
346-
$container-desktop: (940px + $grid-gutter-width) !default;
346+
$container-desktop: (700px + $grid-gutter-width) !default;
347347
//** For `$screen-md-min` and up.
348348
$container-md: $container-desktop !default;
349349

350350
// Large screen / wide desktop
351-
$container-large-desktop: (1140px + $grid-gutter-width) !default;
351+
$container-large-desktop: (700px + $grid-gutter-width) !default;
352352
//** For `$screen-lg-min` and up.
353353
$container-lg: $container-large-desktop !default;
354354

@@ -385,7 +385,7 @@ $navbar-default-brand-hover-bg: transparent !default;
385385

386386
// Navbar toggle
387387
$navbar-default-toggle-hover-bg: #ddd !default;
388-
$navbar-default-toggle-icon-bar-bg: #ccc !default;
388+
$navbar-default-toggle-icon-bar-bg: #222 !default;
389389
$navbar-default-toggle-border-color: #ddd !default;
390390

391391

‎assets/themes/twitter/css/style.css‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
1-
/* Custom container */
2-
.container-narrow {
3-
margin: 0 auto;
4-
max-width: 700px; }
5-
6-
.container-narrow > hr {
7-
margin: 30px 0; }
1+
/* nav icons to the right */
82

93
.navbar .nav {
10-
float: right; }
4+
float: right;
5+
}
6+
7+
button.navbar-toggle {
8+
border-color: rgb(211,211,211);
9+
}
10+
11+
ul.navbar-nav {
12+
background-color: #fff;
13+
border-color: rgb(211,211,211);
14+
border-radius: 4px;
15+
border-width: 1px;
16+
}
17+
18+
.icon-bar {
19+
background-color: #222;
20+
}
21+
22+
@media(max-width: 1720px) {
23+
body {
24+
padding-top: 70px;
25+
}
26+
27+
.navbar-fixed-top {
28+
background-color: #fff;
29+
border-color: rgb(211,211,211);
30+
border-bottom-width: 1px;
31+
}
32+
}
1133

1234
/* posts index */
1335
.post > h3.title {

0 commit comments

Comments
 (0)