Skip to content

Commit 848a5b2

Browse files
simensensimensen
committed
Updated visual style to play a little nicer w/ iPhone and narrower browsers.
1 parent 0ef5ad2 commit 848a5b2

File tree

2 files changed

+82
-19
lines changed

2 files changed

+82
-19
lines changed

‎source/_views/default.html

Lines changed: 51 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,34 +16,66 @@
1616
</head>
1717
<body>
1818
<div class="mainContent container stack-nav">
19-
<ul class="nav nav-pills">
20-
<li {% if page.nav_name == "home" %} class="active" {% endif %}>
21-
<a href="{{ site.url }}/">Stack</a>
22-
</li>
23-
<li {% if page.nav_name == "middlewares" %} class="active" {% endif %}>
24-
<a href="{{ site.url }}/middlewares/">Middlewares</a>
25-
</li>
26-
<li {% if page.nav_name == "toolbox" %} class="active" {% endif %}>
27-
<a href="{{ site.url }}/toolbox/">Toolbox</a>
28-
</li>
29-
<li {% if page.nav_name == "specs" %} class="active" {% endif %}>
30-
<a href="{{ site.url }}/specs/">Conventions</a>
31-
</li>
32-
</ul>
33-
<div class="nav-collapse collapse navbar-responsive-collapse">
34-
<ul class="nav navbar-nav" style="margin: 0 auto;">
35-
36-
19+
<div class="standard-navigation">
20+
<ul class="nav nav-pills">
21+
<li {% if page.nav_name == "home" %} class="active" {% endif %}>
22+
<a href="{{ site.url }}/">Home</a>
23+
</li>
24+
<li {% if page.nav_name == "middlewares" %} class="active" {% endif %}>
25+
<a href="{{ site.url }}/middlewares/">Middlewares</a>
26+
</li>
27+
<li {% if page.nav_name == "toolbox" %} class="active" {% endif %}>
28+
<a href="{{ site.url }}/toolbox/">Toolbox</a>
29+
</li>
30+
<li {% if page.nav_name == "specs" %} class="active" {% endif %}>
31+
<a href="{{ site.url }}/specs/">Conventions</a>
32+
</li>
3733
</ul>
3834
</div>
35+
<div class="collapsable-navigation">
36+
<div class="navbar navbar-fixed-top">
37+
<!--<div class="navbar-inner">-->
38+
<div class="container">
39+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
40+
<span class="icon-bar"></span>
41+
<span class="icon-bar"></span>
42+
<span class="icon-bar"></span>
43+
</a>
44+
<!--
45+
<a class="brand" data-toggle="collapse" data-target=".nav-collapse">
46+
Menu
47+
</a>
48+
-->
49+
<div class="nav-collapse collapse">
50+
<div class="navbar-inner">
51+
<ul class="nav">
52+
<li {% if page.nav_name == "home" %} class="active" {% endif %}>
53+
<a href="{{ site.url }}/">Home</a>
54+
</li>
55+
<li {% if page.nav_name == "middlewares" %} class="active" {% endif %}>
56+
<a href="{{ site.url }}/middlewares/">Middlewares</a>
57+
</li>
58+
<li {% if page.nav_name == "toolbox" %} class="active" {% endif %}>
59+
<a href="{{ site.url }}/toolbox/">Toolbox</a>
60+
</li>
61+
<li {% if page.nav_name == "specs" %} class="active" {% endif %}>
62+
<a href="{{ site.url }}/specs/">Conventions</a>
63+
</li>
64+
</div>
65+
</ul>
66+
</div>
67+
</div>
68+
<!--</div>-->
69+
</div>
70+
</div>
3971
</div>
4072

4173
{% if page.nav_name == "home" %}
4274
<div class="jumbotron masthead {% if page.nav_name == "home" %}huge{% endif %}">
4375
<h1><a href="{{ site.url }}/">Stack</a></h1>
4476
<p class="tagline">Composing <a href="https://github.com/symfony/symfony/blob/master/src/Symfony/Component/HttpKernel/HttpKernelInterface.php">HttpKernelInterface</a> middlewares since 2013!</p>
4577
<p>
46-
<ul class="nav nav-pills" style="display: inline-block;">
78+
<ul class="nav nav-pills social" style="display: inline-block;">
4779
<li>
4880
<a href="https://github.com/stackphp"><i class="icon-github"></i> stackphp</a>
4981
</li>

‎source/css/style.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
visibility: hidden;
55
}
66

7+
.standard-navigation {
8+
display: none;
9+
}
710
h2:hover .anchor {
811
visibility: visible;
912
text-decoration: none;
@@ -159,6 +162,27 @@ ol.conventions .no {
159162
display: inline-block;
160163
}
161164

165+
@media (max-width: 399px) {
166+
.nav.social {
167+
display: block;
168+
width: 100%;
169+
}
170+
.nav.social li {
171+
float: none;
172+
width: 60%;
173+
display: block;
174+
margin: 0 auto;
175+
}
176+
}
177+
@media (min-width: 400px) {
178+
.standard-navigation {
179+
display: block;
180+
}
181+
182+
.collapsable-navigation {
183+
display: none;
184+
}
185+
}
162186
@media (max-width: 767px) {
163187
.jumbotron .nav a.btn {
164188
font-size: 12px;
@@ -178,6 +202,13 @@ ol.conventions .no {
178202
.middlewares div.row-fluid h3 {
179203
margin-top: 20px;
180204
}
205+
206+
.mainContent.stack-nav {
207+
margin-top: 0em;
208+
}
209+
.mainContent.stack-nav ul.nav {
210+
margin-top: 1em;
211+
}
181212
}
182213

183214
@media (min-width: 768px) {

0 commit comments

Comments
 (0)