├── .gitignore
├── images
    ├── tn.png
    └── screenshot.png
├── archetypes
    └── default.md
├── layouts
    ├── shortcodes
    │   └── gist.html
    ├── partials
    │   ├── author.html
    │   ├── tail.html
    │   ├── footer.html
    │   ├── head.html
    │   └── header.html
    ├── _default
    │   ├── summary.html
    │   ├── list.html
    │   ├── terms.html
    │   └── single.html
    └── index.html
├── theme.toml
├── LICENSE
├── README.md
└── static
    ├── css
        ├── liquorice.min.css
        └── liquorice.css
    └── libraries
        └── normalize.3.0.1.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/images/tn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eliasson/liquorice/HEAD/images/tn.png


--------------------------------------------------------------------------------
/archetypes/default.md:
--------------------------------------------------------------------------------
1 | +++
2 | Description = ""
3 | Tags = []
4 | Categories = []
5 | +++
6 | 


--------------------------------------------------------------------------------
/images/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eliasson/liquorice/HEAD/images/screenshot.png


--------------------------------------------------------------------------------
/layouts/shortcodes/gist.html:
--------------------------------------------------------------------------------
1 | <script src="https://gist.github.com/{{ index .Params 0 }}.js"></script>
2 | 


--------------------------------------------------------------------------------
/layouts/partials/author.html:
--------------------------------------------------------------------------------
1 | <div class="row li-author">
2 |     <div class="sixteen columns">
3 |         Written by <strong>{{ .Site.Params.author }}</strong>
4 |     </div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/theme.toml:
--------------------------------------------------------------------------------
1 | author = "Markus Eliasson"
2 | description = "Liquorice is a small black and white theme for Hugo."
3 | license = "MIT"
4 | licenselink = "https://github.com/eliasson/liquorice/blob/master/LICENSE"
5 | name = "liquorice"
6 | source_repo = "https://github.com/eliasson/liquorice"
7 | tags = ["", ""]
8 | min_version=0.20
9 | 


--------------------------------------------------------------------------------
/layouts/partials/tail.html:
--------------------------------------------------------------------------------
 1 |     <script type="text/javascript">
 2 |     <!--
 3 |     function toggle(id) {
 4 |         var e = document.getElementById(id);
 5 |         e.style.display == 'block' ? e.style.display = 'none' : e.style.display = 'block';
 6 |     }
 7 |     //-->
 8 |     </script>
 9 |     {{ template "_internal/google_analytics.html" . }}
10 |     </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/layouts/_default/summary.html:
--------------------------------------------------------------------------------
 1 | <article>
 2 |     <header>
 3 |         <h2><a href="{{ .Permalink }}">{{ .Title }} {{ if .Draft }} (draft) {{end}}</a></h2>
 4 |         <time class="li-article-date">{{ .Date.Format "Monday, January 2, 2006" }}</time>
 5 |     </header>
 6 |     <section class="li-article-section">
 7 |         {{ .Summary }}
 8 |     </section>
 9 |     <footer>
10 |         <a href='{{ .Permalink }}'>More</a>
11 |     </footer>
12 | </article>
13 | 


--------------------------------------------------------------------------------
/layouts/index.html:
--------------------------------------------------------------------------------
 1 | {{ partial "head.html" . }}
 2 | {{ partial "header.html" . }}
 3 | 
 4 |     <div class="container">
 5 |         <div class="row">
 6 |             <div class="sixteen columns">
 7 |                 <div class="li-main-article-list">
 8 |                     {{ range first 10 .Site.RegularPages }}
 9 |                         <div class="li-article">
10 |                             {{ .Render "summary"}}
11 |                         </div>
12 |                     {{ end }}
13 |                 </div>
14 |             </div>
15 |         </div>
16 |     </div>
17 | 
18 | {{ partial "footer.html" . }}
19 | {{ partial "tail.html" . }}
20 | 


--------------------------------------------------------------------------------
/layouts/partials/footer.html:
--------------------------------------------------------------------------------
 1 | <footer class="li-page-footer">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="sixteen columns">
 5 |                 <div class="li-page-footer-legal">
 6 |                     {{ with .Site.Params.copyright }}{{.}}{{ else }}&copy; {{ now.Format "2006"}}. All rights reserved. {{end}}
 7 |                 </div>
 8 |                 <div class="li-page-footer-theme">
 9 |                     <span class=""><a href="https://github.com/eliasson/liquorice/">liquorice</a> is a theme for <a href="https://gohugo.io">hugo</a></span>
10 |                 </div>
11 |             </div>
12 |         </div>
13 |     </div>
14 | </footer>
15 | 


--------------------------------------------------------------------------------
/layouts/_default/list.html:
--------------------------------------------------------------------------------
 1 | {{ partial "head.html" . }}
 2 | {{ partial "header.html" . }}
 3 | 
 4 |     <div class="container">
 5 |         <div class="row">
 6 |             <div class="sixteen columns">
 7 |                 <h1>{{.Title}}</h1>
 8 |                 <ul class="li-article-list">
 9 |                     {{ range .Site.RegularPages }}
10 |                         <li>
11 |                             <time class="li-article-date">{{ .Date.Format "January, 2, 2006" }}</time>
12 |                             <h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
13 |                         </li>
14 |                     {{ end }}
15 |                 </ul>
16 |             </div>
17 |         </div>
18 |     </div>
19 | 
20 | {{ partial "footer.html" . }}
21 | {{ partial "tail.html" . }}
22 | 


--------------------------------------------------------------------------------
/layouts/_default/terms.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | {{ partial "head.html" . }}
 4 | {{ partial "header.html" . }}
 5 | 
 6 |     <div class="container">
 7 |         <div class="row">
 8 |             <div class="sixteen columns">
 9 |                 <h1>{{.Title}}</h1>
10 |                 <ul>
11 |                     {{ $data := .Data }}
12 |                     {{ $baseurl := .Site.BaseURL }}
13 |                     {{ range $key, $value := .Data.Terms }}
14 |                         <li>
15 |                             <h4><a href="{{ $baseurl }}/{{ $data.Plural }}/{{ $key | urlize }}">{{ $key }}</a></h4>
16 |                         </li>
17 |                     {{ end }}
18 |                 </ul>
19 |             </div>
20 |         </div>
21 |     </div>
22 | 
23 | {{ partial "footer.html" . }}
24 | {{ partial "tail.html" . }}
25 | 


--------------------------------------------------------------------------------
/layouts/partials/head.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
 3 |     <head>
 4 | 
 5 |         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
 7 | 
 8 |         <title>{{ .Title }} &middot; {{ .Site.Title }}</title>
 9 |         <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' type='text/css'>
10 |         <link rel="stylesheet" href="{{ .Site.BaseURL }}/libraries/normalize.3.0.1.css" />
11 |         <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/liquorice.css" />
12 |         <link rel="shortcut icon" href="/favicon.ico" />
13 |         <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144-precomposed.png" sizes="144x144" />
14 |         {{ range .AlternativeOutputFormats -}}
15 |             {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
16 |         {{ end -}}
17 |     </head>
18 |     <body class="li-body">
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Markus Eliasson
 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 | 


--------------------------------------------------------------------------------
/layouts/partials/header.html:
--------------------------------------------------------------------------------
 1 | <header class="li-page-header">
 2 |     <div class="container">
 3 |         <div class="row">
 4 |             <div class="sixteen columns">
 5 |                 <div class="li-brand li-left">
 6 |                 <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></div>
 7 |                 <div class="li-menu li-right">
 8 |                     <span class="li-menu-icon" onclick="javascript:toggle('menu');">&#9776;</span>
 9 |                     <ul id="menu2" class="li-menu-items">
10 |                         {{ range .Site.Menus.main }}
11 |                             <li><a href="{{.URL}}"> {{ .Name }} </a></li>
12 |                         {{end}}
13 |                     </ul>
14 |                 </div>
15 |             </div>
16 |         </div>
17 |         <div class="row">
18 |             <div class="sixteen columns">
19 |                 <ul id="menu" class="li-menu-items li-menu-mobile">
20 |                     {{ range .Site.Menus.main }}
21 |                         <li><a href="{{.URL}}"> {{ .Name }} </a></li>
22 |                     {{end}}
23 |                 </ul>
24 |             </div>
25 |         </div>
26 |     </div>
27 | </header>
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # liquorice
 2 | 
 3 | Liquorice is a small black and white theme for [Hugo](https://github.com/spf13/hugo) (a fast and modern static website engine).
 4 | 
 5 | 
 6 | ### Dependencies
 7 | 
 8 | Liquorice needs at least version 0.20 of Hugo.
 9 | 
10 | 
11 | ### Partials
12 | 
13 | There are a few partials that is of great interest to override
14 | 
15 | 
16 | #### author
17 | 
18 | The author partial is added at the end of each single page (such as blog posts) and by default only prints the name of the author registered in the site params, e.g. in your `config.toml`
19 | 
20 |     [params]
21 |         author = "Markus"
22 | 
23 | In order to override and have your own markup appended to single pages, just create the file `layouts/partials/author.html` and roll your own.
24 | 
25 | 
26 | ### Shortcodes
27 | 
28 | Liquorice comes with these additional shortcodes:
29 | 
30 | 
31 | #### gist
32 | 
33 | Include a Github gist using their JavaScript include.
34 | 
35 |     {{% gist e572b28c9a0eef0b2763 %}}
36 | 
37 | Where the first parameter is the gist id.
38 | 
39 | 
40 | ### Building
41 | 
42 | There is not much to build, but the theme CSS is minified using the node tool [clean-css](https://github.com/GoalSmashers/clean-css).
43 | 
44 |     cleancss -o static/css/liquorice.min.css static/css/liquorice.css
45 | 
46 | *Any change in styles needs to result in a minification!*
47 | 
48 | 
49 | # License
50 | 
51 | Liquorice is released under the MIT license, see LICENSE for details.
52 | 


--------------------------------------------------------------------------------
/layouts/_default/single.html:
--------------------------------------------------------------------------------
 1 | {{ partial "head.html" . }}
 2 | {{ partial "header.html" . }}
 3 | 
 4 | {{ $baseurl := .Site.BaseURL }}
 5 | {{ $categories := .Params.categories }}
 6 | {{ $tags := .Params.tags }}
 7 | 
 8 |     <div class="container">
 9 |         <div class="row">
10 |             <div class="sixteen columns">
11 |                 <article class="li-article">
12 |                     <header class="li-article-header">
13 |                         <h1 class="li-article-title">{{ .Title }}</h1>
14 |                         <span class="li-article-taxonomies">
15 |                             {{ with $categories }}
16 |                                 Posted in
17 |                                 {{ range $categories }}
18 |                                     <a href="{{ $baseurl }}/categories/{{ . | urlize }}">{{ . }}</a>
19 |                                 {{ end }}
20 |                             {{ end }}
21 | 
22 |                             {{ with $tags }}
23 |                                 with tags
24 |                                 {{ range $tags }}
25 |                                     <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a>
26 |                                 {{ end }}
27 |                             {{ end }}
28 |                         </span>
29 |                         {{ if or $categories $tags }} - {{ end }}
30 |                         <time class="li-article-date">{{ .Date.Format "Monday, January 2, 2006" }}</time>
31 |                     </header>
32 |                     <section>
33 |                         {{ .Content }}
34 |                     </section>
35 |                 </article>
36 |             </div>
37 |         </div>
38 | 
39 |         {{ partial "author.html" .}}
40 | 
41 |         <div class="row li-pagination">
42 |             <div class="eight columns">
43 |                 <div class="li-pagination-previous">
44 |                     {{with .Prev}}
45 |                         Older article<br />
46 |                         <a href="{{.Permalink}}"> {{.Title}}</a>
47 |                     {{else}}
48 |                         &nbsp;
49 |                     {{end}}
50 |                 </div>
51 |             </div>
52 |             <div class="eight columns">
53 |                 <div class="li-pagination-next">
54 |                     {{with .Next}}
55 |                         Later article<br />
56 |                         <a href="{{.Permalink}}"> {{.Title}}</a>
57 |                     {{else}}
58 |                         &nbsp;
59 |                     {{end}}
60 |                 </div>
61 |             </div>
62 |         </div>
63 |     </div>
64 | 
65 | {{ partial "footer.html" . }}
66 | {{ partial "tail.html" . }}
67 | 


--------------------------------------------------------------------------------
/static/css/liquorice.min.css:
--------------------------------------------------------------------------------
1 | .li-article-footer,.li-pagination{border-top:1px solid #ccc}.clear,.clearfix:after,.row:after{clear:both}.li-right{float:right}.li-left{float:left}body{font-family:"Open Sans","Helvetica Neue",Helvetica,sans-serif;color:#484644}a,a:active,a:hover,a:visited{color:#202020;text-decoration:none;font-weight:700}h1,h2,h3,h4,h5,h6{color:#202020;font-weight:lighter}pre{background-color:#fafafa;border:1px solid #ccc;border-radius:4px;padding:32px}pre code{display:inline-block}.li-page-header{background-color:#202020;color:#fff;padding:32px 0}.li-page-header ul{list-style:none;margin:0;line-height:30px}.li-page-header ul li{float:left;list-style:none;line-height:30px;margin-left:30px}.li-page-header ul li a,.li-page-header ul li a:active,.li-page-header ul li a:hover,.li-page-header ul li a:visited{color:#ccc;font-weight:400;text-decoration:none}.li-page-header ul li a:active,.li-page-header ul li a:hover{color:#fff}.li-page-header .li-brand a,.li-page-header .li-brand a:active,.li-page-header .li-brand a:hover,.li-page-header .li-brand a:visited{color:#fff;font-weight:700;font-size:1.5em;text-decoration:none}.li-page-header .li-menu-icon,.li-page-header .li-menu-mobile{display:none}.li-article{margin-bottom:32px}.li-article img{height:auto;max-width:100%}ul.li-article-list{list-style:none;margin:0;padding:0}.li-article-list time{float:right}.li-article-section{padding:16px 0}.li-article-date,.li-article-taxonomies{color:#999;font-size:smaller}.li-pagination{margin-top:32px;padding-top:16px}.li-pagination-previous{float:left}.li-pagination-next{float:right}.li-page-footer{font-size:smaller;padding:48px 0 32px}.li-page-footer-legal{float:left}.li-page-footer-theme{float:right}.li-main-article-list{margin-top:128px}@media only screen and (max-width:767px){.li-page-header{padding:16px 0}.li-main-article-list{margin-top:64px}.li-page-header .li-menu-icon{cursor:pointer;display:block;float:right;line-height:30px}.li-page-header .li-menu-items{clear:both;display:none}.li-page-header ul.li-menu-items{list-style-type:none;margin:0;padding:0}.li-page-header .li-menu-items li{margin-left:0;padding:12px 0;text-align:center;width:100%;border-top:1px solid #ccc}.li-page-header .li-menu-items li:first-of-type{border-top:none}.li-page-footer-legal,.li-page-footer-theme,.li-pagination-next,.li-pagination-previous{float:none;text-align:center;padding:8px 0}}.container{position:relative;width:960px;margin:0 auto;padding:0}.container .column,.container .columns{float:left;display:inline;margin-left:10px;margin-right:10px}.column.alpha,.columns.alpha{margin-left:0}.column.omega,.columns.omega{margin-right:0}.container .one.column,.container .one.columns{width:40px}.container .two.columns{width:100px}.container .three.columns{width:160px}.container .four.columns{width:220px}.container .five.columns{width:280px}.container .six.columns{width:340px}.container .seven.columns{width:400px}.container .eight.columns{width:460px}.container .nine.columns{width:520px}.container .ten.columns{width:580px}.container .eleven.columns{width:640px}.container .twelve.columns{width:700px}.container .thirteen.columns{width:760px}.container .fourteen.columns{width:820px}.container .fifteen.columns{width:880px}.container .sixteen.columns{width:940px}.container .one-third.column{width:300px}.container .two-thirds.column{width:620px}.container .offset-by-one{padding-left:60px}.container .offset-by-two{padding-left:120px}.container .offset-by-three{padding-left:180px}.container .offset-by-four{padding-left:240px}.container .offset-by-five{padding-left:300px}.container .offset-by-six{padding-left:360px}.container .offset-by-seven{padding-left:420px}.container .offset-by-eight{padding-left:480px}.container .offset-by-nine{padding-left:540px}.container .offset-by-ten{padding-left:600px}.container .offset-by-eleven{padding-left:660px}.container .offset-by-twelve{padding-left:720px}.container .offset-by-thirteen{padding-left:780px}.container .offset-by-fourteen{padding-left:840px}.container .offset-by-fifteen{padding-left:900px}@media only screen and (min-width:768px) and (max-width:959px){.container{width:768px}.container .column,.container .columns{margin-left:10px;margin-right:10px}.column.alpha,.columns.alpha{margin-left:0;margin-right:10px}.column.omega,.columns.omega{margin-right:0;margin-left:10px}.alpha.omega{margin-left:0;margin-right:0}.container .one.column,.container .one.columns{width:28px}.container .two.columns{width:76px}.container .three.columns{width:124px}.container .four.columns{width:172px}.container .five.columns{width:220px}.container .six.columns{width:268px}.container .seven.columns{width:316px}.container .eight.columns{width:364px}.container .nine.columns{width:412px}.container .ten.columns{width:460px}.container .eleven.columns{width:508px}.container .twelve.columns{width:556px}.container .thirteen.columns{width:604px}.container .fourteen.columns{width:652px}.container .fifteen.columns{width:700px}.container .sixteen.columns{width:748px}.container .one-third.column{width:236px}.container .two-thirds.column{width:492px}.container .offset-by-one{padding-left:48px}.container .offset-by-two{padding-left:96px}.container .offset-by-three{padding-left:144px}.container .offset-by-four{padding-left:192px}.container .offset-by-five{padding-left:240px}.container .offset-by-six{padding-left:288px}.container .offset-by-seven{padding-left:336px}.container .offset-by-eight{padding-left:384px}.container .offset-by-nine{padding-left:432px}.container .offset-by-ten{padding-left:480px}.container .offset-by-eleven{padding-left:528px}.container .offset-by-twelve{padding-left:576px}.container .offset-by-thirteen{padding-left:624px}.container .offset-by-fourteen{padding-left:672px}.container .offset-by-fifteen{padding-left:720px}}@media only screen and (max-width:767px){.container,.container .eight.columns,.container .eleven.columns,.container .fifteen.columns,.container .five.columns,.container .four.columns,.container .fourteen.columns,.container .nine.columns,.container .one-third.column,.container .one.column,.container .one.columns,.container .seven.columns,.container .six.columns,.container .sixteen.columns,.container .ten.columns,.container .thirteen.columns,.container .three.columns,.container .twelve.columns,.container .two-thirds.column,.container .two.columns{width:300px}.container .column,.container .columns{margin:0}.container .offset-by-eight,.container .offset-by-eleven,.container .offset-by-fifteen,.container .offset-by-five,.container .offset-by-four,.container .offset-by-fourteen,.container .offset-by-nine,.container .offset-by-one,.container .offset-by-seven,.container .offset-by-six,.container .offset-by-ten,.container .offset-by-thirteen,.container .offset-by-three,.container .offset-by-twelve,.container .offset-by-two{padding-left:0}}@media only screen and (min-width:480px) and (max-width:767px){.container,.container .eight.columns,.container .eleven.columns,.container .fifteen.columns,.container .five.columns,.container .four.columns,.container .fourteen.columns,.container .nine.columns,.container .one-third.column,.container .one.column,.container .one.columns,.container .seven.columns,.container .six.columns,.container .sixteen.columns,.container .ten.columns,.container .thirteen.columns,.container .three.columns,.container .twelve.columns,.container .two-thirds.column,.container .two.columns{width:420px}.container .column,.container .columns{margin:0}}.clear,.clearfix:after,.clearfix:before,.row:after,.row:before{display:block;overflow:hidden;visibility:hidden;width:0;height:0}.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden}.clearfix:after,.clearfix:before,.row:after,.row:before{content:'\0020'}.clearfix,.row{zoom:1}


--------------------------------------------------------------------------------
/static/libraries/normalize.3.0.1.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.1 | 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 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-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 and Firefox.
 29 |  * Correct `block` display not defined for `main` in IE 11.
 30 |  */
 31 | 
 32 | article,
 33 | aside,
 34 | details,
 35 | figcaption,
 36 | figure,
 37 | footer,
 38 | header,
 39 | hgroup,
 40 | main,
 41 | nav,
 42 | section,
 43 | summary {
 44 |   display: block;
 45 | }
 46 | 
 47 | /**
 48 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 49 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 50 |  */
 51 | 
 52 | audio,
 53 | canvas,
 54 | progress,
 55 | video {
 56 |   display: inline-block; /* 1 */
 57 |   vertical-align: baseline; /* 2 */
 58 | }
 59 | 
 60 | /**
 61 |  * Prevent modern browsers from displaying `audio` without controls.
 62 |  * Remove excess height in iOS 5 devices.
 63 |  */
 64 | 
 65 | audio:not([controls]) {
 66 |   display: none;
 67 |   height: 0;
 68 | }
 69 | 
 70 | /**
 71 |  * Address `[hidden]` styling not present in IE 8/9/10.
 72 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 73 |  */
 74 | 
 75 | [hidden],
 76 | template {
 77 |   display: none;
 78 | }
 79 | 
 80 | /* Links
 81 |    ========================================================================== */
 82 | 
 83 | /**
 84 |  * Remove the gray background color from active links in IE 10.
 85 |  */
 86 | 
 87 | a {
 88 |   background: transparent;
 89 | }
 90 | 
 91 | /**
 92 |  * Improve readability when focused and also mouse hovered in all browsers.
 93 |  */
 94 | 
 95 | a:active,
 96 | a:hover {
 97 |   outline: 0;
 98 | }
 99 | 
100 | /* Text-level semantics
101 |    ========================================================================== */
102 | 
103 | /**
104 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105 |  */
106 | 
107 | abbr[title] {
108 |   border-bottom: 1px dotted;
109 | }
110 | 
111 | /**
112 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113 |  */
114 | 
115 | b,
116 | strong {
117 |   font-weight: bold;
118 | }
119 | 
120 | /**
121 |  * Address styling not present in Safari and Chrome.
122 |  */
123 | 
124 | dfn {
125 |   font-style: italic;
126 | }
127 | 
128 | /**
129 |  * Address variable `h1` font-size and margin within `section` and `article`
130 |  * contexts in Firefox 4+, Safari, and Chrome.
131 |  */
132 | 
133 | h1 {
134 |   font-size: 2em;
135 |   margin: 0.67em 0;
136 | }
137 | 
138 | /**
139 |  * Address styling not present in IE 8/9.
140 |  */
141 | 
142 | mark {
143 |   background: #ff0;
144 |   color: #000;
145 | }
146 | 
147 | /**
148 |  * Address inconsistent and variable font size in all browsers.
149 |  */
150 | 
151 | small {
152 |   font-size: 80%;
153 | }
154 | 
155 | /**
156 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
157 |  */
158 | 
159 | sub,
160 | sup {
161 |   font-size: 75%;
162 |   line-height: 0;
163 |   position: relative;
164 |   vertical-align: baseline;
165 | }
166 | 
167 | sup {
168 |   top: -0.5em;
169 | }
170 | 
171 | sub {
172 |   bottom: -0.25em;
173 | }
174 | 
175 | /* Embedded content
176 |    ========================================================================== */
177 | 
178 | /**
179 |  * Remove border when inside `a` element in IE 8/9/10.
180 |  */
181 | 
182 | img {
183 |   border: 0;
184 | }
185 | 
186 | /**
187 |  * Correct overflow not hidden in IE 9/10/11.
188 |  */
189 | 
190 | svg:not(:root) {
191 |   overflow: hidden;
192 | }
193 | 
194 | /* Grouping content
195 |    ========================================================================== */
196 | 
197 | /**
198 |  * Address margin not present in IE 8/9 and Safari.
199 |  */
200 | 
201 | figure {
202 |   margin: 1em 40px;
203 | }
204 | 
205 | /**
206 |  * Address differences between Firefox and other browsers.
207 |  */
208 | 
209 | hr {
210 |   -moz-box-sizing: content-box;
211 |   box-sizing: content-box;
212 |   height: 0;
213 | }
214 | 
215 | /**
216 |  * Contain overflow in all browsers.
217 |  */
218 | 
219 | pre {
220 |   overflow: auto;
221 | }
222 | 
223 | /**
224 |  * Address odd `em`-unit font size rendering in all browsers.
225 |  */
226 | 
227 | code,
228 | kbd,
229 | pre,
230 | samp {
231 |   font-family: monospace, monospace;
232 |   font-size: 1em;
233 | }
234 | 
235 | /* Forms
236 |    ========================================================================== */
237 | 
238 | /**
239 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
240 |  * styling of `select`, unless a `border` property is set.
241 |  */
242 | 
243 | /**
244 |  * 1. Correct color not being inherited.
245 |  *    Known issue: affects color of disabled elements.
246 |  * 2. Correct font properties not being inherited.
247 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248 |  */
249 | 
250 | button,
251 | input,
252 | optgroup,
253 | select,
254 | textarea {
255 |   color: inherit; /* 1 */
256 |   font: inherit; /* 2 */
257 |   margin: 0; /* 3 */
258 | }
259 | 
260 | /**
261 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
262 |  */
263 | 
264 | button {
265 |   overflow: visible;
266 | }
267 | 
268 | /**
269 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
270 |  * All other form control elements do not inherit `text-transform` values.
271 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272 |  * Correct `select` style inheritance in Firefox.
273 |  */
274 | 
275 | button,
276 | select {
277 |   text-transform: none;
278 | }
279 | 
280 | /**
281 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282 |  *    and `video` controls.
283 |  * 2. Correct inability to style clickable `input` types in iOS.
284 |  * 3. Improve usability and consistency of cursor style between image-type
285 |  *    `input` and others.
286 |  */
287 | 
288 | button,
289 | html input[type="button"], /* 1 */
290 | input[type="reset"],
291 | input[type="submit"] {
292 |   -webkit-appearance: button; /* 2 */
293 |   cursor: pointer; /* 3 */
294 | }
295 | 
296 | /**
297 |  * Re-set default cursor for disabled elements.
298 |  */
299 | 
300 | button[disabled],
301 | html input[disabled] {
302 |   cursor: default;
303 | }
304 | 
305 | /**
306 |  * Remove inner padding and border in Firefox 4+.
307 |  */
308 | 
309 | button::-moz-focus-inner,
310 | input::-moz-focus-inner {
311 |   border: 0;
312 |   padding: 0;
313 | }
314 | 
315 | /**
316 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
317 |  * the UA stylesheet.
318 |  */
319 | 
320 | input {
321 |   line-height: normal;
322 | }
323 | 
324 | /**
325 |  * It's recommended that you don't attempt to style these elements.
326 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
327 |  *
328 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
329 |  * 2. Remove excess padding in IE 8/9/10.
330 |  */
331 | 
332 | input[type="checkbox"],
333 | input[type="radio"] {
334 |   box-sizing: border-box; /* 1 */
335 |   padding: 0; /* 2 */
336 | }
337 | 
338 | /**
339 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
340 |  * `font-size` values of the `input`, it causes the cursor style of the
341 |  * decrement button to change from `default` to `text`.
342 |  */
343 | 
344 | input[type="number"]::-webkit-inner-spin-button,
345 | input[type="number"]::-webkit-outer-spin-button {
346 |   height: auto;
347 | }
348 | 
349 | /**
350 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352 |  *    (include `-moz` to future-proof).
353 |  */
354 | 
355 | input[type="search"] {
356 |   -webkit-appearance: textfield; /* 1 */
357 |   -moz-box-sizing: content-box;
358 |   -webkit-box-sizing: content-box; /* 2 */
359 |   box-sizing: content-box;
360 | }
361 | 
362 | /**
363 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364 |  * Safari (but not Chrome) clips the cancel button when the search input has
365 |  * padding (and `textfield` appearance).
366 |  */
367 | 
368 | input[type="search"]::-webkit-search-cancel-button,
369 | input[type="search"]::-webkit-search-decoration {
370 |   -webkit-appearance: none;
371 | }
372 | 
373 | /**
374 |  * Define consistent border, margin, and padding.
375 |  */
376 | 
377 | fieldset {
378 |   border: 1px solid #c0c0c0;
379 |   margin: 0 2px;
380 |   padding: 0.35em 0.625em 0.75em;
381 | }
382 | 
383 | /**
384 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
385 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386 |  */
387 | 
388 | legend {
389 |   border: 0; /* 1 */
390 |   padding: 0; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove default vertical scrollbar in IE 8/9/10/11.
395 |  */
396 | 
397 | textarea {
398 |   overflow: auto;
399 | }
400 | 
401 | /**
402 |  * Don't inherit the `font-weight` (applied by a rule above).
403 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404 |  */
405 | 
406 | optgroup {
407 |   font-weight: bold;
408 | }
409 | 
410 | /* Tables
411 |    ========================================================================== */
412 | 
413 | /**
414 |  * Remove most spacing between table cells.
415 |  */
416 | 
417 | table {
418 |   border-collapse: collapse;
419 |   border-spacing: 0;
420 | }
421 | 
422 | td,
423 | th {
424 |   padding: 0;
425 | }
426 | 


--------------------------------------------------------------------------------
/static/css/liquorice.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * https://github.com/eliasson/liquorice/
  3 |  *
  4 |  * Copyright © 2014. Markus Eliasson <markus.eliasson.gmail.com>
  5 |  *
  6 |  * Liquorice is released under the MIT license.
  7 |  *
  8 |  * The CSS grid used by liquorice is based on the Skeleton grid:
  9 |  *
 10 |  *   Skeleton V1.2
 11 |  *   Copyright 2011, Dave Gamache
 12 |  *   www.getskeleton.com
 13 |  *   Free to use under the MIT license.
 14 |  */
 15 | 
 16 | /** States ******************************************************************/
 17 | .li-right {
 18 |     float: right
 19 | }
 20 | 
 21 | .li-left {
 22 |     float: left;
 23 | }
 24 | 
 25 | /** Base ********************************************************************/
 26 | body {
 27 |     font-family: "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
 28 |     color: #484644;
 29 | }
 30 | 
 31 | a,
 32 | a:active,
 33 | a:hover,
 34 | a:visited {
 35 |     color: #202020;
 36 |     text-decoration: none;
 37 |     font-weight: bold;
 38 | }
 39 | 
 40 | h1,h2,h3,h4,h5,h6 {
 41 |     color: #202020;
 42 |     font-weight: lighter;
 43 | }
 44 | 
 45 | pre {
 46 |     background-color: #fafafa;
 47 |     border: 1px solid #ccc;
 48 |     border-radius: 4px;
 49 |     padding: 32px;
 50 | }
 51 | 
 52 | pre code {
 53 |     display: inline-block;
 54 | }
 55 | 
 56 | /** Screen furniture ********************************************************/
 57 | .li-page-header {
 58 |     background-color: #202020;
 59 |     color: #fff;
 60 |     padding: 32px 0px;
 61 | }
 62 | 
 63 | .li-page-header ul {
 64 |     list-style: none;
 65 |     margin: 0px;
 66 |     line-height: 30px;
 67 | }
 68 | 
 69 | .li-page-header ul li {
 70 |     float: left;
 71 |     list-style: none;
 72 |     line-height: 30px;
 73 |     margin-left: 30px;
 74 | }
 75 | 
 76 | .li-page-header ul li a,
 77 | .li-page-header ul li a:active,
 78 | .li-page-header ul li a:hover,
 79 | .li-page-header ul li a:visited {
 80 |     color: #ccc;
 81 |     font-weight: normal;
 82 |     text-decoration: none;
 83 | }
 84 | 
 85 | .li-page-header ul li a:active,
 86 | .li-page-header ul li a:hover {
 87 |     color: #fff;
 88 | }
 89 | 
 90 | .li-page-header .li-brand a,
 91 | .li-page-header .li-brand a:active,
 92 | .li-page-header .li-brand a:hover,
 93 | .li-page-header .li-brand a:visited {
 94 |     color: #fff;
 95 |     font-weight: bold;
 96 |     font-size: 1.5em;
 97 |     text-decoration: none;
 98 | }
 99 | 
100 | .li-page-header .li-menu-icon,
101 | .li-page-header .li-menu-mobile {
102 |     display: none;
103 | }
104 | 
105 | /** Article *****************************************************************/
106 | .li-article {
107 |     margin-bottom: 32px;
108 | }
109 | 
110 | .li-article img {
111 |     height: auto;
112 |     max-width: 100%;
113 | }
114 | 
115 | ul.li-article-list {
116 |     list-style: none;
117 |     margin: 0px;
118 |     padding: 0px;
119 | }
120 | 
121 | .li-article-list time {
122 |     float: right;
123 | }
124 | 
125 | .li-article-section {
126 |     padding: 16px 0px;
127 | }
128 | 
129 | .li-article-date,
130 | .li-article-taxonomies {
131 |     color: #999;
132 |     font-size: smaller;
133 | }
134 | 
135 | .li-article-footer {
136 |     border-top: 1px solid #ccc;
137 | }
138 | 
139 | .li-pagination {
140 |     border-top: 1px solid #ccc;
141 |     margin-top: 32px;
142 |     padding-top: 16px;
143 | }
144 | 
145 | .li-pagination-previous {
146 |     float: left;
147 | }
148 | 
149 | .li-pagination-next {
150 |     float: right;
151 | }
152 | 
153 | .li-page-footer {
154 |     font-size: smaller;
155 |     padding: 48px 0px 32px 0px;
156 | }
157 | 
158 | .li-page-footer-legal {
159 |     float: left;
160 | }
161 | 
162 | .li-page-footer-theme {
163 |     float: right;
164 | }
165 | 
166 | .li-main-article-list {
167 |     margin-top: 128px;
168 | }
169 | 
170 | /** Mobile Portrait (320px) **************************************************/
171 | @media only screen and (max-width: 767px) {
172 |     .li-page-header {
173 |         padding: 16px 0px;
174 |     }
175 | 
176 |     .li-main-article-list {
177 |         margin-top: 64px;
178 |     }
179 | 
180 |     .li-page-header .li-menu-icon {
181 |         cursor: pointer;
182 |         display: block;
183 |         float: right;
184 |         line-height: 30px;
185 |     }
186 | 
187 |     .li-page-header .li-menu-items {
188 |         clear: both;
189 |         display: none;
190 |     }
191 | 
192 |     .li-page-header ul.li-menu-items {
193 |         list-style-type: none;
194 |         margin: 0px;
195 |         padding: 0px;
196 |     }
197 | 
198 |     .li-page-header .li-menu-items li {
199 |         margin-left: 0px;
200 |         padding: 12px 0px;
201 |         text-align: center;
202 |         width: 100%;
203 |     }
204 | 
205 |     .li-page-header .li-menu-items li {
206 |         border-top: 1px solid #ccc;
207 |     }
208 | 
209 |     .li-page-header .li-menu-items li:first-of-type  {
210 |         border-top: none;
211 |     }
212 | 
213 |     .li-pagination-previous,
214 |     .li-pagination-next,
215 |     .li-page-footer-legal,
216 |     .li-page-footer-theme {
217 |         float: none;
218 |         text-align: center;
219 |         padding: 8px 0px;
220 |     }
221 | }
222 | 
223 | 
224 | /*
225 |  * Skelton grid (www.getskeleton.com)
226 |  */
227 | 
228 | /** Desktop (960px) **********************************************************/
229 | .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
230 | .container .column,
231 | .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
232 | .row                                        { /*margin-bottom: 20px;*/ }
233 | 
234 | /* Nested Column Classes */
235 | .column.alpha, .columns.alpha               { margin-left: 0; }
236 | .column.omega, .columns.omega               { margin-right: 0; }
237 | 
238 | /* Base Grid */
239 | .container .one.column,
240 | .container .one.columns                     { width: 40px;  }
241 | .container .two.columns                     { width: 100px; }
242 | .container .three.columns                   { width: 160px; }
243 | .container .four.columns                    { width: 220px; }
244 | .container .five.columns                    { width: 280px; }
245 | .container .six.columns                     { width: 340px; }
246 | .container .seven.columns                   { width: 400px; }
247 | .container .eight.columns                   { width: 460px; }
248 | .container .nine.columns                    { width: 520px; }
249 | .container .ten.columns                     { width: 580px; }
250 | .container .eleven.columns                  { width: 640px; }
251 | .container .twelve.columns                  { width: 700px; }
252 | .container .thirteen.columns                { width: 760px; }
253 | .container .fourteen.columns                { width: 820px; }
254 | .container .fifteen.columns                 { width: 880px; }
255 | .container .sixteen.columns                 { width: 940px; }
256 | 
257 | .container .one-third.column                { width: 300px; }
258 | .container .two-thirds.column               { width: 620px; }
259 | 
260 | /* Offsets */
261 | .container .offset-by-one                   { padding-left: 60px;  }
262 | .container .offset-by-two                   { padding-left: 120px; }
263 | .container .offset-by-three                 { padding-left: 180px; }
264 | .container .offset-by-four                  { padding-left: 240px; }
265 | .container .offset-by-five                  { padding-left: 300px; }
266 | .container .offset-by-six                   { padding-left: 360px; }
267 | .container .offset-by-seven                 { padding-left: 420px; }
268 | .container .offset-by-eight                 { padding-left: 480px; }
269 | .container .offset-by-nine                  { padding-left: 540px; }
270 | .container .offset-by-ten                   { padding-left: 600px; }
271 | .container .offset-by-eleven                { padding-left: 660px; }
272 | .container .offset-by-twelve                { padding-left: 720px; }
273 | .container .offset-by-thirteen              { padding-left: 780px; }
274 | .container .offset-by-fourteen              { padding-left: 840px; }
275 | .container .offset-by-fifteen               { padding-left: 900px; }
276 | 
277 | 
278 | 
279 | /** Tablet Portrait (768px) **************************************************/
280 | @media only screen and (min-width: 768px) and (max-width: 959px) {
281 |     .container                                  { width: 768px; }
282 |     .container .column,
283 |     .container .columns                         { margin-left: 10px; margin-right: 10px;  }
284 |     .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
285 |     .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
286 |     .alpha.omega                                { margin-left: 0; margin-right: 0; }
287 | 
288 |     .container .one.column,
289 |     .container .one.columns                     { width: 28px; }
290 |     .container .two.columns                     { width: 76px; }
291 |     .container .three.columns                   { width: 124px; }
292 |     .container .four.columns                    { width: 172px; }
293 |     .container .five.columns                    { width: 220px; }
294 |     .container .six.columns                     { width: 268px; }
295 |     .container .seven.columns                   { width: 316px; }
296 |     .container .eight.columns                   { width: 364px; }
297 |     .container .nine.columns                    { width: 412px; }
298 |     .container .ten.columns                     { width: 460px; }
299 |     .container .eleven.columns                  { width: 508px; }
300 |     .container .twelve.columns                  { width: 556px; }
301 |     .container .thirteen.columns                { width: 604px; }
302 |     .container .fourteen.columns                { width: 652px; }
303 |     .container .fifteen.columns                 { width: 700px; }
304 |     .container .sixteen.columns                 { width: 748px; }
305 | 
306 |     .container .one-third.column                { width: 236px; }
307 |     .container .two-thirds.column               { width: 492px; }
308 | 
309 |     /* Offsets */
310 |     .container .offset-by-one                   { padding-left: 48px; }
311 |     .container .offset-by-two                   { padding-left: 96px; }
312 |     .container .offset-by-three                 { padding-left: 144px; }
313 |     .container .offset-by-four                  { padding-left: 192px; }
314 |     .container .offset-by-five                  { padding-left: 240px; }
315 |     .container .offset-by-six                   { padding-left: 288px; }
316 |     .container .offset-by-seven                 { padding-left: 336px; }
317 |     .container .offset-by-eight                 { padding-left: 384px; }
318 |     .container .offset-by-nine                  { padding-left: 432px; }
319 |     .container .offset-by-ten                   { padding-left: 480px; }
320 |     .container .offset-by-eleven                { padding-left: 528px; }
321 |     .container .offset-by-twelve                { padding-left: 576px; }
322 |     .container .offset-by-thirteen              { padding-left: 624px; }
323 |     .container .offset-by-fourteen              { padding-left: 672px; }
324 |     .container .offset-by-fifteen               { padding-left: 720px; }
325 | }
326 | 
327 | 
328 | /** Mobile Portrait (320px) **************************************************/
329 | @media only screen and (max-width: 767px) {
330 |     .container { width: 300px; }
331 |     .container .columns,
332 |     .container .column { margin: 0; }
333 | 
334 |     .container .one.column,
335 |     .container .one.columns,
336 |     .container .two.columns,
337 |     .container .three.columns,
338 |     .container .four.columns,
339 |     .container .five.columns,
340 |     .container .six.columns,
341 |     .container .seven.columns,
342 |     .container .eight.columns,
343 |     .container .nine.columns,
344 |     .container .ten.columns,
345 |     .container .eleven.columns,
346 |     .container .twelve.columns,
347 |     .container .thirteen.columns,
348 |     .container .fourteen.columns,
349 |     .container .fifteen.columns,
350 |     .container .sixteen.columns,
351 |     .container .one-third.column,
352 |     .container .two-thirds.column  { width: 300px; }
353 | 
354 |     /* Offsets */
355 |     .container .offset-by-one,
356 |     .container .offset-by-two,
357 |     .container .offset-by-three,
358 |     .container .offset-by-four,
359 |     .container .offset-by-five,
360 |     .container .offset-by-six,
361 |     .container .offset-by-seven,
362 |     .container .offset-by-eight,
363 |     .container .offset-by-nine,
364 |     .container .offset-by-ten,
365 |     .container .offset-by-eleven,
366 |     .container .offset-by-twelve,
367 |     .container .offset-by-thirteen,
368 |     .container .offset-by-fourteen,
369 |     .container .offset-by-fifteen { padding-left: 0; }
370 | 
371 | }
372 | 
373 | 
374 | /** Mobile Landscape (480px) *************************************************/
375 | @media only screen and (min-width: 480px) and (max-width: 767px) {
376 |     .container { width: 420px; }
377 |     .container .columns,
378 |     .container .column { margin: 0; }
379 | 
380 |     .container .one.column,
381 |     .container .one.columns,
382 |     .container .two.columns,
383 |     .container .three.columns,
384 |     .container .four.columns,
385 |     .container .five.columns,
386 |     .container .six.columns,
387 |     .container .seven.columns,
388 |     .container .eight.columns,
389 |     .container .nine.columns,
390 |     .container .ten.columns,
391 |     .container .eleven.columns,
392 |     .container .twelve.columns,
393 |     .container .thirteen.columns,
394 |     .container .fourteen.columns,
395 |     .container .fifteen.columns,
396 |     .container .sixteen.columns,
397 |     .container .one-third.column,
398 |     .container .two-thirds.column { width: 420px; }
399 | }
400 | 
401 | 
402 | /** Clearing *****************************************************************/
403 | /* Self Clearing Goodness */
404 | .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
405 | 
406 | /* Use clearfix class on parent to clear nested columns,
407 | or wrap each row of columns in a <div class="row"> */
408 | .clearfix:before,
409 | .clearfix:after,
410 | .row:before,
411 | .row:after {
412 |     content: '\0020';
413 |     display: block;
414 |     overflow: hidden;
415 |     visibility: hidden;
416 |     width: 0;
417 |     height: 0;
418 | }
419 | 
420 | .row:after,
421 | .clearfix:after {
422 |     clear: both;
423 | }
424 | 
425 | .row,
426 | .clearfix {
427 |     zoom: 1;
428 | }
429 | 
430 | /* You can also use a <br class="clear" /> to clear columns */
431 | .clear {
432 |     clear: both;
433 |     display: block;
434 |     overflow: hidden;
435 |     visibility: hidden;
436 |     width: 0;
437 |     height: 0;
438 | }
439 | 


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