Repository: csswizardry/discovr Branch: master Commit: 94054f2a9752 Files: 69 Total size: 135.9 KB Directory structure: gitextract_4rr93afy/ ├── .gitignore ├── LICENSE ├── README.md ├── css/ │ ├── build/ │ │ ├── README.md │ │ ├── calendar/ │ │ │ └── index.html │ │ ├── pagination/ │ │ │ ├── components.pagination.css │ │ │ └── index.html │ │ ├── panel/ │ │ │ └── index.html │ │ └── view.html │ ├── components/ │ │ ├── _components.avatar.scss │ │ ├── _components.buttons.scss │ │ ├── _components.calendar.scss │ │ ├── _components.headline.scss │ │ ├── _components.logo.scss │ │ ├── _components.masthead.scss │ │ ├── _components.nav-primary.scss │ │ ├── _components.nav-secondary.scss │ │ ├── _components.nav-tertiary.scss │ │ ├── _components.page-foot.scss │ │ ├── _components.page-head.scss │ │ ├── _components.page.scss │ │ ├── _components.panel.scss │ │ ├── _components.promo.scss │ │ ├── _components.score.scss │ │ ├── _components.sub-content.scss │ │ ├── _components.testimonials.scss │ │ ├── _config.promo.scss │ │ └── components.pagination.scss │ ├── elements/ │ │ ├── _elements.headings.scss │ │ ├── _elements.images.scss │ │ ├── _elements.links.scss │ │ ├── _elements.lists.scss │ │ ├── _elements.page.scss │ │ └── _elements.quotes.scss │ ├── generic/ │ │ ├── _generic.box-sizing.scss │ │ ├── _generic.normalize.scss │ │ ├── _generic.reset.scss │ │ └── _generic.shared.scss │ ├── main.css │ ├── main.scss │ ├── objects/ │ │ ├── _objects.crop.scss │ │ ├── _objects.headline.scss │ │ ├── _objects.layout.scss │ │ ├── _objects.list-bare.scss │ │ ├── _objects.list-inline.scss │ │ ├── _objects.media.scss │ │ └── _objects.wrappers.scss │ ├── scopes/ │ │ └── _scopes.prose.scss │ ├── settings/ │ │ ├── _all.scss │ │ ├── _settings.colors.scss │ │ ├── _settings.config.scss │ │ ├── _settings.custom.scss │ │ └── _settings.global.scss │ ├── themes/ │ │ ├── _themes.custom.scss │ │ └── _themes.red.scss │ ├── tools/ │ │ ├── _all.scss │ │ ├── _config.mq.scss │ │ ├── _tools.aliases.scss │ │ ├── _tools.functions.scss │ │ ├── _tools.mixins.scss │ │ └── _tools.typography.scss │ ├── utilities/ │ │ ├── _utilities.debug.scss │ │ ├── _utilities.headings.scss │ │ ├── _utilities.healthcheck.scss │ │ ├── _utilities.shame.scss │ │ └── _utilities.widths.scss │ └── watch ├── index.html └── package.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ assets/ node_modules/ ================================================ FILE: LICENSE ================================================ Copyright 2017 Harry Roberts Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: README.md ================================================ # discovr Welcome to the _CSS Architecture_ workshop resources. [rawgit.com/csswizardry/discovr/master/index.html](https://rawgit.com/csswizardry/discovr/master/index.html) ================================================ FILE: css/build/README.md ================================================ # Build This directory houses components built entirely out of context of their page. There are two classes of component: * **Integrated:** These are components that inherit styles from the rest of the CSS project, and cannot be properly rendered without other files being present (e.g. reset, Normalize.css, global `box-sizing`, etc.). They cannot be compiled into their own corresponding CSS files without errors; they tend to be integrated into our `main.css` file. The [Calendar component](https://github.com/csswizardry/discovr/blob/master/css/components/_components.calendar.scss) is an example of an Integrated component. * **Isolated:** These are components that can be built without needing any other CSS files to be present; they do not lean on any kind of reset or other existing styles. These components are fully encapsulated and can be moved between projects pretty easily, and can usually be compiled into their own corresponding CSS files. The only dependencies they might have are our settings and components. The [Pagination component](https://github.com/csswizardry/discovr/blob/master/css/components/components.pagination.scss) is an example of an Isolated component. ## `view.html` The [`view.html`](https://github.com/csswizardry/discovr/blob/master/css/_build/view.html) file contains several randomly sized `iframe`s through which we view our components as we’re building them. This gives us a simultaneous view of several different responsive variations of our components in one page, meaning we can develop and compare components without having to constantly resize our browser window. Simply point your `iframe`s at the HTML file for the component you’re currently building. ================================================ FILE: css/build/calendar/index.html ================================================ Calendar
March 2015
M T W T F S S
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
================================================ FILE: css/build/pagination/components.pagination.css ================================================ @charset "UTF-8"; /*------------------------------------*\ #PAGINATION \*------------------------------------*/ .c-pagination { font-family: Lato, sans-serif; font-size: 12px; font-size: 0.857142857rem; line-height: 1.666666667; margin: 0; padding: 0; list-style: none; margin-bottom: 20px; display: table; table-layout: fixed; width: 100%; text-align: center; border: 1px solid #fff; border-radius: 3px; overflow: hidden; } /** * 1. Hide all of the pagination items to start off with… * 2. …but show them all on big enough screens. */ .c-pagination__item { display: none; } @media screen and (min-width: 720px) { .c-pagination__item { display: table-cell; } } .c-pagination__item + .c-pagination__item { border-left: 1px solid #fff; } /** * Despite the show/hide stuff above, let’s explicitly force all relative * pagination controls to be always visible. * * This means that on small screens, we only get First, Previous, Next, Last * links, but on larger screens we get all of the numbers as well. */ .c-pagination__item--first, .c-pagination__item--prev, .c-pagination__item--next, .c-pagination__item--last { display: table-cell; } .c-pagination__link { text-decoration: none; display: block; padding: 5px; color: #fff; background-color: #378bb5; } @media screen and (min-width: 480px) { .c-pagination__link { padding: 10px; } } .c-pagination__link:hover, .c-pagination__link:focus { background-color: #317ca1; } .c-pagination__link.is-current { background-color: #4099c5; text-decoration: underline; cursor: default; } /*# sourceMappingURL=components.pagination.css.map */ ================================================ FILE: css/build/pagination/index.html ================================================ Pagination
  1. First
  2. Previous
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. Next
  9. Last
================================================ FILE: css/build/panel/index.html ================================================ Panel

Ghent 8.4

Belgium

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Read more…
================================================ FILE: css/build/view.html ================================================ View ================================================ FILE: css/components/_components.avatar.scss ================================================ /*------------------------------------*\ #AVATAR \*------------------------------------*/ $avatar-size: $global-spacing-unit * 3; $avatar-size-large: $avatar-size * 2; $avatar-size-small: $avatar-size / 2; .c-avatar { display: block; width: $avatar-size; height: $avatar-size; border-radius: 100%; } .c-avatar--small { width: $avatar-size-small; height: $avatar-size-small; } .c-avatar--large { width: $avatar-size-large; height: $avatar-size-large; } ================================================ FILE: css/components/_components.buttons.scss ================================================ /*------------------------------------*\ #BUTTONS \*------------------------------------*/ /** * 1. Allow us to style box model properties. * 2. Line different sized buttons up a little nicer. * 3. Make buttons inherit font styles (often necessary when styling `input`s as * buttons). * 4. Reset/normalize some styles. * 5. Force all button-styled elements to appear clickable. * 6. Subtract the border size from the padding value so that buttons do not * grow larger as we add borders. */ .c-btn { display: inline-block; /* [1] */ vertical-align: middle; /* [2] */ font: inherit; /* [3] */ text-align: center; /* [4] */ margin: 0; /* [4] */ cursor: pointer; /* [5] */ padding: $global-spacing-unit-small $global-spacing-unit; @include hocus() { text-decoration: none; } } .c-btn--primary { background-color: $color-btn-background; color: $color-btn; border-radius: $global-radius; transition: $global-transition; @include hocus() { background-color: $color-btn-background-hover; } .t-red & { background-color: $color-theme-red; } } .c-btn--secondary { background-color: $color-btn-secondary-background; color: $color-btn-secondary; border-radius: $global-radius; transition: $global-transition; @include hocus() { background-color: $color-btn-secondary-background-hover; } } .c-btn--small { padding: $global-spacing-unit-tiny $global-spacing-unit-small; } .c-btn--large { padding: $global-spacing-unit $global-spacing-unit-large; } ================================================ FILE: css/components/_components.calendar.scss ================================================ /*------------------------------------*\ #CALENDAR \*------------------------------------*/ .c-calendar { width: 100%; table-layout: fixed; @include font-size(12px); text-align: center; th, td { padding: $global-spacing-unit-tiny; border: 1px solid $color-ui; background-color: $color-calendar; } th { @include font-weight(bold); border-bottom-width: 2px; } } .c-calendar__title { color: $color-calendar-title; &#{&} { background-color: $color-calendar-title-background; border-color: currentColor; border-bottom-width: 1px; } } .c-calendar__outside { color: $color-calendar-outside; &#{&} { background-color: transparent; } } .c-calendar__busy { color: $color-calendar-busy; &#{&} { background-color: $color-calendar-busy-background; border-color: currentColor; } } ================================================ FILE: css/components/_components.headline.scss ================================================ /*------------------------------------*\ #HEADLINE \*------------------------------------*/ .c-headline { @include font-size($global-font-size); @include font-weight(normal); border-bottom: 1px solid lighten($color-headline, 20%); color: $color-headline; text-transform: uppercase; letter-spacing: 0.05em; } ================================================ FILE: css/components/_components.logo.scss ================================================ /*------------------------------------*\ #LOGO \*------------------------------------*/ $logo-height: 30px; .c-logo {} .c-logo__fill { fill: $color-logo; .c-page-head & { fill: currentcolor; } } ================================================ FILE: css/components/_components.masthead.scss ================================================ /*------------------------------------*\ #MASTHEAD \*------------------------------------*/ .c-masthead { position: relative; background-color: $color-masthead-background; color: white; overflow: hidden; height: 0; padding-top: percentage(9/16); margin-bottom: $global-spacing-unit; @include mq($from: large) { padding-top: 0; height: 720px; } } .c-masthead__media { width: 100%; position: absolute; top: 0; left: 0; } .c-masthead__text { position: absolute; right: 0; bottom: 0; left: 0; padding: $global-spacing-unit; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.25); text-shadow: 0 -1px rgba(0, 0, 0, 0.5); } .c-masthead__title { @include font-weight(black); @include font-size(60px); } ================================================ FILE: css/components/_components.nav-primary.scss ================================================ /*------------------------------------*\ #NAV-PRIMARY \*------------------------------------*/ .c-nav-primary { } .c-nav-primary__item { } .c-nav-primary__link { display: inline-block; padding-right: $global-spacing-unit; padding-left: $global-spacing-unit; @include font-weight(normal); &.is-active { text-decoration: underline; cursor: default; } } ================================================ FILE: css/components/_components.nav-secondary.scss ================================================ /*------------------------------------*\ #NAV-SECONDARY \*------------------------------------*/ .c-nav-secondary { text-align: center; } .c-nav-secondary__item { padding-right: $global-spacing-unit-small; padding-left: $global-spacing-unit-small; } .c-nav-secondary__link { @include font-weight(normal); } ================================================ FILE: css/components/_components.nav-tertiary.scss ================================================ /*------------------------------------*\ #NAV-TERTIARY \*------------------------------------*/ .c-nav-tertiary { background-color: $color-grey-dark; color: $color-white; position: relative; text-align: right; &::before, &::after { content: ""; position: absolute; top: 0; bottom: 0; width: $global-spacing-unit; } &::before { left: 0; background-image: linear-gradient(to right, $color-grey-dark 0, rgba(0,0,0,0) 100%); } &::after { right: 0; background-image: linear-gradient(to left, $color-grey-dark 0, rgba(0,0,0,0) 100%); } } .c-nav-tertiary__list { @include clearfix(); white-space: nowrap; overflow-x: scroll; margin: 0; list-style: none; font-size: 0; padding-right: $global-spacing-unit-small; padding-left: $global-spacing-unit-small; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } } .c-nav-tertiary__item { @include font-size(12px); display: inline-block; & + & { border-left: 1px solid rgba(255, 255, 255, 0.1); } } .c-nav-tertiary__link { @include font-weight('normal'); display: block; padding: $global-spacing-unit-small; color: $color-white; letter-spacing: 0.025em; } ================================================ FILE: css/components/_components.page-foot.scss ================================================ /*------------------------------------*\ #PAGE-FOOT \*------------------------------------*/ .c-page-foot { padding: $global-spacing-unit; @include font-size(12px); background-color: $color-page-foot-background; color: $color-page-foot; } ================================================ FILE: css/components/_components.page-head.scss ================================================ /*------------------------------------*\ #PAGE-HEAD \*------------------------------------*/ .c-page-head { @include clearfix(); background-color: $color-page-head-background; color: $color-page-head; padding: $global-spacing-unit; text-align: center; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1); &.is-fixed { @include mq($from: medium) { text-align: left; position: fixed; top: 0; right: 0; left: 0; z-index: 1; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } } } .c-page-head__logo { display: block; line-height: 0; margin-bottom: $global-spacing-unit; @include mq($from: medium) { float: left; margin-bottom: 0; } } /** * 1. The height of the nav needs to marry up with the height of the logo. */ .c-page-head__nav { float: right; line-height: $logo-height; /* [1] */ } ================================================ FILE: css/components/_components.page.scss ================================================ /*------------------------------------*\ #PAGE \*------------------------------------*/ .c-page { &.has-fixed-page-head { @include mq($from: medium) { padding-top: $logo-height + $global-spacing-unit-large; } } } ================================================ FILE: css/components/_components.panel.scss ================================================ /*------------------------------------*\ #PANEL \*------------------------------------*/ .c-panel { background-color: $color-panel-background; border-radius: $global-radius; overflow: hidden; margin-bottom: $global-spacing-unit; border: 1px solid $color-ui; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025); } .c-panel__masthead { height: 10 * $global-spacing-unit; overflow: hidden; background-color: $color-ui; } .c-panel__masthead--small { height: 5 * $global-spacing-unit; } .c-panel__masthead--fluid { position: relative; height: auto; padding-top: 56.25%; } .c-panel__masthead-media { width: 100%; object-fit: cover; .c-panel__masthead--fluid & { position: absolute; top: -25%; left: 0; } } .c-panel__content { padding: $global-spacing-unit; > :last-child { margin-bottom: 0; } } .c-panel__link { display: block; text-align: center; text-decoration: none; padding: $global-spacing-unit; border-top: 1px solid $color-ui; color: $color-panel-link; @include hocus() { text-decoration: none; background-color: rgba(0, 0, 0, 0.01); color: $color-panel-link-hover; } } .c-panel--inverse { background-color: $color-panel-inverse-background; color: $color-panel-inverse; } ================================================ FILE: css/components/_components.promo.scss ================================================ /*------------------------------------*\ #PROMO \*------------------------------------*/ $promo-color: inherit !default; $promo-color-background: #ffc !default; $promo-custom: () !default; .c-promo { padding: $global-spacing-unit; margin-bottom: $global-spacing-unit; background-color: $promo-color-background; color: $promo-color; border-radius: $global-radius; > :last-child { margin-bottom: 0; } @each $prop, $val in $promo-custom { #{$prop}: $val; } } .c-promo__title { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } ================================================ FILE: css/components/_components.score.scss ================================================ /*------------------------------------*\ #SCORE \*------------------------------------*/ /** * Each Discovry has an associated score (e.g. 7.2 out of a possible 10). The * Score component simply displays that score colored appropriately. * * We blend between three main brackets of score (Poor, Average, and Good) by * creating an array of scores and their colors, and then looping through that * array in order to output selectors that bind onto a data attribute, for * example: * * .c-score[data-score^="7."] {} * * This selector looks for a DOM node with a class of `.c-score`, and then * sees what the first characters of its `data-score` attribute are (`^=`). If * the first characters are, for example, 7., then the DOM node gets styled in * the color of the 7.x rating. */ .c-score { display: inline-block; // Pick colors for our Poor, Average, and Good ratings... $color-poor: red; $color-average: orange; $color-good: green; // ...and populate the list of scores (e.g. 7.2) with their associated // color by mixing between them. $scores: ( 0: $color-poor, 1: mix($color-poor, $color-average, 80%), 2: mix($color-poor, $color-average, 60%), 3: mix($color-poor, $color-average, 40%), 4: mix($color-poor, $color-average, 20%), 5: $color-average, 6: mix($color-average, $color-good, 80%), 7: mix($color-average, $color-good, 60%), 8: mix($color-average, $color-good, 40%), 9: mix($color-average, $color-good, 20%), 10: $color-good, ); // Loop through the scores list and output a data attribute substring // selector for each, e.g.: // // .c-score[data-score^="7."] {} // // This will style any score in the 7.x category accordingly. @each $score, $color in $scores { &[data-score^="#{$score}."] { color: $color; } } /** * Apply the score’s color as a background by augmenting with a class of * `.c-score--inverse`. * * 1. This magic number applies the right amount of padding to spoof a space * character either side of the text. */ &--inverse { vertical-align: middle; padding-right: 0.28em; /* [1] */ padding-left: 0.28em; /* [1] */ @include font-weight(normal); border-radius: $global-radius; // Loop through our array again, only this time applying colours as // backgrounds. // // 1. The fact that `#fff` works here is, unfortunately, entirely // circumstantial. We will need to rethink this if we have a // background whose foreground cannot be white. @each $score, $color in $scores { &[data-score^="#{$score}."] { background-color: $color; color: #fff; } } } } .c-score--small { @include font-size($global-font-size); } ================================================ FILE: css/components/_components.sub-content.scss ================================================ /*------------------------------------*\ #SUB-CONTENT \*------------------------------------*/ /** * Housing for any secondary content. */ // Reassign our spacing unit to a sub-content specific variable. $sub-content-padding: $global-spacing-unit; .c-sub-content { padding: $sub-content-padding; background-color: $color-sub-content-bg; color: $color-sub-content; margin-bottom: $global-spacing-unit; /** * Remove the margin from the last element in the sub-content area so as to * avoid doubled spacings (compounded paddings and margins). */ > :last-child { margin-bottom: 0; } } /** * 1. Outdent the heading to touch the edges of the sub-content area. * 2. Re-indent the heading’s actual text to line back up with the rest of * the sub-content’s content. * 3. Adjust the bottom margin to account for the added border bottom (puts * text back on the baseline grid). */ .c-sub-content__title { @include font-size(12px); color: $color-brand-primary; text-transform: uppercase; letter-spacing: 0.1em; @include font-weight(normal); margin-right: -$sub-content-padding; /* [1] */ margin-left: -$sub-content-padding; /* [1] */ padding-right: $sub-content-padding; /* [2] */ padding-left: $sub-content-padding; /* [2] */ border-bottom: 1px solid; margin-bottom: $global-spacing-unit - 1px; /* [3] */ } .c-sub-content__title--featured { @include font-weight(bold); border-bottom-width: 2px; margin-bottom: $global-spacing-unit - 2px; /* [3] */ } /** * Image-like content should be full-bleed in the sub-content area. * * 1. Pull element back out to the very left of the sub-content (including * padding). * 2. Needs disabling so that we can manipulate widths. * 3. Fallback width for browsers that don’t support `calc()`. * 4. Force image to be full width *plus* the area taken up by the * sub-content’s padding. */ .c-sub-content__img { margin-left: -$sub-content-padding; /* [1] */ max-width: none; /* [2] */ width: 100%; /* [3] */ width: calc(100% + #{2 * $sub-content-padding}); /* [4] */ } ================================================ FILE: css/components/_components.testimonials.scss ================================================ /*------------------------------------*\ #TESTIMONIAL \*------------------------------------*/ /** * Testimonials feature a quote from a person and their photograph. The * Testimonial component extends the Media Object. */ .c-testimonial { @include font-size(18px); padding: $global-spacing-unit; border-left: 8px solid $color-testimonial-border; background-color: $color-testimonial-background; } .c-testimonial__title { @include font-size(12px); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0; } /** * On smaller screens, hide the photo completely… */ .c-testimonial__photo { display: none; /** * …but pop it back in as soon as we get room. */ @include mq($from: small) { display: block; } } .c-testimonial__text { } .c-testimonial__source { display: block; color: $color-testimonial-source; } ================================================ FILE: css/components/_config.promo.scss ================================================ ///*----------------------------------*\ // #PROMO //\*----------------------------------*/ /// // Pre-configuration for our promotional component. // $promo-color-background: #507028; $promo-color: #fff; $promo-custom: ( box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1), ); ================================================ FILE: css/components/components.pagination.scss ================================================ /*------------------------------------*\ #PAGINATION \*------------------------------------*/ // The pagination component needs to be usable outside of the larger ITCSS // project. As such, we import all of our Sass settings and tools (note, we are // not allowed to import any CSS here, only Sass) so that we have useful config // available to us before building out the pagination. // // This means that we end up with a compiled `components.pagination.css` file // that can be included into a project without the need for any further // dependencies or extraneous CSS. @import "../settings/all"; @import "../tools/all"; .c-pagination { @include font-family(sans-serif); @include font-size(12px); margin: 0; padding: 0; list-style: none; margin-bottom: $global-spacing-unit; display: table; table-layout: fixed; width: 100%; text-align: center; border: 1px solid $color-pagination-border; border-radius: $global-radius; overflow: hidden; } /** * 1. Hide all of the pagination items to start off with… * 2. …but show them all on big enough screens. */ .c-pagination__item { display: none; @include mq($from: small) { display: table-cell; } & + & { border-left: 1px solid $color-pagination-border; } } /** * Despite the show/hide stuff above, let’s explicitly force all relative * pagination controls to be always visible. * * This means that on small screens, we only get First, Previous, Next, Last * links, but on larger screens we get all of the numbers as well. */ .c-pagination__item--first, .c-pagination__item--prev, .c-pagination__item--next, .c-pagination__item--last { display: table-cell; } .c-pagination__link { text-decoration: none; display: block; padding: $global-spacing-unit-tiny; color: $color-pagination; background-color: $color-pagination-bg; @include mq($from: tiny) { padding: $global-spacing-unit-small; } @include hocus() { background-color: $color-pagination-bg-hover; } &.is-current { background-color: $color-pagination-bg-current; text-decoration: underline; cursor: default; } } ================================================ FILE: css/elements/_elements.headings.scss ================================================ /*------------------------------------*\ #HEADINGS \*------------------------------------*/ /** * Simple default styles for headings 1 through 6. */ $font-size-h1: 36px !default; $font-size-h2: 28px !default; $font-size-h3: 24px !default; $font-size-h4: 20px !default; $font-size-h5: 18px !default; $font-size-h6: 16px !default; h1, h2, h3, h4, h5, h6 { @include font-weight(bold); } h1 { @include font-size($font-size-h1); } h2 { @include font-size($font-size-h2); } h3 { @include font-size($font-size-h3); } h4 { @include font-size($font-size-h4); } h5 { @include font-size($font-size-h5); } h6 { @include font-size($font-size-h6); } ================================================ FILE: css/elements/_elements.images.scss ================================================ /*------------------------------------*\ #IMAGES \*------------------------------------*/ /** * 1. Fluid images for responsive purposes. * 2. Offset `alt` text from surrounding copy. * 3. Setting `vertical-align` removes the whitespace that appears under `img` * elements when they are dropped into a page as-is. Safer alternative to * using `display: block;`. */ img { max-width: 100%; /* [1] */ font-style: italic; /* [2] */ vertical-align: middle; /* [3] */ } /** * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s * not make the image fluid. */ img[width], /* [1] */ img[height] { /* [1] */ max-width: none; } ================================================ FILE: css/elements/_elements.links.scss ================================================ /*------------------------------------*\ #LINKS \*------------------------------------*/ /** * Default styles for simple hyperlinks. */ a { color: $color-links; @include font-weight(bold); text-decoration: none; @include hocus() { text-decoration: underline; } } ================================================ FILE: css/elements/_elements.lists.scss ================================================ /*------------------------------------*\ #LISTS \*------------------------------------*/ /** * Visually offset definition titles from their definitions. */ dt { @include font-weight(bold); } ================================================ FILE: css/elements/_elements.page.scss ================================================ /*------------------------------------*\ #PAGE \*------------------------------------*/ /** * Page-level styling (e.g. HTML and BODY elements). */ html { font-size: ($global-font-size / 16px) * 1em; line-height: $global-line-height / $global-font-size; @include font-family(sans-serif); background-color: $color-page-background; color: $color-page-text; } ================================================ FILE: css/elements/_elements.quotes.scss ================================================ /*------------------------------------*\ #QUOTES \*------------------------------------*/ /** * Basic styling for quoted text. */ q { font-style: italic; quotes: "‘" "’"; &:before { content: open-quote; } &:after { content: close-quote; } } blockquote { quotes: "“" "”"; p { text-indent: -0.42em; &:before { content: open-quote; } &:after { content: no-close-quote; } &:last-of-type { margin-bottom: 0; &:after { content: close-quote; } } } } ================================================ FILE: css/generic/_generic.box-sizing.scss ================================================ /*------------------------------------*\ #BOX-SIZING \*------------------------------------*/ /** * More sensible default box-sizing: * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { &, &:before, &:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } } ================================================ FILE: css/generic/_generic.normalize.scss ================================================ /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } ================================================ FILE: css/generic/_generic.reset.scss ================================================ /*------------------------------------*\ #RESET \*------------------------------------*/ /** * A very simple reset that sits on top of Normalize.css. */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, figure, table, th, td, caption, hr { margin: 0; padding: 0; } /** * Remove trailing margins from nested lists. */ li > { ul, ol { margin-bottom: 0; } } /** * Remove spaces between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } ================================================ FILE: css/generic/_generic.shared.scss ================================================ /*------------------------------------*\ #SHARED \*------------------------------------*/ /** * Shared declarations for certain elements. */ /** * Always declare margins in the same direction: * csswizardry.com/2012/06/single-direction-margin-declarations */ h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, p, address, hr, table, fieldset, figure, pre { margin-bottom: $global-spacing-unit; } ul, ol, dd { margin-left: $global-spacing-unit; } ================================================ FILE: css/main.css ================================================ @charset "UTF-8"; /*------------------------------------*\ #MAIN \*------------------------------------*/ /** * CONTENTS * * SETTINGS * Custom...............Custom-specific theming and config. * All..................Because our Settings layer doesn’t actually produce any * CSS, we can safely glob all of the files into one import * without risk of bloating our compiled stylesheet. This * also allows us to easily recycle all of our * project-level settings into other Sass file/projects. * Please see `settings/_all.scss` for a full table of * contents. * * TOOLS * All..................Because our Tools layer doesn’t actually produce any * CSS, we can safely glob all of the files into one import * without risk of bloating our compiled stylesheet. This * also allows us to easily recycle all of our * project-level tooling into other Sass file/projects. * Please see `tools/_all.scss` for a full table of * contents. * * GENERIC * Box-sizing...........Better default `box-sizing`. * Normalize.css........A level playing field. * Reset................A pared back reset to remove margins. * Shared...............Sensibly and tersely share global commonalities. * * ELEMENTS * Page.................Page-level styles (HTML element). * Headings.............Heading styles. * Links................Hyperlink styles. * Lists................Default list styles. * Images...............Base image styles. * Quotes...............Styling for blockquotes, etc. * * OBJECTS * Wrappers.............Wrappers and page constraints. * Layout...............Generic layout module. * Headline.............Simple object for structuring heading pairs. * Media................The media object. * List-bare............Lists with no bullets or indents. * List-inline..........Simple abstraction for setting lists out in a line. * Crop.................A container for cropping image and media content. * * COMPONENTS * Logo.................Make our logo a reusable component. * Page.................Full page wrapper. * Page-head............Page header styles. * Page-foot............Page footer styles. * Nav primary..........The site’s main nav. * Nav secondary........Secondary nav styles. * Nav tertiary.........Horizontally scrolling nav. * Masthead.............Site’s main masthead. * Sub-content..........Secondary/supporting content. * Panel................Simple panelled boxout. * Score................Score lozenge for place ratings. * Buttons..............Button styles. * Avatar...............General avatar styles. * Testimonial..........Quote styles. * Calendar.............Simple static calendar component. * Headline.............Basic heading style for generic headlines. * Promo................Promotional box styling. * Pagination...........Responsive pagination component. * * SCOPES * Prose................Set up a new styling context for long-format text. * * THEMES * Red..................Simple red theme for the site. * Custom...............Custom-specific overrides. * * UTILITIES * Headings.............Reassigning our heading styles to helper classes. * Widths...............Simple width helper classes. * Healthcheck..........Visual health-check tool. * Debug................Highlight potentially troublesome code. * Shame.css............Short-term hacks and quick-fixes. */ /*------------------------------------*\ #BOX-SIZING \*------------------------------------*/ /** * More sensible default box-sizing: * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /*------------------------------------*\ #RESET \*------------------------------------*/ /** * A very simple reset that sits on top of Normalize.css. */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, figure, table, th, td, caption, hr { margin: 0; padding: 0; } /** * Remove trailing margins from nested lists. */ li > ul, li > ol { margin-bottom: 0; } /** * Remove spaces between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*------------------------------------*\ #SHARED \*------------------------------------*/ /** * Shared declarations for certain elements. */ /** * Always declare margins in the same direction: * csswizardry.com/2012/06/single-direction-margin-declarations */ h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, p, address, hr, table, fieldset, figure, pre { margin-bottom: 20px; } ul, ol, dd { margin-left: 20px; } /*------------------------------------*\ #PAGE \*------------------------------------*/ /** * Page-level styling (e.g. HTML and BODY elements). */ html { font-size: 0.875em; line-height: 1.428571429; font-family: Lato, sans-serif; background-color: #f3f3f3; color: #333; } /*------------------------------------*\ #HEADINGS \*------------------------------------*/ /** * Simple default styles for headings 1 through 6. */ h1, h2, h3, h4, h5, h6 { font-weight: 700; } h1 { font-size: 36px; font-size: 2.571428571rem; line-height: 1.111111111; } h2 { font-size: 28px; font-size: 2rem; line-height: 1.428571429; } h3 { font-size: 24px; font-size: 1.714285714rem; line-height: 1.666666667; } h4 { font-size: 20px; font-size: 1.428571429rem; line-height: 1; } h5 { font-size: 18px; font-size: 1.285714286rem; line-height: 1.111111111; } h6 { font-size: 16px; font-size: 1.142857143rem; line-height: 1.25; } /*------------------------------------*\ #LINKS \*------------------------------------*/ /** * Default styles for simple hyperlinks. */ a { color: inherit; font-weight: 700; text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /*------------------------------------*\ #LISTS \*------------------------------------*/ /** * Visually offset definition titles from their definitions. */ dt { font-weight: 700; } /*------------------------------------*\ #IMAGES \*------------------------------------*/ /** * 1. Fluid images for responsive purposes. * 2. Offset `alt` text from surrounding copy. * 3. Setting `vertical-align` removes the whitespace that appears under `img` * elements when they are dropped into a page as-is. Safer alternative to * using `display: block;`. */ img { max-width: 100%; /* [1] */ font-style: italic; /* [2] */ vertical-align: middle; /* [3] */ } /** * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s * not make the image fluid. */ img[width], img[height] { /* [1] */ max-width: none; } /*------------------------------------*\ #QUOTES \*------------------------------------*/ /** * Basic styling for quoted text. */ q { font-style: italic; quotes: "‘" "’"; } q:before { content: open-quote; } q:after { content: close-quote; } blockquote { quotes: "“" "”"; } blockquote p { text-indent: -0.42em; } blockquote p:before { content: open-quote; } blockquote p:after { content: no-close-quote; } blockquote p:last-of-type { margin-bottom: 0; } blockquote p:last-of-type:after { content: close-quote; } /*------------------------------------*\ #WRAPPERS \*------------------------------------*/ .o-wrapper { max-width: 1280px; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; } .o-wrapper:after { content: ""; display: table; clear: both; } /*------------------------------------*\ #LAYOUT \*------------------------------------*/ .o-layout { margin: 0; padding: 0; list-style: none; margin-left: -20px; font-size: 0; } .o-layout__item { display: inline-block; vertical-align: top; width: 100%; padding-left: 20px; font-size: 14px; font-size: 1rem; line-height: 1.428571429; } .o-layout--rev { direction: rtl; } .o-layout--rev > .o-layout__item { direction: ltr; } .o-layout--middle > .o-layout__item { vertical-align: middle; } .o-layout--bottom > .o-layout__item { vertical-align: bottom; } /*------------------------------------*\ #HEADLINE \*------------------------------------*/ .o-headline { margin-bottom: 1.428571429rem; } .o-headline__main, .o-headline__sub { margin-bottom: 0; line-height: 1; } /*------------------------------------*\ #MEDIA \*------------------------------------*/ .o-media { display: table; width: 100%; } .o-media__img, .o-media__body { display: table-cell; vertical-align: top; } .o-media--middle > .o-media__img, .o-media--middle > .o-media__body { vertical-align: middle; } .o-media__img { padding-right: 20px; } .o-media__img img { max-width: none; } .o-media__body { width: 100%; } /*------------------------------------*\ #LIST-BARE \*------------------------------------*/ .o-list-bare { list-style: none; margin-left: 0; } /*------------------------------------*\ #LIST-INLINE \*------------------------------------*/ .o-list-inline { margin: 0; padding: 0; list-style: none; } .o-list-inline__item { display: inline-block; } /*------------------------------------*\ #CROP \*------------------------------------*/ /** * Provide a cropping container in order to display media (usually images) * cropped to certain ratios. * * 1. Set up a positioning context in which the image can sit. * 2. This is the crucial part: where the cropping happens. */ .o-crop { position: relative; /* [1] */ display: block; overflow: hidden; /* [2] */ } /** * A variety of different standard ratios to crop to. * * We use the `padding` trick to create a fluid-height container (`padding`s set * in percentages will track the current width of the element). */ .o-crop--1\:1 { padding-top: 100%; } .o-crop--4\:3 { padding-top: 75%; } .o-crop--16\:9 { padding-top: 56.25%; } /** * Apply this class to the content (usually `img`) that needs cropping. * * 1. Positioning to the bottom usually gives consistently better results as * most images’ subjects are toward the bottom of the frame. Of course, * your mileage may vary. */ .o-crop__content { position: absolute; bottom: 0; /* [1] */ left: 0; } /*------------------------------------*\ #LOGO \*------------------------------------*/ .c-logo__fill { fill: #378bb5; } .c-page-head .c-logo__fill { fill: currentcolor; } /*------------------------------------*\ #PAGE \*------------------------------------*/ @media (min-width: 64em) { .c-page.has-fixed-page-head { padding-top: 70px; } } /*------------------------------------*\ #PAGE-HEAD \*------------------------------------*/ .c-page-head { background-color: #378bb5; color: #fff; padding: 20px; text-align: center; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1); } .c-page-head:after { content: ""; display: table; clear: both; } @media (min-width: 64em) { .c-page-head.is-fixed { text-align: left; position: fixed; top: 0; right: 0; left: 0; z-index: 1; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } } .c-page-head__logo { display: block; line-height: 0; margin-bottom: 20px; } @media (min-width: 64em) { .c-page-head__logo { float: left; margin-bottom: 0; } } /** * 1. The height of the nav needs to marry up with the height of the logo. */ .c-page-head__nav { float: right; line-height: 30px; /* [1] */ } /*------------------------------------*\ #PAGE-FOOT \*------------------------------------*/ .c-page-foot { padding: 20px; font-size: 12px; font-size: 0.857142857rem; line-height: 1.666666667; background-color: #333; color: #fff; } /*------------------------------------*\ #NAV-PRIMARY \*------------------------------------*/ .c-nav-primary__link { display: inline-block; padding-right: 20px; padding-left: 20px; font-weight: 400; } .c-nav-primary__link.is-active { text-decoration: underline; cursor: default; } /*------------------------------------*\ #NAV-SECONDARY \*------------------------------------*/ .c-nav-secondary { text-align: center; } .c-nav-secondary__item { padding-right: 10px; padding-left: 10px; } .c-nav-secondary__link { font-weight: 400; } /*------------------------------------*\ #NAV-TERTIARY \*------------------------------------*/ .c-nav-tertiary { background-color: #333; color: #fff; position: relative; text-align: right; } .c-nav-tertiary::before, .c-nav-tertiary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 20px; } .c-nav-tertiary::before { left: 0; background-image: linear-gradient(to right, #333 0, transparent 100%); } .c-nav-tertiary::after { right: 0; background-image: linear-gradient(to left, #333 0, transparent 100%); } .c-nav-tertiary__list { white-space: nowrap; overflow-x: scroll; margin: 0; list-style: none; font-size: 0; padding-right: 10px; padding-left: 10px; -webkit-overflow-scrolling: touch; } .c-nav-tertiary__list:after { content: ""; display: table; clear: both; } .c-nav-tertiary__list::-webkit-scrollbar { display: none; } .c-nav-tertiary__item { font-size: 12px; font-size: 0.857142857rem; line-height: 1.666666667; display: inline-block; } .c-nav-tertiary__item + .c-nav-tertiary__item { border-left: 1px solid rgba(255, 255, 255, 0.1); } .c-nav-tertiary__link { font-weight: 400; display: block; padding: 10px; color: #fff; letter-spacing: 0.025em; } /*------------------------------------*\ #MASTHEAD \*------------------------------------*/ .c-masthead { position: relative; background-color: #378bb5; color: white; overflow: hidden; height: 0; padding-top: 56.25%; margin-bottom: 20px; } @media (min-width: 75em) { .c-masthead { padding-top: 0; height: 720px; } } .c-masthead__media { width: 100%; position: absolute; top: 0; left: 0; } .c-masthead__text { position: absolute; right: 0; bottom: 0; left: 0; padding: 20px; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.25); text-shadow: 0 -1px rgba(0, 0, 0, 0.5); } .c-masthead__title { font-weight: 900; font-size: 60px; font-size: 4.285714286rem; line-height: 1; } /*------------------------------------*\ #SUB-CONTENT \*------------------------------------*/ /** * Housing for any secondary content. */ .c-sub-content { padding: 20px; background-color: rgba(0, 0, 0, 0.05); color: #666; margin-bottom: 20px; /** * Remove the margin from the last element in the sub-content area so as to * avoid doubled spacings (compounded paddings and margins). */ } .c-sub-content > :last-child { margin-bottom: 0; } /** * 1. Outdent the heading to touch the edges of the sub-content area. * 2. Re-indent the heading’s actual text to line back up with the rest of * the sub-content’s content. * 3. Adjust the bottom margin to account for the added border bottom (puts * text back on the baseline grid). */ .c-sub-content__title { font-size: 12px; font-size: 0.857142857rem; line-height: 1.666666667; color: #378bb5; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; margin-right: -20px; /* [1] */ margin-left: -20px; /* [1] */ padding-right: 20px; /* [2] */ padding-left: 20px; /* [2] */ border-bottom: 1px solid; margin-bottom: 19px; /* [3] */ } .c-sub-content__title--featured { font-weight: 700; border-bottom-width: 2px; margin-bottom: 18px; /* [3] */ } /** * Image-like content should be full-bleed in the sub-content area. * * 1. Pull element back out to the very left of the sub-content (including * padding). * 2. Needs disabling so that we can manipulate widths. * 3. Fallback width for browsers that don’t support `calc()`. * 4. Force image to be full width *plus* the area taken up by the * sub-content’s padding. */ .c-sub-content__img { margin-left: -20px; /* [1] */ max-width: none; /* [2] */ width: 100%; /* [3] */ width: calc(100% + 40px); /* [4] */ } /*------------------------------------*\ #PANEL \*------------------------------------*/ .c-panel { background-color: #fff; border-radius: 3px; overflow: hidden; margin-bottom: 20px; border: 1px solid #e4e4e4; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.025); } .c-panel__masthead { height: 200px; overflow: hidden; background-color: #e4e4e4; } .c-panel__masthead--small { height: 100px; } .c-panel__masthead--fluid { position: relative; height: auto; padding-top: 56.25%; } .c-panel__masthead-media { width: 100%; object-fit: cover; } .c-panel__masthead--fluid .c-panel__masthead-media { position: absolute; top: -25%; left: 0; } .c-panel__content { padding: 20px; } .c-panel__content > :last-child { margin-bottom: 0; } .c-panel__link { display: block; text-align: center; text-decoration: none; padding: 20px; border-top: 1px solid #e4e4e4; color: #333; } .c-panel__link:hover, .c-panel__link:focus { text-decoration: none; background-color: rgba(0, 0, 0, 0.01); color: #378bb5; } .c-panel--inverse { background-color: #378bb5; color: #fff; } /*------------------------------------*\ #SCORE \*------------------------------------*/ /** * Each Discovry has an associated score (e.g. 7.2 out of a possible 10). The * Score component simply displays that score colored appropriately. * * We blend between three main brackets of score (Poor, Average, and Good) by * creating an array of scores and their colors, and then looping through that * array in order to output selectors that bind onto a data attribute, for * example: * * .c-score[data-score^="7."] {} * * This selector looks for a DOM node with a class of `.c-score`, and then * sees what the first characters of its `data-score` attribute are (`^=`). If * the first characters are, for example, 7., then the DOM node gets styled in * the color of the 7.x rating. */ .c-score { display: inline-block; /** * Apply the score’s color as a background by augmenting with a class of * `.c-score--inverse`. * * 1. This magic number applies the right amount of padding to spoof a space * character either side of the text. */ } .c-score[data-score^="0."] { color: red; } .c-score[data-score^="1."] { color: #ff2100; } .c-score[data-score^="2."] { color: #ff4200; } .c-score[data-score^="3."] { color: #ff6300; } .c-score[data-score^="4."] { color: #ff8400; } .c-score[data-score^="5."] { color: orange; } .c-score[data-score^="6."] { color: #cc9e00; } .c-score[data-score^="7."] { color: #999600; } .c-score[data-score^="8."] { color: #668f00; } .c-score[data-score^="9."] { color: #338700; } .c-score[data-score^="10."] { color: green; } .c-score--inverse { vertical-align: middle; padding-right: 0.28em; /* [1] */ padding-left: 0.28em; /* [1] */ font-weight: 400; border-radius: 3px; } .c-score--inverse[data-score^="0."] { background-color: red; color: #fff; } .c-score--inverse[data-score^="1."] { background-color: #ff2100; color: #fff; } .c-score--inverse[data-score^="2."] { background-color: #ff4200; color: #fff; } .c-score--inverse[data-score^="3."] { background-color: #ff6300; color: #fff; } .c-score--inverse[data-score^="4."] { background-color: #ff8400; color: #fff; } .c-score--inverse[data-score^="5."] { background-color: orange; color: #fff; } .c-score--inverse[data-score^="6."] { background-color: #cc9e00; color: #fff; } .c-score--inverse[data-score^="7."] { background-color: #999600; color: #fff; } .c-score--inverse[data-score^="8."] { background-color: #668f00; color: #fff; } .c-score--inverse[data-score^="9."] { background-color: #338700; color: #fff; } .c-score--inverse[data-score^="10."] { background-color: green; color: #fff; } .c-score--small { font-size: 14px; font-size: 1rem; line-height: 1.428571429; } /*------------------------------------*\ #BUTTONS \*------------------------------------*/ /** * 1. Allow us to style box model properties. * 2. Line different sized buttons up a little nicer. * 3. Make buttons inherit font styles (often necessary when styling `input`s as * buttons). * 4. Reset/normalize some styles. * 5. Force all button-styled elements to appear clickable. * 6. Subtract the border size from the padding value so that buttons do not * grow larger as we add borders. */ .c-btn { display: inline-block; /* [1] */ vertical-align: middle; /* [2] */ font: inherit; /* [3] */ text-align: center; /* [4] */ margin: 0; /* [4] */ cursor: pointer; /* [5] */ padding: 10px 20px; } .c-btn:hover, .c-btn:focus { text-decoration: none; } .c-btn--primary { background-color: #378bb5; color: #fff; border-radius: 3px; transition: 0.333333333s; } .c-btn--primary:hover, .c-btn--primary:focus { background-color: #317ca1; } .t-red .c-btn--primary { background-color: #c00; } .c-btn--secondary { background-color: #abc123; color: #fff; border-radius: 3px; transition: 0.333333333s; } .c-btn--secondary:hover, .c-btn--secondary:focus { background-color: #98ab1f; } .c-btn--small { padding: 5px 10px; } .c-btn--large { padding: 20px 40px; } /*------------------------------------*\ #AVATAR \*------------------------------------*/ .c-avatar { display: block; width: 60px; height: 60px; border-radius: 100%; } .c-avatar--small { width: 30px; height: 30px; } .c-avatar--large { width: 120px; height: 120px; } /*------------------------------------*\ #TESTIMONIAL \*------------------------------------*/ /** * Testimonials feature a quote from a person and their photograph. The * Testimonial component extends the Media Object. */ .c-testimonial { font-size: 18px; font-size: 1.285714286rem; line-height: 1.111111111; padding: 20px; border-left: 8px solid #378bb5; background-color: #fff; } .c-testimonial__title { font-size: 12px; font-size: 0.857142857rem; line-height: 1.666666667; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0; } /** * On smaller screens, hide the photo completely… */ .c-testimonial__photo { display: none; /** * …but pop it back in as soon as we get room. */ } @media (min-width: 45em) { .c-testimonial__photo { display: block; } } .c-testimonial__source { display: block; color: #666; } /*------------------------------------*\ #CALENDAR \*------------------------------------*/ .c-calendar { width: 100%; table-layout: fixed; font-size: 12px; font-size: 0.857142857rem; line-height: 1.666666667; text-align: center; } .c-calendar th, .c-calendar td { padding: 5px; border: 1px solid #e4e4e4; background-color: #fff; } .c-calendar th { font-weight: 700; border-bottom-width: 2px; } .c-calendar__title { color: #fff; } .c-calendar__title.c-calendar__title { background-color: #378bb5; border-color: currentColor; border-bottom-width: 1px; } .c-calendar__outside { color: #999; } .c-calendar__outside.c-calendar__outside { background-color: transparent; } .c-calendar__busy { color: #fff; } .c-calendar__busy.c-calendar__busy { background-color: #abc123; border-color: currentColor; } /*------------------------------------*\ #HEADLINE \*------------------------------------*/ .c-headline { font-size: 14px; font-size: 1rem; line-height: 1.428571429; font-weight: 400; border-bottom: 1px solid #cccccc; color: #999; text-transform: uppercase; letter-spacing: 0.05em; } /*------------------------------------*\ #PROMO \*------------------------------------*/ .c-promo { padding: 20px; margin-bottom: 20px; background-color: #507028; color: #fff; border-radius: 3px; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1); } .c-promo > :last-child { margin-bottom: 0; } .c-promo__title { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } /*------------------------------------*\ #PAGINATION \*------------------------------------*/ .c-pagination { font-family: Lato, sans-serif; font-size: 12px; font-size: 0.857142857rem; line-height: 1.666666667; margin: 0; padding: 0; list-style: none; margin-bottom: 20px; display: table; table-layout: fixed; width: 100%; text-align: center; border: 1px solid #fff; border-radius: 3px; overflow: hidden; } /** * 1. Hide all of the pagination items to start off with… * 2. …but show them all on big enough screens. */ .c-pagination__item { display: none; } @media (min-width: 45em) { .c-pagination__item { display: table-cell; } } .c-pagination__item + .c-pagination__item { border-left: 1px solid #fff; } /** * Despite the show/hide stuff above, let’s explicitly force all relative * pagination controls to be always visible. * * This means that on small screens, we only get First, Previous, Next, Last * links, but on larger screens we get all of the numbers as well. */ .c-pagination__item--first, .c-pagination__item--prev, .c-pagination__item--next, .c-pagination__item--last { display: table-cell; } .c-pagination__link { text-decoration: none; display: block; padding: 5px; color: #fff; background-color: #378bb5; } @media (min-width: 30em) { .c-pagination__link { padding: 10px; } } .c-pagination__link:hover, .c-pagination__link:focus { background-color: #317ca1; } .c-pagination__link.is-current { background-color: #4099c5; text-decoration: underline; cursor: default; } /*------------------------------------*\ #PROSE \*------------------------------------*/ .s-prose { /** * Set continuous prose in a nice, large serif. */ font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif; font-size: 18px; font-size: 1.285714286rem; line-height: 1.111111111; /** * Make all headings in CMS-powered content the same size in order to * prevent the user abusing visual vs. semantic hierarchy. */ /** * Make links a lot more obvious in continuous text by having them * underlined and colored in their default state. */ /** * Indent list elements enough that their bullets are not leaking out of * their container. */ /** * Prevent CMS users from abusing line breaks. */ /** * Discourage WYSIWYG users from applying their own styles. */ } .s-prose h1, .s-prose h2, .s-prose h3, .s-prose h4, .s-prose h5, .s-prose h6 { font-family: Lato, sans-serif; font-size: 18px; font-size: 1.285714286rem; line-height: 1.111111111; } .s-prose a { color: #378bb5; text-decoration: underline; font-weight: 400; } .s-prose a:hover, .s-prose a:focus { color: #317ca1; } .s-prose ul, .s-prose ol { margin-left: 40px; } .s-prose br + br { display: none; } .s-prose [style]:after { content: " Please refrain from adding your own styling."; color: red; } /*------------------------------------*\ #RED \*------------------------------------*/ /** * Apply a theme to the entire view. Add `class="t-red"` to the HTML or BODY * element of the page. */ .t-red .c-btn--primary { background-color: #c00; } /*------------------------------------*\ #HEADINGS \*------------------------------------*/ .u-h1 { font-size: 36px; font-size: 2.571428571rem; line-height: 1.111111111; } .u-h2 { font-size: 28px; font-size: 2rem; line-height: 1.428571429; } .u-h3 { font-size: 24px; font-size: 1.714285714rem; line-height: 1.666666667; } .u-h4 { font-size: 20px; font-size: 1.428571429rem; line-height: 1; } .u-h5 { font-size: 18px; font-size: 1.285714286rem; line-height: 1.111111111; } .u-h6 { font-size: 16px; font-size: 1.142857143rem; line-height: 1.25; } /*------------------------------------*\ #WIDTHS \*------------------------------------*/ /** * A series of width helper classes that you can use to size things like grid * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken- * word format (e.g. `.u-2-of-3`). Use these in your markup: * *
*/ .u-1\/1 { width: 100% !important; } .u-push-1\/1 { position: relative; left: 100% !important; } .u-pull-1\/1 { position: relative; right: 100% !important; } .u-1\/2 { width: 50% !important; } .u-push-1\/2 { position: relative; left: 50% !important; } .u-pull-1\/2 { position: relative; right: 50% !important; } .u-2\/2 { width: 100% !important; } .u-push-2\/2 { position: relative; left: 100% !important; } .u-pull-2\/2 { position: relative; right: 100% !important; } .u-1\/3 { width: 33.333333333% !important; } .u-push-1\/3 { position: relative; left: 33.333333333% !important; } .u-pull-1\/3 { position: relative; right: 33.333333333% !important; } .u-2\/3 { width: 66.666666667% !important; } .u-push-2\/3 { position: relative; left: 66.666666667% !important; } .u-pull-2\/3 { position: relative; right: 66.666666667% !important; } .u-3\/3 { width: 100% !important; } .u-push-3\/3 { position: relative; left: 100% !important; } .u-pull-3\/3 { position: relative; right: 100% !important; } .u-1\/4 { width: 25% !important; } .u-push-1\/4 { position: relative; left: 25% !important; } .u-pull-1\/4 { position: relative; right: 25% !important; } .u-2\/4 { width: 50% !important; } .u-push-2\/4 { position: relative; left: 50% !important; } .u-pull-2\/4 { position: relative; right: 50% !important; } .u-3\/4 { width: 75% !important; } .u-push-3\/4 { position: relative; left: 75% !important; } .u-pull-3\/4 { position: relative; right: 75% !important; } .u-4\/4 { width: 100% !important; } .u-push-4\/4 { position: relative; left: 100% !important; } .u-pull-4\/4 { position: relative; right: 100% !important; } .u-1\/5 { width: 20% !important; } .u-push-1\/5 { position: relative; left: 20% !important; } .u-pull-1\/5 { position: relative; right: 20% !important; } .u-2\/5 { width: 40% !important; } .u-push-2\/5 { position: relative; left: 40% !important; } .u-pull-2\/5 { position: relative; right: 40% !important; } .u-3\/5 { width: 60% !important; } .u-push-3\/5 { position: relative; left: 60% !important; } .u-pull-3\/5 { position: relative; right: 60% !important; } .u-4\/5 { width: 80% !important; } .u-push-4\/5 { position: relative; left: 80% !important; } .u-pull-4\/5 { position: relative; right: 80% !important; } .u-5\/5 { width: 100% !important; } .u-push-5\/5 { position: relative; left: 100% !important; } .u-pull-5\/5 { position: relative; right: 100% !important; } @media (min-width: 45em) { .u-1\/1\@sm { width: 100% !important; } .u-push-1\/1\@sm { position: relative; left: 100% !important; } .u-pull-1\/1\@sm { position: relative; right: 100% !important; } .u-1\/2\@sm { width: 50% !important; } .u-push-1\/2\@sm { position: relative; left: 50% !important; } .u-pull-1\/2\@sm { position: relative; right: 50% !important; } .u-2\/2\@sm { width: 100% !important; } .u-push-2\/2\@sm { position: relative; left: 100% !important; } .u-pull-2\/2\@sm { position: relative; right: 100% !important; } .u-1\/3\@sm { width: 33.333333333% !important; } .u-push-1\/3\@sm { position: relative; left: 33.333333333% !important; } .u-pull-1\/3\@sm { position: relative; right: 33.333333333% !important; } .u-2\/3\@sm { width: 66.666666667% !important; } .u-push-2\/3\@sm { position: relative; left: 66.666666667% !important; } .u-pull-2\/3\@sm { position: relative; right: 66.666666667% !important; } .u-3\/3\@sm { width: 100% !important; } .u-push-3\/3\@sm { position: relative; left: 100% !important; } .u-pull-3\/3\@sm { position: relative; right: 100% !important; } .u-1\/4\@sm { width: 25% !important; } .u-push-1\/4\@sm { position: relative; left: 25% !important; } .u-pull-1\/4\@sm { position: relative; right: 25% !important; } .u-2\/4\@sm { width: 50% !important; } .u-push-2\/4\@sm { position: relative; left: 50% !important; } .u-pull-2\/4\@sm { position: relative; right: 50% !important; } .u-3\/4\@sm { width: 75% !important; } .u-push-3\/4\@sm { position: relative; left: 75% !important; } .u-pull-3\/4\@sm { position: relative; right: 75% !important; } .u-4\/4\@sm { width: 100% !important; } .u-push-4\/4\@sm { position: relative; left: 100% !important; } .u-pull-4\/4\@sm { position: relative; right: 100% !important; } .u-1\/5\@sm { width: 20% !important; } .u-push-1\/5\@sm { position: relative; left: 20% !important; } .u-pull-1\/5\@sm { position: relative; right: 20% !important; } .u-2\/5\@sm { width: 40% !important; } .u-push-2\/5\@sm { position: relative; left: 40% !important; } .u-pull-2\/5\@sm { position: relative; right: 40% !important; } .u-3\/5\@sm { width: 60% !important; } .u-push-3\/5\@sm { position: relative; left: 60% !important; } .u-pull-3\/5\@sm { position: relative; right: 60% !important; } .u-4\/5\@sm { width: 80% !important; } .u-push-4\/5\@sm { position: relative; left: 80% !important; } .u-pull-4\/5\@sm { position: relative; right: 80% !important; } .u-5\/5\@sm { width: 100% !important; } .u-push-5\/5\@sm { position: relative; left: 100% !important; } .u-pull-5\/5\@sm { position: relative; right: 100% !important; } } @media (min-width: 64em) { .u-1\/1\@md { width: 100% !important; } .u-push-1\/1\@md { position: relative; left: 100% !important; } .u-pull-1\/1\@md { position: relative; right: 100% !important; } .u-1\/2\@md { width: 50% !important; } .u-push-1\/2\@md { position: relative; left: 50% !important; } .u-pull-1\/2\@md { position: relative; right: 50% !important; } .u-2\/2\@md { width: 100% !important; } .u-push-2\/2\@md { position: relative; left: 100% !important; } .u-pull-2\/2\@md { position: relative; right: 100% !important; } .u-1\/3\@md { width: 33.333333333% !important; } .u-push-1\/3\@md { position: relative; left: 33.333333333% !important; } .u-pull-1\/3\@md { position: relative; right: 33.333333333% !important; } .u-2\/3\@md { width: 66.666666667% !important; } .u-push-2\/3\@md { position: relative; left: 66.666666667% !important; } .u-pull-2\/3\@md { position: relative; right: 66.666666667% !important; } .u-3\/3\@md { width: 100% !important; } .u-push-3\/3\@md { position: relative; left: 100% !important; } .u-pull-3\/3\@md { position: relative; right: 100% !important; } .u-1\/4\@md { width: 25% !important; } .u-push-1\/4\@md { position: relative; left: 25% !important; } .u-pull-1\/4\@md { position: relative; right: 25% !important; } .u-2\/4\@md { width: 50% !important; } .u-push-2\/4\@md { position: relative; left: 50% !important; } .u-pull-2\/4\@md { position: relative; right: 50% !important; } .u-3\/4\@md { width: 75% !important; } .u-push-3\/4\@md { position: relative; left: 75% !important; } .u-pull-3\/4\@md { position: relative; right: 75% !important; } .u-4\/4\@md { width: 100% !important; } .u-push-4\/4\@md { position: relative; left: 100% !important; } .u-pull-4\/4\@md { position: relative; right: 100% !important; } .u-1\/5\@md { width: 20% !important; } .u-push-1\/5\@md { position: relative; left: 20% !important; } .u-pull-1\/5\@md { position: relative; right: 20% !important; } .u-2\/5\@md { width: 40% !important; } .u-push-2\/5\@md { position: relative; left: 40% !important; } .u-pull-2\/5\@md { position: relative; right: 40% !important; } .u-3\/5\@md { width: 60% !important; } .u-push-3\/5\@md { position: relative; left: 60% !important; } .u-pull-3\/5\@md { position: relative; right: 60% !important; } .u-4\/5\@md { width: 80% !important; } .u-push-4\/5\@md { position: relative; left: 80% !important; } .u-pull-4\/5\@md { position: relative; right: 80% !important; } .u-5\/5\@md { width: 100% !important; } .u-push-5\/5\@md { position: relative; left: 100% !important; } .u-pull-5\/5\@md { position: relative; right: 100% !important; } } @media (min-width: 75em) { .u-1\/1\@lg { width: 100% !important; } .u-push-1\/1\@lg { position: relative; left: 100% !important; } .u-pull-1\/1\@lg { position: relative; right: 100% !important; } .u-1\/2\@lg { width: 50% !important; } .u-push-1\/2\@lg { position: relative; left: 50% !important; } .u-pull-1\/2\@lg { position: relative; right: 50% !important; } .u-2\/2\@lg { width: 100% !important; } .u-push-2\/2\@lg { position: relative; left: 100% !important; } .u-pull-2\/2\@lg { position: relative; right: 100% !important; } .u-1\/3\@lg { width: 33.333333333% !important; } .u-push-1\/3\@lg { position: relative; left: 33.333333333% !important; } .u-pull-1\/3\@lg { position: relative; right: 33.333333333% !important; } .u-2\/3\@lg { width: 66.666666667% !important; } .u-push-2\/3\@lg { position: relative; left: 66.666666667% !important; } .u-pull-2\/3\@lg { position: relative; right: 66.666666667% !important; } .u-3\/3\@lg { width: 100% !important; } .u-push-3\/3\@lg { position: relative; left: 100% !important; } .u-pull-3\/3\@lg { position: relative; right: 100% !important; } .u-1\/4\@lg { width: 25% !important; } .u-push-1\/4\@lg { position: relative; left: 25% !important; } .u-pull-1\/4\@lg { position: relative; right: 25% !important; } .u-2\/4\@lg { width: 50% !important; } .u-push-2\/4\@lg { position: relative; left: 50% !important; } .u-pull-2\/4\@lg { position: relative; right: 50% !important; } .u-3\/4\@lg { width: 75% !important; } .u-push-3\/4\@lg { position: relative; left: 75% !important; } .u-pull-3\/4\@lg { position: relative; right: 75% !important; } .u-4\/4\@lg { width: 100% !important; } .u-push-4\/4\@lg { position: relative; left: 100% !important; } .u-pull-4\/4\@lg { position: relative; right: 100% !important; } .u-1\/5\@lg { width: 20% !important; } .u-push-1\/5\@lg { position: relative; left: 20% !important; } .u-pull-1\/5\@lg { position: relative; right: 20% !important; } .u-2\/5\@lg { width: 40% !important; } .u-push-2\/5\@lg { position: relative; left: 40% !important; } .u-pull-2\/5\@lg { position: relative; right: 40% !important; } .u-3\/5\@lg { width: 60% !important; } .u-push-3\/5\@lg { position: relative; left: 60% !important; } .u-pull-3\/5\@lg { position: relative; right: 60% !important; } .u-4\/5\@lg { width: 80% !important; } .u-push-4\/5\@lg { position: relative; left: 80% !important; } .u-pull-4\/5\@lg { position: relative; right: 80% !important; } .u-5\/5\@lg { width: 100% !important; } .u-push-5\/5\@lg { position: relative; left: 100% !important; } .u-pull-5\/5\@lg { position: relative; right: 100% !important; } } /*------------------------------------*\ #SHAME.CSS \*------------------------------------*/ ._c-page-foot { display: block; } /*# sourceMappingURL=main.css.map */ ================================================ FILE: css/main.scss ================================================ /*------------------------------------*\ #MAIN \*------------------------------------*/ /** * CONTENTS * * SETTINGS * Custom...............Custom-specific theming and config. * All..................Because our Settings layer doesn’t actually produce any * CSS, we can safely glob all of the files into one import * without risk of bloating our compiled stylesheet. This * also allows us to easily recycle all of our * project-level settings into other Sass file/projects. * Please see `settings/_all.scss` for a full table of * contents. * * TOOLS * All..................Because our Tools layer doesn’t actually produce any * CSS, we can safely glob all of the files into one import * without risk of bloating our compiled stylesheet. This * also allows us to easily recycle all of our * project-level tooling into other Sass file/projects. * Please see `tools/_all.scss` for a full table of * contents. * * GENERIC * Box-sizing...........Better default `box-sizing`. * Normalize.css........A level playing field. * Reset................A pared back reset to remove margins. * Shared...............Sensibly and tersely share global commonalities. * * ELEMENTS * Page.................Page-level styles (HTML element). * Headings.............Heading styles. * Links................Hyperlink styles. * Lists................Default list styles. * Images...............Base image styles. * Quotes...............Styling for blockquotes, etc. * * OBJECTS * Wrappers.............Wrappers and page constraints. * Layout...............Generic layout module. * Headline.............Simple object for structuring heading pairs. * Media................The media object. * List-bare............Lists with no bullets or indents. * List-inline..........Simple abstraction for setting lists out in a line. * Crop.................A container for cropping image and media content. * * COMPONENTS * Logo.................Make our logo a reusable component. * Page.................Full page wrapper. * Page-head............Page header styles. * Page-foot............Page footer styles. * Nav primary..........The site’s main nav. * Nav secondary........Secondary nav styles. * Nav tertiary.........Horizontally scrolling nav. * Masthead.............Site’s main masthead. * Sub-content..........Secondary/supporting content. * Panel................Simple panelled boxout. * Score................Score lozenge for place ratings. * Buttons..............Button styles. * Avatar...............General avatar styles. * Testimonial..........Quote styles. * Calendar.............Simple static calendar component. * Headline.............Basic heading style for generic headlines. * Promo................Promotional box styling. * Pagination...........Responsive pagination component. * * SCOPES * Prose................Set up a new styling context for long-format text. * * THEMES * Red..................Simple red theme for the site. * Custom...............Custom-specific overrides. * * UTILITIES * Headings.............Reassigning our heading styles to helper classes. * Widths...............Simple width helper classes. * Healthcheck..........Visual health-check tool. * Debug................Highlight potentially troublesome code. * Shame.css............Short-term hacks and quick-fixes. */ //@import "settings/settings.custom"; @import "settings/all"; @import "tools/all"; @import "generic/generic.box-sizing"; @import "generic/generic.normalize"; @import "generic/generic.reset"; @import "generic/generic.shared"; @import "elements/elements.page"; @import "elements/elements.headings"; @import "elements/elements.links"; @import "elements/elements.lists"; @import "elements/elements.images"; @import "elements/elements.quotes"; @import "objects/objects.wrappers"; @import "objects/objects.layout"; @import "objects/objects.headline"; @import "objects/objects.media"; @import "objects/objects.list-bare"; @import "objects/objects.list-inline"; @import "objects/objects.crop"; @import "components/components.logo"; @import "components/components.page"; @import "components/components.page-head"; @import "components/components.page-foot"; @import "components/components.nav-primary"; @import "components/components.nav-secondary"; @import "components/components.nav-tertiary"; @import "components/components.masthead"; @import "components/components.sub-content"; @import "components/components.panel"; @import "components/components.score"; @import "components/components.buttons"; @import "components/components.avatar"; @import "components/components.testimonials"; @import "components/components.calendar"; @import "components/components.headline"; @import "components/config.promo"; @import "components/components.promo"; @import "components/components.pagination"; @import "scopes/scopes.prose"; @import "themes/themes.red"; //@import "themes/themes.custom"; @import "utilities/utilities.headings"; @import "utilities/utilities.widths"; @import "utilities/utilities.healthcheck"; @import "utilities/utilities.debug"; @import "utilities/utilities.shame"; ================================================ FILE: css/objects/_objects.crop.scss ================================================ /*------------------------------------*\ #CROP \*------------------------------------*/ /** * Provide a cropping container in order to display media (usually images) * cropped to certain ratios. * * 1. Set up a positioning context in which the image can sit. * 2. This is the crucial part: where the cropping happens. */ .o-crop { position: relative; /* [1] */ display: block; overflow: hidden; /* [2] */ } /** * A variety of different standard ratios to crop to. * * We use the `padding` trick to create a fluid-height container (`padding`s set * in percentages will track the current width of the element). */ .o-crop--1\:1 { padding-top: (1/1) * 100%; } .o-crop--4\:3 { padding-top: (3/4) * 100%; } .o-crop--16\:9 { padding-top: (9/16) * 100%; } /** * Apply this class to the content (usually `img`) that needs cropping. * * 1. Positioning to the bottom usually gives consistently better results as * most images’ subjects are toward the bottom of the frame. Of course, * your mileage may vary. */ .o-crop__content { position: absolute; bottom: 0; /* [1] */ left: 0; } ================================================ FILE: css/objects/_objects.headline.scss ================================================ /*------------------------------------*\ #HEADLINE \*------------------------------------*/ .o-headline { margin-bottom: rem($global-spacing-unit); } .o-headline__main, .o-headline__sub { margin-bottom: 0; line-height: 1; } ================================================ FILE: css/objects/_objects.layout.scss ================================================ /*------------------------------------*\ #LAYOUT \*------------------------------------*/ .o-layout { margin: 0; padding: 0; list-style: none; margin-left: -$global-spacing-unit; font-size: 0; } .o-layout__item { display: inline-block; vertical-align: top; width: 100%; padding-left: $global-spacing-unit; @include font-size($global-font-size) } .o-layout--rev { direction: rtl; > .o-layout__item { direction: ltr; } } .o-layout--middle { > .o-layout__item { vertical-align: middle; } } .o-layout--bottom { > .o-layout__item { vertical-align: bottom; } } ================================================ FILE: css/objects/_objects.list-bare.scss ================================================ /*------------------------------------*\ #LIST-BARE \*------------------------------------*/ .o-list-bare { list-style: none; margin-left: 0; } ================================================ FILE: css/objects/_objects.list-inline.scss ================================================ /*------------------------------------*\ #LIST-INLINE \*------------------------------------*/ .o-list-inline { margin: 0; padding: 0; list-style: none; } .o-list-inline__item { display: inline-block; } ================================================ FILE: css/objects/_objects.media.scss ================================================ /*------------------------------------*\ #MEDIA \*------------------------------------*/ .o-media { display: table; width: 100%; } .o-media__img, .o-media__body { display: table-cell; vertical-align: top; .o-media--middle > & { vertical-align: middle; } } .o-media__img { padding-right: $global-spacing-unit; img { max-width: none; } } .o-media__body { width: 100%; } ================================================ FILE: css/objects/_objects.wrappers.scss ================================================ /*------------------------------------*\ #WRAPPERS \*------------------------------------*/ .o-wrapper { @include clearfix(); max-width: 1280px; padding-right: $global-spacing-unit; padding-left: $global-spacing-unit; margin-right: auto; margin-left: auto; } ================================================ FILE: css/scopes/_scopes.prose.scss ================================================ /*------------------------------------*\ #PROSE \*------------------------------------*/ .s-prose { /** * Set continuous prose in a nice, large serif. */ @include font-family(serif); @include font-size(18px); /** * Make all headings in CMS-powered content the same size in order to * prevent the user abusing visual vs. semantic hierarchy. */ h1, h2, h3, h4, h5, h6 { @include font-family(sans-serif); @include font-size(18px); } /** * Make links a lot more obvious in continuous text by having them * underlined and colored in their default state. */ a { color: $color-links-prose; text-decoration: underline; @include font-weight(normal); @include hocus() { color: $color-links-prose-hover; } } /** * Indent list elements enough that their bullets are not leaking out of * their container. */ ul, ol { margin-left: $global-spacing-unit-large; } /** * Prevent CMS users from abusing line breaks. */ br + br { display: none; } /** * Discourage WYSIWYG users from applying their own styles. */ [style]:after { content: " Please refrain from adding your own styling."; color: red; } } ================================================ FILE: css/settings/_all.scss ================================================ ///*----------------------------------*\ // #SETTINGS //\*----------------------------------*/ /// // CONTENTS // // SETTINGS // Config...............Configuration and environment settings. // Global...............Globally-available variables and settings/config. // Colors...............Manage our color palette in isolation. // @import "settings.config"; @import "settings.global"; @import "settings.colors"; ================================================ FILE: css/settings/_settings.colors.scss ================================================ ///*----------------------------------*\ // #COLORS //\*----------------------------------*/ // Set up a colour palette which allows us to theme the entire project from one // location. // Colour palette. $color-brand-primary: #378bb5 !default; $color-brand-primary-highlight: lighten($color-brand-primary, 5%) !default; $color-brand-primary-shadow: darken($color-brand-primary, 5%) !default; $color-brand-secondary: #abc123 !default; $color-brand-secondary-highlight: lighten($color-brand-secondary, 5%) !default; $color-brand-secondary-shadow: darken($color-brand-secondary, 5%) !default; $color-ui: #e4e4e4 !default; $color-grey: #666 !default; $color-grey-dark: #333 !default; $color-grey-light: #999 !default; $color-white: #fff !default; // Theme colors. $color-theme-red: #c00; // Reassign literal variables to meaningful ones. $color-page-text: $color-grey-dark; $color-page-background: #f3f3f3; $color-logo: $color-brand-primary; $color-links: inherit; $color-links-prose: $color-brand-primary; $color-links-prose-hover: $color-brand-primary-shadow; $color-page-head: #fff; $color-page-head-background: $color-brand-primary; $color-masthead-background: $color-brand-primary; $color-btn: #fff; $color-btn-background: $color-brand-primary; $color-btn-background-hover: $color-brand-primary-shadow; $color-btn-secondary: #fff; $color-btn-secondary-background: $color-brand-secondary; $color-btn-secondary-background-hover: $color-brand-secondary-shadow; $color-calendar: #fff; $color-calendar-title: #fff; $color-calendar-title-background: $color-brand-primary; $color-calendar-busy: #fff; $color-calendar-busy-background: $color-brand-secondary; $color-calendar-outside: $color-grey-light; $color-page-foot: #fff; $color-page-foot-background: $color-grey-dark;; $color-panel-background: #fff; $color-panel-inverse: #fff; $color-panel-inverse-background: $color-brand-primary; $color-panel-link: $color-grey-dark; $color-panel-link-hover: $color-brand-primary; $color-testimonial-background: #fff; $color-testimonial-border: $color-brand-primary; $color-testimonial-source: $color-grey; $color-headline: $color-grey-light; $color-sub-content-bg: rgba(0, 0, 0, 0.05); $color-sub-content: $color-grey; $color-pagination: $color-white; $color-pagination-border: $color-pagination; $color-pagination-bg: $color-brand-primary; $color-pagination-bg-hover: $color-brand-primary-shadow; $color-pagination-bg-current: $color-brand-primary-highlight; ================================================ FILE: css/settings/_settings.config.scss ================================================ ///*----------------------------------*\ // #CONFIG //\*----------------------------------*/ // Config-level settings (environment switches, debugging modes, etc.). $config: ( env: dev, healthcheck: false, debug: false, ); @function config($key) { @return map-get($config, $key); } ================================================ FILE: css/settings/_settings.custom.scss ================================================ ///*----------------------------------*\ // #CUSTOM //\*----------------------------------*/ $global-font-size: 16px !default; $global-line-height: 24px !default; $color-brand-primary: #a9ae00 !default; $color-brand-secondary: #2f2f2f !default; ================================================ FILE: css/settings/_settings.global.scss ================================================ ///*----------------------------------*\ // #GLOBAL //\*----------------------------------*/ // Project-level settings and setup. // Base typographical styles and baseline grid. $global-font-size: 14px !default; $global-line-height: 20px !default; // Standardise some UI treatments. $global-radius: 3px !default; $global-transition: 0.333333333s !default; //////////////////////////////////////////////////////////////////////////////// // // // W A R N I N G // // // //////////////////////////////////////////////////////////////////////////////// // Private/framework-only reassignment. Do not alter anything below. $global-spacing-unit: round($global-line-height); $global-spacing-unit-tiny: round($global-spacing-unit / 4); $global-spacing-unit-small: round($global-spacing-unit / 2); $global-spacing-unit-large: round($global-spacing-unit * 2); $global-spacing-unit-huge: round($global-spacing-unit * 4); @if ($global-spacing-unit != $global-line-height) { @error "The value of `$global-spacing-unit` must not be changed."; } ================================================ FILE: css/themes/_themes.custom.scss ================================================ /*------------------------------------*\ #CUSTOM \*------------------------------------*/ /** * This file contains any additional or override CSS for the Custom theme: any * customisations that can’t be handled by `_settings.custom.scss`. */ .t-custom { } ================================================ FILE: css/themes/_themes.red.scss ================================================ /*------------------------------------*\ #RED \*------------------------------------*/ /** * Apply a theme to the entire view. Add `class="t-red"` to the HTML or BODY * element of the page. */ .t-red { .c-btn--primary { background-color: $color-theme-red; } } ================================================ FILE: css/tools/_all.scss ================================================ ///*----------------------------------*\ // #TOOLS //\*----------------------------------*/ /// // CONTENTS // // TOOLS // Functions............Some simple helper functions. // Mixins...............Globally available mixins. // Aliases..............Some shorter aliases onto longer variables. // Sass MQ..............Other people can handle RWD better than we can. // @import "tools.functions"; @import "tools.mixins"; @import "tools.typography"; @import "tools.aliases"; @import "config.mq"; @import "../../node_modules/sass-mq/mq"; ================================================ FILE: css/tools/_config.mq.scss ================================================ ///*----------------------------------*\ // #MQ //\*----------------------------------*/ /// // Pre-configuration for Sass MQ. // $mq-breakpoints: ( tiny: 480px, small: 720px, medium: 1024px, large: 1200px, ); ================================================ FILE: css/tools/_tools.aliases.scss ================================================ ///*----------------------------------*\ // #ALIASES //\*----------------------------------*/ // Map some nicer/shorter aliases to make things a little easier to work with. $unit: $global-spacing-unit; $unit-tiny: $global-spacing-unit-tiny; $unit-small: $global-spacing-unit-small; $unit-large: $global-spacing-unit-large; $unit-huge: $global-spacing-unit-huge; ================================================ FILE: css/tools/_tools.functions.scss ================================================ ///*----------------------------------*\ // #FUNCTIONS //\*----------------------------------*/ // Custom functions. // Convert any px value into its rem equivalent. @function rem($number) { @return $number / $global-font-size * 1rem; } // Halve any input and round the result. @function halve($number) { @return round($number/2); } ================================================ FILE: css/tools/_tools.mixins.scss ================================================ ///*------------------------------------*\ // #MIXINS //\*------------------------------------*/ // Global mixins available to the entire project. Define file-specific // mixins inside the file to which they relate. // Mixin to create a declaration whose value is a rem unit. Also provide pixel fallback. // // .simple-usage { // @include rem(padding, 10px); // } @mixin rem($property, $value) { #{$property}: $value; #{$property}: rem($value); } // Mixin to drop micro clearfix into a selector. // // .simple-usage { // @include clearfix(); // } // // .detailed-usage { // @include clearfix(important); // } @mixin clearfix($important: false) { // Determine whether or not to make declarations important. @if ($important == false) { $important: null; } @else { $important: !important; } &:after { content: "" $important; display: table $important; clear: both $important; } } // Generate `:hover` and `:focus` styles in one go. @mixin hocus() { &:hover, &:focus { @content; } } ================================================ FILE: css/tools/_tools.typography.scss ================================================ ///*----------------------------------*\ // #TYPOGRAPHY //\*----------------------------------*/ // Mixins to help generating typographical rules. // Shorthand onto specific font-stacks. @mixin font-family($family) { @if ($family == "sans-serif") { font-family: Lato, sans-serif; } @elseif ($family == "serif") { font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif; } @else { @warn "#{$family} is not a valid font-family." } } // Generate a font-size and baseline-compatible line-height. @mixin font-size($font-size, $line-height: auto) { font-size: $font-size; font-size: ($font-size / $global-font-size) * 1rem; @if $line-height == auto { line-height: ceil($font-size / $global-line-height) * ($global-line-height / $font-size); } @else { @if (type-of($line-height) == number or $line-height == inherit or $line-height == normal) { line-height: $line-height; } @elseif ($line-height != none and $line-height != false) { @warn "D’oh! ‘#{$line-height}’ is not a valid value for `line-height`." } } } // Map keywords onto our numbered weights for convenience. @mixin font-weight($weight) { @if ($weight == normal) { font-weight: 400; } @elseif ($weight == bold) { font-weight: 700; } @elseif ($weight == black) { font-weight: 900; } @else { @warn "#{$weight} is not a valid font-weight." } } // Simple truncation mixin to cut off text using an ellipsis after a certain // width. // // .simple-usage { // @include truncate(); // } // // .detailed-usage { // @include truncate(); // } @mixin truncate($width: 100%) { max-width: $width; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; } ================================================ FILE: css/utilities/_utilities.debug.scss ================================================ // Define styles for errors and warns that we can reuse throughout this file. @mixin debug-warn() { outline: 5px solid yellow; } @mixin debug-error() { outline: 5px solid red; } @if (config(debug) == true) { /*------------------------------------*\ #DEBUG \*------------------------------------*/ /** * Images missing `alt` attributes is an error. Empty `alt` attributes are * allowed; perhaps we need to do that…? */ img:not([alt]) { @include debug-error(); } /** * Using a layout item outside of a layout context is a definite error. */ .o-layout__item { @include debug-error(); .o-layout & { outline: none; } } /** * Having something other than a layout item directly inside a layout context * is an error. */ .o-layout > :not(.o-layout__item) { @include debug-error(); } /** * Warn about links pointing to just `#`; it’s usually better to point them to * `#0` if we have to point to `#` at all. */ [href="#"] { @include debug-warn(); } /** * Elements other than `LI` directly inside lists are not allowed. */ ul, ol { > :not(li) { @include debug-error(); } } /** * `LI`s outside of lists aren’t allowed either. */ li { @include debug-error(); } ul, ol { > li { outline: none; } } } // endif ================================================ FILE: css/utilities/_utilities.headings.scss ================================================ /*------------------------------------*\ #HEADINGS \*------------------------------------*/ .u-h1 { @include font-size($font-size-h1); } .u-h2 { @include font-size($font-size-h2); } .u-h3 { @include font-size($font-size-h3); } .u-h4 { @include font-size($font-size-h4); } .u-h5 { @include font-size($font-size-h5); } .u-h6 { @include font-size($font-size-h6); } ================================================ FILE: css/utilities/_utilities.healthcheck.scss ================================================ @if (config(healthcheck) == true) { /*------------------------------------*\ #HEALTHCHECK \*------------------------------------*/ /** * Highlight types of class to visually see the makeup of our UIs. */ [class^="o-"], [class*=" o-"] { outline: 10px solid orange; } [class^="c-"], [class*=" c-"] { outline: 10px solid cyan; } [class^="u-"], [class*=" u-"] { outline: 10px solid violet; } [class^="_"], [class*=" _"] { outline: 10px solid red; } } // endif ================================================ FILE: css/utilities/_utilities.shame.scss ================================================ /*------------------------------------*\ #SHAME.CSS \*------------------------------------*/ ._c-page-foot { display: block; } ================================================ FILE: css/utilities/_utilities.widths.scss ================================================ /*------------------------------------*\ #WIDTHS \*------------------------------------*/ // A mixin to spit out our width classes. Pass in the columns we want the widths // to have, and an optional suffix for responsive widths. E.g. to create thirds // and quarters for a small breakpoint: // // @include widths(3 4, -sm); @mixin widths($widths-columns, $widths-breakpoint: null) { // Loop through the number of columns for each denominator of our fractions. @each $widths-denominator in $widths-columns { // Begin creating a numberator for our fraction up until we hit the // denominator. @for $widths-numerator from 1 through $widths-denominator { // Build a class in the format `.u-3/4` or `.u-3-of-4`. .u-#{$widths-numerator}\/#{$widths-denominator}#{$widths-breakpoint} { width: ($widths-numerator / $widths-denominator) * 100% !important; } .u-push-#{$widths-numerator}\/#{$widths-denominator}#{$widths-breakpoint} { position: relative; left: ($widths-numerator / $widths-denominator) * 100% !important; } .u-pull-#{$widths-numerator}\/#{$widths-denominator}#{$widths-breakpoint} { position: relative; right: ($widths-numerator / $widths-denominator) * 100% !important; } } } } /** * A series of width helper classes that you can use to size things like grid * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken- * word format (e.g. `.u-2-of-3`). Use these in your markup: * *
*/ @include widths(1 2 3 4 5); @include mq($from: small) { @include widths(1 2 3 4 5, \@sm); } @include mq($from: medium) { @include widths(1 2 3 4 5, \@md); } @include mq($from: large) { @include widths(1 2 3 4 5, \@lg); } ================================================ FILE: css/watch ================================================ #!/bin/sh sass --watch main.scss:main.css --style expanded --precision 9 exit 0 ================================================ FILE: index.html ================================================ Discovr

Melbourne

Australia

Melbourne – The World’s Most Livable City 9.8

Melbourne, Australia’s second city, was voted the most liveable city in 2014, pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Familiarity on the Other Side of the Planet

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.






  • Coffee
  • Markets
  • Museums
  • Art Galleries
  • Restaurants
  • Bars





Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Aussie optimism meets international culture

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading 5

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Heading 6

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

View hotels in Melbourne

  1. First
  2. Previous
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. Next
  9. Last
November 2016
M T W T F S S
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 1 2 3 4

Vital Statistics

Country
Australia
Currency
Australian Dollar (AUD)
Population
4.4m
Established
30 August, 1835

Warsaw 9.1

Poland

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Read more…

Ghent 8.4

Belgium

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Read more…

A fun and vibrant city

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Harry Roberts

Discount travel to Melbourne

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

More Discovries…

  • Newcastle 8.2

    United Kingdom

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Lake District 8.6

    United Kingdom

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Copenhagen 9.1

    Denmark

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Los Angeles 8.1

    United States

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Helsinki 8.8

    Finland

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

  • Scafell Pike 7.8

    United Kingdom

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

    Read more…

  • Brasov 7.9

    Romania

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

    Read more…
================================================ FILE: package.json ================================================ { "name": "discovr", "version": "1.0.0", "description": "Demo CSS Architecture workshop files", "main": "css/main.scss", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/csswizardry/discovr.git" }, "author": "Harry Roberts", "license": "MIT", "bugs": { "url": "https://github.com/csswizardry/discovr/issues" }, "homepage": "https://github.com/csswizardry/discovr#readme", "dependencies": { "sass-mq": "^3.2.9" } }