Skip to content

Commit 1edd21f

Browse files
brunobordbrunobord
committed
Added fitgrd to make the template more responsive
1 parent e851a40 commit 1edd21f

File tree

3 files changed

+57
-39
lines changed

3 files changed

+57
-39
lines changed

‎index.html

+37-21
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,60 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Relax...</title>
6+
<meta name="HandheldFriendly" content="True">
7+
<meta name="viewport" content="initial-scale = 1.0">
8+
<meta name="apple-mobile-web-app-capable" content="yes">
9+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
10+
611
<link rel="stylesheet" href="vendor/css/grid.css" type-"text/css">
712
<link rel="stylesheet" href="vendor/css/meteo/stylesheet.css" type="text/css">
813
<link rel="stylesheet" href="vendor/css/fontello/fontello.css" type="text/css">
914
<link rel="stylesheet" href="vendor/css/glyphicons.css" type="text/css">
1015
<link rel="stylesheet" href="vendor/css/editor.css" />
16+
<link rel="stylesheet" href="static/css/fitgrd.pack.css" type="text/css">
1117
<link rel="stylesheet" href="static/css/style.css" type="text/css">
1218
<link rel="stylesheet" href="static/css/preview.css" type="text/css">
1319
</head>
1420
<body>
1521
<div class="wrapper">
16-
<header class="row">
17-
<div class="col content">
18-
<div class="title-container">
19-
<h1>Relax...</h1>
22+
23+
<header>
24+
<div class="center">
25+
<div class="row">
26+
<div class="fg12 title-container">
27+
<h1>Relax...</h1>
28+
</div>
2029
</div>
2130
</div>
2231
</header>
23-
<section class="row">
24-
<div class="col content">
25-
<div class="editor-wrapper">
26-
<form action="" id="editor">
27-
<textarea placeholder="Please relax and type away..."></textarea>
28-
</form>
32+
33+
<section>
34+
<div class="center">
35+
<div class="row">
36+
37+
<div class="fg10">
38+
<div class="editor-wrapper">
39+
<form action="" id="editor">
40+
<textarea placeholder="Please relax and type away..."></textarea>
41+
</form>
42+
</div>
2943
</div>
30-
</div>
31-
<div class="col sidebar">
32-
<div id="soundlinks"></div>
33-
<hr>
34-
<div class="toolbar">
35-
<p id="btn-save-wrapper"><a id="btn-save" href="#"><i class="glyphicon glyphicon-save"></i> Save as...</a></p>
44+
45+
<div class="fg2 sidebar">
46+
<div id="soundlinks"></div>
47+
<hr>
48+
<div class="toolbar">
49+
<p id="btn-save-wrapper"><a id="btn-save" href="#"><i class="glyphicon glyphicon-save"></i> Save as...</a></p>
50+
<hr>
51+
<p><i class="glyphicon glyphicon-open"></i> Open</p>
52+
<p id="document-list"></p>
53+
</div>
3654
<hr>
37-
<p><i class="glyphicon glyphicon-open"></i> Open</p>
38-
<p id="document-list"></p>
55+
<small class="notes">made with love by <a href="http://jehaisleprintemps.net">Bruno Bord</a> - &copy; 2014. Grab <a href="https://github.com/brunobord/relax">the source on Github</a>, inspired by the fantastic concept of <a href="http://noisli.com">Noisli.com</a></small>
3956
</div>
40-
<hr>
41-
<small class="notes">made with love by <a href="http://jehaisleprintemps.net">Bruno Bord</a> - &copy; 2014. Grab <a href="https://github.com/brunobord/relax">the source on Github</a>, inspired by the fantastic concept of <a href="http://noisli.com">Noisli.com</a></small>
42-
</div>
4357

58+
</div>
59+
</div>
4460
</section>
4561

4662
</div> <!-- /wrapper -->

‎static/css/fitgrd.pack.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/css/style.css

+19-18
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
@media only screen and (min-width: 30em) {
2-
.content { width: 75%; }
3-
.sidebar { width: 25%;}
4-
}
5-
.editor-wrapper {
6-
max-width: 700px;
7-
margin: auto;
8-
}
9-
.title-container {
10-
max-width: 700px;
11-
margin: auto;
12-
}
13-
.title-container h1 {
14-
text-align: left;
15-
}
16-
.CodeMirror {
17-
height: 550px !important;
18-
}
191
/* bb */
202
@font-face {
213
font-family: 'Ubuntu Mono';
@@ -77,6 +59,25 @@
7759
font-weight: 700;
7860
src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(http://themes.googleusercontent.com/static/fonts/robotoslab/v3/dazS1PrQQuCxC3iOAJFEJRbnBKKEOwRKgsHDreGcocg.woff) format('woff');
7961
}
62+
/* Grid */
63+
.wrapper {
64+
max-width: 1024px;
65+
margin: auto;
66+
}
67+
.editor-wrapper {
68+
max-width: 700px;
69+
margin: auto;
70+
}
71+
.title-container h1 {
72+
text-align: left;
73+
}
74+
.CodeMirror {
75+
height: 550px !important;
76+
}
77+
.sidebar {
78+
padding-left: .33em;
79+
}
80+
/* Styles look'n'feel */
8081
body {
8182
background: #f8ecc2;
8283
font-family: 'Roboto Slab';

0 commit comments

Comments
 (0)