$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,');
}
}
}
}
@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;
}