Basic Typography Styling

_typography.scss

// ////////////////////////////////////
// // Import of fonts for bread text //
// ////////////////////////////////////

// @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);

// ///////////////////////////////////////////////////////////////
// // Change p-font variable to match imported font family name //
// ///////////////////////////////////////////////////////////////

// $p-font: 'Open Sans', 'Helvetica Neue', Arial, Garuda, Sans-serif;

// /////////////////////////////////
// // Import of font for headings //
// /////////////////////////////////

// @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);

// ///////////////////////////////////////////////////////////////
// // Change h-font variable to match imported font family name //
// ///////////////////////////////////////////////////////////////

// $h-font: 'Open Sans Condensed', $p-font;

// //////////////////////////////////////
// // Import of fonts for code content //
// /////////////////////////////////////

// @import url(http://fonts.googleapis.com/css?family=Cousine:400,700,400italic);

// ///////////////////////////////////////////////////////////////
// // Change code-font variable to match imported font family name //
// ///////////////////////////////////////////////////////////////

// $code-font: Cousine, Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;

///////////////////////////////
// All stylings for headings //
///////////////////////////////

h1, h2, h3, h4, h5, h6 {
  line-height: $l-height;
  margin {
    bottom: 1em;}
  font: {
    family: $h-font;
    weight: bold;}
  -webkit-font-smoothing: antialiased}

h1 {
  font: {
    size: 2em;}
  // margin: 0 0 /* insert calc function for font-size/$l-height=margin-bottom or similair */;
  border-spacing: 10px}

h2 {
  font: {
    size: 1.8em;}}

h3 {
  font: {
    size: 1.6em;}}

h4 {
  font: {
    size: 1.4em;}}

h5 {
  font: {
    size: 1.2em;}}

h6 {
  font: {
    size: 1em;}}

///////////////////////////////////////////
// All stylings for general text content //
///////////////////////////////////////////

p {
	font: {
		family: $p-font;
		size: 1em;}
	margin: 0 0 $l-height 0;}

ul,ol {
	margin: 0 0 $l-height $l-height;}

//////////////////////////
// Anchor link styling∏ //
//////////////////////////

a {
  color: $font-col;
  border-bottom: 0.1em solid lighten($head-col, 0%);
  text-decoration: none;
  &:visited {
    color: lighten($font-col, 25%);
    border-bottom: 0.1em solid lighten($head-col, 15%);}
  &:hover {
    color: darken($font-col, 10%);
    border-bottom: 0.1em solid darken($head-col, 10%);}
  &:focus {
    color: darken($font-col, 15%);
    border-bottom: 0.1em solid darken($head-col, 15%);}
  &:active {
    color: darken($font-col, 15%);
    border-bottom: 0.1em solid darken($head-col, 15%);}
}

//////////////////
// List styling //
//////////////////

li {
  margin: 0 0 0.5em 0;
}

//////////////////////////
// Highlighters styling //
//////////////////////////

em {
  font-style: italic;
  font {
    family: $p-font;}
}
strong {
  font {
    family: $p-font;
    weight: 700;}}

///////////////////
// Quote styling //
///////////////////

q {
  &:before {
    content: open-quote;}
  &:after {
    content: close-quote;}
}

blockquote {
  background: ligthen($bg-col, 1.5%);
  border-left:10px solid darken($head-col, 5%);
  margin:1.5em 0;
  padding:.5em 1.5em;
  quotes:'\201C''\201D''\2018''\2019';
  &:lang(sv) { quotes: '\201D' '\201D' '\2019' '\2019'; }
  &:lang(da) { quotes: '\00BB' '\00AB' '\203A' '\2039'; }
  &:before, &:after {
    // color: darken($bg-col, 15%);
    // font-size:4em;
    // line-height:.1em;
    // margin-right:.25em;
    // vertical-align:-.4em;
    }
    &:before {
      content: open-quote;}
    &:after {
      content: close-quote;}
  p {
    display:inline;}}

///////////////////
// Code Styling  //
///////////////////

code, pre {
  overflow-wrap: break-word;
  font-family: $code-font;
  background: darken($bg-col, 5%);
  //margin: 1em;
}