├── .gitignore
├── LICENSE
├── README.md
├── _config.yml
├── _includes
    └── post.html
├── _layouts
    ├── default.html
    └── post.html
├── _posts
    └── 2013-12-09-example-post.md
├── css
    ├── main.css
    ├── responsive.css
    └── syntax.css
├── favicon.ico
├── images
    ├── cover.jpg
    ├── logo.png
    └── sidebar-button.png
├── index.html
└── scripts
    └── responsive.js


/.gitignore:
--------------------------------------------------------------------------------
1 | _site


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Jeff Martin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | flex
 2 | ====
 3 | 
 4 | Flex is a responsive, flexible, [Jekyll](http://jekyllrb.com) theme.
 5 | 
 6 | The theme is based on the website [The Development](http://thedevelopment.co).
 7 | 
 8 | View a demo website [here](http://the-development.github.io/flex/).
 9 | 
10 | Installation
11 | ===
12 | To use this theme, you would do so like any other Jekyll setup:
13 | 
14 | 1. Install Jekyll: `gem install jekyll`
15 | 2. Fork this repository to your machine
16 | 3. `cd` to the forked directory and run `jekyll serve --watch`
17 | 4. Celebrate and dance.
18 | 
19 | Contributions
20 | ===
21 | 
22 | In general, there are no strict rules for contributing, only that your code is clean and well structured.
23 | 
24 | For bugs:
25 | - To merge a fix, you can simply open a pull request.
26 | - To report one that is not yet fixed, open an issue.
27 | 
28 | Feature requests:
29 | - **Always** open an issue first before implementing and proposing a new feature. This is only so I can make sure the theme doesn't become bloated with too many features. This way, I can determine if an idea is something that makes sense for the theme's design.
30 | 
31 | If in doubt, you can always ask me on Twitter: [@jeffxmn](https://twitter.com/jeffxmn)
32 | 
33 | License
34 | ===
35 | 
36 | Flex is licensed under the MIT license:
37 | 
38 | 
39 | The MIT License (MIT)
40 | 
41 | Copyright (c) 2013-2014 Jeff Martin
42 | 
43 | Permission is hereby granted, free of charge, to any person obtaining a copy
44 | of this software and associated documentation files (the "Software"), to deal
45 | in the Software without restriction, including without limitation the rights
46 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
47 | copies of the Software, and to permit persons to whom the Software is
48 | furnished to do so, subject to the following conditions:
49 | 
50 | The above copyright notice and this permission notice shall be included in all
51 | copies or substantial portions of the Software.
52 | 
53 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
54 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
55 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
56 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
57 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
58 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
59 | SOFTWARE.
60 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | name: Flex
2 | markdown: redcarpet
3 | pygments: true
4 | 


--------------------------------------------------------------------------------
/_includes/post.html:
--------------------------------------------------------------------------------
 1 | <div class="content" id="home">
 2 |   <div id="sidebar-button">
 3 |     <img src="/images/sidebar-button.png">
 4 |   </div>
 5 |   <div id="post-info">
 6 |     <div id="cover-photo-container">
 7 |       <img id="cover-photo" src="/images/{{ page.cover }}">
 8 |     </div>
 9 |     <div id="info-container">
10 |       <h1 id="title">{{ page.title }}</h1>
11 |       <span id="date">{{ page.date | date_to_string }}</span>
12 |     </div>
13 |   </div>
14 | 
15 |   <div class="post">
16 |     {{ content }}
17 |   </div>
18 |   <div class="colophon">
19 |     <p>
20 |       <span id="pub-date">Published on {{ page.date | date_to_string }}</span> <span class="separator">&bull;</span>
21 |       <span id="social">Find me on <a href="">Twitter</a>!</span>
22 |     </p>
23 |   </div>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |       <meta charset="utf-8">
 5 |       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |       <title>Flex - {{ page.title }}</title>
 7 |       <meta name="viewport" content="width=device-width">
 8 | 
 9 |       <!-- syntax highlighting CSS -->
10 |       <link rel="stylesheet" href="/css/syntax.css">
11 | 
12 |       <!-- Custom CSS -->
13 |       <link rel="stylesheet" href="/css/main.css">
14 | 
15 |       <!-- Responsive CSS -->
16 |       <link rel="stylesheet" href="/css/responsive.css">
17 | 
18 |       <!-- Google Fonts -->
19 |       <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
20 |       <link href='http://fonts.googleapis.com/css?family=Raleway:300,400,700' rel='stylesheet' type='text/css'>
21 |   </head>
22 |   <body>
23 |     <div class="site">
24 |       <div class="sidebar" id="sidebar">
25 |         <div class="header">
26 |           <h1 class="title"><a href="/"><img id="logo" src="/images/logo.png"></a></h1>
27 |           <span class="tagline">A responsive Jekyll theme</span>
28 |         </div>
29 |         <div class="posts">
30 |           <ul class="posts-list">
31 |             {% for post in site.posts %}
32 |               <li class="post-link">
33 |                 <a class="post-title" href="{{ post.url }}">
34 |                   <span class="post-date">{{ post.date | date_to_string }}</span>
35 |                   {{ post.title }}
36 |                 </a>
37 |               </li>
38 |             {% endfor %}
39 |           </ul>
40 |         </div>
41 |         <div class="footer">
42 |           <span id="footer-links">
43 |             <a href="" class="footer-link">About</a> <span class="separator">&bull;</span>
44 |             <a href="" class="footer-link">Twitter</a> <span class="separator">&bull;</span>
45 |             <a href="" class="footer-link">GitHub</a>
46 |           </span>
47 |         </div>
48 |       </div>
49 | 
50 |         {{ content }}
51 | 
52 |     </div>
53 |     <script src="/scripts/responsive.js" type="text/javascript"></script>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 | {% include post.html %}
5 | 


--------------------------------------------------------------------------------
/_posts/2013-12-09-example-post.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post
 3 | title: Example post
 4 | cover: cover.jpg
 5 | date:   2013-12-09 12:00:00
 6 | categories: posts
 7 | ---
 8 | 
 9 | ## Introducing Flex, a Jekyll theme
10 | 
11 | Flex is a minimalist, responsive theme based on the website, [The Development](http://thedevelopment.co).
12 | 
13 | ## Open Sourced on GitHub
14 | 
15 | Flex is open sourced on GitHub and is licensed under the [MIT License](http://opensource.org/licenses/MIT). Feel free to contribute to it anytime!
16 | 


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
  1 | /*****************************************************************************/
  2 | /*
  3 | /* Common
  4 | /*
  5 | /*****************************************************************************/
  6 | 
  7 | * {
  8 |   margin: 0;
  9 |   padding: 0;
 10 | }
 11 | 
 12 | html, body {
 13 |   height: 100%;
 14 |   width: 100%;
 15 |   -webkit-font-smoothing: antialiased;
 16 | }
 17 | 
 18 | body {
 19 |   color: #4a4a4a;
 20 |   background-color: #fafbfc;
 21 |   font-family: 'Raleway', Arial, sans-serif;
 22 |   font-weight: 400;
 23 |   font-size: 0.85em;
 24 |   overflow: hidden;
 25 | }
 26 | 
 27 | a {
 28 |   color: #8085C1;
 29 |   text-decoration: none;
 30 |   border: none;
 31 | }
 32 | 
 33 | a img {
 34 |   outline: none;
 35 | }
 36 | 
 37 | a:hover {
 38 |   color: #555;
 39 |   border: none;
 40 | }
 41 | 
 42 | .separator {
 43 |   color: #555;
 44 | }
 45 | 
 46 | /*****************************************************************************/
 47 | /*
 48 | /* Home
 49 | /*
 50 | /*****************************************************************************/
 51 | #logo {
 52 |   max-width: 128px;
 53 | }
 54 | 
 55 | .posts a {
 56 |   color: #444;
 57 | }
 58 | 
 59 | .posts a:hover {
 60 |   color: #777;
 61 | }
 62 | 
 63 | .posts-list {
 64 |   list-style-type: none;
 65 | }
 66 | 
 67 | .posts-list li {
 68 |   text-align: center;
 69 |   line-height: 1.75em;
 70 | }
 71 | 
 72 | /*****************************************************************************/
 73 | /*
 74 | /* Site
 75 | /*
 76 | /*****************************************************************************/
 77 | 
 78 | .site {
 79 |   height: 100%;
 80 |   width: 100%;
 81 |   line-height: 1.25em;
 82 | }
 83 | 
 84 | .title {
 85 |   display: inline-block;
 86 |   text-align: center;
 87 |   line-height: 25px;
 88 | }
 89 | 
 90 | .tagline {
 91 |   width: 100%;
 92 |   color: #787878;
 93 |   font-weight: 600;
 94 |   text-align: center;
 95 |   margin-top: 0.5em;
 96 |   display: block;
 97 | }
 98 | 
 99 | .posts {
100 |   border-top: 1px solid #e7e7e7;
101 |   margin-top: 1em;
102 |   padding-top: 1.5em;
103 |   padding-bottom: 1.25em;
104 | }
105 | 
106 | .footer {
107 |   font-size: 0.95em;
108 |   border-top: 1px solid #e7e7e7;
109 |   padding-top: 1.25em;
110 |   padding-bottom: 1.5em;
111 |   overflow: hidden;
112 |   float: center;
113 |   text-align: center;
114 | }
115 | 
116 | /*****************************************************************************/
117 | /*
118 | /* Posts
119 | /*
120 | /*****************************************************************************/
121 | 
122 | #date {
123 |   font-size: 16px;
124 |   padding-top: 0.25em;
125 |   margin-bottom: 2em;
126 |   text-transform: uppercase;
127 |   font-weight: 600;
128 |   color: #787878;
129 | }
130 | 
131 | #cover-photo-container,
132 | #info-container {
133 |   display: block;
134 | }
135 | 
136 | #info-container {
137 |   margin-top: 3em;
138 | }
139 | 
140 | #title {
141 |   color: #4a4a4a;
142 |   margin-bottom: 0.35em;
143 |   font-size: 3em;
144 |   line-height: 40px;
145 |   text-transform: uppercase;
146 | }
147 | 
148 | .post {
149 |   line-height: 24px;
150 |   max-width: 725px;
151 |   clear: both;
152 | }
153 | 
154 | .post h2 {
155 |   margin-top: 1.25em;
156 |   margin-left: -0.5em;
157 |   margin-bottom: 1.25em;
158 | }
159 | 
160 | .post a,
161 | #about a {
162 |   border-bottom: 1px solid #8085C1;
163 | }
164 | 
165 | .post a:hover {
166 |   border: none;
167 | }
168 | 
169 | /* standard */
170 | .post pre {
171 |   border: 1px solid #ddd;
172 |   background-color: #eef;
173 |   padding: 0 .4em;
174 | }
175 | 
176 | .post p {
177 |   font-family: 'Source Sans Pro', Arial, sans-serif;
178 |   font-size: 17px;
179 |   margin-bottom: 1.45em;
180 |   text-align: justify;
181 | }
182 | 
183 | .post ul, .post ol {
184 |   margin-left: 2.35em;
185 |   margin-bottom: 1.25em;
186 | }
187 | 
188 | .post code {
189 |   border: 1px solid #ddd;
190 |   background-color: #eef;
191 |   padding: 0 .2em;
192 | }
193 | 
194 | .post pre code {
195 |   border: none;
196 | }
197 | 
198 | /* terminal */
199 | .post pre.terminal {
200 |   border: 1px solid #000;
201 |   background-color: #333;
202 |   color: #FFF;
203 | }
204 | 
205 | .post pre.terminal code {
206 |   background-color: #333;
207 | }
208 | 
209 | /*****************************************************************************/
210 | /*
211 | /* Sidebar and Content
212 | /*
213 | /*****************************************************************************/
214 | 
215 | .sidebar,
216 | .content {
217 |   vertical-align: top;
218 |   height: 100%;
219 |   -webkit-overflow-scrolling: touch;
220 |   overflow-y: auto;
221 |   overflow-x: hidden;
222 | }
223 | 
224 | .sidebar {
225 |   float: left;
226 |   width: 14%;
227 |   padding-left: 11em;
228 |   padding-right: 2.125em;
229 |   border-right: 1px solid #e7e7e7;
230 | }
231 | 
232 | .content {
233 |   padding-left: 2.125em;
234 | }
235 | 
236 | .header {
237 |   text-align: center;
238 |   padding-top: 2.5em;
239 |   font-size: 1.1em;
240 | }
241 | 
242 | .post-link {
243 |   margin-bottom: 0.75em;
244 | }
245 | 
246 | .post-title {
247 |   font-weight: 600;
248 |   font-size: 1.25em;
249 |   text-transform: uppercase;
250 | }
251 | 
252 | .post-date {
253 |   color: #8a8a8a;
254 |   font-family: Monaco, "Courier New", monospace;
255 |   font-weight: 600;
256 |   font-size: 0.65em;
257 |   display: block;
258 |   text-transform: uppercase;
259 | }
260 | 
261 | #sidebar-button {
262 |   height: intrinsic;
263 |   cursor: pointer;
264 |   display: none;
265 |   padding: 15px 5px 0px 0px;
266 |   margin-bottom: 10px;
267 |   border-bottom: 1px solid #e7e7e7;
268 | }
269 | 
270 | #sidebar-button:active,
271 | #sidebar-button:hover {
272 |   opacity: 0.7;
273 | }
274 | 
275 | /*****************************************************************************/
276 | /*
277 | /* Colophon
278 | /*
279 | /*****************************************************************************/
280 | 
281 | .colophon {
282 |   margin-top: 1.5em;
283 |   margin-bottom: 1.45em;
284 |   border-top: 1px dotted #e7e7e7;
285 | }
286 | 
287 | .colophon p {
288 |   margin-top: 1.25em;
289 |   font-size: 0.95em;
290 |   color: #777;
291 | }
292 | 


--------------------------------------------------------------------------------
/css/responsive.css:
--------------------------------------------------------------------------------
 1 | @media (max-width:1309px) {
 2 |   #cover-photo {
 3 |     max-width: 95%;
 4 |   }
 5 | 
 6 |   .header {
 7 |     padding-top: 3.45em;
 8 |   }
 9 | 
10 |   .posts {
11 |     font-size: 0.9em;
12 |   }
13 | 
14 |   .footer {
15 |     font-size: 0.85em;
16 |   }
17 | }
18 | 
19 | @media (max-width:1090px) {
20 |   #logo {
21 |     max-width: 100px;
22 |   }
23 | 
24 |   #title {
25 |     font-size: 2.75em;
26 |     line-height: 35px;
27 |   }
28 | 
29 |   .header {
30 |     padding-top: 3.85em;
31 |   }
32 | 
33 |   .posts {
34 |     font-size: 0.85em;
35 |   }
36 | 
37 |   .sidebar {
38 |     padding-left: 4em;
39 |   }
40 | 
41 |   .content {
42 |     padding-right: 3em;
43 |   }
44 | 
45 |   .footer {
46 |     font-size: 0.85em;
47 |   }
48 | }
49 | 
50 | /**
51 |  * iPhone width
52 |  **/
53 | @media (max-width:640px) {
54 |   #logo {
55 |     max-width: 75px;
56 |   }
57 | 
58 |   #cover-photo-container {
59 |     text-align: center;
60 |   }
61 | 
62 |   #title {
63 |     font-size: 2.5em;
64 |   }
65 | 
66 |   .sidebar {
67 |     transition: 1s;
68 |     margin-left: -100%;
69 |     z-index: 3;
70 |     width: 35%;
71 |     padding-left: 1.75em;
72 |   }
73 | 
74 |   .content {
75 |     z-index: 1;
76 |     padding-right: 2em;
77 |   }
78 | 
79 |   #sidebar-button {
80 |     display: block;
81 |     z-index: 2;
82 |   }
83 | }
84 | 
85 | /*****************************************************************************/
86 | /*
87 | /* Sidebar responsive animations
88 | /*
89 | /*****************************************************************************/
90 | 
91 | .slideIn {
92 |   margin-left: 0%;
93 | }
94 | 


--------------------------------------------------------------------------------
/css/syntax.css:
--------------------------------------------------------------------------------
 1 | .highlight  { background: #ffffff; }
 2 | .highlight .c { color: #999988; font-style: italic } /* Comment */
 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 4 | .highlight .k { font-weight: bold } /* Keyword */
 5 | .highlight .o { font-weight: bold } /* Operator */
 6 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
 7 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
 8 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
12 | .highlight .ge { font-style: italic } /* Generic.Emph */
13 | .highlight .gr { color: #aa0000 } /* Generic.Error */
14 | .highlight .gh { color: #999999 } /* Generic.Heading */
15 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
17 | .highlight .go { color: #888888 } /* Generic.Output */
18 | .highlight .gp { color: #555555 } /* Generic.Prompt */
19 | .highlight .gs { font-weight: bold } /* Generic.Strong */
20 | .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
21 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */
22 | .highlight .kc { font-weight: bold } /* Keyword.Constant */
23 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */
24 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */
25 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */
26 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
27 | .highlight .m { color: #009999 } /* Literal.Number */
28 | .highlight .s { color: #d14 } /* Literal.String */
29 | .highlight .na { color: #008080 } /* Name.Attribute */
30 | .highlight .nb { color: #0086B3 } /* Name.Builtin */
31 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
32 | .highlight .no { color: #008080 } /* Name.Constant */
33 | .highlight .ni { color: #800080 } /* Name.Entity */
34 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
35 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
36 | .highlight .nn { color: #555555 } /* Name.Namespace */
37 | .highlight .nt { color: #000080 } /* Name.Tag */
38 | .highlight .nv { color: #008080 } /* Name.Variable */
39 | .highlight .ow { font-weight: bold } /* Operator.Word */
40 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */
41 | .highlight .mf { color: #009999 } /* Literal.Number.Float */
42 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */
43 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */
44 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */
45 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */
46 | .highlight .sc { color: #d14 } /* Literal.String.Char */
47 | .highlight .sd { color: #d14 } /* Literal.String.Doc */
48 | .highlight .s2 { color: #d14 } /* Literal.String.Double */
49 | .highlight .se { color: #d14 } /* Literal.String.Escape */
50 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */
51 | .highlight .si { color: #d14 } /* Literal.String.Interpol */
52 | .highlight .sx { color: #d14 } /* Literal.String.Other */
53 | .highlight .sr { color: #009926 } /* Literal.String.Regex */
54 | .highlight .s1 { color: #d14 } /* Literal.String.Single */
55 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */
56 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
57 | .highlight .vc { color: #008080 } /* Name.Variable.Class */
58 | .highlight .vg { color: #008080 } /* Name.Variable.Global */
59 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */
60 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
61 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/the-development/flex/6ed8124bf416f15bf0e9e24645396fff34078a99/favicon.ico


--------------------------------------------------------------------------------
/images/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/the-development/flex/6ed8124bf416f15bf0e9e24645396fff34078a99/images/cover.jpg


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/the-development/flex/6ed8124bf416f15bf0e9e24645396fff34078a99/images/logo.png


--------------------------------------------------------------------------------
/images/sidebar-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/the-development/flex/6ed8124bf416f15bf0e9e24645396fff34078a99/images/sidebar-button.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Home
4 | ---
5 | 
6 | {% assign page = site.posts.first %}
7 | {% assign content = page.content %}
8 | {% include post.html %}
9 | 


--------------------------------------------------------------------------------
/scripts/responsive.js:
--------------------------------------------------------------------------------
 1 | window.onload = function() {
 2 |   var sidebar = document.getElementById("sidebar");
 3 |   var sidebarButton = document.getElementById("sidebar-button");
 4 | 
 5 |   function openSidebar(e) {
 6 |     if (sidebar.className.indexOf("slideIn") != -1) {
 7 |       sidebar.className = sidebar.className.replace(" slideIn", "");
 8 |     } else {
 9 |      sidebar.className = sidebar.className + " slideIn"; 
10 |     }
11 |   }
12 | 
13 |   sidebarButton.addEventListener("click", openSidebar, false);
14 | };
15 | 


--------------------------------------------------------------------------------