Improve right sidebar styling to better handle position: fixed content

This commit is contained in:
Michael Rose 2016-03-16 16:18:37 -04:00
parent 2b1a38715c
commit 1ce8926272
7 changed files with 29 additions and 31 deletions

View file

@ -5,14 +5,8 @@
.archive { .archive {
margin-bottom: 2em; margin-bottom: 2em;
@include breakpoint($medium) { @include breakpoint($medium) {
@include span(10 last); @include span(10 of 12 last);
} @include suffix(3 of 12);
}
.archive__item {
// keep content from going to wide when toc is disabled
@include breakpoint($large) {
max-width: span(7 of 10);
} }
} }

View file

@ -12,7 +12,8 @@
.page { .page {
@include breakpoint($medium) { @include breakpoint($medium) {
@include span(10 last); @include span(10 of 12 last);
padding-right: $right-sidebar-width;
} }
} }
@ -22,17 +23,10 @@
} }
.page__content { .page__content {
position: relative;
p, li { p, li {
font-size: 16px; font-size: 16px;
} }
// keep content from going to wide when toc is disabled
@include breakpoint($large) {
> h1, > h2, > h3, > h4, > h5, > h6, > hr,
> p, > ul, > ol, > blockquote, > table, > figure,
> div, > section, > img, > video, > form {
max-width: span(7 of 10);
}
}
} }
.page__hero { .page__hero {

View file

@ -6,8 +6,8 @@
@include breakpoint($medium) { @include breakpoint($medium) {
display: block; display: block;
margin-bottom: 1em; margin-bottom: 1em;
@include span(2); @include span(2 of 12);
@include suffix(0.5); @include suffix(0.5 of 12);
} }
h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 {
font-family: $sans-serif-narrow; font-family: $sans-serif-narrow;

View file

@ -9,9 +9,14 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
background-color: #fff; background-color: #fff;
&.sticky {
@include breakpoint($large) { @include breakpoint($large) {
@include span(3 of 10 last); position: fixed;
@include prefix(0.25); top: 0;
right: calc(50% - 512px + 2em); // 50% - 1/2 of wrapper's max-width + wrapper padding
width: $right-sidebar-width;
padding-left: 2em;
}
} }
} }

View file

@ -131,7 +131,9 @@ body:hover .visually-hidden button {
/* file page content container */ /* file page content container */
.full { .full {
max-width: 100% !important; @include breakpoint($large){
margin-right: -1 * $right-sidebar-width;
}
} }
/* /*

View file

@ -81,18 +81,21 @@ $x-large : 1440px;
Grid Grid
========================================================================== */ ========================================================================== */
$right-sidebar-width : 300px;
$susy: ( $susy: (
columns: 12, columns: 12,
// column-width: 90px,
gutters: 1/4, gutters: 1/4,
math: fluid, math: fluid,
output: float, output: float,
gutter-position: inside, gutter-position: after,
container: $large, container: $large,
global-box-sizing: border-box, global-box-sizing: border-box,
// debug: ( debug: (
// image: show, image: show,
// color: blue, color: blue,
// output: overlay, output: overlay,
// toggle: top right, toggle: top right,
// ), ),
); );

File diff suppressed because one or more lines are too long