/* Wide */
@include breakpoint('<=wide') {
/* Basic */ body, input, select, textarea { font-size: 14pt; } /* Section/Article */ header { &.special { padding-top: 5.5em; margin-bottom: 4em; } }
}
/* Normal */
@include breakpoint('<=normal') {
/* Basic */ body, input, select, textarea { font-size: 13pt; letter-spacing: 0.025em; line-height: 1.65em; } h1, h2, h3, h4, h5, h6 { line-height: 1.5em; } /* Section/Article */ header { &.major { padding-bottom: 1.5em; } } footer { &.major { padding-top: 2em; } } /* Wrapper */ .wrapper { margin-bottom: 4em; padding: 4em 3em; &.style4 { padding: 3em; } } /* Header */ #header { nav { ul { li { margin-left: 1em; } } } } /* Banner */ #banner { background-attachment: scroll; } /* CTA */ #cta { padding: 4em; background-attachment: scroll; } /* Footer */ #footer { padding: 4em; }
}
/* Narrow */
@include breakpoint('<=narrow') {
$pattern-background-size: 15em; /* Basic */ body, input, select, textarea { font-size: 13pt; letter-spacing: 0.025em; line-height: 1.5em; } /* Section/Article */ header { br { display: none; } &.major { padding-bottom: 1em; } &.special { padding-left: 2.5em; padding-right: 2.5em; } } footer { &.major { padding-top: 1.5em; } } /* Wrapper */ .wrapper { margin-bottom: 3em; padding: 3em 2.5em; &.special { br { display: none; } } &.style1 { padding: 0 2.5em; } &.style2 { background-size: $pattern-background-size; } &.style4 { padding: 2.5em; } } /* Banner */ #banner { background-size: $pattern-background-size, $pattern-background-size, auto, cover; } /* Main */ #main { background-size: $pattern-background-size; } /* CTA */ #cta { background-size: $pattern-background-size, $pattern-background-size, auto, cover; padding: 3em; }
}
/* Narrower */
navPanel, navButton {
display: none;
}
@include breakpoint('<=narrower') {
/* Basic */ html, body { overflow-x: hidden; } header { &.major { padding-bottom: 0.25em; } &.special { margin-bottom: 4em; padding-top: 5em; &:before, &:after { width: 40%; } h2 + p { padding-top: 1.25em; } } } /* Section/Article */ section { margin: 1em 0 1em 0; &:first-child { margin-top: 0; } } /* Button */ input[type="button"], input[type="submit"], input[type="reset"], button, .button { &.small { font-size: 0.8em; min-width: 18em; padding: 0.75em 0; } } /* Featured Icons */ ul.featured-icons { margin: 0; li { display: inline-block; float: none; width: auto; .icon { font-size: 4em; width: 1.25em; } } } /* Buttons */ ul.buttons { li { display: block; padding: 1em 0 0 0; } } /* Header */ #header { display: none; } /* Banner */ #banner { margin: 0; } /* Wrapper */ .wrapper { &.special-alt { text-align: center; } &.style4 { padding-bottom: 3em; } } /* Main */ #main { padding: 5em 0; .sidebar { border-top: solid 1px transparentize(_palette(fg), 0.9); padding-top: 3em; section { border-top: 0; padding-top: 0; } } } body.index #main { padding-top: 4.5em; } /* CTA */ #cta { margin: 0; } /* Footer */ #footer { padding: 4em 1.5em; } /* Nav */ #page-wrapper { @include vendor('backface-visibility', 'hidden'); @include vendor('transition', 'transform #{_duration(navPanel)} ease'); padding-bottom: 1px; } #navButton { @include vendor('backface-visibility', 'hidden'); @include vendor('transition', 'transform #{_duration(navPanel)} ease'); display: block; height: 60px; left: 0; position: fixed; top: 0; width: 100%; z-index: _misc(z-index-base) + 1; .toggle { @include icon; height: 60px; left: 0; position: absolute; text-align: center; top: 0; width: 100%; border: 0; outline: 0; &:before { color: _palette(navButton, fg); content: '\f0c9'; font-size: 1em; height: 40px; left: 10px; line-height: 40px; opacity: 0.5; position: absolute; top: 11px; width: 60px; z-index: 1; } &:after { background: _palette(navButton, bg); border-radius: 2px; content: ''; height: 40px; left: 10px; position: absolute; top: 10px; width: 60px; } } } #navPanel { @include vendor('backface-visibility', 'hidden'); @include vendor('transform', 'translateX(#{_size(navPanel) * -1})'); @include vendor('transition', ('transform #{_duration(navPanel)} ease')); display: block; height: 100%; left: 0; overflow-y: auto; position: fixed; top: 0; width: _size(navPanel); z-index: _misc(z-index-base) + 2; background: _palette(navPanel, bg); color: _palette(navPanel, fg); font-size: 0.8em; letter-spacing: 0.075em; text-transform: uppercase; padding: 0.25em 0.75em 1em 0.75em; .link { border: 0; border-top: solid 1px transparentize(_palette(navPanel, fg), 0.95); color: inherit; display: block; height: 3em; line-height: 3em; opacity: 0.75; text-decoration: none; &.depth-0 { font-weight: 900; } &:first-child { border-top: 0; } } .indent-1 { display: inline-block; width: 1em; } .indent-2 { display: inline-block; width: 2em; } .indent-3 { display: inline-block; width: 3em; } .indent-4 { display: inline-block; width: 4em; } .indent-5 { display: inline-block; width: 5em; } } body { &.navPanel-visible { #page-wrapper { @include vendor('transform', 'translateX(#{_size(navPanel)})'); } #navButton { @include vendor('transform', 'translateX(#{_size(navPanel)})'); } #navPanel { @include vendor('transform', 'translateX(0)'); } } }
}
/* Mobile */
@include breakpoint('<=mobile') {
$pattern-background-size: 10em; /* Basic */ body { min-width: 320px; } h2 { font-size: 1.25em; letter-spacing: 0.1em; } h3 { font-size: 1em; letter-spacing: 0.025em; } p { text-align: justify; } /* Section/Article */ header { text-align: center; &.major { padding-bottom: 0; } &.special { margin-bottom: 3em; padding-left: 1.5em; padding-right: 1.5em; &:before, &:after { width: 38%; } .icon { font-size: 0.75em; top: 1.5em; } } p { text-align: center; } } footer { &.major { padding-top: 0; } } /* Icon */ .icon { &.circle { font-size: 1em; } } /* Button */ input[type="button"], input[type="submit"], input[type="reset"], button, .button { max-width: 20em; width: 100%; &.fit { width: auto; } } /* Icons */ ul.icons { li { padding-left: 0.25em; } } /* Featured Icons */ ul.featured-icons { li { .icon { width: 1.1em; } } } /* Buttons */ ul.buttons { text-align: center; } /* Wrapper */ .wrapper { margin-bottom: 2.5em; padding: 2.25em 1.5em; &.special { br { display: none; } } &.style1 { padding: 0 1.5em; } &.style2 { background-size: $pattern-background-size; padding: 2.25em 1.5em; } &.style4 { background-size: $pattern-background-size; padding: 1.5em 1.5em 3em 1.5em; } } /* Banner */ #banner { background-size: $pattern-background-size, $pattern-background-size, auto, cover; padding: 6em 0; .inner { background: none; display: block; padding: 0 1.5em; header { h2 { font-size: 1.5em; } } p { text-align: center; } br { display: none; } } } /* Main */ #main { background-size: $pattern-background-size; padding: 3.5em 0 2.5em 0; } body.index #main { padding: 2.5em 0 0 0; } body.contact #main { padding-bottom: 0; } /* CTA */ #cta { background-size: $pattern-background-size, $pattern-background-size, auto, cover; padding: 3em 1.5em; } /* Footer */ #footer { padding: 3em 1.5em; .copyright { li { display: block; margin: 1em 0 0 0; padding: 0; border: 0; } } } /* Nav */ #navButton { .toggle { &:before { top: 8px; left: 8px; width: 50px; height: 34px; line-height: 34px; } &:after { top: 8px; left: 8px; width: 50px; height: 34px; } } }
}