steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Improve page and archive layouts (#1166)

Browse Source 
* Fix collapsed white-space above pagination links

* Improve `page` and `archive` layout
- Center main content on page
- Harmonize sidebar columns to be equal widths

Fixes #1155

* Update CHANGELOG and history

* Position and align right sidebar with the top of the main content

* Offset right sidebar at `$large` viewport

* Add TOC bottom include test post

* Add right sidebar styling edits to documentation site

* Add TOC bottom include test post
This commit is contained in:
Michael Rose
2017-08-08 14:41:46 -04:00
committed by GitHub
parent edba2c3a88
commit 3b3905c44f
14 changed files with 259 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/_sass/minimal-mistakes/_archive.scss
View File

@ -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;

1
docs/_sass/minimal-mistakes/_navigation.scss
View File

@ -58,6 +58,7 @@
.pagination {
@include clearfix();
float: left;
margin-top: 1em;
padding-top: 1em;
width: 100%;

19
docs/_sass/minimal-mistakes/_page.scss
View File

@ -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 {

13
docs/_sass/minimal-mistakes/_sidebar.scss
View File

@ -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;
}
}