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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>Calendar</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic" />
<link rel="stylesheet" href="../../main.css" />
<style>
html {
padding: 24px;
}
</style>
</head>
<body>
<table class="c-calendar">
<thead>
<tr>
<th colspan="7" class="c-calendar__title u~user-color-background">March 2015</th>
</tr>
<tr>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td class="c-calendar__outside">23</td>
<td class="c-calendar__outside">24</td>
<td class="c-calendar__outside">25</td>
<td class="c-calendar__outside">26</td>
<td class="c-calendar__outside">27</td>
<td class="c-calendar__outside">28</td>
<td> 1</td>
</tr>
<tr>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
<td> 6</td>
<td> 7</td>
<td> 8</td>
</tr>
<tr>
<td> 9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td class="c-calendar__busy">23</td>
<td class="c-calendar__busy">24</td>
<td class="c-calendar__busy">25</td>
<td class="c-calendar__busy">26</td>
<td class="c-calendar__busy">27</td>
<td class="c-calendar__busy">28</td>
<td class="c-calendar__busy">29</td>
</tr>
<tr>
<td class="c-calendar__busy">30</td>
<td>31</td>
<td class="c-calendar__outside"> 1</td>
<td class="c-calendar__outside"> 2</td>
<td class="c-calendar__outside"> 3</td>
<td class="c-calendar__outside"> 4</td>
<td class="c-calendar__outside"> 5</td>
</tr>
</tbody>
</table>
</body>
</html>
================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>Pagination</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic" />
<link rel="stylesheet" href="components.pagination.css" />
</head>
<body>
<ol class="c-pagination">
<li class="c-pagination__item c-pagination__item--first">
<a href="#0" class="c-pagination__link">First</a>
</li>
<li class="c-pagination__item c-pagination__item--prev">
<a href="#0" class="c-pagination__link">Previous</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">1</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link is-current">2</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">3</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">4</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">5</a>
</li>
<li class="c-pagination__item c-pagination__item--next">
<a href="#0" class="c-pagination__link">Next</a>
</li>
<li class="c-pagination__item c-pagination__item--last">
<a href="#0" class="c-pagination__link">Last</a>
</li>
</ol>
</body>
</html>
================================================
FILE: css/build/panel/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>Panel</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic" />
<link rel="stylesheet" href="../../main.css" />
<style>
html {
padding: 24px;
}
</style>
</head>
<body>
<article class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="../../../img/content/panel/ghent.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h3 class="o-headline__main">Ghent <span class="c-score c-score--inverse c-score--small" data-score="8.4">8.4</span></h3>
<h4 class="o-headline__sub">Belgium</h4>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#0" class="c-panel__link">Read more…</a>
</article>
</body>
</html>
================================================
FILE: css/build/view.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>View</title>
<style>
iframe {
border: 1px solid #ccc;
resize: both;
}
</style>
<script>
/**
* Grab all the `iframe`s in the page and increase or decrease their
* dimensions by up to 10%. This means that we always see an obscurely sized
* viewport, rather than a conveniently perfect 480×720px one.
*/
function randomiseFrame(frame){
var randFactor = Math.round(((Math.floor(Math.random() * 10) + 1)/100) * frame.width);
frame.width = Math.random() < 0.5 ? parseInt(frame.width,10)-randFactor : parseInt(frame.width,10) + randFactor;
randFactor = Math.round(((Math.floor(Math.random() * 10) + 1)/100) * frame.height);
frame.height = Math.random() < 0.5 ? parseInt(frame.height,10)-randFactor : parseInt(frame.height,10) + randFactor;
}
document.addEventListener('DOMContentLoaded', function() {
var frames = document.querySelectorAll('iframe');
for (var i=0; i < frames.length; i++){
randomiseFrame(frames[i]);
}
});
</script>
</head>
<body>
<iframe src="pagination/index.html" width="320" height="480"></iframe>
<iframe src="pagination/index.html" width="480" height="720"></iframe>
<iframe src="pagination/index.html" width="720" height="1024"></iframe>
<iframe src="pagination/index.html" width="1024" height="768"></iframe>
<iframe src="pagination/index.html" width="1200" height="675"></iframe>
</body>
</html>
================================================
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:
*
* <div class="u-7/12">
*/
.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(<value>);
// }
@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:
*
* <div class="u-7/12">
*/
@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
================================================
<!DOCTYPE html>
<html lang="en" class="t~custom">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>Discovr</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic" />
<link rel="stylesheet" href="css/main.css" />
<style>
.u-user-color { color: #f43059 !important; }
.u-user-color-background { background-color: #f43059 !important; }
.u-user-color-border { border-color: #f43059 !important; }
</style>
</head>
<body class="c-page has-fixed-page-head t~red">
<header class="c-page-head is-fixed u~user-color-background">
<a href="#" class="c-page-head__logo">
<svg class="c-logo" width="119" height="30" xmlns="http://www.w3.org/2000/svg"><path class="c-logo__fill" d="M18.183 29.751v-29.584h-5.409v9.848c-1.415-1.579-3.079-2.161-5.284-2.161-2.122 0-4.078.748-5.284 1.953-2.164 2.161-2.205 5.859-2.205 9.1 0 3.241.042 6.981 2.205 9.141 1.207 1.205 3.204 1.953 5.326 1.953 2.289 0 3.87-.623 5.368-2.285v2.036h5.284zm-5.12-10.845c0 3.532-.458 6.233-3.703 6.233-3.246 0-3.662-2.701-3.662-6.233 0-3.532.416-6.191 3.662-6.191s3.703 2.659 3.703 6.191zm12.559 10.845v-21.648h-5.409v21.648h5.409zm.042-25.346v-4.404h-5.534v4.404h5.534zm19.702 18.532c0-3.657-2.164-5.942-6.449-6.357l-3.412-.332c-1.914-.166-2.247-1.08-2.247-1.87 0-1.08.915-2.078 3.079-2.078 1.872 0 3.786.332 5.035 1.454l3.329-3.366c-2.08-1.953-4.91-2.535-8.28-2.535-4.411 0-8.363 2.41-8.363 6.898 0 3.989 2.413 5.693 6.325 6.066l3.412.332c1.706.166 2.289.914 2.289 1.994 0 1.62-1.956 2.244-3.828 2.244-1.664 0-3.994-.249-5.784-2.036l-3.537 3.532c2.746 2.742 5.825 3.116 9.237 3.116 5.118 0 9.196-2.285 9.196-7.064zm17.705 4.114l-3.662-3.615c-1.123 1.205-2.08 1.704-3.495 1.704-1.29 0-2.289-.457-3.079-1.413-.832-1.039-1.207-2.535-1.207-4.82s.374-3.74 1.207-4.778c.791-.956 1.789-1.413 3.079-1.413 1.415 0 2.372.499 3.495 1.704l3.662-3.657c-1.914-1.994-4.161-2.909-7.157-2.909-4.327 0-9.695 2.285-9.695 11.053 0 8.767 5.368 11.094 9.695 11.094 2.996 0 5.243-.956 7.157-2.95zm18.576-8.144c0-3.906-.499-6.357-2.455-8.393-1.331-1.413-3.537-2.659-6.741-2.659-3.204 0-5.368 1.247-6.699 2.659-1.956 2.036-2.455 4.488-2.455 8.393 0 3.947.499 6.399 2.455 8.435 1.331 1.413 3.495 2.659 6.699 2.659 3.204 0 5.409-1.247 6.741-2.659 1.956-2.036 2.455-4.488 2.455-8.435zm-5.409 0c0 2.244-.125 4.155-1.248 5.277-.624.623-1.456.956-2.538.956-1.082 0-1.872-.332-2.497-.956-1.123-1.122-1.248-3.033-1.248-5.277s.125-4.114 1.248-5.235c.624-.623 1.415-.956 2.497-.956 1.082 0 1.914.332 2.538.956 1.123 1.122 1.248 2.992 1.248 5.235zm25.15-10.803h-5.7l-4.369 13.38-4.411-13.38h-5.7l7.989 21.648h4.244l7.947-21.648zm17.612 1.787c-1.498-1.496-2.996-2.036-5.118-2.036-2.33 0-4.411 1.08-5.451 2.327v-2.078h-5.284v21.648h5.409v-13.047c0-2.742 1.831-3.989 3.495-3.989 1.331 0 2.039.457 2.871 1.288l4.078-4.114z" /></svg>
</a>
<nav class="c-nav-primary c-page-head__nav">
<ul class="o-list-inline">
<li class="o-list-inline__item">
<a href="#0" class="c-nav-primary__link">Home</a>
<li class="o-list-inline__item">
<a href="#0" class="c-nav-primary__link">Feed</a>
<li class="o-list-inline__item">
<a href="#0" class="c-nav-primary__link">My Discovries</a>
<li class="o-list-inline__item">
<a href="#0" class="c-nav-primary__link is-active">Top Discovries</a>
<li class="o-list-inline__item">
<a href="#0" class="c-nav-primary__link">Sign Out</a>
</ul>
</nav>
</header>
<nav class="c-nav-tertiary">
<ul class="c-nav-tertiary__list">
<li class="c-nav-tertiary__item">
<a href="#0" class="c-nav-tertiary__link">Add Discovry</a>
</li>
<li class="c-nav-tertiary__item">
<a href="#0" class="c-nav-tertiary__link">Plan Discovry</a>
</li>
<li class="c-nav-tertiary__item">
<a href="#0" class="c-nav-tertiary__link">Share Discovry</a>
</li>
<li class="c-nav-tertiary__item">
<a href="#0" class="c-nav-tertiary__link">Find Friends</a>
</li>
</ul>
</nav>
<div class="c-masthead">
<img src="img/content/masthead/melbourne.jpg" alt="" class="c-masthead__media" />
<div class="o-headline c-masthead__text">
<h1 class="o-headline__main c-masthead__title">Melbourne</h1>
<h2 class="o-headline__sub c-masthead__sub">Australia</h2>
</div>
</div>
<div class="o-wrapper">
<div class="o-layout">
<section data-section="Main Content" class="o-layout__item u-1/2@md u-push-1/4@md">
<section class="s-prose">
<h1>Melbourne – The World’s Most Livable City <span class="c-score" data-score="9.8">9.8</span></h1>
<p style="text-align: center">Melbourne, Australia’s second city, was voted the <a href="https://en.wikipedia.org/wiki/World%27s_Most_Livable_Cities#The_EIU.27s_Global_Liveability_Ranking" class="u~user-color">most liveable city</a> 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.</p>
<h2>Familiarity on the Other Side of the Planet</h2>
<p>Pellentesque habitant morbi tristique senectus et netus <a href="#0" class="u~user-color">et malesuada fames ac turpis egestas</a>. 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.</p>
<br />
<br />
<br />
<br />
<br />
<ul>
<li>Coffee</li>
<li>Markets</li>
<li>Museums</li>
<li>Art Galleries</li>
<li>Restaurants</li>
<li>Bars</li>
</ul>
<br />
<br />
<br />
<br />
<br />
<p>Pellentesque habitant morbi tristique senectus et netus <a href="#0" class="u~user-color">et malesuada fames ac turpis egestas</a>. 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.</p>
<h3>Aussie optimism meets international culture</h3>
<p>Pellentesque habitant morbi tristique senectus et netus <a href="#0" class="u~user-color">et malesuada fames ac turpis egestas</a>. 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.</p>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi tristique senectus et netus <a href="#0" class="u~user-color">et malesuada fames ac turpis egestas</a>. 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.</p>
<h5>Heading 5</h5>
<p>Pellentesque habitant morbi tristique senectus et netus <a href="#0" class="u~user-color">et malesuada fames ac turpis egestas</a>. 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.</p>
<h6>Heading 6</h6>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, <a href="#0">ultricies eget, tempor sit amet, ante</a>. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<p><a href="#0" class="c-btn c-btn--primary c-btn--large u~user-color-background">View hotels in Melbourne</a></p>
<ol class="c-pagination">
<li class="c-pagination__item c-pagination__item--first">
<a href="#0" class="c-pagination__link">First</a>
</li>
<li class="c-pagination__item c-pagination__item--prev">
<a href="#0" class="c-pagination__link">Previous</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">1</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link is-current">2</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">3</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">4</a>
</li>
<li class="c-pagination__item">
<a href="#0" class="c-pagination__link">5</a>
</li>
<li class="c-pagination__item c-pagination__item--next">
<a href="#0" class="c-pagination__link">Next</a>
</li>
<li class="c-pagination__item c-pagination__item--last">
<a href="#0" class="c-pagination__link">Last</a>
</li>
</ol>
</section><!-- /Main Content -->
<section data-section="Sidebar" class="o-layout__item u-1/4@md u-pull-1/2@md">
<table class="c-calendar">
<thead>
<tr>
<th colspan="7" class="c-calendar__title u~user-color-background">November 2016</th>
</tr>
<tr>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td class="c-calendar__outside">31</td>
<td> 1</td>
<td class="c-calendar__busy"> 2</td>
<td class="c-calendar__busy"> 3</td>
<td class="c-calendar__busy"> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td class="c-calendar__busy"> 7</td>
<td class="c-calendar__busy"> 8</td>
<td class="c-calendar__busy"> 9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td class="c-calendar__busy">15</td>
<td class="c-calendar__busy">16</td>
<td class="c-calendar__busy">17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td class="c-calendar__busy">21</td>
<td class="c-calendar__busy">22</td>
<td>23</td>
<td>24</td>
<td class="c-calendar__busy">25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td class="c-calendar__outside"> 1</td>
<td class="c-calendar__outside"> 2</td>
<td class="c-calendar__outside"> 3</td>
<td class="c-calendar__outside"> 4</td>
</tr>
</tbody>
</table>
<div class="c-panel">
<div class="c-panel__content">
<h4 class="u-h6">Vital Statistics</h4>
<dl>
<dt>Country</dt>
<dd>Australia</dd>
<dt>Currency</dt>
<dd>Australian Dollar (AUD)</dd>
<dt>Population</dt>
<dd>4.4m</dd>
<dt>Established</dt>
<dd>30 August, 1835</dd>
</dl>
</div>
</div>
<aside class="c-sub-content">
<h3 class="c-sub-content__title">Top 5</h3>
<ol reversed>
<li><a href="#0">Newcastle</a></li>
<li><a href="#0">Lake District</a></li>
<li><a href="#0">Helsinki</a></li>
<li><a href="#0">Copenhagen</a></li>
<li><a href="#0">Melbourne</a></li>
</ol>
<h3 class="c-sub-content__title c-sub-content__title--featured">Featured Discovry</h3>
<p class="o-crop o-crop--16:9 c-sub-content__img">
<a href="#0"><img src="img/content/panel/bologna.jpg" alt="" class="o-crop__content" /></a>
</p>
<h3 class="c-sub-content__title">Other Discovries…</h3>
<ul class="o-list-bare">
<li><a href="#0">Freiburg</a></li>
<li><a href="#0">Belfast</a></li>
<li><a href="#0">San Ramon</a></li>
</ul>
</aside>
</section><!-- /Sidebar -->
<section data-section="Cross Sell" class="o-layout__item u-1/4@md">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/warsaw.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h3 class="o-headline__main">Warsaw <span class="c-score c-score--inverse c-score--small" data-score="9.1">9.1</span></h3>
<h4 class="o-headline__sub">Poland</h4>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#0" class="c-panel__link">Read more…</a>
</div>
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/ghent.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h3 class="o-headline__main">Ghent <span class="c-score c-score--inverse c-score--small" data-score="8.4">8.4</span></h3>
<h4 class="o-headline__sub">Belgium</h4>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#0" class="c-panel__link">Read more…</a>
</div>
</div>
</section><!-- /Cross Sell -->
<div class="o-layout">
<div class="o-layout__item u-1/2@md u-2/3@lg">
<blockquote class="o-media o-media--middle c-testimonial u~user-color-border">
<span class="o-media__img c-testimonial__photo"><img src="img/content/avatar/harry.jpg" class="c-avatar c-avatar--large" /></span>
<div class="o-media__body">
<h3 class="c-testimonial__title">A fun and vibrant city</h3>
<p>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.</p>
<b class="c-testimonial__source">Harry Roberts</b>
</div>
</blockquote>
</div>
<div class="o-layout__item u-1/2@md u-1/3@lg">
<div class="c-promo">
<h3 class="c-promo__title">Discount travel to Melbourne</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</div><!-- /.o-layout -->
<h2 class="c-headline">More Discovries…</h2>
<ul class="o-layout">
<li class="o-layout__item u-1/2@sm">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/newcastle.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h2 class="o-headline__main">Newcastle <span class="c-score c-score--inverse c-score--small" data-score="8.2">8.2</span></h2>
<h3 class="o-headline__sub">United Kingdom</h3>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<li class="o-layout__item u-1/2@sm">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/lake-district.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h2 class="o-headline__main">Lake District <span class="c-score c-score--inverse c-score--small" data-score="8.6">8.6</span></h2>
<h3 class="o-headline__sub">United Kingdom</h3>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<li class="o-layout__item u-1/3@sm">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/copenhagen.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h2 class="o-headline__main">Copenhagen <span class="c-score c-score--inverse c-score--small" data-score="9.1">9.1</span></h2>
<h3 class="o-headline__sub">Denmark</h3>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<li class="o-layout__item u-1/3@sm">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/los-angeles.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h2 class="o-headline__main">Los Angeles <span class="c-score c-score--inverse c-score--small" data-score="8.1">8.1</span></h2>
<h3 class="o-headline__sub">United States</h3>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<li class="o-layout__item u-1/3@sm">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/helsinki.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h2 class="o-headline__main">Helsinki <span class="c-score c-score--inverse c-score--small" data-score="8.8">8.8</span></h2>
<h3 class="o-headline__sub">Finland</h3>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<li class="o-layout__item u-1/2@sm">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/scafell-pike.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h2 class="o-headline__main">Scafell Pike <span class="c-score c-score--inverse c-score--small" data-score="7.8">7.8</span></h2>
<h3 class="o-headline__sub">United Kingdom</h3>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#0" class="c-panel__link">Read more…</a>
</div>
<li class="o-layout__item u-1/2@sm">
<div class="c-panel">
<div class="c-panel__masthead c-panel__masthead--fluid">
<img src="img/content/panel/brasov.jpg" alt="" class="c-panel__masthead-media" />
</div>
<div class="c-panel__content">
<div class="o-headline">
<h2 class="o-headline__main">Brasov <span class="c-score c-score--inverse c-score--small" data-score="7.9">7.9</span></h2>
<h3 class="o-headline__sub">Romania</h3>
</div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, <a href="#0">feugiat vitae</a>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<a href="#0" class="c-panel__link">Read more…</a>
</div>
</ul><!-- /.o-layout -->
</div><!-- /.o-wrapper -->
<div class="c-page-foot _c-page-foot">
<ul class="o-list-inline c-nav-secondary">
<li class="o-list-inline__item c-nav-secondary__item">© CSS Wizardry Ltd. 2016
<li class="o-list-inline__item c-nav-secondary__item"><a href="#0" class="c-nav-secondary__link">About</a>
<li class="o-list-inline__item c-nav-secondary__item"><a href="#0" class="c-nav-secondary__link">Privacy & Cookies</a>
</ul>
</div>
</body>
</html>
================================================
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"
}
}
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
Condensed preview — 69 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (152K chars).
[
{
"path": ".gitignore",
"chars": 22,
"preview": "assets/\nnode_modules/\n"
},
{
"path": "LICENSE",
"chars": 553,
"preview": "Copyright 2017 Harry Roberts\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file "
},
{
"path": "README.md",
"chars": 175,
"preview": "# discovr\n\nWelcome to the _CSS Architecture_ workshop resources.\n\n[rawgit.com/csswizardry/discovr/master/index.html](htt"
},
{
"path": "css/build/README.md",
"chars": 1732,
"preview": "# Build\n\nThis directory houses components built entirely out of context of their page.\nThere are two classes of componen"
},
{
"path": "css/build/calendar/index.html",
"chars": 2298,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "css/build/pagination/components.pagination.css",
"chars": 1664,
"preview": "@charset \"UTF-8\";\n/*------------------------------------*\\\n #PAGINATION\n\\*------------------------------------*/\n.c-pag"
},
{
"path": "css/build/pagination/index.html",
"chars": 1445,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "css/build/panel/index.html",
"chars": 1286,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
},
{
"path": "css/build/view.html",
"chars": 1609,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, mi"
},
{
"path": "css/components/_components.avatar.scss",
"chars": 483,
"preview": "/*------------------------------------*\\\n #AVATAR\n\\*------------------------------------*/\n\n$avatar-size: $global"
},
{
"path": "css/components/_components.buttons.scss",
"chars": 1550,
"preview": "/*------------------------------------*\\\n #BUTTONS\n\\*------------------------------------*/\n\n/**\n * 1. Allow us to styl"
},
{
"path": "css/components/_components.calendar.scss",
"chars": 908,
"preview": "/*------------------------------------*\\\n #CALENDAR\n\\*------------------------------------*/\n\n.c-calendar {\n width: 10"
},
{
"path": "css/components/_components.headline.scss",
"chars": 323,
"preview": "/*------------------------------------*\\\n #HEADLINE\n\\*------------------------------------*/\n\n.c-headline {\n @include "
},
{
"path": "css/components/_components.logo.scss",
"chars": 226,
"preview": "/*------------------------------------*\\\n #LOGO\n\\*------------------------------------*/\n\n$logo-height: 30px;\n\n.c-log"
},
{
"path": "css/components/_components.masthead.scss",
"chars": 811,
"preview": "/*------------------------------------*\\\n #MASTHEAD\n\\*------------------------------------*/\n\n.c-masthead {\n position:"
},
{
"path": "css/components/_components.nav-primary.scss",
"chars": 423,
"preview": "/*------------------------------------*\\\n #NAV-PRIMARY\n\\*------------------------------------*/\n\n.c-nav-primary {\n}\n\n "
},
{
"path": "css/components/_components.nav-secondary.scss",
"chars": 341,
"preview": "/*------------------------------------*\\\n #NAV-SECONDARY\n\\*------------------------------------*/\n\n.c-nav-secondary {\n "
},
{
"path": "css/components/_components.nav-tertiary.scss",
"chars": 1333,
"preview": "/*------------------------------------*\\\n #NAV-TERTIARY\n\\*------------------------------------*/\n\n.c-nav-tertiary {\n b"
},
{
"path": "css/components/_components.page-foot.scss",
"chars": 250,
"preview": "/*------------------------------------*\\\n #PAGE-FOOT\n\\*------------------------------------*/\n\n.c-page-foot {\n padding"
},
{
"path": "css/components/_components.page-head.scss",
"chars": 1024,
"preview": "/*------------------------------------*\\\n #PAGE-HEAD\n\\*------------------------------------*/\n\n.c-page-head {\n @includ"
},
{
"path": "css/components/_components.page.scss",
"chars": 238,
"preview": "/*------------------------------------*\\\n #PAGE\n\\*------------------------------------*/\n\n.c-page {\n\n &.has-fixed-page"
},
{
"path": "css/components/_components.panel.scss",
"chars": 1351,
"preview": "/*------------------------------------*\\\n #PANEL\n\\*------------------------------------*/\n\n.c-panel {\n background-colo"
},
{
"path": "css/components/_components.promo.scss",
"chars": 577,
"preview": "/*------------------------------------*\\\n #PROMO\n\\*------------------------------------*/\n\n$promo-color: in"
},
{
"path": "css/components/_components.score.scss",
"chars": 2791,
"preview": "/*------------------------------------*\\\n #SCORE\n\\*------------------------------------*/\n\n/**\n * Each Discovry has an "
},
{
"path": "css/components/_components.sub-content.scss",
"chars": 2175,
"preview": "/*------------------------------------*\\\n #SUB-CONTENT\n\\*------------------------------------*/\n\n/**\n * Housing for any"
},
{
"path": "css/components/_components.testimonials.scss",
"chars": 917,
"preview": "/*------------------------------------*\\\n #TESTIMONIAL\n\\*------------------------------------*/\n\n/**\n * Testimonials fe"
},
{
"path": "css/components/_config.promo.scss",
"chars": 275,
"preview": "///*----------------------------------*\\\n// #PROMO\n//\\*----------------------------------*/\n\n///\n// Pre-configuration f"
},
{
"path": "css/components/components.pagination.scss",
"chars": 2252,
"preview": "/*------------------------------------*\\\n #PAGINATION\n\\*------------------------------------*/\n\n// The pagination compo"
},
{
"path": "css/elements/_elements.headings.scss",
"chars": 669,
"preview": "/*------------------------------------*\\\n #HEADINGS\n\\*------------------------------------*/\n\n/**\n * Simple default sty"
},
{
"path": "css/elements/_elements.images.scss",
"chars": 676,
"preview": "/*------------------------------------*\\\n #IMAGES\n\\*------------------------------------*/\n\n/**\n * 1. Fluid images for "
},
{
"path": "css/elements/_elements.links.scss",
"chars": 285,
"preview": "/*------------------------------------*\\\n #LINKS\n\\*------------------------------------*/\n\n/**\n * Default styles for si"
},
{
"path": "css/elements/_elements.lists.scss",
"chars": 198,
"preview": "/*------------------------------------*\\\n #LISTS\n\\*------------------------------------*/\n\n/**\n * Visually offset defin"
},
{
"path": "css/elements/_elements.page.scss",
"chars": 372,
"preview": "/*------------------------------------*\\\n #PAGE\n\\*------------------------------------*/\n\n/**\n * Page-level styling (e."
},
{
"path": "css/elements/_elements.quotes.scss",
"chars": 555,
"preview": "/*------------------------------------*\\\n #QUOTES\n\\*------------------------------------*/\n\n/**\n * Basic styling for qu"
},
{
"path": "css/generic/_generic.box-sizing.scss",
"chars": 474,
"preview": "/*------------------------------------*\\\n #BOX-SIZING\n\\*------------------------------------*/\n\n/**\n * More sensible de"
},
{
"path": "css/generic/_generic.normalize.scss",
"chars": 8053,
"preview": "/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/**\n * 1. Change the default font family i"
},
{
"path": "css/generic/_generic.reset.scss",
"chars": 554,
"preview": "/*------------------------------------*\\\n #RESET\n\\*------------------------------------*/\n\n/**\n * A very simple reset t"
},
{
"path": "css/generic/_generic.shared.scss",
"chars": 457,
"preview": "/*------------------------------------*\\\n #SHARED\n\\*------------------------------------*/\n\n/**\n * Shared declarations "
},
{
"path": "css/main.css",
"chars": 48769,
"preview": "@charset \"UTF-8\";\n/*------------------------------------*\\\n #MAIN\n\\*------------------------------------*/\n/**\n * CONTE"
},
{
"path": "css/main.scss",
"chars": 5412,
"preview": "/*------------------------------------*\\\n #MAIN\n\\*------------------------------------*/\n\n/**\n * CONTENTS\n *\n * SETTING"
},
{
"path": "css/objects/_objects.crop.scss",
"chars": 1146,
"preview": "/*------------------------------------*\\\n #CROP\n\\*------------------------------------*/\n\n/**\n * Provide a cropping con"
},
{
"path": "css/objects/_objects.headline.scss",
"chars": 234,
"preview": "/*------------------------------------*\\\n #HEADLINE\n\\*------------------------------------*/\n\n.o-headline {\n margin-bo"
},
{
"path": "css/objects/_objects.layout.scss",
"chars": 625,
"preview": "/*------------------------------------*\\\n #LAYOUT\n\\*------------------------------------*/\n\n.o-layout {\n margin: 0;\n "
},
{
"path": "css/objects/_objects.list-bare.scss",
"chars": 151,
"preview": "/*------------------------------------*\\\n #LIST-BARE\n\\*------------------------------------*/\n\n.o-list-bare {\n list-st"
},
{
"path": "css/objects/_objects.list-inline.scss",
"chars": 222,
"preview": "/*------------------------------------*\\\n #LIST-INLINE\n\\*------------------------------------*/\n\n.o-list-inline {\n mar"
},
{
"path": "css/objects/_objects.media.scss",
"chars": 441,
"preview": "/*------------------------------------*\\\n #MEDIA\n\\*------------------------------------*/\n\n.o-media {\n display: table;"
},
{
"path": "css/objects/_objects.wrappers.scss",
"chars": 276,
"preview": "/*------------------------------------*\\\n #WRAPPERS\n\\*------------------------------------*/\n\n.o-wrapper {\n @include c"
},
{
"path": "css/scopes/_scopes.prose.scss",
"chars": 1228,
"preview": "/*------------------------------------*\\\n #PROSE\n\\*------------------------------------*/\n\n.s-prose {\n\n /**\n * Set c"
},
{
"path": "css/settings/_all.scss",
"chars": 415,
"preview": "///*----------------------------------*\\\n// #SETTINGS\n//\\*----------------------------------*/\n\n///\n// CONTENTS\n//\n// S"
},
{
"path": "css/settings/_settings.colors.scss",
"chars": 3261,
"preview": "///*----------------------------------*\\\n// #COLORS\n//\\*----------------------------------*/\n\n// Set up a colour palett"
},
{
"path": "css/settings/_settings.config.scss",
"chars": 294,
"preview": "///*----------------------------------*\\\n// #CONFIG\n//\\*----------------------------------*/\n\n// Config-level settings "
},
{
"path": "css/settings/_settings.custom.scss",
"chars": 278,
"preview": "///*----------------------------------*\\\n// #CUSTOM\n//\\*----------------------------------*/\n\n$global-font-size: 16p"
},
{
"path": "css/settings/_settings.global.scss",
"chars": 2276,
"preview": "///*----------------------------------*\\\n// #GLOBAL\n//\\*----------------------------------*/\n\n// Project-level settings"
},
{
"path": "css/themes/_themes.custom.scss",
"chars": 263,
"preview": "/*------------------------------------*\\\n #CUSTOM\n\\*------------------------------------*/\n\n/**\n * This file contains a"
},
{
"path": "css/themes/_themes.red.scss",
"chars": 277,
"preview": "/*------------------------------------*\\\n #RED\n\\*------------------------------------*/\n\n/**\n * Apply a theme to the en"
},
{
"path": "css/tools/_all.scss",
"chars": 538,
"preview": "///*----------------------------------*\\\n// #TOOLS\n//\\*----------------------------------*/\n\n///\n// CONTENTS\n//\n// TOOL"
},
{
"path": "css/tools/_config.mq.scss",
"chars": 222,
"preview": "///*----------------------------------*\\\n// #MQ\n//\\*----------------------------------*/\n\n///\n// Pre-configuration for "
},
{
"path": "css/tools/_tools.aliases.scss",
"chars": 378,
"preview": "///*----------------------------------*\\\n// #ALIASES\n//\\*----------------------------------*/\n\n// Map some nicer/shorte"
},
{
"path": "css/tools/_tools.functions.scss",
"chars": 345,
"preview": "///*----------------------------------*\\\n// #FUNCTIONS\n//\\*----------------------------------*/\n\n// Custom functions.\n\n"
},
{
"path": "css/tools/_tools.mixins.scss",
"chars": 1055,
"preview": "///*------------------------------------*\\\n// #MIXINS\n//\\*------------------------------------*/\n\n// Global mixins av"
},
{
"path": "css/tools/_tools.typography.scss",
"chars": 1810,
"preview": "///*----------------------------------*\\\n// #TYPOGRAPHY\n//\\*----------------------------------*/\n\n// Mixins to help gen"
},
{
"path": "css/utilities/_utilities.debug.scss",
"chars": 1284,
"preview": "// Define styles for errors and warns that we can reuse throughout this file.\n\n@mixin debug-warn() {\n outline: 5px soli"
},
{
"path": "css/utilities/_utilities.headings.scss",
"chars": 382,
"preview": "/*------------------------------------*\\\n #HEADINGS\n\\*------------------------------------*/\n\n.u-h1 {\n @include font-s"
},
{
"path": "css/utilities/_utilities.healthcheck.scss",
"chars": 511,
"preview": "@if (config(healthcheck) == true) {\n/*------------------------------------*\\\n #HEALTHCHECK\n\\*--------------------------"
},
{
"path": "css/utilities/_utilities.shame.scss",
"chars": 132,
"preview": "/*------------------------------------*\\\n #SHAME.CSS\n\\*------------------------------------*/\n\n._c-page-foot {\n displa"
},
{
"path": "css/utilities/_utilities.widths.scss",
"chars": 1794,
"preview": "/*------------------------------------*\\\n #WIDTHS\n\\*------------------------------------*/\n\n// A mixin to spit out our "
},
{
"path": "css/watch",
"chars": 82,
"preview": "#!/bin/sh\n\nsass --watch main.scss:main.css --style expanded --precision 9\n\nexit 0\n"
},
{
"path": "index.html",
"chars": 23183,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" class=\"t~custom\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width"
},
{
"path": "package.json",
"chars": 547,
"preview": "{\n \"name\": \"discovr\",\n \"version\": \"1.0.0\",\n \"description\": \"Demo CSS Architecture workshop files\",\n \"main\": \"css/mai"
}
]
About this extraction
This page contains the full source code of the csswizardry/discovr GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 69 files (135.9 KB), approximately 41.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.