├── .gitignore
├── Gemfile
├── Gemfile.lock
├── README.md
├── _config.yml
├── _layouts
├── default.html
├── page.html
└── post.html
├── _posts
└── 2014-04-06-welcome-to-jekyll.markdown
├── images
├── body-bg.jpg
├── download-button.png
├── github-button.png
├── header-bg.jpg
├── highlight-bg.jpg
└── sidebar-bg.jpg
├── index.html
├── jekyll-architect-theme.gemspec
└── stylesheets
├── print.css
├── pygment_trac.css
└── stylesheet.css
/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | .bundle
3 | .sass-cache
4 | Gemfile.lock
5 | .jekyll-cache
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | # A sample Gemfile
2 | source "https://rubygems.org"
3 | gemspec
4 |
5 | gem 'jekyll'
6 | gem 'jekyll-paginate'
7 | gem 'kramdown'
8 | gem 'pygments.rb'
9 |
--------------------------------------------------------------------------------
/Gemfile.lock:
--------------------------------------------------------------------------------
1 | PATH
2 | remote: .
3 | specs:
4 | jekyll-architect-theme (0.1.0)
5 |
6 | GEM
7 | remote: https://rubygems.org/
8 | specs:
9 | addressable (2.8.1)
10 | public_suffix (>= 2.0.2, < 6.0)
11 | colorator (1.1.0)
12 | concurrent-ruby (1.1.9)
13 | em-websocket (0.5.2)
14 | eventmachine (>= 0.12.9)
15 | http_parser.rb (~> 0.6.0)
16 | eventmachine (1.2.7)
17 | ffi (1.15.3)
18 | forwardable-extended (2.6.0)
19 | http_parser.rb (0.6.0)
20 | i18n (1.8.10)
21 | concurrent-ruby (~> 1.0)
22 | jekyll (4.2.0)
23 | addressable (~> 2.4)
24 | colorator (~> 1.0)
25 | em-websocket (~> 0.5)
26 | i18n (~> 1.0)
27 | jekyll-sass-converter (~> 2.0)
28 | jekyll-watch (~> 2.0)
29 | kramdown (~> 2.3)
30 | kramdown-parser-gfm (~> 1.0)
31 | liquid (~> 4.0)
32 | mercenary (~> 0.4.0)
33 | pathutil (~> 0.9)
34 | rouge (~> 3.0)
35 | safe_yaml (~> 1.0)
36 | terminal-table (~> 2.0)
37 | jekyll-paginate (1.1.0)
38 | jekyll-sass-converter (2.1.0)
39 | sassc (> 2.0.1, < 3.0)
40 | jekyll-watch (2.2.1)
41 | listen (~> 3.0)
42 | kramdown (2.3.1)
43 | rexml
44 | kramdown-parser-gfm (1.1.0)
45 | kramdown (~> 2.0)
46 | liquid (4.0.3)
47 | listen (3.5.1)
48 | rb-fsevent (~> 0.10, >= 0.10.3)
49 | rb-inotify (~> 0.9, >= 0.9.10)
50 | mercenary (0.4.0)
51 | pathutil (0.16.2)
52 | forwardable-extended (~> 2.6)
53 | public_suffix (5.0.0)
54 | pygments.rb (2.2.0)
55 | rake (13.0.3)
56 | rb-fsevent (0.11.0)
57 | rb-inotify (0.10.1)
58 | ffi (~> 1.0)
59 | rexml (3.3.9)
60 | rouge (3.26.0)
61 | safe_yaml (1.0.5)
62 | sassc (2.4.0)
63 | ffi (~> 1.9)
64 | terminal-table (2.0.0)
65 | unicode-display_width (~> 1.1, >= 1.1.1)
66 | unicode-display_width (1.7.0)
67 |
68 | PLATFORMS
69 | universal-darwin-20
70 | x86_64-linux
71 |
72 | DEPENDENCIES
73 | bundler (>= 2.2.10)
74 | jekyll
75 | jekyll-architect-theme!
76 | jekyll-paginate
77 | kramdown
78 | pygments.rb
79 | rake (>= 12.3.3)
80 |
81 | BUNDLED WITH
82 | 2.2.21
83 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Architect theme
2 |
3 | This is a [Jekyll][1] theme that is an adaptation of [@jasonlong][2]'s [Architect theme][4] on [GitHub Pages][3].
4 |
5 | This is the raw HTML and styles that are used for the *Architect* theme on [GitHub Pages](https://pages.github.com/).
6 |
7 | 
8 |
9 | # Getting Started
10 |
11 | ## Prerequisites
12 |
13 | To install this theme, jekyll is required to be installed on your system. Head over to the [docs](https://jekyllrb.com/docs/installation/) and install the four requirements (Ruby, RubyGems, Node.js and Python 2.7). If you're on a Mac system, it's likely the only package you'll need to install is Node.js
14 |
15 | Once you've installed the requirements, run this command in your terminal:
16 |
17 | ```
18 | $ sudo gem install jekyll
19 | ```
20 |
21 | You'll also need to install the bundler package:
22 |
23 | ```
24 | $ sudo gem install bundler
25 | ```
26 |
27 | ## Downloading and Installing the theme
28 |
29 | Download the theme
30 |
31 | ```
32 | https://github.com/pietromenna/jekyll-architect-theme/archive/master.zip
33 | ```
34 |
35 | Unzip it and use it as a regular jekyll folder.
36 |
37 | ```
38 | $ unzip jekyll-architect-theme-master.zip
39 | ```
40 |
41 | Get inside the newly extracted folder
42 |
43 | ```
44 | $ cd jekyll-architect-theme-master
45 | ```
46 |
47 | Install the dependencies
48 |
49 | ```
50 | $ bundle install
51 | ```
52 |
53 | Use it!
54 |
55 | ```
56 | $ jekyll serve
57 | ```
58 |
59 | # Setup
60 |
61 | Some important configuration can be done in the file `_config.yml`. Please, check the Setup section in that file.
62 |
63 |
64 | ## baseurl
65 |
66 | `baseurl` parameter is required in the case the site doesn't sit on the root of the domain. For example: https://pietromenna.github.io/jekyll-architect-theme
67 |
68 | In the case above the baseurl should be set to "/jekyll-architect-theme".
69 |
70 | In the case the site sits in the root, you can leave `baseurl` as empty "".
71 |
72 |
73 | For more details read about [Jekyll][1] on its web page.
74 |
75 | # Contributing
76 |
77 | Bug reports and pull requests are welcome on GitHub at https://github.com/pietromenna/jekyll-architect-theme.
78 |
79 | # Development
80 |
81 | To set up your environment to develop this theme, run `bundle install`.
82 |
83 | You theme is setup just like a normal Jelyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
84 |
85 | # License
86 |
87 | This work is licensed under a [Creative Commons Attribution 4.0 International](http://creativecommons.org/licenses/by/4.0/).
88 |
89 | [1]: https://jekyllrb.com
90 | [2]: https://github.com/jasonlong
91 | [3]: http://pages.github.com/
92 | [4]: https://github.com/jasonlong/architect-theme
93 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Setup
2 | name: Project or Site name (Architect Theme)
3 | tagline: A responsive theme for your project on GitHub Pages
4 | baseurl: ""
5 | locale: "en"
6 |
7 | # Gems
8 | gems:
9 | - jekyll-paginate
10 |
11 | #Others
12 | markdown: kramdown
13 |
--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 | {{ page.title }}
17 |
18 |
19 |
20 |
21 |
22 |
{{ site.name }}
23 |
Open Source version of the GitHub Pages theme, now for Jekyll
24 |
View project on GitHub
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | {{ content }}
33 |
34 |
35 |
36 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/_layouts/page.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 |
5 | {{ content }}
6 |
--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 | {{ page.title }}
5 | {{ page.date | date_to_string }}
6 |
7 | {{ content }}
8 |
--------------------------------------------------------------------------------
/_posts/2014-04-06-welcome-to-jekyll.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Welcome to Jekyll!"
4 | date: 2014-04-06 15:40:56
5 | categories: jekyll update
6 | ---
7 |
8 | You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
9 | To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
10 |
11 | Jekyll also offers powerful support for code snippets:
12 |
13 | {% highlight ruby %}
14 | def print_hi(name)
15 | puts "Hi, #{name}"
16 | end
17 | print_hi('Tom')
18 | #=> prints 'Hi, Tom' to STDOUT.
19 | {% endhighlight %}
20 |
21 | Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].
22 |
23 | [jekyll-gh]: https://github.com/mojombo/jekyll
24 | [jekyll]: http://jekyllrb.com
25 |
--------------------------------------------------------------------------------
/images/body-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietromenna/jekyll-architect-theme/672b6a6408614f0b5bd0f5e6b40595c25e47da82/images/body-bg.jpg
--------------------------------------------------------------------------------
/images/download-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietromenna/jekyll-architect-theme/672b6a6408614f0b5bd0f5e6b40595c25e47da82/images/download-button.png
--------------------------------------------------------------------------------
/images/github-button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietromenna/jekyll-architect-theme/672b6a6408614f0b5bd0f5e6b40595c25e47da82/images/github-button.png
--------------------------------------------------------------------------------
/images/header-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietromenna/jekyll-architect-theme/672b6a6408614f0b5bd0f5e6b40595c25e47da82/images/header-bg.jpg
--------------------------------------------------------------------------------
/images/highlight-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietromenna/jekyll-architect-theme/672b6a6408614f0b5bd0f5e6b40595c25e47da82/images/highlight-bg.jpg
--------------------------------------------------------------------------------
/images/sidebar-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietromenna/jekyll-architect-theme/672b6a6408614f0b5bd0f5e6b40595c25e47da82/images/sidebar-bg.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Architect Theme by Jason Long
4 | ---
5 |
6 |
7 |
Blog Posts
8 |
9 | {% for post in site.posts %}
10 | {{ post.date | date_to_string }} » {{ post.title }}
11 | {% endfor %}
12 |
13 |
--------------------------------------------------------------------------------
/jekyll-architect-theme.gemspec:
--------------------------------------------------------------------------------
1 | # coding: utf-8
2 |
3 | Gem::Specification.new do |spec|
4 | spec.name = "jekyll-architect-theme"
5 | spec.version = "0.1.0"
6 | spec.authors = ["Pietro F. Menna"]
7 | spec.email = ["pietromenna@yahoo.com"]
8 |
9 | spec.summary = %q{Open Source version of the GitHub Pages theme, now for Jekyll}
10 | spec.homepage = "https://github.com/pietromenna/jekyll-architect-theme"
11 | spec.license = "MIT"
12 |
13 | spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(_layouts|_includes|_sass|LICENSE|README)/i}) }
14 |
15 | spec.add_development_dependency "jekyll", "~> 3.2"
16 | spec.add_development_dependency "bundler", ">= 2.2.10"
17 | spec.add_development_dependency "rake", ">= 12.3.3"
18 | end
19 |
--------------------------------------------------------------------------------
/stylesheets/print.css:
--------------------------------------------------------------------------------
1 | html, body, div, span, applet, object, iframe,
2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 | a, abbr, acronym, address, big, cite, code,
4 | del, dfn, em, img, ins, kbd, q, s, samp,
5 | small, strike, strong, sub, sup, tt, var,
6 | b, u, i, center,
7 | dl, dt, dd, ol, ul, li,
8 | fieldset, form, label, legend,
9 | table, caption, tbody, tfoot, thead, tr, th, td,
10 | article, aside, canvas, details, embed,
11 | figure, figcaption, footer, header, hgroup,
12 | menu, nav, output, ruby, section, summary,
13 | time, mark, audio, video {
14 | padding: 0;
15 | margin: 0;
16 | font: inherit;
17 | font-size: 100%;
18 | vertical-align: baseline;
19 | border: 0;
20 | }
21 | /* HTML5 display-role reset for older browsers */
22 | article, aside, details, figcaption, figure,
23 | footer, header, hgroup, menu, nav, section {
24 | display: block;
25 | }
26 | body {
27 | line-height: 1;
28 | }
29 | ol, ul {
30 | list-style: none;
31 | }
32 | blockquote, q {
33 | quotes: none;
34 | }
35 | blockquote:before, blockquote:after,
36 | q:before, q:after {
37 | content: '';
38 | content: none;
39 | }
40 | table {
41 | border-spacing: 0;
42 | border-collapse: collapse;
43 | }
44 | body {
45 | font-family: 'Helvetica Neue', Helvetica, Arial, serif;
46 | font-size: 13px;
47 | line-height: 1.5;
48 | color: #000;
49 | }
50 |
51 | a {
52 | font-weight: bold;
53 | color: #d5000d;
54 | }
55 |
56 | header {
57 | padding-top: 35px;
58 | padding-bottom: 10px;
59 | }
60 |
61 | header h1 {
62 | font-size: 48px;
63 | font-weight: bold;
64 | line-height: 1.2;
65 | color: #303030;
66 | letter-spacing: -1px;
67 | }
68 |
69 | header h2 {
70 | font-size: 24px;
71 | font-weight: normal;
72 | line-height: 1.3;
73 | color: #aaa;
74 | letter-spacing: -1px;
75 | }
76 | #downloads {
77 | display: none;
78 | }
79 | #main_content {
80 | padding-top: 20px;
81 | }
82 |
83 | code, pre {
84 | margin-bottom: 30px;
85 | font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
86 | font-size: 12px;
87 | color: #222;
88 | }
89 |
90 | code {
91 | padding: 0 3px;
92 | }
93 |
94 | pre {
95 | padding: 20px;
96 | overflow: auto;
97 | border: solid 1px #ddd;
98 | }
99 | pre code {
100 | padding: 0;
101 | }
102 |
103 | ul, ol, dl {
104 | margin-bottom: 20px;
105 | }
106 |
107 |
108 | /* COMMON STYLES */
109 |
110 | table {
111 | width: 100%;
112 | border: 1px solid #ebebeb;
113 | }
114 |
115 | th {
116 | font-weight: 500;
117 | }
118 |
119 | td {
120 | font-weight: 300;
121 | }
122 |
123 | form {
124 | padding: 20px;
125 | background: #f2f2f2;
126 |
127 | }
128 |
129 |
130 | /* GENERAL ELEMENT TYPE STYLES */
131 |
132 | h1 {
133 | font-size: 2.8em;
134 | }
135 |
136 | h2 {
137 | margin-bottom: 8px;
138 | font-size: 22px;
139 | font-weight: bold;
140 | color: #303030;
141 | }
142 |
143 | h3 {
144 | margin-bottom: 8px;
145 | font-size: 18px;
146 | font-weight: bold;
147 | color: #d5000d;
148 | }
149 |
150 | h4 {
151 | font-size: 16px;
152 | font-weight: bold;
153 | color: #303030;
154 | }
155 |
156 | h5 {
157 | font-size: 1em;
158 | color: #303030;
159 | }
160 |
161 | h6 {
162 | font-size: .8em;
163 | color: #303030;
164 | }
165 |
166 | p {
167 | margin-bottom: 20px;
168 | font-weight: 300;
169 | }
170 |
171 | a {
172 | text-decoration: none;
173 | }
174 |
175 | p a {
176 | font-weight: 400;
177 | }
178 |
179 | blockquote {
180 | padding: 0 0 0 30px;
181 | margin-bottom: 20px;
182 | font-size: 1.6em;
183 | border-left: 10px solid #e9e9e9;
184 | }
185 |
186 | ul li {
187 | padding-left: 20px;
188 | list-style-position: inside;
189 | list-style: disc;
190 | }
191 |
192 | ol li {
193 | padding-left: 3px;
194 | list-style-position: inside;
195 | list-style: decimal;
196 | }
197 |
198 | dl dd {
199 | font-style: italic;
200 | font-weight: 100;
201 | }
202 |
203 | footer {
204 | padding-top: 20px;
205 | padding-bottom: 30px;
206 | margin-top: 40px;
207 | font-size: 13px;
208 | color: #aaa;
209 | }
210 |
211 | footer a {
212 | color: #666;
213 | }
214 |
215 | /* MISC */
216 | .clearfix:after {
217 | display: block;
218 | height: 0;
219 | clear: both;
220 | visibility: hidden;
221 | content: '.';
222 | }
223 |
224 | .clearfix {display: inline-block;}
225 | * html .clearfix {height: 1%;}
226 | .clearfix {display: block;}
227 |
--------------------------------------------------------------------------------
/stylesheets/pygment_trac.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: #800080; font-weight: bold; } /* 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 .kn { font-weight: bold } /* Keyword.Namespace */
25 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */
26 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */
27 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
28 | .highlight .m { color: #009999 } /* Literal.Number */
29 | .highlight .s { color: #d14 } /* Literal.String */
30 | .highlight .na { color: #008080 } /* Name.Attribute */
31 | .highlight .nb { color: #0086B3 } /* Name.Builtin */
32 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
33 | .highlight .no { color: #008080 } /* Name.Constant */
34 | .highlight .ni { color: #800080 } /* Name.Entity */
35 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
36 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
37 | .highlight .nn { color: #555555 } /* Name.Namespace */
38 | .highlight .nt { color: #000080 } /* Name.Tag */
39 | .highlight .nv { color: #008080 } /* Name.Variable */
40 | .highlight .ow { font-weight: bold } /* Operator.Word */
41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */
42 | .highlight .mf { color: #009999 } /* Literal.Number.Float */
43 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */
44 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */
45 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */
46 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */
47 | .highlight .sc { color: #d14 } /* Literal.String.Char */
48 | .highlight .sd { color: #d14 } /* Literal.String.Doc */
49 | .highlight .s2 { color: #d14 } /* Literal.String.Double */
50 | .highlight .se { color: #d14 } /* Literal.String.Escape */
51 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */
52 | .highlight .si { color: #d14 } /* Literal.String.Interpol */
53 | .highlight .sx { color: #d14 } /* Literal.String.Other */
54 | .highlight .sr { color: #009926 } /* Literal.String.Regex */
55 | .highlight .s1 { color: #d14 } /* Literal.String.Single */
56 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */
57 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
58 | .highlight .vc { color: #008080 } /* Name.Variable.Class */
59 | .highlight .vg { color: #008080 } /* Name.Variable.Global */
60 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */
61 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
62 |
63 | .type-csharp .highlight .k { color: #0000FF }
64 | .type-csharp .highlight .kt { color: #0000FF }
65 | .type-csharp .highlight .nf { color: #000000; font-weight: normal }
66 | .type-csharp .highlight .nc { color: #2B91AF }
67 | .type-csharp .highlight .nn { color: #000000 }
68 | .type-csharp .highlight .s { color: #A31515 }
69 | .type-csharp .highlight .sc { color: #A31515 }
70 |
--------------------------------------------------------------------------------
/stylesheets/stylesheet.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -webkit-text-size-adjust: 100%; /* 2 */
12 | -ms-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability when focused and also mouse hovered in all browsers.
95 | */
96 |
97 | a:active,
98 | a:hover {
99 | outline: 0;
100 | }
101 |
102 | /* Text-level semantics
103 | ========================================================================== */
104 |
105 | /**
106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 | */
108 |
109 | abbr[title] {
110 | border-bottom: 1px dotted;
111 | }
112 |
113 | /**
114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 | */
116 |
117 | b,
118 | strong {
119 | font-weight: bold;
120 | }
121 |
122 | /**
123 | * Address styling not present in Safari and Chrome.
124 | */
125 |
126 | dfn {
127 | font-style: italic;
128 | }
129 |
130 | /**
131 | * Address variable `h1` font-size and margin within `section` and `article`
132 | * contexts in Firefox 4+, Safari, and Chrome.
133 | */
134 |
135 | h1 {
136 | margin: 0.67em 0;
137 | font-size: 2em;
138 | }
139 |
140 | /**
141 | * Address styling not present in IE 8/9.
142 | */
143 |
144 | mark {
145 | color: #000;
146 | background: #ff0;
147 | }
148 |
149 | /**
150 | * Address inconsistent and variable font size in all browsers.
151 | */
152 |
153 | small {
154 | font-size: 80%;
155 | }
156 |
157 | /**
158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 | */
160 |
161 | sub,
162 | sup {
163 | position: relative;
164 | font-size: 75%;
165 | line-height: 0;
166 | vertical-align: baseline;
167 | }
168 |
169 | sup {
170 | top: -0.5em;
171 | }
172 |
173 | sub {
174 | bottom: -0.25em;
175 | }
176 |
177 | /* Embedded content
178 | ========================================================================== */
179 |
180 | /**
181 | * Remove border when inside `a` element in IE 8/9/10.
182 | */
183 |
184 | img {
185 | border: 0;
186 | }
187 |
188 | /**
189 | * Correct overflow not hidden in IE 9/10/11.
190 | */
191 |
192 | svg:not(:root) {
193 | overflow: hidden;
194 | }
195 |
196 | /* Grouping content
197 | ========================================================================== */
198 |
199 | /**
200 | * Address margin not present in IE 8/9 and Safari.
201 | */
202 |
203 | figure {
204 | margin: 1em 40px;
205 | }
206 |
207 | /**
208 | * Address differences between Firefox and other browsers.
209 | */
210 |
211 | hr {
212 | height: 0;
213 | -moz-box-sizing: content-box;
214 | box-sizing: content-box;
215 | }
216 |
217 | /**
218 | * Contain overflow in all browsers.
219 | */
220 |
221 | pre {
222 | overflow: auto;
223 | }
224 |
225 | /**
226 | * Address odd `em`-unit font size rendering in all browsers.
227 | */
228 |
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 | font-family: monospace, monospace;
234 | font-size: 1em;
235 | }
236 |
237 | /* Forms
238 | ========================================================================== */
239 |
240 | /**
241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 | * styling of `select`, unless a `border` property is set.
243 | */
244 |
245 | /**
246 | * 1. Correct color not being inherited.
247 | * Known issue: affects color of disabled elements.
248 | * 2. Correct font properties not being inherited.
249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 | */
251 |
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 | margin: 0; /* 3 */
258 | font: inherit; /* 2 */
259 | color: inherit; /* 1 */
260 | }
261 |
262 | /**
263 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 | */
265 |
266 | button {
267 | overflow: visible;
268 | }
269 |
270 | /**
271 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 | * All other form control elements do not inherit `text-transform` values.
273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 | * Correct `select` style inheritance in Firefox.
275 | */
276 |
277 | button,
278 | select {
279 | text-transform: none;
280 | }
281 |
282 | /**
283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 | * and `video` controls.
285 | * 2. Correct inability to style clickable `input` types in iOS.
286 | * 3. Improve usability and consistency of cursor style between image-type
287 | * `input` and others.
288 | */
289 |
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 | -webkit-appearance: button; /* 2 */
295 | cursor: pointer; /* 3 */
296 | }
297 |
298 | /**
299 | * Re-set default cursor for disabled elements.
300 | */
301 |
302 | button[disabled],
303 | html input[disabled] {
304 | cursor: default;
305 | }
306 |
307 | /**
308 | * Remove inner padding and border in Firefox 4+.
309 | */
310 |
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 | padding: 0;
314 | border: 0;
315 | }
316 |
317 | /**
318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 | * the UA stylesheet.
320 | */
321 |
322 | input {
323 | line-height: normal;
324 | }
325 |
326 | /**
327 | * It's recommended that you don't attempt to style these elements.
328 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 | *
330 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 | * 2. Remove excess padding in IE 8/9/10.
332 | */
333 |
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 | box-sizing: border-box; /* 1 */
337 | padding: 0; /* 2 */
338 | }
339 |
340 | /**
341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 | * `font-size` values of the `input`, it causes the cursor style of the
343 | * decrement button to change from `default` to `text`.
344 | */
345 |
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 | height: auto;
349 | }
350 |
351 | /**
352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 | * (include `-moz` to future-proof).
355 | */
356 |
357 | input[type="search"] {
358 | -webkit-box-sizing: content-box; /* 2 */
359 | -moz-box-sizing: content-box;
360 | box-sizing: content-box;
361 | -webkit-appearance: textfield; /* 1 */
362 | }
363 |
364 | /**
365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 | * Safari (but not Chrome) clips the cancel button when the search input has
367 | * padding (and `textfield` appearance).
368 | */
369 |
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 | -webkit-appearance: none;
373 | }
374 |
375 | /**
376 | * Define consistent border, margin, and padding.
377 | */
378 |
379 | fieldset {
380 | padding: 0.35em 0.625em 0.75em;
381 | margin: 0 2px;
382 | border: 1px solid #c0c0c0;
383 | }
384 |
385 | /**
386 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 | */
389 |
390 | legend {
391 | padding: 0; /* 2 */
392 | border: 0; /* 1 */
393 | }
394 |
395 | /**
396 | * Remove default vertical scrollbar in IE 8/9/10/11.
397 | */
398 |
399 | textarea {
400 | overflow: auto;
401 | }
402 |
403 | /**
404 | * Don't inherit the `font-weight` (applied by a rule above).
405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 | */
407 |
408 | optgroup {
409 | font-weight: bold;
410 | }
411 |
412 | /* Tables
413 | ========================================================================== */
414 |
415 | /**
416 | * Remove most spacing between table cells.
417 | */
418 |
419 | table {
420 | border-spacing: 0;
421 | border-collapse: collapse;
422 | }
423 |
424 | td,
425 | th {
426 | padding: 0;
427 | }
428 |
429 | /* LAYOUT STYLES */
430 | body {
431 | font-family: 'Helvetica Neue', Helvetica, Arial, serif;
432 | font-size: 15px;
433 | font-weight: 400;
434 | line-height: 1.5;
435 | color: #666;
436 | background: #fafafa url(../images/body-bg.jpg) 0 0 repeat;
437 | }
438 |
439 | p {
440 | margin-top: 0;
441 | }
442 |
443 | a {
444 | color: #2879d0;
445 | }
446 | a:hover {
447 | color: #2268b2;
448 | }
449 |
450 | header {
451 | padding-top: 40px;
452 | padding-bottom: 40px;
453 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
454 | background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x;
455 | border-bottom: solid 1px #275da1;
456 | }
457 |
458 | header h1 {
459 | width: 540px;
460 | margin-top: 0;
461 | margin-bottom: 0.2em;
462 | font-size: 72px;
463 | font-weight: normal;
464 | line-height: 1;
465 | color: #fff;
466 | letter-spacing: -1px;
467 | }
468 |
469 | header h2 {
470 | width: 540px;
471 | margin-top: 0;
472 | margin-bottom: 0;
473 | font-size: 26px;
474 | font-weight: normal;
475 | line-height: 1.3;
476 | color: #9ddcff;
477 | letter-spacing: 0;
478 | }
479 |
480 | .inner {
481 | position: relative;
482 | width: 940px;
483 | margin: 0 auto;
484 | }
485 |
486 | #content-wrapper {
487 | padding-top: 30px;
488 | border-top: solid 1px #fff;
489 | }
490 |
491 | #main-content {
492 | float: left;
493 | width: 690px;
494 | }
495 |
496 | #main-content img {
497 | max-width: 100%;
498 | }
499 |
500 | aside#sidebar {
501 | float: right;
502 | width: 200px;
503 | min-height: 504px;
504 | padding-left: 20px;
505 | font-size: 12px;
506 | line-height: 1.3;
507 | background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat;
508 | }
509 |
510 | aside#sidebar p.repo-owner,
511 | aside#sidebar p.repo-owner a {
512 | font-weight: bold;
513 | }
514 |
515 | #downloads {
516 | margin-bottom: 40px;
517 | }
518 |
519 | a.button {
520 | width: 134px;
521 | height: 58px;
522 | padding-top: 22px;
523 | padding-left: 68px;
524 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
525 | font-size: 23px;
526 | line-height: 1.2;
527 | color: #fff;
528 | }
529 | a.button small {
530 | display: block;
531 | font-size: 11px;
532 | }
533 | header a.button {
534 | position: absolute;
535 | top: 0;
536 | right: 0;
537 | background: transparent url(../images/github-button.png) 0 0 no-repeat;
538 | }
539 | aside a.button {
540 | display: block;
541 | width: 138px;
542 | padding-left: 64px;
543 | margin-bottom: 20px;
544 | font-size: 21px;
545 | background: transparent url(../images/download-button.png) 0 0 no-repeat;
546 | }
547 |
548 | code, pre {
549 | margin-bottom: 30px;
550 | font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
551 | font-size: 13px;
552 | color: #222;
553 | }
554 |
555 | code {
556 | padding: 0 3px;
557 | background-color: #f2f8fc;
558 | border: solid 1px #dbe7f3;
559 | }
560 |
561 | pre {
562 | padding: 20px;
563 | overflow: auto;
564 | text-shadow: none;
565 | background: #fff;
566 | border: solid 1px #f2f2f2;
567 | }
568 | pre code {
569 | padding: 0;
570 | color: #2879d0;
571 | background-color: #fff;
572 | border: none;
573 | }
574 |
575 | ul, ol, dl {
576 | margin-bottom: 20px;
577 | }
578 |
579 |
580 | /* COMMON STYLES */
581 |
582 | hr {
583 | height: 0;
584 | margin-top: 1em;
585 | margin-bottom: 1em;
586 | border: 0;
587 | border-top: solid 1px #ddd;
588 | }
589 |
590 | table {
591 | width: 100%;
592 | border: 1px solid #ebebeb;
593 | }
594 |
595 | th {
596 | font-weight: 500;
597 | }
598 |
599 | td {
600 | font-weight: 300;
601 | text-align: center;
602 | border: 1px solid #ebebeb;
603 | }
604 |
605 | form {
606 | padding: 20px;
607 | background: #f2f2f2;
608 |
609 | }
610 |
611 |
612 | /* GENERAL ELEMENT TYPE STYLES */
613 |
614 | #main-content h1 {
615 | margin-top: 0;
616 | margin-bottom: 0;
617 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
618 | font-size: 2.8em;
619 | font-weight: normal;
620 | color: #474747;
621 | text-indent: 6px;
622 | letter-spacing: -1px;
623 | }
624 |
625 | #main-content h1:before {
626 | padding-right: 0.3em;
627 | margin-left: -0.9em;
628 | color: #9ddcff;
629 | content: "/";
630 | }
631 |
632 | #main-content h2 {
633 | margin-bottom: 8px;
634 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
635 | font-size: 22px;
636 | font-weight: bold;
637 | color: #474747;
638 | text-indent: 4px;
639 | }
640 | #main-content h2:before {
641 | padding-right: 0.3em;
642 | margin-left: -1.5em;
643 | content: "//";
644 | color: #9ddcff;
645 | }
646 |
647 | #main-content h3 {
648 | margin-top: 24px;
649 | margin-bottom: 8px;
650 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
651 | font-size: 18px;
652 | font-weight: bold;
653 | color: #474747;
654 | text-indent: 3px;
655 | }
656 |
657 | #main-content h3:before {
658 | padding-right: 0.3em;
659 | margin-left: -2em;
660 | content: "///";
661 | color: #9ddcff;
662 | }
663 |
664 | #main-content h4 {
665 | margin-bottom: 8px;
666 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
667 | font-size: 15px;
668 | font-weight: bold;
669 | color: #474747;
670 | text-indent: 3px;
671 | }
672 |
673 | h4:before {
674 | padding-right: 0.3em;
675 | margin-left: -2.8em;
676 | content: "////";
677 | color: #9ddcff;
678 | }
679 |
680 | #main-content h5 {
681 | margin-bottom: 8px;
682 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
683 | font-size: 14px;
684 | color: #474747;
685 | text-indent: 3px;
686 | }
687 | h5:before {
688 | padding-right: 0.3em;
689 | margin-left: -3.2em;
690 | content: "/////";
691 | color: #9ddcff;
692 | }
693 |
694 | #main-content h6 {
695 | margin-bottom: 8px;
696 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
697 | font-size: .8em;
698 | color: #474747;
699 | text-indent: 3px;
700 | }
701 | h6:before {
702 | padding-right: 0.3em;
703 | margin-left: -3.7em;
704 | content: "//////";
705 | color: #9ddcff;
706 | }
707 |
708 | p {
709 | margin-bottom: 20px;
710 | }
711 |
712 | a {
713 | text-decoration: none;
714 | }
715 |
716 | p a {
717 | font-weight: 400;
718 | }
719 |
720 | blockquote {
721 | padding: 0 0 0 30px;
722 | margin-bottom: 20px;
723 | font-size: 1.6em;
724 | border-left: 10px solid #e9e9e9;
725 | }
726 |
727 | ul {
728 | list-style-position: inside;
729 | list-style: disc;
730 | padding-left: 20px;
731 | }
732 |
733 | ol {
734 | list-style-position: inside;
735 | list-style: decimal;
736 | padding-left: 3px;
737 | }
738 |
739 | dl dd {
740 | font-style: italic;
741 | font-weight: 100;
742 | }
743 |
744 | /* MISC */
745 | .clearfix:after {
746 | display: block;
747 | height: 0;
748 | clear: both;
749 | visibility: hidden;
750 | content: '.';
751 | }
752 |
753 | .clearfix {display: inline-block;}
754 | * html .clearfix {height: 1%;}
755 | .clearfix {display: block;}
756 |
757 | /* #Media Queries
758 | ================================================== */
759 |
760 | /* Smaller than standard 960 (devices and browsers) */
761 | @media only screen and (max-width: 959px) { }
762 |
763 | /* Tablet Portrait size to standard 960 (devices and browsers) */
764 | @media only screen and (min-width: 768px) and (max-width: 959px) {
765 | .inner {
766 | width: 740px;
767 | }
768 | header h1, header h2 {
769 | width: 340px;
770 | }
771 | header h1 {
772 | font-size: 60px;
773 | }
774 | header h2 {
775 | font-size: 30px;
776 | }
777 | #main-content {
778 | width: 490px;
779 | }
780 | #main-content h1:before,
781 | #main-content h2:before,
782 | #main-content h3:before,
783 | #main-content h4:before,
784 | #main-content h5:before,
785 | #main-content h6:before {
786 | padding-right: 0;
787 | margin-left: 0;
788 | content: none;
789 | }
790 | }
791 |
792 | /* All Mobile Sizes (devices and browser) */
793 | @media only screen and (max-width: 767px) {
794 | .inner {
795 | width: 93%;
796 | }
797 | header {
798 | padding: 20px 0;
799 | }
800 | header .inner {
801 | position: relative;
802 | }
803 | header h1, header h2 {
804 | width: 100%;
805 | }
806 | header h1 {
807 | font-size: 48px;
808 | }
809 | header h2 {
810 | font-size: 24px;
811 | }
812 | header a.button {
813 | position: relative;
814 | display: inline-block;
815 | width: auto;
816 | height: auto;
817 | padding: 5px 10px;
818 | margin-top: 15px;
819 | font-size: 13px;
820 | line-height: 1;
821 | color: #2879d0;
822 | text-align: center;
823 | background-color: #9ddcff;
824 | background-image: none;
825 | border-radius: 5px;
826 | -moz-border-radius: 5px;
827 | -webkit-border-radius: 5px;
828 | }
829 | header a.button small {
830 | display: inline;
831 | font-size: 13px;
832 | }
833 | #main-content,
834 | aside#sidebar {
835 | float: none;
836 | width: 100% ! important;
837 | }
838 | aside#sidebar {
839 | min-height: 0;
840 | padding: 20px 0;
841 | margin-top: 20px;
842 | background-image: none;
843 | border-top: solid 1px #ddd;
844 | }
845 | aside#sidebar a.button {
846 | display: none;
847 | }
848 | #main-content h1:before,
849 | #main-content h2:before,
850 | #main-content h3:before,
851 | #main-content h4:before,
852 | #main-content h5:before,
853 | #main-content h6:before {
854 | padding-right: 0;
855 | margin-left: 0;
856 | content: none;
857 | }
858 | }
859 |
860 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
861 | @media only screen and (min-width: 480px) and (max-width: 767px) { }
862 |
863 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
864 | @media only screen and (max-width: 479px) { }
865 |
--------------------------------------------------------------------------------