From 0576ec066de382154036f1df6b0428ba9ff402d3 Mon Sep 17 00:00:00 2001 From: Dato Simó Date: Wed, 14 May 2014 23:57:17 +0100 Subject: Hyde theme: sync with upstream to v2.0.0. CSS is now split into poole.css and hyde.css; chrome/sidebar.html updated. Also cherry-pick: * poole/hyde@48b9d1f - Set a max-width for images --- layouts/chrome/head.html | 1 + layouts/chrome/sidebar.html | 26 +- static/css/hyde.css | 473 ++++++++-------------------------- static/css/poole.css | 403 +++++++++++++++++++++++++++++ static/css/syntax.css | 0 static/favicon.png | Bin static/touch-icon-144-precomposed.png | Bin 7 files changed, 529 insertions(+), 374 deletions(-) mode change 100755 => 100644 static/css/hyde.css create mode 100644 static/css/poole.css mode change 100755 => 100644 static/css/syntax.css mode change 100755 => 100644 static/favicon.png mode change 100755 => 100644 static/touch-icon-144-precomposed.png diff --git a/layouts/chrome/head.html b/layouts/chrome/head.html index 582750c..4ddf0fa 100644 --- a/layouts/chrome/head.html +++ b/layouts/chrome/head.html @@ -10,6 +10,7 @@ {{ .Title }} · {{ .Site.Title }} + diff --git a/layouts/chrome/sidebar.html b/layouts/chrome/sidebar.html index 93dffdd..b199a6b 100644 --- a/layouts/chrome/sidebar.html +++ b/layouts/chrome/sidebar.html @@ -1,19 +1,19 @@ -
-
+
+
+

{{ .Site.Title }}

{{ with .Site.Params.Description }} {{.}} {{ else }}An elegant open source and mobile first theme for hugo made by @mdo. Originally made for Jekyll.{{end}}

+
-
- + -

{{ with .Site.Params.Copyright }}{{.}}{{ else }}© {{.Now.Format "2006"}}. All rights reserved. {{end}}

-
-
-
+

{{ with .Site.Params.Copyright }}{{.}}{{ else }}© {{.Now.Format "2006"}}. All rights reserved. {{end}}

+ + diff --git a/static/css/hyde.css b/static/css/hyde.css old mode 100755 new mode 100644 index 010c4d4..5ef814c --- a/static/css/hyde.css +++ b/static/css/hyde.css @@ -1,289 +1,116 @@ /* - __ __ -/\ \ /\ \ -\ \ \___ __ __ \_\ \ __ - \ \ _ `\/\ \/\ \ /'_` \ /'__`\ - \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ - \ \_\ \_\/`____ \ \___,_\ \____\ - \/_/\/_/`/___/> \/__,_ /\/____/ - /\___/ - \/__/ - -Hyde is an elegant, open source, mobile first theme for Jekyll. It includes -lightweight styles and placeholder content to get you up and running with a -simple blog in no time. - -Designed, built, and released under MIT license by @mdo. - -Learn more at http://andhyde.com or https://github.com/mdo/hyde. - -*/ + * __ __ + * /\ \ /\ \ + * \ \ \___ __ __ \_\ \ __ + * \ \ _ `\/\ \/\ \ /'_` \ /'__`\ + * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ + * \ \_\ \_\/`____ \ \___,_\ \____\ + * \/_/\/_/`/___/> \/__,_ /\/____/ + * /\___/ + * \/__/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/hyde. + */ /* * Contents * - * Body resets - * Custom type - * Links - * Masthead + * Global resets + * Sidebar * Container - * Posts - * Error page - * Pagination + * Reverse layout * Themes */ /* - * Body resets + * Global resets * * Update the foundational and global aspects of the page. */ -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -html, -body { - margin: 0; - padding: 0; +html { + font-family: "PT Sans", Helvetica, Arial, sans-serif; } - -body { - font-family: "Open Sans", Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 1.5; - color: #454441; - background-color: #fff; -} -@media (min-width: 990px) { - body { - font-size: 18px; +@media (min-width: 48rem) { + html { + font-size: 16px; } } - -h1, h2, h3, h4, h5, h6 { - margin: 0 0 10px; - font-weight: 600; - line-height: 1.25; - text-rendering: optimizeLegibility; -} -h1 { - font-size: 40px; -} -h2 { - margin-top: 20px; - font-size: 32px; -} -h3 { - margin-top: 24px; - font-size: 24px; -} -h4, h5, h6 { - margin-top: 16px; - font-size: 16px; -} - -p { - margin: 0 0 15px; -} - -ul, ol { - margin-bottom: 15px; -} - -hr { - position: relative; - margin: 40px 0; - border: 0; - border-top: 1px solid #eee; - border-bottom: 1px solid #fff; -} - -strong { - color: #222; -} - -abbr { - background-color: #eee; - display: inline-block; - padding: 3px; - font-size: 13px; - font-weight: bold; - color: #555; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); - text-transform: uppercase; - border-radius: 3px; -} - -code, -pre { - font-family: Menlo, Monaco, "Courier New", monospace; -} -code { - padding: .25em .5em; - font-size: 85%; - color: #bf616a; - background-color: #f9f9f9; - border-radius: 3px; -} -pre { - display: block; - margin: 0 0 14px; - padding: 15px 20px; - font-size: 16px; - line-height: 1.4; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - word-wrap: break-word; - background-color: #f9f9f9; -} -pre code { - padding: 0; - font-size: 100%; - color: inherit; - background-color: transparent; -} -.highlight { - margin-bottom: 15px; - border-radius: 4px; -} -.highlight pre { - margin-bottom: 0; -} - -/* Quotes */ -blockquote { - padding: 5px 30px 5px 25px; - margin: 15px 0; - border-left: 5px solid #eee; -} -blockquote p { - margin-bottom: 0; - color: #7a7a7a; - text-indent: -0.4em; -} -blockquote p:before { - content: '\201C'; -} -blockquote p:after { - content: '\201D'; -} - -img { - display: block; - margin: 0 0 15px; - border-radius: 5px; -} - - -/* - * Custom type - * - * Extend paragraphs with `.lead` for larger introductory text. - */ - -.lead { - font-size: 20px; - font-weight: 300; -} -@media (min-width: 990px) { - .lead { - font-size: 24px; +@media (min-width: 58rem) { + html { + font-size: 20px; } } /* - * Links + * Sidebar * - * No `:visited` state is required by default (browsers will use `a`). `:focus` - * is linked to `:hover` for basic accessibility. + * Flexible banner for housing site name, intro, and "footer" content. Starts + * out above content in mobile and later moves to the side with wider viewports. */ -a { - font-weight: 600; - color: #222; - text-decoration: none; +.sidebar { + text-align: center; + padding: 2rem 1rem; + color: rgba(255,255,255,.5); + background-color: #202020; } -a:hover, -a:focus { - text-decoration: underline; +@media (min-width: 48rem) { + .sidebar { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 18rem; + text-align: left; + } } - -/* - * Masthead - * - * Sidebar banner for housing site name, intro, and colophon (footer). - */ - -/* Sidebar masthead */ -.masthead { +/* Sidebar links */ +.sidebar a { color: #fff; - background-color: #2a2a2a; -} -.masthead-inner { - padding: 20px; } -/* Masthead content */ -.masthead h1 { - margin-top: 0; - font-family: "Abril Fatface"; -} -.masthead .lead { - margin-bottom: 0; -} -.masthead a { +/* About section */ +.sidebar-about h1 { color: #fff; + margin-top: 0; + font-family: "Abril Fatface", serif; + font-size: 3.25rem; } -/* Footer area of masthead */ -.colophon { - margin-top: 20px; - color: rgba(255,255,255,.5); -} -.colophon-links { +/* Sidebar nav */ +.sidebar-nav { padding-left: 0; list-style: none; } -.colophon-links li { - color: inherit; +.sidebar-nav-item { + display: block; } - -/* Responsive masthead */ -@media (min-width: 768px) { - .masthead-inner { - padding: 40px; - } +a.sidebar-nav-item:hover, +a.sidebar-nav-item:focus { + text-decoration: underline; } -@media (min-width: 990px) { - /* Fix the masthead to the side for impact and awesomeness */ - .masthead { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 25%; - margin-bottom: 0; - } - .masthead-inner { +.sidebar-nav-item.active { + font-weight: bold; +} + +/* Sticky sidebar + * + * Add the `sidebar-sticky` class to the sidebar's container to affix it the + * contents to the bottom of the sidebar in tablets and up. + */ + +@media (min-width: 48rem) { + .sidebar-sticky { position: absolute; - bottom: 0; - right: 0; - left: 0; - } - .masthead h1 { - font-size: 64px; - } - .colophon { - margin-top: 40px; + right: 1rem; + bottom: 1rem; + left: 1rem; } } @@ -291,131 +118,55 @@ a:focus { /* Container * * Align the contents of the site above the proper threshold with some margin-fu - * with a 25%-wide `.masthead`. + * with a 25%-wide `.sidebar`. */ .content { - padding: 40px 20px; + padding-top: 4rem; + padding-bottom: 4rem; } -/* Center container in available real estate */ -@media (min-width: 990px) { +@media (min-width: 48rem) { .content { - padding: 60px 0; - } - .container { - width: 55%; - margin-left: 35%; - margin-right: 10%; + max-width: 38rem; + margin-left: 20rem; + margin-right: 2rem; } } - -/* - * Posts - * - * Each post is wrapped in `.post`. Used on default and post layouts. - */ - -/* Single post */ -.post { - margin-bottom: 40px; -} -@media (min-width: 990px) { - .post { - margin-bottom: 60px; - } -} - -/* Meta data line below post title */ -.post-date { - display: block; - margin: -10px 0 10px; - color: #9a9a9a; -} - -/* Related posts */ -.related { - padding-top: 20px; - padding-bottom: 40px; - border-top: 1px solid #eee; -} -.related-posts { - padding-left: 0; - list-style: none; -} -.related-posts h3 { - margin-top: 0; -} -.related-posts li small { - font-size: 75%; - color: #999; -} -.related-posts li a:hover { - color: #000; - text-decoration: none; -} -.related-posts li a:hover small { - color: inherit; -} - - -/* - * Pagination - * - * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when - * there are no more previous or next posts to show. - */ - -.pagination { - overflow: hidden; /* clearfix */ - margin-top: 40px; - font-weight: bold; - color: #ccc; - text-align: center; - border-top: 1px solid #eee; -} -/* Pagination should float when space is plentiful */ -@media (min-width: 990px) { - .pagination { - margin-bottom: 60px; - border: 1px solid #eee; +@media (min-width: 64rem) { + .content { + margin-left: 22rem; + margin-right: 4rem; } } -.pagination a, -.pagination span { - float: left; - width: 50%; - padding: 20px; -} -.pagination a:first-child, -.pagination span:first-child { - border-right: 1px solid #eee; -} -.pagination a:hover { - text-decoration: none; - background-color: #f5f5f5; -} - /* * Reverse layout * - * Flip the orientation of the page by placing the `.masthead` on the right. + * Flip the orientation of the page by placing the `.sidebar` on the right. */ -@media (min-width: 990px) { - .layout-reverse .masthead { +@media (min-width: 48rem) { + .layout-reverse .sidebar { left: auto; right: 0; } - .layout-reverse .container { - margin-left: 10%; - margin-right: 35%; + .layout-reverse .content { + margin-left: 2rem; + margin-right: 20rem; } } +@media (min-width: 64rem) { + .layout-reverse .content { + margin-left: 4rem; + margin-right: 22rem; + } +} + + /* * Themes @@ -427,73 +178,73 @@ a:focus { /* Base16 (http://chriskempson.github.io/base16/#default) */ /* Red */ -.theme-base-08 .masthead { +.theme-base-08 .sidebar { background-color: #ac4142; } -.theme-base-08 .container a, +.theme-base-08 .content a, .theme-base-08 .related-posts li a:hover { color: #ac4142; } /* Orange */ -.theme-base-09 .masthead { +.theme-base-09 .sidebar { background-color: #d28445; } -.theme-base-09 .container a, +.theme-base-09 .content a, .theme-base-09 .related-posts li a:hover { color: #d28445; } /* Yellow */ -.theme-base-0a .masthead { +.theme-base-0a .sidebar { background-color: #f4bf75; } -.theme-base-0a .container a, +.theme-base-0a .content a, .theme-base-0a .related-posts li a:hover { color: #f4bf75; } /* Green */ -.theme-base-0b .masthead { +.theme-base-0b .sidebar { background-color: #90a959; } -.theme-base-0b .container a, +.theme-base-0b .content a, .theme-base-0b .related-posts li a:hover { color: #90a959; } /* Cyan */ -.theme-base-0c .masthead { +.theme-base-0c .sidebar { background-color: #75b5aa; } -.theme-base-0c .container a, +.theme-base-0c .content a, .theme-base-0c .related-posts li a:hover { color: #75b5aa; } /* Blue */ -.theme-base-0d .masthead { +.theme-base-0d .sidebar { background-color: #6a9fb5; } -.theme-base-0d .container a, +.theme-base-0d .content a, .theme-base-0d .related-posts li a:hover { color: #6a9fb5; } /* Magenta */ -.theme-base-0e .masthead { +.theme-base-0e .sidebar { background-color: #aa759f; } -.theme-base-0e .container a, +.theme-base-0e .content a, .theme-base-0e .related-posts li a:hover { color: #aa759f; } /* Brown */ -.theme-base-0f .masthead { +.theme-base-0f .sidebar { background-color: #8f5536; } -.theme-base-0f .container a, +.theme-base-0f .content a, .theme-base-0f .related-posts li a:hover { color: #8f5536; } diff --git a/static/css/poole.css b/static/css/poole.css new file mode 100644 index 0000000..974daa3 --- /dev/null +++ b/static/css/poole.css @@ -0,0 +1,403 @@ +/* + * ___ + * /\_ \ + * _____ ___ ___\//\ \ __ + * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ + * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ + * \ \ ,__/\ \____/\ \____//\____\ \____\ + * \ \ \/ \/___/ \/___/ \/____/\/____/ + * \ \_\ + * \/_/ + * + * Designed, built, and released under MIT license by @mdo. Learn more at + * https://github.com/poole/poole. + */ + + +/* + * Contents + * + * Body resets + * Custom type + * Messages + * Container + * Masthead + * Posts and pages + * Pagination + * Reverse layout + * Themes + */ + + +/* + * Body resets + * + * Update the foundational and global aspects of the page. + */ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; +} +@media (min-width: 38rem) { + html { + font-size: 20px; + } +} + +body { + color: #515151; + background-color: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* No `:visited` state is required by default (browsers will use `a`) */ +a { + color: #268bd2; + text-decoration: none; +} +/* `:focus` is linked to `:hover` for basic accessibility */ +a:hover, +a:focus { + text-decoration: underline; +} + +/* Headings */ +h1, h2, h3, h4, h5, h6 { + margin-bottom: .5rem; + font-weight: bold; + line-height: 1.25; + color: #313131; + text-rendering: optimizeLegibility; +} +h1 { + font-size: 2rem; +} +h2 { + margin-top: 1rem; + font-size: 1.5rem; +} +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} +h4, h5, h6 { + margin-top: 1rem; + font-size: 1rem; +} + +/* Body text */ +p { + margin-top: 0; + margin-bottom: 1rem; +} + +strong { + color: #303030; +} + + +/* Lists */ +ul, ol, dl { + margin-top: 0; + margin-bottom: 1rem; +} + +dt { + font-weight: bold; +} +dd { + margin-bottom: .5rem; +} + +/* Misc */ +hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; +} + +abbr { + font-size: 85%; + font-weight: bold; + color: #555; + text-transform: uppercase; +} +abbr[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; +} + +/* Code */ +code, +pre { + font-family: Menlo, Monaco, "Courier New", monospace; +} +code { + padding: .25em .5em; + font-size: 85%; + color: #bf616a; + background-color: #f9f9f9; + border-radius: 3px; +} +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + padding: 1rem; + font-size: .8rem; + line-height: 1.4; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + background-color: #f9f9f9; +} +pre code { + padding: 0; + font-size: 100%; + color: inherit; + background-color: transparent; +} +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} + +/* Quotes */ +blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: #7a7a7a; + border-left: .25rem solid #e5e5e5; +} +blockquote p:last-child { + margin-bottom: 0; +} +@media (min-width: 30rem) { + blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +img { + display: block; + margin: 0 0 1rem; + border-radius: 5px; + max-width: 100%; +} + +/* Tables */ +table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} +td, +th { + padding: .25rem .5rem; + border: 1px solid #e5e5e5; +} +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} + + +/* + * Custom type + * + * Extend paragraphs with `.lead` for larger introductory text. + */ + +.lead { + font-size: 1.25rem; + font-weight: 300; +} + + +/* + * Messages + * + * Show alert messages to users. You may add it to single elements like a `

`, + * or to a parent if there are multiple elements to show. + */ + +.message { + margin-bottom: 1rem; + padding: 1rem; + color: #717171; + background-color: #f9f9f9; +} + + +/* + * Container + * + * Center the page content. + */ + +.container { + max-width: 38rem; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 3rem; +} +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: #505050; +} +.masthead-title a { + color: #505050; +} +.masthead-title small { + font-size: 75%; + font-weight: 400; + color: #c0c0c0; + letter-spacing: 0; +} + + +/* + * Posts and pages + * + * Each post is wrapped in `.post` and is used on default and post layouts. Each + * page is wrapped in `.page` and is only used on the page layout. + */ + +.page, +.post { + margin-bottom: 4em; +} + +/* Blog post or page title */ +.page-title, +.post-title, +.post-title a { + color: #303030; +} +.page-title, +.post-title { + margin-top: 0; +} + +/* Meta data line below post title */ +.post-date { + display: block; + margin-top: -.5rem; + margin-bottom: 1rem; + color: #9a9a9a; +} + +/* Related posts */ +.related { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 1px solid #eee; +} +.related-posts { + padding-left: 0; + list-style: none; +} +.related-posts h3 { + margin-top: 0; +} +.related-posts li small { + font-size: 75%; + color: #999; +} +.related-posts li a:hover { + color: #268bd2; + text-decoration: none; +} +.related-posts li a:hover small { + color: inherit; +} + + +/* + * Pagination + * + * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when + * there are no more previous or next posts to show. + */ + +.pagination { + overflow: hidden; /* clearfix */ + margin-left: -1rem; + margin-right: -1rem; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + color: #ccc; + text-align: center; +} + +/* Pagination items can be `span`s or `a`s */ +.pagination-item { + display: block; + padding: 1rem; + border: 1px solid #eee; +} +.pagination-item:first-child { + margin-bottom: -1px; +} + +/* Only provide a hover state for linked pagination items */ +a.pagination-item:hover { + background-color: #f5f5f5; +} + +@media (min-width: 30rem) { + .pagination { + margin: 3rem 0; + } + .pagination-item { + float: left; + width: 50%; + } + .pagination-item:first-child { + margin-bottom: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + .pagination-item:last-child { + margin-left: -1px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } +} diff --git a/static/css/syntax.css b/static/css/syntax.css old mode 100755 new mode 100644 diff --git a/static/favicon.png b/static/favicon.png old mode 100755 new mode 100644 diff --git a/static/touch-icon-144-precomposed.png b/static/touch-icon-144-precomposed.png old mode 100755 new mode 100644 -- cgit 1.4.1