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 {
margin-bottom: 2em;
@include breakpoint($medium) {
@include span(10 last);
}
}
.archive__item {
// keep content from going to wide when toc is disabled
@include breakpoint($large) {
max-width: span(7 of 10);
@include span(10 of 12 last);
@include suffix(3 of 12);
}
}

View file

@ -12,7 +12,8 @@
.page {
@include breakpoint($medium) {
@include span(10 last);
@include span(10 of 12 last);
padding-right: $right-sidebar-width;
}
}
@ -22,17 +23,10 @@
}
.page__content {
position: relative;
p, li {
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 {

View file

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

View file

@ -9,9 +9,14 @@
text-transform: uppercase;
letter-spacing: 1px;
background-color: #fff;
&.sticky {
@include breakpoint($large) {
@include span(3 of 10 last);
@include prefix(0.25);
position: fixed;
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 */
.full {
max-width: 100% !important;
@include breakpoint($large){
margin-right: -1 * $right-sidebar-width;
}
}
/*

View file

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

File diff suppressed because one or more lines are too long