Skip to content

Commit fb7621c

Browse files
isaacdurazoisaacdurazo
committed
Making site responsive
1 parent 143731e commit fb7621c

File tree

19 files changed

+375
-87
lines changed

19 files changed

+375
-87
lines changed

‎_includes/themes/twitter/default.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@
2929

3030
<body>
3131
<div class="navbar">
32-
<div class="navbar-inner">
33-
<ul class="nav">
34-
{% assign pages_list = site.pages %}
35-
{% assign group = 'navigation' %}
32+
<div class="navbar-inner" role="custom-dropdown">
33+
{% assign pages_list = site.pages %}
34+
{% assign group = 'navigation' %}
35+
<input type="checkbox" id="button">
36+
<label for="button" onclick=""></label>
37+
<ul class="nav">
3638
<li> <a href="{{ HOME_PATH }}">Home</a></li>
3739
<li> <a href="/about.html">About</a></li>
3840
<li> <a href="/archive.html">Archive</a></li>
@@ -43,7 +45,7 @@
4345

4446
<div class="page-header">
4547
<div class="logo">
46-
<div class="icon"><img src="/assets/images/logo.png" align="left"/></div>
48+
<div class="icon"><img src="/assets/images/logo.png"/></div>
4749
<div class="name">
4850
<div class="title">OpenGenderTracking Project</div>
4951
<div class="tagline">Computationally Tracking Gender Balance in News Content</div>

‎_site/about.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@
3030

3131
<body>
3232
<div class="navbar">
33-
<div class="navbar-inner">
34-
<ul class="nav">
35-
36-
33+
<div class="navbar-inner" role="custom-dropdown">
34+
35+
36+
<input type="checkbox" id="button">
37+
<label for="button" onclick=""></label>
38+
<ul class="nav">
3739
<li> <a href="/">Home</a></li>
3840
<li> <a href="/about.html">About</a></li>
3941
<li> <a href="/archive.html">Archive</a></li>
@@ -44,7 +46,7 @@
4446

4547
<div class="page-header">
4648
<div class="logo">
47-
<div class="icon"><img src="/assets/images/logo.png" align="left"/></div>
49+
<div class="icon"><img src="/assets/images/logo.png"/></div>
4850
<div class="name">
4951
<div class="title">OpenGenderTracking Project</div>
5052
<div class="tagline">Computationally Tracking Gender Balance in News Content</div>
@@ -70,7 +72,7 @@ <h2>Who</h2>
7072
OpenGenderTracker is a project by <a href='mailto: irene at bocoup.com'>Irene Ros</a> and <a href='mailto:achyland at bocoup.com'>Adam Hyland</a> from <a href='http://bocoup.com'>Bocoup</a> in collaboration with <a href='http://natematias.com/'>Nathan Matias</a> of the <a href='http://civic.mit.edu/'>MIT Center for Civic Media</a>.
7173
</div><div class='bocoup-info-container'>
7274
<div class='bocoup-info'>
73-
<a class='logo' href='http://bocoup.com/' target='_blank'><img alt='Bocoup Logo' src='/assets/images/bocoup-logo.jpg' style='padding: 0 18px 20px 0' width='180' /></a>
75+
<a class='logo' href='http://bocoup.com/' target='_blank'><img alt='Bocoup Logo' src='/assets/images/bocoup-logo.jpg' width='180' /></a>
7476
<p><b>Bocoup</b> moves the Open Web forward by building and supporting tomorrow's Open Web technologies through consulting, training, and community development.</p>
7577
</div>
7678
</div><div class='knight-about'>

‎_site/archive.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@
3030

3131
<body>
3232
<div class="navbar">
33-
<div class="navbar-inner">
34-
<ul class="nav">
35-
36-
33+
<div class="navbar-inner" role="custom-dropdown">
34+
35+
36+
<input type="checkbox" id="button">
37+
<label for="button" onclick=""></label>
38+
<ul class="nav">
3739
<li> <a href="/">Home</a></li>
3840
<li> <a href="/about.html">About</a></li>
3941
<li> <a href="/archive.html">Archive</a></li>
@@ -44,7 +46,7 @@
4446

4547
<div class="page-header">
4648
<div class="logo">
47-
<div class="icon"><img src="/assets/images/logo.png" align="left"/></div>
49+
<div class="icon"><img src="/assets/images/logo.png"/></div>
4850
<div class="name">
4951
<div class="title">OpenGenderTracking Project</div>
5052
<div class="tagline">Computationally Tracking Gender Balance in News Content</div>

‎_site/assets/images/menu-more.png

1.06 KB
Loading

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

+140-9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ html, body {
66
body {
77
line-height: normal;
88
color: #454545;
9+
-webkit-animation: bugfix infinite 1s;
10+
}
11+
12+
@-webkit-keyframes bugfix {
13+
from {padding:0;}
14+
to {padding:0;}
915
}
1016

1117
a {
@@ -34,7 +40,6 @@ p {
3440
.navbar-inner {
3541
border-radius: 0;
3642
margin: auto;
37-
display: table;
3843
-webkit-box-shadow: none;
3944
box-shadow: none;
4045
background: none;
@@ -64,6 +69,18 @@ p {
6469
color: #7eafd7;
6570
}
6671

72+
.navbar label {
73+
display: none;
74+
cursor: pointer;
75+
-webkit-user-select: none;
76+
}
77+
78+
.navbar input[type=checkbox] {
79+
position: absolute;
80+
top: -9999px;
81+
left: -9999px;
82+
}
83+
6784
.container > footer {
6885
margin-top: 20px;
6986
}
@@ -120,29 +137,34 @@ ul.archive p {
120137
-moz-background-size: cover;
121138
-o-background-size: cover;
122139
background-size: cover;
123-
padding: 3em 0;
124140
margin: 0;
125141
text-align: center;
142+
padding: 0;
126143
}
127144

128-
.logo {
145+
.page-header .logo {
146+
margin: 3em 0;
129147
display: inline-block;
130148
text-align: left;
131149
color: #333333
132150
}
133151

134-
.logo .icon, .logo .name {
152+
.page-header .logo .icon, .logo .name {
135153
float: left;
136154
}
137155

138-
.logo img {
156+
.page-header .logo img {
139157
margin-right: 15px;
140158
}
141159

142160
.logo .name {
143161
text-align: center;
144162
}
145163

164+
.logo .icon {
165+
text-align: center;
166+
}
167+
146168
.logo .title {
147169
font-size: 2.5em;
148170
font-weight: bold;
@@ -173,6 +195,10 @@ ul.archive p {
173195
clear: both;
174196
}
175197

198+
.bocoup-info .logo {
199+
margin-bottom: 1em;
200+
}
201+
176202
.knight-about a.logo, .mit-info a.logo, .bocoup-info a.logo {
177203
display: block;
178204
text-align: center;
@@ -215,7 +241,7 @@ footer {
215241

216242
footer p {
217243
margin: 0 auto;
218-
padding: 1.4em 0;
244+
padding: 1.4em;
219245
color: white;
220246
font-size: 1em;
221247
}
@@ -272,17 +298,18 @@ footer p {
272298

273299
h2 {
274300
font-size: 1.8em;
301+
margin: 1em 0 .3em;
275302
}
276303

277304
.navbar .nav>li {
278305
margin: 0 1em;
279306
}
280307

281-
.logo {
308+
.page-header .logo {
282309
font-size: .7em;
283310
}
284311

285-
.logo img {
312+
.page-header .logo img {
286313
width: 70%;
287314
margin-right: 0;
288315
}
@@ -291,6 +318,31 @@ footer p {
291318
padding: 3em;
292319
}
293320

321+
.knight-about, .goals, .who, .bocoup-info, .mit-info {
322+
float: none;
323+
width: 100%;
324+
margin-bottom: 1em;
325+
}
326+
327+
.bocoup-info-container {
328+
padding-top: 0em;
329+
margin: 2em 0;
330+
border: none;
331+
}
332+
333+
.knight-about .logo img {
334+
margin-top: 0;
335+
}
336+
337+
.knight-about .logo {
338+
height: auto;
339+
line-height: 30px;
340+
}
341+
342+
.mit-info .logo {
343+
height: 90px;
344+
}
345+
294346
}
295347

296348
@media (max-width: 540px) {
@@ -299,12 +351,91 @@ footer p {
299351
padding: 2em;
300352
}
301353

302-
.logo .icon, .logo .name {
354+
.page-header .logo .icon, .page-header .logo .name {
303355
float: none;
304356
display: table;
305357
margin: auto;
306358
}
307359

360+
.page-header .logo {
361+
margin: 1.5em;
362+
}
363+
364+
.navbar .nav {
365+
display: none;
366+
}
367+
368+
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li {
369+
width: 100%;
370+
opacity: .8;
371+
text-align: left;
372+
}
373+
374+
.navbar label {
375+
display: block;
376+
min-height: 2.25em;
377+
padding: .45em;
378+
font-size: 1.1em;
379+
margin: 0;
380+
}
381+
382+
.navbar label:after {
383+
background-image: url("/assets/images/menu-more.png");
384+
content: '';
385+
position: absolute;
386+
right: .5em;
387+
top: .5em;
388+
font-size: 1.8em;
389+
width: 23px;
390+
height: 19px;
391+
}
392+
393+
.navbar input[type=checkbox]:checked ~ label {
394+
background: #2a2a2a;
395+
}
396+
397+
.navbar input[type=checkbox]:checked ~ label:after {
398+
opacity: .3;
399+
}
400+
401+
.navbar input[type=checkbox]:checked ~ ul {
402+
display:block;
403+
}
404+
405+
.navbar input[type=checkbox]:checked ~ ul li {
406+
display:block;
407+
width: 100%;
408+
background: #333333;
409+
text-align: left;
410+
margin: 0;
411+
border-bottom: 1px solid #262626;
412+
border-top: 1px solid #4a4a4a;
413+
}
414+
415+
.navbar input[type=checkbox]:checked ~ ul li a {
416+
padding: .8em 1.5em;
417+
}
418+
419+
.row .posted-by {
420+
margin-bottom: .5em;
421+
}
422+
423+
}
424+
425+
@media (max-width: 415px) {
426+
427+
.name {
428+
font-size: .8em;
429+
}
430+
431+
.page-header .logo .tagline {
432+
display: none;
433+
}
434+
435+
.page-header .logo img {
436+
width: 60%;
437+
}
438+
308439
}
309440

310441

‎_site/atom.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>OpenGenderTracking</title>
55
<link href="http://opengendertracking.github.com/atom.xml" rel="self"/>
66
<link href="http://opengendertracking.github.com"/>
7-
<updated>2013-03-14T17:58:26-04:00</updated>
7+
<updated>2013-03-15T14:03:18-04:00</updated>
88
<id>http://opengendertracking.github.com</id>
99
<author>
1010
<name>Irene Ros</name>

‎_site/blog/2013/01/04/Getting-Started/index.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@
3030

3131
<body>
3232
<div class="navbar">
33-
<div class="navbar-inner">
34-
<ul class="nav">
35-
36-
33+
<div class="navbar-inner" role="custom-dropdown">
34+
35+
36+
<input type="checkbox" id="button">
37+
<label for="button" onclick=""></label>
38+
<ul class="nav">
3739
<li> <a href="/">Home</a></li>
3840
<li> <a href="/about.html">About</a></li>
3941
<li> <a href="/archive.html">Archive</a></li>
@@ -44,7 +46,7 @@
4446

4547
<div class="page-header">
4648
<div class="logo">
47-
<div class="icon"><img src="/assets/images/logo.png" align="left"/></div>
49+
<div class="icon"><img src="/assets/images/logo.png"/></div>
4850
<div class="name">
4951
<div class="title">OpenGenderTracking Project</div>
5052
<div class="tagline">Computationally Tracking Gender Balance in News Content</div>

‎_site/blog/2013/01/08/Tracking-Gender-In-Online-News/index.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,12 @@
3030

3131
<body>
3232
<div class="navbar">
33-
<div class="navbar-inner">
34-
<ul class="nav">
35-
36-
33+
<div class="navbar-inner" role="custom-dropdown">
34+
35+
36+
<input type="checkbox" id="button">
37+
<label for="button" onclick=""></label>
38+
<ul class="nav">
3739
<li> <a href="/">Home</a></li>
3840
<li> <a href="/about.html">About</a></li>
3941
<li> <a href="/archive.html">Archive</a></li>
@@ -44,7 +46,7 @@
4446

4547
<div class="page-header">
4648
<div class="logo">
47-
<div class="icon"><img src="/assets/images/logo.png" align="left"/></div>
49+
<div class="icon"><img src="/assets/images/logo.png"/></div>
4850
<div class="name">
4951
<div class="title">OpenGenderTracking Project</div>
5052
<div class="tagline">Computationally Tracking Gender Balance in News Content</div>

0 commit comments

Comments
 (0)