From 4a61f5a17dda63d96f24be2af3da4bc362dd4496 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Dec 2013 20:09:33 -0800 Subject: [PATCH] start in on v2 --- 404.html | 64 +---- README.md | 46 +-- _includes/head.html | 20 +- _includes/masthead.html | 19 ++ _layouts/default.html | 20 +- _layouts/page.html | 8 + _layouts/post.html | 2 +- _posts/2013-12-28-hello-world.md | 28 -- _posts/2013-12-28-introducing-hyde.md | 37 +++ public/css/hyde.css | 300 +------------------- public/css/poole.css | 389 ++++++++++++++++++++++++++ 11 files changed, 500 insertions(+), 433 deletions(-) create mode 100644 _includes/masthead.html create mode 100644 _layouts/page.html delete mode 100644 _posts/2013-12-28-hello-world.md create mode 100644 _posts/2013-12-28-introducing-hyde.md create mode 100644 public/css/poole.css diff --git a/404.html b/404.html index 09a9d8b9e43..5f5b9bfecef 100644 --- a/404.html +++ b/404.html @@ -1,55 +1,9 @@ - - - - - - - - - Hyde, a Jekyll theme - - - - - - - - - - - - - - - -
-
-

Hyde

-

An elegant open source and mobile first theme for Jekyll. Made by @mdo.

- -
- -

© 2013. All rights reserved.

-
- -
-
- -
-

404: Page not found

-

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Visit the home page to see if you can find it manually. Thanks!

-
-

Heads up!

-

This is a basic 404 page for use with GitHub Pages. It's source code is not generated by Jekyll.

-
- - - +--- +layout: default +title: "404: Page not found" +--- + +
+

404: Page not found

+

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

+
diff --git a/README.md b/README.md index 628bb61fa62..4681c484ad9 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,34 @@ -# [Hyde](http://andhyde.com) +# Hyde -An elegant open source, mobile first theme for [Jekyll](https://github.com/mojombo/jekyll). It includes lightweight styles and placeholder content to get you up and running with a simple blog in no time. +Hyde is a [Jekyll](https://github.com/mojombo/jekyll) theme with a fluid landscape layout. It's based on [Poole](https://github.com/poole/poole), the Jekyll butler. ![Hyde screenshot](https://f.cloud.github.com/assets/98681/1818325/da6489d8-6ff5-11e3-9b4f-c56b92013e9a.png) -## Usage +## Installation -### 1. Install Jekyll +### Requires Poole -Hyde is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward: +To get started, download [Poole](https://github.com/poole/poole). See [the usage guidelines](https://github.com/poole/poole#usage) for how to install and get up and running with Jekyll and Poole. -```bash -$ gem install jekyll -``` - -**Windows users:** Windows users have a bit more work to do, but luckily [@juthilo](https://github.com/juthilo) has your back with his [Run Jekyll on Windows](https://github.com/juthilo/run-jekyll-on-windows) guide. - -You may also need to install Pygments, the Python syntax highlighter for code snippets that places nicely with Jekyll. Read more about this [in the Jekyll docs](http://jekyllrb.com/docs/templates/#code_snippet_highlighting). - -### 2a. Quick start - -To help anyone with any level of familiarity with Jekyll quickly get started, Hyde includes everything you need for a basic Jekyll site. To that end, just download Hyde and start up Jekyll. +### Enabling Hyde -### 2b. Roll your own Jekyll site +Copy over the included files to turn any vanilla Poole site into a Hyde site. -Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download Hyde and then copy what you need (likely `_layouts/`, `*.html` files, `atom.xml` for RSS, and `public/` for CSS, JS, etc.). - -### 3. Running locally - -To see your Jekyll site with Hyde applied, start a Jekyll server. In Terminal, from `/hyde` (or whatever your Jekyll site's root directory is named): - -```bash -$ jekyll serve -``` +- Replace `_includes/` with the included folder of the same name (will replace `_includes/head.html` and add `_includes/sidebar.html`) +- Replace `_layouts/default.html` with the included file of the same name +- Move `public/css/hyde.css` to `public/css/` -Open in your browser, and voilà. You're done. +Then, start up your Jekyll server and go! ## Options -Hyde includes a few options, typically applied via classes on the `` element. +Hyde includes some customizable options, typically applied via classes on the `` element. ### Themes -As of v1.1, Hyde ships with optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). In Hyde, a theme simply changes the sidebar's background color and the color of links within blog posts. Here's the red theme in action: +Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links). ![Hyde in red](https://f.cloud.github.com/assets/98681/1818326/da64f56c-6ff5-11e3-9643-7d0c18157dec.png) @@ -52,7 +36,7 @@ There are eight themes available at this time. ![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png) -To use a theme, add anyone of the available theme classes to the `` element like so: +To use a theme, add anyone of the available theme classes to the `` element in the `default.html` layout, like so: ```html @@ -60,7 +44,7 @@ To use a theme, add anyone of the available theme classes to the `` elemen ``` -To create your own theme, look to the Themes section of [Hyde's CSS](https://github.com/mdo/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. +To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. ### Reverse layout diff --git a/_includes/head.html b/_includes/head.html index e4988c095db..08abf02929b 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,21 +1,27 @@ + + + - - {% if page.title %}{{ page.title }} · {% endif %} - {{ site.tagline }} + {% if page.title %} {{ page.title }} + {% else %} + {{ site.title }} + {% endif %} + · {{ site.tagline }} - + - + + - - + + diff --git a/_includes/masthead.html b/_includes/masthead.html new file mode 100644 index 00000000000..8e7ea0a0836 --- /dev/null +++ b/_includes/masthead.html @@ -0,0 +1,19 @@ +
+
+

{{ site.title }}

+

{{ site.description }}

+ +
+ +

© 2014. {{ site.author.name }} All rights reserved.

+
+
+
diff --git a/_layouts/default.html b/_layouts/default.html index 2057f844d21..7adfdfd2f77 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -5,25 +5,7 @@ -
-
-

{{ site.title }}

-

{{ site.description }}

- -
- -

© 2014. {{ site.author.name }} All rights reserved.

-
-
-
+ {% include masthead.html %}
{{ content }} diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 00000000000..4e0d4ebf09e --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,8 @@ +--- +layout: default +--- + +
+

{{ page.title }}

+ {{ content }} +
diff --git a/_layouts/post.html b/_layouts/post.html index 4837ab9e95c..2a6c7c1d9d3 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -3,7 +3,7 @@ ---
-

{{ page.title }}

+

{{ page.title }}

{{ page.date | date_to_string }} {{ content }}
diff --git a/_posts/2013-12-28-hello-world.md b/_posts/2013-12-28-hello-world.md deleted file mode 100644 index b826298883e..00000000000 --- a/_posts/2013-12-28-hello-world.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: post -title: Hello, world! ---- - -Welcome to [Hyde](http://andhyde.com), the perfect companion to [Jekyll](http://jekyllrb.com), the popular static site generator. 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. - -### Features - -* Complete Jekyll setup included (layouts, config, 404, RSS feed, posts, and page) -* [Eight optional color schemes](https://github.com/mdo/hyde#themes), available via `` classes -* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/mdo/hyde#reverse-layout) (right sidebar), available via `` classes -* Mobile first design and development, so it works great on all devices -* Support for a wide gamut of HTML elements -* Related posts (time-based, because Jekyll) below each post -* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter) - -### Browser support - -Hyde is a rather forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above. - -### Documentation - -Docs for setting up and customizing Hyde can be found in the [project readme on GitHub](https://github.com/mdo/hyde#readme). - -### Download - -Find out more and [download a copy](https://github.com/mdo/hyde) today from GitHub. diff --git a/_posts/2013-12-28-introducing-hyde.md b/_posts/2013-12-28-introducing-hyde.md new file mode 100644 index 00000000000..2033b55f982 --- /dev/null +++ b/_posts/2013-12-28-introducing-hyde.md @@ -0,0 +1,37 @@ +--- +layout: post +title: Introducing Hyde +--- + +Hyde is a [Jekyll](http://jekyllrb.com) theme with a fluid landscape layout. It's based on [Poole](https://github.com/poole/poole), the Jekyll butler, and is designed to showcase your content first and foremost with extraneous information hidden offscreen until the reader requests it. + +### Built on Poole + +Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Hyde here) includes the following: + +* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about)) +* Mobile friendly design and development +* Easily scalable text and component sizing with `rem` units in the CSS +* Support for a wide gamut of HTML elements +* Related posts (time-based, because Jekyll) below each post +* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter) + +### Hyde features + +In addition to the features of Poole, Lanyon adds the following: + +* Sidebar includes support for textual modules and a dynamically generated navigation with active link support +* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `` classes +* [Eight optional color schemes](https://github.com/poole/hyde#themes), available via `` classes + +[Head to the readme](https://github.com/poole/hyde#readme) to learn more. + +### Browser support + +Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above. + +### Download + +Hyde is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and features requests. + +Thanks! diff --git a/public/css/hyde.css b/public/css/hyde.css index 010c4d408ca..67d44b95a1d 100644 --- a/public/css/hyde.css +++ b/public/css/hyde.css @@ -9,7 +9,7 @@ /\___/ \/__/ -Hyde is an elegant, open source, mobile first theme for Jekyll. It includes +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. @@ -20,203 +20,6 @@ Learn more at http://andhyde.com or https://github.com/mdo/hyde. */ -/* - * Contents - * - * Body resets - * Custom type - * Links - * Masthead - * Container - * Posts - * Error page - * Pagination - * 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; -} - -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; - } -} - -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; - } -} - - -/* - * Links - * - * No `:visited` state is required by default (browsers will use `a`). `:focus` - * is linked to `:hover` for basic accessibility. - */ - -a { - font-weight: 600; - color: #222; - text-decoration: none; -} -a:hover, -a:focus { - text-decoration: underline; -} - - /* * Masthead * @@ -229,11 +32,12 @@ a:focus { background-color: #2a2a2a; } .masthead-inner { - padding: 20px; + padding: 1rem; } /* Masthead content */ .masthead h1 { + color: #fff; margin-top: 0; font-family: "Abril Fatface"; } @@ -246,7 +50,7 @@ a:focus { /* Footer area of masthead */ .colophon { - margin-top: 20px; + margin-top: 1rem; color: rgba(255,255,255,.5); } .colophon-links { @@ -260,7 +64,7 @@ a:focus { /* Responsive masthead */ @media (min-width: 768px) { .masthead-inner { - padding: 40px; + padding: 2rem; } } @media (min-width: 990px) { @@ -283,7 +87,7 @@ a:focus { font-size: 64px; } .colophon { - margin-top: 40px; + margin-top: 2rem; } } @@ -304,100 +108,12 @@ a:focus { padding: 60px 0; } .container { - width: 55%; + width: 50%; margin-left: 35%; - margin-right: 10%; - } -} - - -/* - * 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; + margin-right: 15%; } } -/* 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; - } -} - -.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 diff --git a/public/css/poole.css b/public/css/poole.css new file mode 100644 index 00000000000..5532b61e2ff --- /dev/null +++ b/public/css/poole.css @@ -0,0 +1,389 @@ +/* + * ___ + * /\_ \ + * _____ ___ ___\//\ \ __ + * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ + * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ + * \ \ ,__/\ \____/\ \____//\____\ \____\ + * \ \ \/ \/___/ \/___/ \/____/\/____/ + * \ \_\ + * \/_/ + * + * In the novel, *The Strange Case of Dr. Jeykll and Mr. Hyde*, Mr. Poole is Dr. + * Jekyll's virtuous and loyal butler. Similarly, Poole is an upstanding and + * effective foundation for Jekyll themes. + * + * 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 + * Sidebar + * 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: "PT Sans", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; +} +@media (min-width: 48rem) { + html { + font-size: 20px; + } +} + +body { + color: #515151; + background-color: #fff; +} + +/* 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; +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +ul, ol { + margin-top: 0; + margin-bottom: 1rem; +} + +hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; +} + +strong { + color: #303030; +} + +abbr { + background-color: #eee; + display: inline-block; + padding: .25em; + font-size: 85%; + 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-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 #eee; +} +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; +} + + +/* + * 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: 32rem; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; +} +@media (min-width: 800px) { + .container { + max-width: 38rem; + } +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 2rem; + border-bottom: 1px solid #eee; +} +.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; +} +@media (min-width: 48rem) { + .masthead { + margin-bottom: 3rem; + } +} + + +/* + * 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; + } +}