// The SCSS is enabled as the CSS preprocessor
// Enable small caps
.allsmallcaps {
font-feature-settings: "c2sc", "smcp";
}
// Responsive variables
$phablet-breakpoint: 37em;
$tablet-breakpoint: 48em;
$desktop-breakpoint: 64em;
$large-desktop-breakpoint: 80em;
// Layout variables & mixins
$column: 6.25%;
@mixin width($number) {
width: #{ $number * $column };
}
@mixin offset($number) {
margin-left: #{ $number * $column };
}
// Fonts
$font-meta: "ff-meta-serif-web-pro", Georgia, serif;
$font-korolev: "korolev", sans-serif;
// Colours
$red: #F7412D;
// Variables
$base-font-size: 112.5; // Gets used as %, converts to 18px
$line-height: 1.45;
$base: ($base-font-size / 100); // We'll need this for some calculations
// Modular scale
$ratio: 1.5; // Perfect Fifth
// pow and ms functions
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number; //Multiply by $number if exponent less than zero
}
} @else if $exponent < 0 {
@for $i from 1 through -$exponent {
$value: $value / $number; //Divide by $number if exponent less than zero
}
}
@return $value;
}
@function ms($value, $ms-ratio: $ratio, $ms-base: $base){
$size: pow($ms-ratio, $value) * $ms-base;
@return #{ $size + "rem" };
}
// Vertical rhythm mixins
@mixin line-height($number) {
line-height: #{ $number * $line-height + 'rem'};
}
@mixin margin-top($number) {
margin-top: #{ $number * $line-height + 'rem'};
}
@mixin margin-bottom($number) {
margin-bottom: #{ $number * $line-height + 'rem'};
}
html {
font-size: 100%; // = 16 pixels
@media screen and (min-width: $tablet-breakpoint){
font-size: #{$base-font-size + '%'}; // 112.5% = 18 pixels
}
font-family: $font-meta;
color: #333;
}
// Set line-height and margins for all elements
* {
@include line-height(1);
@include margin-bottom(1);
@include margin-top(0);
}
// [ h1: font-size: [x value from scale], line-height: 2 * 30px, margin-top: 2 * 30px, margin-bottom: 1 * 30px ]
$headings: (
h1: (1, 1.5, 1, 1),
h2: (1, 1.5, 2, 0.5),
h3: (0, 1.5, 2, 0.5),
h4: (0, 1, 0.25, 0),
h5: (0, 1, 0.5, 0),
h6: (0, 1, 0.5, 0)
);
// Set line-heights and margins for headings
@each $heading, $properties in $headings {
#{$heading} {
font-size: ms(nth($properties, 1));
@include line-height(nth($properties, 2));
@include margin-top(nth($properties, 3));
@include margin-bottom(nth($properties, 4));
}
}
h1, h2, h3, h4, h5, h6 {
font-family: $font-korolev;
font-weight: 500;
}
.main-body {
@include width(14);
@include offset(2);
@media screen and (min-width: $desktop-breakpoint){
@include width(9);
@include offset(2);
float: left;
}
}
.post-meta {
color: #999;
a {
color: #999;
text-decoration: underline;
}
}
.sidebar {
@include width(13);
@include offset(2);
@media screen and (min-width: $desktop-breakpoint){
@include width(3);
@include margin-top(2);
@include offset(1);
float: left;
}
h1 {
text-transform: uppercase;
font-size: ms(0);
@include margin-top(2);
@include margin-bottom(0);
}
ul {
list-style: none;
padding: 0;
}
a {
font-family: $font-korolev;
display: block;
@include margin-bottom(0);
}
.carbon {
max-width: 265px;
}
}
header {
@include margin-top(2);
@include margin-bottom(1);
font-family: $font-korolev;
&:after {
content: "";
display: table;
clear: both;
}
@media screen and (min-width: $tablet-breakpoint){
margin-bottom: 0;
}
}
.mobile-nav {
float: right;
margin-right: 10%;
svg {
margin-bottom: 0;
margin-right: 10px;
fill: $red;
}
@media screen and (min-width: $tablet-breakpoint){
display: none;
}
}
.main-nav {
display: none;
@media screen and (min-width: $tablet-breakpoint){
display: inline-block;
}
ul {
list-style: none;
margin-bottom: 0;
}
li {
display: inline-block;
margin-right: 20px;
margin-bottom: 0;
}
}
.logo-wrap {
text-transform: uppercase;
font-size: ms(0);
display: inline;
float: left;
margin-right: 40px;
margin-bottom: 0;
img {
margin-bottom: 0;
}
}
.logo {
max-width: 48px;
float: left;
}
small, figcaption {
font-size: ms(-1);
}
.big-quote {
font-family: $font-korolev;
font-size: ms(0);
max-width: 90%;
font-weight: 300;
font-style: italic;
margin-left: 0;
@include line-height(1);
text-indent: -0.4em;
@media screen and (min-width: $phablet-breakpoint){
float: right;
max-width: 10em;
margin-left: 2em;
@include margin-bottom(0.5);
}
@media screen and (min-width: $large-desktop-breakpoint){
font-size: ms(1);
@include line-height(1.5);
}
}
article {
h1 {
font-style: normal;
@include offset(-1);
max-width: 100%;
@media screen and (min-width: $phablet-breakpoint){
font-size: ms(2);
@include line-height(2);
}
@media screen and (min-width: $tablet-breakpoint){
font-size: ms(3);
@include line-height(3);
max-width: 95%;
}
@media screen and (min-width: $desktop-breakpoint){
@include offset(-2);
max-width: 13em;
}
}
p {
max-width: 90%;
@media screen and (min-width: $tablet-breakpoint){
max-width: 33em;
}
}
img {
max-width: 100%;
}
}
a {
color: $red;
text-decoration: none;
&:hover {
color: lighten($red, 10%);
}
&:active {
color: lighten($red, 20%);
}
}
.twitter-link {
font-family: $font-korolev;
}
// Apply the baseline grid as background
.grid {
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, 0.3) 1px, transparent 1px);
background-repeat: repeat;
background-position: left top;
background-size: 100% #{($base-font-size / 100 * 16) * $line-height + "px"};
}
.double-grid {
@extend .grid;
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(200, 100%, 50%, 0.3) 1px, transparent 1px, transparent #{ 0.5 * ($base-font-size / 100 * 16) * $line-height + "px"}, hsla(200, 100%, 50%, 0.2) #{ 0.5 * ($base-font-size / 100 * 16) * $line-height + "px"}, transparent #{ 0.5 * ($base-font-size / 100 * 16) * $line-height + 1 + "px"}, transparent #{($base-font-size / 100 * 16) * $line-height + "px"});
}
!
