styles/default/style

@import "compass" @import "code_styles" @import "compass/reset"

Configuration

Sizing

Margin between segments in two-column mode, padding for code/comments in single-column mode.

$common-margin: 1em

Additional padding to each column in two-column mode

$column-padding: 1em

The line length of the commentary column in both modes.

$commentary-width: 29em

Width of the commentary column. As a general tenet, we try to avoid using margins, as they get us into trouble. Particularly, when ensuring that our html/body/#document are full height and do not induce scrolling unless their content grows past the page.

$commentary-column-width: $commentary-width + ($common-margin + $column-padding) * 2

Width of the tools pulldown in two-column mode. NOT scaled by tools-font.

$tools-width: 20em

Height of the main toolbar, scaled by the size of tools-font

$tools-height: 2.1em

Radius of the code-window's and comment-column's border for one-column-layout

$border-radius: 0.4em

Width of the $code-background-gradient shadow below, applied to code-column in double-column-view. Also applied shadow-width and left and right margin to comment-column in single-comment-view

$column-shadow-width: 1em

Smooth-scale the page in viewports that are between ideal widths for two-column and one-column modes. Scaling starts at the same width as $tools-width into the code column.

$scale-steps: 136 // Approx 1 per pixel on a desktop (8.5em distance & 16px per em) $scale-min: 0.85

Scaling starts once the toolbar is flush with the main column

$scale-start-width: $commentary-column-width + $tools-width $scale-stop-width: $scale-start-width * $scale-min

We swap over to the single column layout once we hit the edge of the scaling

$single-column-toggle-width: $scale-stop-width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus lorem at mi hendrerit pretium. Maecenas ultrices dolor dictum orci lobortis fringilla. Integer ut sem at libero scelerisque commodo quis a dui. Nulla pellentesque, purus non ultricies porta, diam est fringilla orci, dignissim mattis leo erat a urna. Donec fermentum orci nec magna vehicula consectetur. Vivamus a dui eget orci malesuada elementum. Cras tempor mi sit amet ligula mollis porta. Nulla eu purus eget dui aliquet iaculis in quis massa. Phasellus sed lectus ac augue tincidunt blandit. Pellentesque et aliquam neque. Donec faucibus ultricies sem, ut mattis ante consectetur sed. In sollicitudin consectetur nisl, nec malesuada diam dictum ut. Duis feugiat, lorem in pulvinar interdum, nibh turpis lobortis erat, dictum hendrerit massa nibh molestie odio. Ut ultricies, dui a lobortis aliquam, massa diam tempus eros, eu ornare risus mi vitae elit. Integer pretium vulputate eros vitae luctus. Mauris in rhoncus nisi.

Color Scheme

$commentary-background-color: #f5fbff $commentary-foreground-color: #4a525a // Thank you, Mr. Gruber $commentary-shadow-color: #ffffff $code-background-color: #4a525a $code-foreground-color: #cbd1d8 $code-shadow-color: darken($code-background-color, 15%) $link-color: #a8614e $link-hover-foreground-color: #a8614e $link-hover-background-color: lighten(#a8614e, 43%) $link-hover-shadow-color: lighten(#a8614e, 60%) $tools-background-color: transparentize(#e6e6e6, 0.1) $tools-foreground-color: #4a525a $tools-shadow-color: #f0f0f0 $inline-code-background-color: #fbf8f3

We want a bit of depth between the columns, so make the code appear inset

$code-background-gradient: linear-gradient(left, darken($code-background-color, 15%), darken($code-background-color, 5%) 0.3 * $column-shadow-width, $code-background-color $column-shadow-width)

Typography

=commentary-font font-family: "Helvetica Neue", Helvetica, "Droid Sans", sans-serif font-weight: 300 font-size: 0.9375em line-height: 1.35 =code-font font-family: "Droid Sans Mono", Menlo, Monaco, monospace font-size: 0.75em line-height: 1.4 =header-font font-family: "HelveticaNeue-UltraLight", "Helvetica Neue", Helvetica, "Droid Sans", sans-serif font-weight: 100 letter-spacing: 0.0625em line-height: 1.25 margin-bottom: 0.5 =tools-font +commentary-font =header-font-sizes h1 font-size: 2.5em h2 font-size: 2em h3 font-size: 1.6em h4 font-size: 1.4em h5 font-size: 1.3em h6 font-size: 1.2em =disable-text-selection -webkit-touch-callout: none -webkit-user-select: none -khtml-user-select: none -moz-user-select: -moz-none -moz-user-select: none -ms-user-select: none user-select: none

Two-Column Layout

html, body height: 100%

In two-column mode, the segment is actually shifted over a full column to favor code fragments. We may or may not have either .comment or .code sections, so we need to handle all three cases.

html.one-column-layout .segment, html.two-column-layout .segment padding: ($common-margin / 2) 0 ($common-margin / 2) $commentary-column-width white-space: nowrap .comments, .code display: inline-block vertical-align: top padding: 0 ($common-margin + $column-padding) .comments margin-left: -$commentary-column-width width: $commentary-width white-space: normal .code white-space: pre html.one-column-layout .segment &:first-child padding-top: $common-margin &:last-child padding-bottom: $common-margin html.two-column-layout .segment &:first-child padding-top: $common-margin + $column-padding + $tools-height &:last-child padding-bottom: $common-margin + $column-padding @media (max-width: #{$single-column-toggle-width}) &:first-child padding-top: $common-margin &:last-child padding-bottom: $common-margin

Fit the meta info into the code column

#meta position: absolute left: $commentary-column-width + $common-margin padding: $common-margin / 4 $common-margin margin-top: $common-margin / 2 .no-js #meta margin-top: 0

Two-Column Scaling

Before we swap over to a single column layout, we scale the page down a little bit in an effort to squeeze some extra life out of it.

@for $i from 0 through $scale-steps - 2 // Skip the last step; it's exactly $scale-stop-width $scale: 1.0 - (1.0 - $scale-min) * ($i / ($scale-steps - 1)) @media (max-width: #{$scale-start-width * $scale}) html font-size: 1em * $scale

Single-Column Layout

=comment-column-layout($segment-max-width, $segment-padding...) font-size: 1em body margin: 0 auto

Conceptually, the automatic layout focuses the user on the commentary first, so we lay out that column.

max-width: $segment-max-width .segment padding: $segment-padding white-space: normal margin: 0 auto .comments, .code display: block padding: $common-margin .comments margin-left: 0 width: auto .code overflow-y: hidden overflow-x: auto .wrapper display: inline-block #document min-height: 100%

Fit the meta info into on screen, removing any overflow it creates

#meta margin-bottom: $common-margin / 2 left: 0 position: static overflow-y: hidden overflow-x: auto .file-path display: inline-block html.one-column-layout +comment-column-layout(auto, 0 $common-margin 0 $common-margin) #meta margin-left: $column-shadow-width + $common-margin // delibratly used these widths ! .no-js .segment .code margin-right: $tools-width + ( 2 * $common-margin ) .no-js body max-width: $commentary-column-width + $tools-width + ( 2 * $common-margin )

Switch modes at a little wider than a full (padded) column

@media (max-width: #{$single-column-toggle-width}) html.two-column-layout +comment-column-layout($commentary-width, 0) #meta margin-left: $common-margin * 2 html.one-column-layout #meta margin-left: $common-margin

Fit the meta info into on screen, moving it below the nav-tag

html.one-column-layout #meta, html.two-column-layout #meta margin-top: $common-margin * 2.5 html.no-js #meta margin-left: $common-margin margin-top: $common-margin / 2 .segment .code margin-left: $common-margin / 2 margin-right: $common-margin / 2 @media (max-width: #{$commentary-column-width}) html.two-column-layout #meta margin-left: $common-margin html.no-js #meta margin-left: $common-margin / 2 .segment .code margin-left: 0 margin-right: 0 .no-js #document min-height: 100% .js #document min-height: 100%

$tools-padding: ($tools-height - 1em) / 2 nav position: fixed top: 0 right: 0 width: $tools-width

Nav should be full width in single column mode

@media (max-width: #{$single-column-toggle-width}) left: 0 width: 100% .tools position: relative z-index: 100 li display: table-cell vertical-align: middle text-align: center white-space: nowrap height: $tools-height padding: 0 $tools-padding .toggle padding: 0 a display: block height: $tools-height width: $tools-height text-indent: -9001em .search width: 100% input +box-sizing(border-box) display: block width: 100% .toc +box-sizing(border-box) position: absolute z-index: 99 top: $tools-height bottom: 0 width: 100% overflow-x: hidden overflow-y: auto li position: relative .label display: block line-height: 2em padding: 0 $tools-padding 0 $tools-padding li li .label padding-left: $tools-padding * 2 li li li .label padding-left: $tools-padding * 3 li li li li .label padding-left: $tools-padding * 4 li li li li li .label padding-left: $tools-padding * 5 li li li li li li .label padding-left: $tools-padding * 6 .no-js nav @media (max-width: #{$single-column-toggle-width}) position: relative .toc top: 0

Behavior

$navigation-shift-duration: 150ms

In either mode, we need to expand the nav's height when showing the table of contents (we don't want a blank div getting in the way of interaction)

nav +transition(height 0 $navigation-shift-duration) .tools .toc-toggle +transition(background $navigation-shift-duration) &.active +transition(height 0 0) height: 100% .no-js nav +transition(height 0 0) height: 100%

In two-column mode, we slide the table of contents in from the right

nav .toc +transition(right $navigation-shift-duration) right: -100% nav.active .toc, .no-js nav .toc right: 0

In single column mode, we slide in from the left (and also pop the body)

@media (max-width: #{$single-column-toggle-width}) nav .toc +transition(left $navigation-shift-duration) right: auto left: -100% nav.active .toc, .no-js nav .toc left: 0

When we switch to the navigation in single column mode, "pop" the body off by sliding it off screen to the right.

@media (max-width: #{$single-column-toggle-width}) body +transition(left $navigation-shift-duration) position: relative left: 0 html.popped overflow: hidden body left: 100% overflow: hidden nav .toc

By default, all file lists are collapsed.

.children, .outline display: none

We only expand direct descendants for files, but outlines are fully expanded from the outset.

.expanded > .children, .expanded > .outline, .expanded > .outline .children display: block .discloser +transition-property(-moz-transform -webkit-transform -o-transform transform) // bah. +transition-duration(200ms) +rotate(0deg) display: inline-block height: 9px width: 9px padding: 0.2em margin: 0.2em 0.2em -0.2em 0.2em vertical-align: baseline background: inline-image('disclosure-indicator.png') center center no-repeat background-size: 9px 9px

Every label gets one, but not all need to display them.

.discloser.placeholder, .expanded > .outline .discloser background: none .expanded > .label .discloser +rotate(90deg)

When searching, we only hide labels so that the hierarchy can still be shown to the user

.filtered > .label display: none .matched-child > .label display: block

Make sure that we expand to show any matched nodes

.matched-child > .children, .matched-child > .outline, .matched-child > .outline .children display: block .matched > .children, .matched > .outline, .matched > .outline .children display: block

Disclosure indicators are confusing when we're searching

nav.searching .toc .discloser display: none

Typography

.comments .wrapper +commentary-font h1, h2, h3, h4, h5, h6 +header-font +header-font-sizes p margin: 1em 0 > * &:first-child margin-top: 0 &:last-child margin-bottom: 0 ol, ul padding-left: 1.75em ol li list-style: decimal ul li list-style: disc li margin: 1em 0 &:first-child margin-top: 0 &:last-child margin-bottom: 0 code display: inline-block padding: 0.25em 0.25em 0 0.25em pre display: block overflow-x: auto overflow-y: hidden code padding: $common-margin blockquote padding: 0 $common-margin strong font-weight: 700 em font-style: italic

Visual Design

html background: $code-background-color // Degrade gracefully

We cheat and use #document to display the shadow

html.two-column-layout #document +background($commentary-background-color $code-background-gradient $commentary-column-width no-repeat) margin-right: -$column-shadow-width padding-right: $column-shadow-width html.one-column-layout #document background: $commentary-background-color margin-left: $column-shadow-width margin-right: $column-shadow-width padding-right: 0 +border-radius($border-radius) +box-shadow(darken($code-background-color, 15%) 0 0 0.5em 0.2em) @media (max-width: #{$single-column-toggle-width}) html.two-column-layout #document margin-right: 0 padding-right: 0 +border-radius($border-radius) +box-shadow(darken($code-background-color, 15%) 0 0 0.5em 0.2em) html.one-column-layout #document margin-left: 0 margin-right: 0 +border-radius(0) html.no-js nav .toc margin-top: $common-margin +border-radius($border-radius) +box-shadow(darken($code-background-color, 15%) 0 0 0.5em 0.2em) @media (max-width: #{$commentary-column-width}) html.two-column-layout #document +border-radius(0) #meta > * +commentary-font +text-shadow($code-shadow-color 1px 1px 0) &, a color: darken($code-foreground-color, 15%) a text-decoration: none

We apply font changes to .wrapper elements so that we do not resize the 'standard' em unit that we are relying on for layout.

.comments .wrapper +commentary-font +text-shadow($commentary-shadow-color 1px 1px 0) color: $commentary-foreground-color .code .wrapper +code-styles +code-font +text-shadow($code-shadow-color 1px 1px 0) color: $code-foreground-color background: $code-background-color +box-shadow($code-background-color 0 0 0.25em 0.75em) =comment-column-code +border-radius($border-radius) +box-shadow(darken($code-background-color, 15%) 0 0 0.5em 0.2em inset) background: $code-background-color html.one-column-layout .code +comment-column-code @media (max-width: #{$single-column-toggle-width}) html.two-column-layout .code +comment-column-code @media (max-width: #{$commentary-width}) html.two-column-layout .code, html.one-column-layout .code +border-radius(0) html.one-column-layout body .segment padding: 0 nav +text-shadow($tools-shadow-color 1px 1px 0) color: $tools-foreground-color .tools, .toc +tools-font .tools +box-shadow(rgba(0,0,0,0.3) 0 0 0.5em 0.1em) +background(linear-gradient(top, lighten($tools-background-color, 10%), darken($tools-background-color, 10%))) +border-bottom-left-radius(0.4em) border-bottom: 1px solid $tools-foreground-color border-left: 1px solid $tools-foreground-color

This tiny snippet moved a few lines down, to handle it per layout

// @media (max-width: #{$scale-start-width}) // +border-bottom-left-radius(0) li border-right: 1px solid $tools-foreground-color &:last-child border-right: none .toggle a +transition(opacity 200ms) +opacity(0.5) cursor: pointer background-position: center center background-repeat: no-repeat

actually we don't need to prevent text-selection, because there is no (visible) text left to select, but we leave for now

+disable-text-selection &:hover +opacity(0.9) .github-toggle a background-size: 19.5px 24px background-image: inline-image('github-icon.png')

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle1 a background-size: 19px 23px background-image: inline-image('toc-close-icon.png')

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle2 a background-size: 20px 24px // original 21px x 25px background-image: inline-image('toc-close-icon-ds.png')

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle3 a background-size: 20px 24px // original 21px x 25px background-image: inline-image('toc-close-icon-ds2.png')

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle4 a background-size: 20px 24px // original 21px x 25px background-image: inline-image('toc-close-icon-ds3.png') // .layout-toggle a // defined below ! // background-size // background-image &.active .tools +border-bottom-left-radius(0) .toggle background: darken($tools-background-color, 10%) position: relative

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle1 a background-size: 24px 20px background-image: inline-image('toc-open-icon.png')

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle2 a background-size: 24px 20px // original 26px x 22px background-image: inline-image('toc-open-icon-ds.png')

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle3 a background-size: 24px 20px // original 26px x 22px background-image: inline-image('toc-open-icon-ds2.png')

TODO: decide which toc-toggle-icon to keep, rename it and remove the others

.toc-toggle4 a background-size: 24px 20px // original 26px x 22px background-image: inline-image('toc-open-icon-ds3.png') .toc +box-shadow(rgba(0,0,0,0.3) 0 0 0.5em 0.1em) background: $tools-background-color border-left: 1px solid $tools-foreground-color .label color: $tools-foreground-color text-decoration: none border-top: 1px solid darken($tools-background-color, 15%) border-bottom: 1px solid darken($tools-background-color, 15%) margin-top: -1px &:hover background: darken($tools-background-color, 10%) .file > .label font-weight: bold .current > .label background: darken($tools-background-color, 10%) +box-shadow(darken($tools-background-color, 10%) 0 0 2px 1px inset) border-top: 1px solid darken($tools-background-color, 30%) border-bottom: 1px solid darken($tools-background-color, 30%) .selected > .label background: $commentary-background-color .selected > .label:hover background: darken($tools-background-color, 10%) .current > .label:hover background: darken($tools-background-color, 15%)

Search styling

.label em font-weight: bold

This isn't the best of signals...

.file > .label em color: darken($tools-foreground-color, 25%) .matched-child > .label +opacity(0.65) +text-shadow(none) background: darken($tools-background-color, 15%) @media (max-width: #{$single-column-toggle-width}) .tools, .toc border-left-width: 0

Make sure that our tools are opaque in single column mode so that the transitions aren't distracting

$opaque-tools-background-color: opacify($tools-background-color, 1.0) .tools +background(linear-gradient(top, lighten($opaque-tools-background-color, 10%), darken($opaque-tools-background-color, 10%))) .toc background: $opaque-tools-background-color nav .tools +box-shadow(rgba(0,0,0,0.3) 0 0 0.5em 0.1em) .no-js nav .tools +border-bottom-left-radius(0) @media (max-width: #{$commentary-column-width}) nav .tools .layout-toggle display: none @media (max-width: #{$scale-start-width}) html.two-column-layout nav .tools +border-bottom-left-radius(0) @media (max-width: #{$single-column-toggle-width}) html.one-column-layout nav .tools +border-bottom-left-radius(0)