$remify-baseline: 20; @import 'reset.css.scss'; @import 'anecdote/application.css.scss'; /*--------------------------------------------------- --- Helpers --------------------------------------------------- */ @mixin primary-font { font-family: "minion-pro", "Minion Pro"; } @mixin secondary-font { font-family: "museo-sans", Avenir; } @mixin centered-standard-width { max-width: 30rem; margin-left: auto; margin-right: auto; } @mixin add-page-padding { @include remify(padding-left padding-right, 1); @include respond(min, tablet) { @include remify(padding-left padding-right, 2); } } @mixin undo-page-padding { @include remify(margin-left margin-right, -1); @include respond(min, tablet) { @include remify(margin-left margin-right, -2); } } /*--------------------------------------------------- --- Anecdote: Wysicontent --- content blocks of formatted text and modules --------------------------------------------------- */ .anecdote-wysicontent-ndj4ab { > h1, > h2, > h3, > h4, > h5, > h6, > .anecdote-title-an4a2q.v-size-h1, > .anecdote-title-an4a2q.v-size-h2, > .anecdote-title-an4a2q.v-size-h3, > .anecdote-title-an4a2q.v-size-h4, > .anecdote-title-an4a2q.v-size-h5, > .anecdote-title-an4a2q.v-size-h6 { @include secondary-font; } > h1, > h2, > h3, > h4, > h5, > h6, > p, > ul, > ol, > blockquote, > pre { @include centered-standard-width; strong { font-weight: 600; } em { font-style: italic; } } } /*--------------------------------------------------- --- Anecdote: Media embeds --- generic styles applied to media such as images, videos, etc --------------------------------------------------- */ .anecdote-intrinsic-embed-n42ha1 { box-sizing: border-box; border-radius: 3px; &, .anecdote-module-3ba83n.v-border-shadow & { box-shadow: 0 1px 4px -1px rgba( 0, 0, 0, 0.3 ); border-top: 1px solid rgba( 0, 0, 0, 0.06 ); } .anecdote-module-3ba83n.v-border-line & { box-shadow: none; border: 1px solid rgba( 0, 0, 0, 0.06 ); } .anecdote-module-3ba83n.v-border-none & { box-shadow: none; border: none; border-radius: 0; } .anecdote-module-3ba83n.v-size-full-width & { border-radius: 0; } } /*--------------------------------------------------- --- Anecdote: Modules --- generic styles for images, pullquotes, asides, etc --------------------------------------------------- */ .anecdote-module-3ba83n { @include centered-standard-width; &.v-size-full-width > .inner { @include undo-page-padding; } // fix floats so they "attach" to side of content rather than edge of screen // &.v-float-left, .v-float-right { // @include respond(min, large-monitor) { // &.v-size-small { // float: none; // width: 30rem; // max-width: 100%; // margin-left: auto; // margin-right: auto; // > .inner { // float: left; // width: 12rem; // margin-right: 2rem; // margin-left: -15rem; // } // } // } // } } /*--------------------------------------------------- --- Anecdote: Caption --------------------------------------------------- */ .anecdote-caption-ajkd3b { @include secondary-font; .anecdote-wysicontent-ndj4ab > * { margin-left: 0; margin-right: 0; @include remify( max-width, 40 ); } .anecdote-module-3ba83n & { @mixin anecdote-caption-ajkd3b-mood-icon( $tmp-color, $tmp-svg-paths ) { > .inner { @include remify( padding-left, 1.15 ); position: relative; &:before { position: absolute; left: 0; @include remify( width height, 1 ); text-align: center; top: 0.25em; content: '\00F7'; color: $tmp-color; .svg & { content: ''; top: 0.1em; @include remify( background-size, 0.8, 0.8 ); background-attachment: scroll; background-position: left center; background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,#{$tmp-svg-paths}'); } } } } @include scope-variation( '.v-mood-negative' ) { @include anecdote-caption-ajkd3b-mood-icon( #9a3b3b, '' ); } @include scope-variation( '.v-mood-positive' ) { @include anecdote-caption-ajkd3b-mood-icon( #99af37, '' ); } } } /*--------------------------------------------------- --- Anecdote: Graphic --------------------------------------------------- */ .anecdote-graphic-dn32ja { .anecdote-caption-ajkd3b { @include scope-variation( '.v-size-full-width' ) { @include remify( margin-left margin-right, 1 ); } } } .anecdote-gallery-dn2bak { @include scope-variation( '.v-size-full-width' ) { @include add-page-padding; } } /*--------------------------------------------------- --- Anecdote: Pull Quote --------------------------------------------------- */ .anecdote-pull-quote-sba2ha { @include secondary-font; } /*--------------------------------------------------- --- Anecdote: Font Styles & Sizes --------------------------------------------------- */ .anecdote-primary-font-a3a8fb { @include primary-font; } .anecdote-secondary-font-a3a8fb { @include secondary-font; } /*--------------------------------------------------- --- Typography --------------------------------------------------- */ html { @include primary-font; // Size font-size: 16px; @include respond(min, large-handheld) { font-size: 18px; } @include respond(min, tablet) { font-size: 20px; } @include respond(min, large-monitor) { font-size: 22px; } // Rendering @include respond(retina) { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } select, textarea, input { @include secondary-font; } /*--------------------------------------------------- --- Links --------------------------------------------------- */ a { color: #164996; text-decoration: none; &:visited { color: inherit; } &:hover, &:focus { color: #1c52a3; text-decoration: underline; } .anecdote-wysicontent-ndj4ab & { text-decoration: underline; &:visited { color: #3a1b94; } &:hover, &:focus { color: #2967c5; text-decoration: none; } } } /*--------------------------------------------------- --- Mobile fixes --------------------------------------------------- */ // Prevent iOS and IE text size adjust after device orientation change without disabling user zoom html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } // Prevent iOS auto-zoom on form focus without disabling user zoom select, textarea, input { font-size: 16px; } /*--------------------------------------------------- --- Layout --------------------------------------------------- */ .container-s2n3k1 { max-width: 1000px; margin: 0 auto; } body { @include add-page-padding; }