diff --git a/_config.yml b/_config.yml index 777f721b6e4..4f2878c8b4d 100644 --- a/_config.yml +++ b/_config.yml @@ -21,7 +21,7 @@ paginate_path: '/page-:num/' # Markdown enabled, however don't use more than one paragraph (enforced by `>`) description: > - A pretentious two-column [Jekyll](http://jekyllrb.com/) theme, stolen by [`@qwtel`](https://twitter.com/qwtel) + A pretentious two-column [Jekyll](http://jekyllrb.com/) theme, stolen by [`@qwtel`{:style="background: rgba(255, 255, 255, 0.15)"}](https://twitter.com/qwtel) from [Hyde](http://hyde.getpoole.com). You could say it was.. [hydejacked](http://media3.giphy.com/media/makedRIckZBW8/giphy.gif). diff --git a/_includes/essentials.scss b/_includes/essentials.scss index 0b8a0ed4472..8d9a8f55754 100644 --- a/_includes/essentials.scss +++ b/_includes/essentials.scss @@ -1,15 +1,37 @@ -@import "poole/variables"; - -@import "poole/base"; -@import "poole/type"; -@import "poole/code"; -@import "poole/layout"; -@import "poole/posts"; -@import "poole/related"; -@import "poole/message"; - -@import "hydejack/globals"; -@import "hydejack/sidebar"; + + + + + +@import "pooleparty/variables"; + +@import "pooleparty/base"; +@import "pooleparty/type-essential"; +// @import "pooleparty/type"; +// @import "pooleparty/table"; +// @import "pooleparty/footnotes"; +// @import "pooleparty/code"; +@import "pooleparty/layout"; +// @import "pooleparty/footer"; +// @import "pooleparty/masthead"; +@import "pooleparty/posts-essential"; +// @import "pooleparty/posts"; +// @import "pooleparty/pagination"; +@import "pooleparty/related-essential"; +// @import "pooleparty/related"; +@import "pooleparty/message"; + +@import "hydejack/base-essential"; +// @import "hydejack/base"; +@import "hydejack/sidebar-essential"; +// @import "hydejack/sidebar"; +// @import "hydejack/aside"; +// @import "hydejack/drawer"; +// @import "hydejack/social"; @import "hydejack/menu"; @import "hydejack/content"; -@import "hydejack/me"; +@import "hydejack/me-essential"; +// @import "hydejack/me"; +// @import "hydejack/katex"; + +// @import "jekyll-github"; diff --git a/_layouts/default.html b/_layouts/default.html index 3be02a7d799..8d6104bb7bd 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,11 +8,7 @@ {% include head.html %} - - ☰ - - Menu - + ☰
{{ content }} diff --git a/_posts/2016-03-08-introducing-hydejack.md b/_posts/2016-03-08-introducing-hydejack.md index 68e695f3756..599d6d41d59 100644 --- a/_posts/2016-03-08-introducing-hydejack.md +++ b/_posts/2016-03-08-introducing-hydejack.md @@ -7,18 +7,6 @@ description: > --- - - ## Features Unlike Hyde, it's very opinionated about how you are going to use it. diff --git a/_sass/_hydejack.scss b/_sass/_hydejack.scss deleted file mode 100644 index c3032684aeb..00000000000 --- a/_sass/_hydejack.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* - * __ __ - * /\ \ /\ \ - * \ \ \___ __ __ \_\ \ __ - * \ \ _ `\/\ \/\ \ /'_` \ /'__`\ - * \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/ - * \ \_\ \_\/`____ \ \___,_\ \____\ - * \/_/\/_/`/___/> \/__,_ /\/____/ - * /\___/ - * \/__/ - * - * Designed, built, and released under MIT license by @mdo. Learn more at - * https://github.com/poole/hyde. - * - * Hijacked and adoped by @qwtel. Learn more at - * http://qwtel.com/hydejack. - */ - -@import "hydejack/globals"; -@import "hydejack/aside"; -@import "hydejack/sidebar"; -@import "hydejack/drawer"; -@import "hydejack/content"; -@import "hydejack/me"; -@import "hydejack/katex"; diff --git a/_sass/_poole.scss b/_sass/_poole.scss deleted file mode 100644 index f22608a8cfc..00000000000 --- a/_sass/_poole.scss +++ /dev/null @@ -1,26 +0,0 @@ -// -// ___ -// /\_ \ -// _____ ___ ___\//\ \ __ -// /\ '__`\ / __`\ / __`\\ \ \ /'__`\ -// \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ -// \ \ ,__/\ \____/\ \____//\____\ \____\ -// \ \ \/ \/___/ \/___/ \/____/\/____/ -// \ \_\ -// \/_/ -// -// Designed, built, and released under MIT license by @mdo. Learn more at -// https://github.com/poole/poole. - -@import "poole/variables"; -@import "poole/base"; -@import "poole/type"; -@import "poole/footnotes"; -@import "poole/code"; -@import "poole/layout"; -@import "poole/footer"; -@import "poole/masthead"; -@import "poole/posts"; -@import "poole/related"; -@import "poole/pagination"; -@import "poole/message"; diff --git a/_sass/hydejack/_base-essential.scss b/_sass/hydejack/_base-essential.scss new file mode 100644 index 00000000000..96b67787a4c --- /dev/null +++ b/_sass/hydejack/_base-essential.scss @@ -0,0 +1,20 @@ +/* + * Global resets + * + * Update the foundational and global aspects of the page. + */ +@media (min-width: 48em) { + html { + font-size: 16px; + } +} +@media (min-width: 58em) { + html { + font-size: 18px; + } +} + +.sr-only { + // will be properly styled in the non-essential part + display: none; +} diff --git a/_sass/hydejack/_globals.scss b/_sass/hydejack/_base.scss similarity index 60% rename from _sass/hydejack/_globals.scss rename to _sass/hydejack/_base.scss index 9de8e590259..7992d077106 100644 --- a/_sass/hydejack/_globals.scss +++ b/_sass/hydejack/_base.scss @@ -1,17 +1,10 @@ -/* - * Global resets - * - * Update the foundational and global aspects of the page. - */ -@media (min-width: 48em) { - html { - font-size: 16px; - } -} -@media (min-width: 58em) { - html { - font-size: 18px; - } +body { + /* Prevent side-scrolling on mobile */ + overflow-x: hidden; + position: relative; + + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } a { @@ -23,6 +16,12 @@ a { text-decoration: none; border-bottom: 0.18rem solid; } + + &.menu { + &:hover, &:focus { + border-bottom: none; + } + } } h1 > a { @@ -30,6 +29,7 @@ h1 > a { } .sr-only { + display: static; position: absolute; width: 1px; height: 1px; diff --git a/_sass/hydejack/_me-essential.scss b/_sass/hydejack/_me-essential.scss new file mode 100644 index 00000000000..9ff09d9c0bf --- /dev/null +++ b/_sass/hydejack/_me-essential.scss @@ -0,0 +1,3 @@ +.me { + float: right; +} diff --git a/_sass/hydejack/_me.scss b/_sass/hydejack/_me.scss index d92280b0b11..fba544694be 100644 --- a/_sass/hydejack/_me.scss +++ b/_sass/hydejack/_me.scss @@ -5,7 +5,6 @@ border-radius: 100%; position: relative; z-index: 2; - float: right; } @media (min-width: 38em) { .me { diff --git a/_sass/hydejack/_menu.scss b/_sass/hydejack/_menu.scss index 1fc0232a116..03e400b129e 100644 --- a/_sass/hydejack/_menu.scss +++ b/_sass/hydejack/_menu.scss @@ -6,10 +6,6 @@ padding: 1.25rem 1rem ; color: #9a9a9a; z-index: 2; - - &:hover, &:focus { - border-bottom: none; - } } @media (min-width: 48em) { diff --git a/_sass/hydejack/_sidebar-essential.scss b/_sass/hydejack/_sidebar-essential.scss new file mode 100644 index 00000000000..84b1141c40a --- /dev/null +++ b/_sass/hydejack/_sidebar-essential.scss @@ -0,0 +1,67 @@ +/* + * Sidebar + * + * 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. + */ + +.backdrop { + display: none; +} + +.sidebar { + position: relative; + z-index: 4; + padding: 2rem 1rem; + color: rgba(255,255,255,.75); + background-color: #202020; + text-align: left; + min-height: 100vh; + background-size: cover; + background-position: center center; + + /* Sidebar links */ + a { + color: #fff; + } + + ul { + list-style: none; + padding-left: 0; + } +} + +.sidebar-sticky { + position: absolute; + right: 1rem; + bottom: 1rem; + left: 1rem; +} + +/* About section */ +.sidebar-about > h1 { + color: #fff; + font-size: 2rem; +} + +.sidebar-nav-item { + font-weight: bold; + display: block; + line-height: 1.75; + padding: .25rem .1rem; + border-top: 1px solid rgba(255, 255, 255, 0.23); +} + +.sidebar-social > ul { + min-height: 3.5rem; +} + +@media (min-width: 48em) { + .sidebar { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 18rem; + } +} diff --git a/_sass/hydejack/_sidebar.scss b/_sass/hydejack/_sidebar.scss index 260016a34db..03a8853e2cd 100644 --- a/_sass/hydejack/_sidebar.scss +++ b/_sass/hydejack/_sidebar.scss @@ -1,96 +1,20 @@ -/* - * Sidebar - * - * 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. - */ - -.backdrop { - display: none; -} - -.sidebar { - position: relative; - z-index: 4; - text-align: center; - padding: 2rem 1rem; - color: rgba(255,255,255,.75); - background-color: #202020; - text-align: left; - min-height: 100vh; - background-size: cover; - background-position: center center; - - /* make sidebar slightly darker to increase text readability (when using a background image) */ - &::before { - content: ""; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: rgba(32, 32, 32, .33); - background: -moz-linear-gradient(bottom, rgba(32,32,32,0) 0%, rgba(32,32,32,.5) 100%); - background: -webkit-linear-gradient(bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,.5) 100%); - background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,.5) 100%); - } - - ul { - list-style: none; - padding-left: 0; - } - - /* Sidebar links */ - a { - color: #fff; - } -} - -.sidebar-sticky { +.sidebar::before { + // make sidebar slightly darker to increase text readability (when using a background image) + content: ""; position: absolute; - right: 1rem; - bottom: 1rem; - left: 1rem; -} - -/* About section */ -.sidebar-about { - > h1 { - color: #fff; - margin-top: 0; - font-size: 2rem; - } - - code { - background-color: rgba(255, 255, 255, 0.15); - } + top: 0; + left: 0; + bottom: 0; + right: 0; + background: rgba(32, 32, 32, .33); + background: -moz-linear-gradient(bottom, rgba(32,32,32,0) 0%, rgba(32,32,32,.5) 100%); + background: -webkit-linear-gradient(bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,.5) 100%); + background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,.5) 100%); } /* Sidebar nav */ .sidebar-nav { - margin-bottom: 1rem; - > ul > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.23); } } - -.sidebar-nav-item { - font-weight: bold; - display: block; - line-height: 1.75; - padding: .25rem .1rem; - margin-left: 0; - margin-right: 0; - border-top: 1px solid rgba(255, 255, 255, 0.23); -} - -@media (min-width: 48em) { - .sidebar { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 18rem; - } -} diff --git a/_sass/hydejack/_social.scss b/_sass/hydejack/_social.scss index 788693b1ca0..6a338d970b5 100644 --- a/_sass/hydejack/_social.scss +++ b/_sass/hydejack/_social.scss @@ -1,16 +1,13 @@ .sidebar-social > ul > li { - font-size: 1.5rem; - line-height: 1.5rem; margin-bottom: 0.5rem; - margin-right: 0.35rem; display: inline-block; > a { display: inline-block; - padding: 0.4rem; - } - - &:last-child { - margin-right: 0; + font-size: 1.4rem; + line-height: 2.6rem; + text-align: center; + width: 2.6rem; + height: 2.6rem; } } diff --git a/_sass/poole/_base.scss b/_sass/poole/_base.scss deleted file mode 100755 index cfeb67cc509..00000000000 --- a/_sass/poole/_base.scss +++ /dev/null @@ -1,82 +0,0 @@ -// 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-size: $root-font-size; - line-height: $root-line-height; - - @media (min-width: $large-breakpoint) { - font-size: $large-font-size; - } -} - -body { - color: $body-color; - background-color: $body-bg; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - - /* Prevent side-scrolling on mobile */ - overflow-x: hidden; - position: relative; -} - -// No `:visited` state is required by default (browsers will use `a`) -a { - color: $link-color; - text-decoration: none; - - // `:focus` is linked to `:hover` for basic accessibility - &:hover, - &:focus { - text-decoration: underline; - } - - strong { - color: inherit; - } -} - -img { - display: block; - max-width: 100%; - margin: 0 0 1rem; - // No border radius to be consistent with code/math - // border-radius: 5px; -} - -table { - margin-bottom: 1rem; - width: 100%; - font-size: 85%; - border: 1px solid #e5e5e5; - border-collapse: collapse; -} - -td, -th { - padding: .25rem .5rem; - border: 1px solid #e5e5e5; -} - -th { - text-align: left; -} - -tbody tr:nth-child(odd) td, -tbody tr:nth-child(odd) th { - background-color: #f9f9f9; -} diff --git a/_sass/pooleparty/_base.scss b/_sass/pooleparty/_base.scss new file mode 100755 index 00000000000..3e48976d376 --- /dev/null +++ b/_sass/pooleparty/_base.scss @@ -0,0 +1,47 @@ +// 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-size: $root-font-size; + line-height: $root-line-height; + + // @media (min-width: $large-breakpoint) { + // font-size: $large-font-size; + // } +} + +body { + color: $body-color; + background-color: $body-bg; +} + +// No `:visited` state is required by default (browsers will use `a`) +a { + // color: $link-color; + text-decoration: none; + + // strong { + // color: inherit; + // } +} + +img { + display: block; + max-width: 100%; + margin: 0 0 1rem; + // No border radius to be consistent with code/math + // border-radius: 5px; +} diff --git a/_sass/poole/_code.scss b/_sass/pooleparty/_code.scss similarity index 100% rename from _sass/poole/_code.scss rename to _sass/pooleparty/_code.scss diff --git a/_sass/poole/_footer.scss b/_sass/pooleparty/_footer.scss similarity index 100% rename from _sass/poole/_footer.scss rename to _sass/pooleparty/_footer.scss diff --git a/_sass/poole/_footnotes.scss b/_sass/pooleparty/_footnotes.scss similarity index 100% rename from _sass/poole/_footnotes.scss rename to _sass/pooleparty/_footnotes.scss diff --git a/_sass/poole/_layout.scss b/_sass/pooleparty/_layout.scss similarity index 100% rename from _sass/poole/_layout.scss rename to _sass/pooleparty/_layout.scss diff --git a/_sass/poole/_masthead.scss b/_sass/pooleparty/_masthead.scss similarity index 100% rename from _sass/poole/_masthead.scss rename to _sass/pooleparty/_masthead.scss diff --git a/_sass/poole/_message.scss b/_sass/pooleparty/_message.scss similarity index 100% rename from _sass/poole/_message.scss rename to _sass/pooleparty/_message.scss diff --git a/_sass/poole/_pagination.scss b/_sass/pooleparty/_pagination.scss similarity index 100% rename from _sass/poole/_pagination.scss rename to _sass/pooleparty/_pagination.scss diff --git a/_sass/poole/_posts.scss b/_sass/pooleparty/_posts-essential.scss similarity index 84% rename from _sass/poole/_posts.scss rename to _sass/pooleparty/_posts-essential.scss index 51d45fa7d76..0b2122bd93d 100755 --- a/_sass/poole/_posts.scss +++ b/_sass/pooleparty/_posts-essential.scss @@ -3,15 +3,6 @@ // 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; - - li + li { - margin-top: .25rem; - } -} - // Blog post or page title .page-title, .post-title { diff --git a/_sass/pooleparty/_posts.scss b/_sass/pooleparty/_posts.scss new file mode 100644 index 00000000000..6bc931a9a85 --- /dev/null +++ b/_sass/pooleparty/_posts.scss @@ -0,0 +1,8 @@ +.page, +.post { + margin-bottom: 4em; + + li + li { + margin-top: .25rem; + } +} diff --git a/_sass/poole/_related.scss b/_sass/pooleparty/_related-essential.scss similarity index 51% rename from _sass/poole/_related.scss rename to _sass/pooleparty/_related-essential.scss index 2a7a6c27f22..4096c8b838e 100644 --- a/_sass/poole/_related.scss +++ b/_sass/pooleparty/_related-essential.scss @@ -1,4 +1,5 @@ // Related posts + .related { padding-top: 2rem; padding-bottom: 2rem; @@ -11,27 +12,11 @@ padding-left: 0; list-style: none; - h3 { + > h3 { margin-top: 0; } - li { - small { - font-size: 75%; - color: #999; - } - - a { - font-weight: normal; - - &:hover { - color: #268bd2; - text-decoration: none; - - small { - color: inherit; - } - } - } + > li a { + font-weight: normal; } } diff --git a/_sass/pooleparty/_related.scss b/_sass/pooleparty/_related.scss new file mode 100644 index 00000000000..41cf416469b --- /dev/null +++ b/_sass/pooleparty/_related.scss @@ -0,0 +1,8 @@ +// Related posts + +.related-posts { + > li small { + font-size: 75%; + color: #999; + } +} diff --git a/_sass/poole/_syntax.scss b/_sass/pooleparty/_syntax.scss similarity index 100% rename from _sass/poole/_syntax.scss rename to _sass/pooleparty/_syntax.scss diff --git a/_sass/pooleparty/_table.scss b/_sass/pooleparty/_table.scss new file mode 100644 index 00000000000..f0f4f689b87 --- /dev/null +++ b/_sass/pooleparty/_table.scss @@ -0,0 +1,22 @@ +table { + margin-bottom: 1rem; + width: 100%; + font-size: 85%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} + +td, +th { + padding: .25rem .5rem; + border: 1px solid #e5e5e5; +} + +th { + text-align: left; +} + +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} diff --git a/_sass/poole/_type.scss b/_sass/pooleparty/_type-essential.scss similarity index 52% rename from _sass/poole/_type.scss rename to _sass/pooleparty/_type-essential.scss index 2c1f9654ad8..37933cd7f36 100755 --- a/_sass/poole/_type.scss +++ b/_sass/pooleparty/_type-essential.scss @@ -19,38 +19,16 @@ h2 { font-size: 1.5rem; } -h3 { - margin-top: 1.5rem; - font-size: 1.25rem; -} - -h4, h5, h6 { - margin-top: 1rem; - font-size: 1rem; -} - p { margin-top: 0; margin-bottom: 1rem; } -strong { - color: #303030; -} - ul, ol, dl { margin-top: 0; margin-bottom: 1rem; } -dt { - font-weight: bold; -} - -dd { - margin-bottom: .5rem; -} - hr { position: relative; margin: 1.5rem 0; @@ -59,34 +37,6 @@ hr { border-bottom: 1px solid #fff; } -abbr { - font-size: 85%; - font-weight: bold; - color: #555; - text-transform: uppercase; - - &[title] { - cursor: help; - border-bottom: 1px dotted #e5e5e5; - } -} - -blockquote { - padding: .5rem 1rem; - margin: .8rem 0; - color: #7a7a7a; - border-left: .25rem solid #e5e5e5; - - p:last-child { - margin-bottom: 0; - } - - @media (min-width: 30em) { - padding-right: 5rem; - padding-left: 1.25rem; - } -} - // Custom type // // Extend paragraphs with `.lead` for larger introductory text. diff --git a/_sass/pooleparty/_type.scss b/_sass/pooleparty/_type.scss new file mode 100644 index 00000000000..c54f63bdd23 --- /dev/null +++ b/_sass/pooleparty/_type.scss @@ -0,0 +1,49 @@ +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} + +h4, h5, h6 { + margin-top: 1rem; + font-size: 1rem; +} + +strong { + color: #303030; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: .5rem; +} + +abbr { + font-size: 85%; + font-weight: bold; + color: #555; + text-transform: uppercase; + + &[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; + } +} + +blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: #7a7a7a; + border-left: .25rem solid #e5e5e5; + + p:last-child { + margin-bottom: 0; + } + + @media (min-width: 30em) { + padding-right: 5rem; + padding-left: 1.25rem; + } +} diff --git a/_sass/poole/_variables.scss b/_sass/pooleparty/_variables.scss similarity index 100% rename from _sass/poole/_variables.scss rename to _sass/pooleparty/_variables.scss diff --git a/public/css/non-essentials.scss b/public/css/non-essentials.scss index b4743df263d..2ba5af5502f 100644 --- a/public/css/non-essentials.scss +++ b/public/css/non-essentials.scss @@ -3,26 +3,35 @@ # only Main files contain this front matter, not partials. --- -@import "poole/variables"; +@import "pooleparty/variables"; -// @import "poole/base"; -// @import "poole/type"; -@import "poole/footnotes"; -// @import "poole/syntax"; -// @import "poole/layout"; -@import "poole/footer"; -@import "poole/masthead"; -// @import "poole/posts"; -// @import "poole/related"; -@import "poole/pagination"; -// @import "poole/message"; +// @import "pooleparty/base"; +// @import "pooleparty/type-essential"; +@import "pooleparty/type"; +@import "pooleparty/table"; +@import "pooleparty/footnotes"; +@import "pooleparty/code"; +// @import "pooleparty/layout"; +@import "pooleparty/footer"; +@import "pooleparty/masthead"; +// @import "pooleparty/posts-essential"; +@import "pooleparty/posts"; +@import "pooleparty/pagination"; +// @import "pooleparty/related-essential"; +@import "pooleparty/related"; +// @import "pooleparty/message"; -// @import "hydejack/globals"; +// @import "hydejack/base-essential"; +@import "hydejack/base"; +// @import "hydejack/sidebar-essential"; +@import "hydejack/sidebar"; @import "hydejack/aside"; @import "hydejack/drawer"; @import "hydejack/social"; +// @import "hydejack/menu"; // @import "hydejack/content"; -// @import "hydejack/me"; +// @import "hydejack/me-essential"; +@import "hydejack/me"; @import "hydejack/katex"; @import "jekyll-github";