From 5c9621dbe59b4c5086e1431d5f40b48faf495291 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 08:56:21 -0400 Subject: [PATCH 1/8] Fix collapsed white-space above pagination links --- _sass/minimal-mistakes/_navigation.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss index 3e2984ad7ba5..172a3384588b 100644 --- a/_sass/minimal-mistakes/_navigation.scss +++ b/_sass/minimal-mistakes/_navigation.scss @@ -58,6 +58,7 @@ .pagination { @include clearfix(); + float: left; margin-top: 1em; padding-top: 1em; width: 100%; From cebdd16cf3ba1bf3fd0dd4d140dfc7d07445face Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 09:05:14 -0400 Subject: [PATCH 2/8] Improve `page` and `archive` layout - Center main content on page - Harmonize sidebar columns to be equal widths Fixes #1155 --- _sass/minimal-mistakes/_archive.scss | 24 +++++++----------------- _sass/minimal-mistakes/_page.scss | 18 ++++++++++++------ _sass/minimal-mistakes/_sidebar.scss | 8 +++----- 3 files changed, 22 insertions(+), 28 deletions(-) diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss index 3349bcae5f7e..301b2606bd8f 100644 --- a/_sass/minimal-mistakes/_archive.scss +++ b/_sass/minimal-mistakes/_archive.scss @@ -5,14 +5,15 @@ .archive { margin-bottom: 2em; - @include breakpoint($medium) { - width: span(12 of 12); - } - @include breakpoint($large) { float: right; - padding-left: gutter(0.5 of 12); - width: span(10 of 12); + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; } a { @@ -84,17 +85,6 @@ ========================================================================== */ .list__item { - @include breakpoint($medium) { - padding-right: $right-sidebar-width-narrow; - } - - @include breakpoint($large) { - padding-right: $right-sidebar-width; - } - - @include breakpoint($x-large) { - padding-right: $right-sidebar-width-wide; - } .page__meta { margin: 0 0 4px; diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index eb682732636f..c6ff92a5bfbf 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -24,9 +24,13 @@ @include breakpoint($large) { float: right; - width: span(10 of 12); - padding-left: gutter(0.5 of 12); - padding-right: gutter(2 of 12); + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; } .page__inner-wrap { @@ -409,9 +413,11 @@ @include breakpoint($large) { float: right; - width: span(10 of 12); - padding-left: gutter(0.5 of 12); - padding-right: gutter(2 of 12); + width: calc(100% - #{$right-sidebar-width-narrow}); + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); } a { diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss index fb47cea097ef..24f8addad7e2 100644 --- a/_sass/minimal-mistakes/_sidebar.scss +++ b/_sass/minimal-mistakes/_sidebar.scss @@ -31,10 +31,6 @@ } } - @include breakpoint($x-large) { - padding-right: 0; - } - h2, h3, h4, h5, h6 { margin-bottom: 0; font-family: $sans-serif-narrow; @@ -58,12 +54,14 @@ position: relative; float: right; width: $right-sidebar-width-narrow; - margin-left: span(0.5 of 12); + margin-right: -1 * $right-sidebar-width-narrow; + padding-left: 1em; z-index: 10; } @include breakpoint($x-large) { width: $right-sidebar-width; + margin-right: -1 * $right-sidebar-width; } } From f97df6f50654fb2ec3b9b897b16101e7f827bcbb Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 09:14:42 -0400 Subject: [PATCH 3/8] Update CHANGELOG and history --- CHANGELOG.md | 1 + docs/_docs/18-history.md | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a3c431b87df..59ed3fbe44e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Add Greek localized UI text strings. [#1159](https://github.com/mmistakes/minimal-mistakes/pull/1159) - Remove blank YAML Front Matter from JavaScript banner. [#1158](https://github.com/mmistakes/minimal-mistakes/issues/1158) +- Improve `page` and `archive` layouts to visually center main content and harmonize sidebar widths and placement. [#1166](https://github.com/mmistakes/minimal-mistakes/pull/1166) ## [4.5.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.0) diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md index 52d380780dff..704af423b862 100644 --- a/docs/_docs/18-history.md +++ b/docs/_docs/18-history.md @@ -4,7 +4,7 @@ permalink: /docs/history/ excerpt: "Change log of enhancements and bug fixes made to the theme." sidebar: nav: docs -last_modified_at: 2017-08-06T10:43:26-04:00 +last_modified_at: 2017-08-08T09:14:21-04:00 --- ## Unreleased @@ -13,6 +13,7 @@ last_modified_at: 2017-08-06T10:43:26-04:00 - Add Greek localized UI text strings. [#1159](https://github.com/mmistakes/minimal-mistakes/pull/1159) - Remove blank YAML Front Matter from JavaScript banner. [#1158](https://github.com/mmistakes/minimal-mistakes/issues/1158) +- Improve `page` and `archive` layouts to visually center main content and harmonize sidebar widths and placement. [#1166](https://github.com/mmistakes/minimal-mistakes/pull/1166) ## [4.5.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.0) From b40f72185f25a72f662a3239a8d15fa8d32b89b4 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 12:52:14 -0400 Subject: [PATCH 4/8] Position and align right sidebar with the top of the main content --- _sass/minimal-mistakes/_page.scss | 1 + _sass/minimal-mistakes/_sidebar.scss | 6 +++--- test/_posts/2012-01-03-layout-table-of-contents-post.md | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index c6ff92a5bfbf..443a0de1f15a 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -43,6 +43,7 @@ .page__content, .page__meta, .page__share { + position: relative; float: left; margin-left: 0; margin-right: 0; diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss index 24f8addad7e2..aa7f4b5f7837 100644 --- a/_sass/minimal-mistakes/_sidebar.scss +++ b/_sass/minimal-mistakes/_sidebar.scss @@ -51,10 +51,10 @@ margin-bottom: 1em; @include breakpoint($large) { - position: relative; - float: right; + position: absolute; + top: 0; + right: 0; width: $right-sidebar-width-narrow; - margin-right: -1 * $right-sidebar-width-narrow; padding-left: 1em; z-index: 10; } diff --git a/test/_posts/2012-01-03-layout-table-of-contents-post.md b/test/_posts/2012-01-03-layout-table-of-contents-post.md index a8fc7988b9d4..04891ba6092a 100644 --- a/test/_posts/2012-01-03-layout-table-of-contents-post.md +++ b/test/_posts/2012-01-03-layout-table-of-contents-post.md @@ -7,8 +7,6 @@ tags: - table of contents --- -{% include toc title="Unique Title" icon="file-text" %} - Testing Kramdown auto-generated table of contents with unique title and icon assigned in the include like so: ```liquid @@ -98,3 +96,5 @@ Make any link standout more when applying the `.btn` class. **Watch out!** You can also add notices by appending `{: .notice}` to a paragraph. {: .notice} + +{% include toc title="Unique Title" icon="file-text" %} \ No newline at end of file From 567cf18eb92cf57a9078b28d49d5ace65f5cc79c Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 14:24:24 -0400 Subject: [PATCH 5/8] Offset right sidebar at `$large` viewport --- _sass/minimal-mistakes/_sidebar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss index aa7f4b5f7837..7dab5fa1f4fa 100644 --- a/_sass/minimal-mistakes/_sidebar.scss +++ b/_sass/minimal-mistakes/_sidebar.scss @@ -55,6 +55,7 @@ top: 0; right: 0; width: $right-sidebar-width-narrow; + margin-right: -1 * $right-sidebar-width-narrow; padding-left: 1em; z-index: 10; } From 4c0d70a35dc7608202ead55e3ef3859a02576737 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 14:24:52 -0400 Subject: [PATCH 6/8] Add TOC bottom include test post --- ...03-layout-table-of-contents-bottom-post.md | 100 ++++++++++++++++++ ...012-01-03-layout-table-of-contents-post.md | 6 +- 2 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 test/_posts/2012-01-03-layout-table-of-contents-bottom-post.md diff --git a/test/_posts/2012-01-03-layout-table-of-contents-bottom-post.md b/test/_posts/2012-01-03-layout-table-of-contents-bottom-post.md new file mode 100644 index 000000000000..09e985ce28bf --- /dev/null +++ b/test/_posts/2012-01-03-layout-table-of-contents-bottom-post.md @@ -0,0 +1,100 @@ +--- +title: "Layout: Post with Table Of Contents Included at Bottom" +header: + image: assets/images/unsplash-image-9.jpg + caption: "Photo credit: [**Unsplash**](https://unsplash.com)" +tags: + - table of contents +--- + +Testing Kramdown auto-generated table of contents included near the end of post content. If positioned correctly with CSS, it should appear in aligned (and to the right) of the main content. + +```liquid +{% raw %}{% include toc title="Unique Title" icon="file-text" %}{% endraw %} +``` + +## HTML Elements + +Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs. + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +## Body text + +Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam. + +![Smithsonian Image]({{ site.url }}{{ site.baseurl }}/assets/images/3953273590_704e3899d5_m.jpg) +{: .image-right} + +*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. + +HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. + +### Blockquotes + +> Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. + +## List Types + +### Ordered Lists + +1. Item one + 1. sub item one + 2. sub item two + 3. sub item three +2. Item two + +### Unordered Lists + +* Item one +* Item two +* Item three + +## Tables + +| Header1 | Header2 | Header3 | +|:--------|:-------:|--------:| +| cell1 | cell2 | cell3 | +| cell4 | cell5 | cell6 | +|---- +| cell1 | cell2 | cell3 | +| cell4 | cell5 | cell6 | +|===== +| Foot1 | Foot2 | Foot3 +{: rules="groups"} + +## Code Snippets + +```css +#container { + float: left; + margin: 0 -240px 0 0; + width: 100%; +} +``` + +## Buttons + +Make any link standout more when applying the `.btn` class. + +```html +Success Button +``` + + + + + + + +## Notices + +**Watch out!** You can also add notices by appending `{: .notice}` to a paragraph. +{: .notice} + +{% include toc title="Unique Title" icon="file-text" %} \ No newline at end of file diff --git a/test/_posts/2012-01-03-layout-table-of-contents-post.md b/test/_posts/2012-01-03-layout-table-of-contents-post.md index 04891ba6092a..eaa7cc2285e4 100644 --- a/test/_posts/2012-01-03-layout-table-of-contents-post.md +++ b/test/_posts/2012-01-03-layout-table-of-contents-post.md @@ -7,6 +7,8 @@ tags: - table of contents --- +{% include toc title="Unique Title" icon="file-text" %} + Testing Kramdown auto-generated table of contents with unique title and icon assigned in the include like so: ```liquid @@ -95,6 +97,4 @@ Make any link standout more when applying the `.btn` class. ## Notices **Watch out!** You can also add notices by appending `{: .notice}` to a paragraph. -{: .notice} - -{% include toc title="Unique Title" icon="file-text" %} \ No newline at end of file +{: .notice} \ No newline at end of file From 5cb244a9928bb4a02113a86d18be3967f3ffa365 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 14:41:16 -0400 Subject: [PATCH 7/8] Add right sidebar styling edits to documentation site --- docs/_sass/minimal-mistakes/_archive.scss | 24 ++++++-------------- docs/_sass/minimal-mistakes/_navigation.scss | 1 + docs/_sass/minimal-mistakes/_page.scss | 19 +++++++++++----- docs/_sass/minimal-mistakes/_sidebar.scss | 13 +++++------ 4 files changed, 27 insertions(+), 30 deletions(-) diff --git a/docs/_sass/minimal-mistakes/_archive.scss b/docs/_sass/minimal-mistakes/_archive.scss index 3349bcae5f7e..301b2606bd8f 100644 --- a/docs/_sass/minimal-mistakes/_archive.scss +++ b/docs/_sass/minimal-mistakes/_archive.scss @@ -5,14 +5,15 @@ .archive { margin-bottom: 2em; - @include breakpoint($medium) { - width: span(12 of 12); - } - @include breakpoint($large) { float: right; - padding-left: gutter(0.5 of 12); - width: span(10 of 12); + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; } a { @@ -84,17 +85,6 @@ ========================================================================== */ .list__item { - @include breakpoint($medium) { - padding-right: $right-sidebar-width-narrow; - } - - @include breakpoint($large) { - padding-right: $right-sidebar-width; - } - - @include breakpoint($x-large) { - padding-right: $right-sidebar-width-wide; - } .page__meta { margin: 0 0 4px; diff --git a/docs/_sass/minimal-mistakes/_navigation.scss b/docs/_sass/minimal-mistakes/_navigation.scss index 3e2984ad7ba5..172a3384588b 100644 --- a/docs/_sass/minimal-mistakes/_navigation.scss +++ b/docs/_sass/minimal-mistakes/_navigation.scss @@ -58,6 +58,7 @@ .pagination { @include clearfix(); + float: left; margin-top: 1em; padding-top: 1em; width: 100%; diff --git a/docs/_sass/minimal-mistakes/_page.scss b/docs/_sass/minimal-mistakes/_page.scss index eb682732636f..443a0de1f15a 100644 --- a/docs/_sass/minimal-mistakes/_page.scss +++ b/docs/_sass/minimal-mistakes/_page.scss @@ -24,9 +24,13 @@ @include breakpoint($large) { float: right; - width: span(10 of 12); - padding-left: gutter(0.5 of 12); - padding-right: gutter(2 of 12); + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; } .page__inner-wrap { @@ -39,6 +43,7 @@ .page__content, .page__meta, .page__share { + position: relative; float: left; margin-left: 0; margin-right: 0; @@ -409,9 +414,11 @@ @include breakpoint($large) { float: right; - width: span(10 of 12); - padding-left: gutter(0.5 of 12); - padding-right: gutter(2 of 12); + width: calc(100% - #{$right-sidebar-width-narrow}); + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); } a { diff --git a/docs/_sass/minimal-mistakes/_sidebar.scss b/docs/_sass/minimal-mistakes/_sidebar.scss index fb47cea097ef..7dab5fa1f4fa 100644 --- a/docs/_sass/minimal-mistakes/_sidebar.scss +++ b/docs/_sass/minimal-mistakes/_sidebar.scss @@ -31,10 +31,6 @@ } } - @include breakpoint($x-large) { - padding-right: 0; - } - h2, h3, h4, h5, h6 { margin-bottom: 0; font-family: $sans-serif-narrow; @@ -55,15 +51,18 @@ margin-bottom: 1em; @include breakpoint($large) { - position: relative; - float: right; + position: absolute; + top: 0; + right: 0; width: $right-sidebar-width-narrow; - margin-left: span(0.5 of 12); + margin-right: -1 * $right-sidebar-width-narrow; + padding-left: 1em; z-index: 10; } @include breakpoint($x-large) { width: $right-sidebar-width; + margin-right: -1 * $right-sidebar-width; } } From 1f5886713e5e06bf78625130b1b216e749f00dfd Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 8 Aug 2017 14:41:22 -0400 Subject: [PATCH 8/8] Add TOC bottom include test post --- ...03-layout-table-of-contents-bottom-post.md | 100 ++++++++++++++++++ ...012-01-03-layout-table-of-contents-post.md | 2 +- 2 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 docs/_posts/2012-01-03-layout-table-of-contents-bottom-post.md diff --git a/docs/_posts/2012-01-03-layout-table-of-contents-bottom-post.md b/docs/_posts/2012-01-03-layout-table-of-contents-bottom-post.md new file mode 100644 index 000000000000..09e985ce28bf --- /dev/null +++ b/docs/_posts/2012-01-03-layout-table-of-contents-bottom-post.md @@ -0,0 +1,100 @@ +--- +title: "Layout: Post with Table Of Contents Included at Bottom" +header: + image: assets/images/unsplash-image-9.jpg + caption: "Photo credit: [**Unsplash**](https://unsplash.com)" +tags: + - table of contents +--- + +Testing Kramdown auto-generated table of contents included near the end of post content. If positioned correctly with CSS, it should appear in aligned (and to the right) of the main content. + +```liquid +{% raw %}{% include toc title="Unique Title" icon="file-text" %}{% endraw %} +``` + +## HTML Elements + +Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs. + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +## Body text + +Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam. + +![Smithsonian Image]({{ site.url }}{{ site.baseurl }}/assets/images/3953273590_704e3899d5_m.jpg) +{: .image-right} + +*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. + +HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. + +### Blockquotes + +> Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. + +## List Types + +### Ordered Lists + +1. Item one + 1. sub item one + 2. sub item two + 3. sub item three +2. Item two + +### Unordered Lists + +* Item one +* Item two +* Item three + +## Tables + +| Header1 | Header2 | Header3 | +|:--------|:-------:|--------:| +| cell1 | cell2 | cell3 | +| cell4 | cell5 | cell6 | +|---- +| cell1 | cell2 | cell3 | +| cell4 | cell5 | cell6 | +|===== +| Foot1 | Foot2 | Foot3 +{: rules="groups"} + +## Code Snippets + +```css +#container { + float: left; + margin: 0 -240px 0 0; + width: 100%; +} +``` + +## Buttons + +Make any link standout more when applying the `.btn` class. + +```html +Success Button +``` + + + + + + + +## Notices + +**Watch out!** You can also add notices by appending `{: .notice}` to a paragraph. +{: .notice} + +{% include toc title="Unique Title" icon="file-text" %} \ No newline at end of file diff --git a/docs/_posts/2012-01-03-layout-table-of-contents-post.md b/docs/_posts/2012-01-03-layout-table-of-contents-post.md index a8fc7988b9d4..eaa7cc2285e4 100644 --- a/docs/_posts/2012-01-03-layout-table-of-contents-post.md +++ b/docs/_posts/2012-01-03-layout-table-of-contents-post.md @@ -97,4 +97,4 @@ Make any link standout more when applying the `.btn` class. ## Notices **Watch out!** You can also add notices by appending `{: .notice}` to a paragraph. -{: .notice} +{: .notice} \ No newline at end of file