brouilleursdeblanc/_sass/_base.scss

/* ==========================================================================
   Base elements
   ========================================================================== */

/*
   Selections
   ========================================================================== */

::-moz-selection {
	background-color: lighten($base-color, 65%);
	color: $base-color;
	text-shadow: none;
}
::selection {
	background-color: lighten($base-color, 65%);
	color: $base-color;
	text-shadow: none;
}


/*
   Body
   ========================================================================== */

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: $base-font;
  color: $text-color;
  background-color: $body-color;
  border-top: 5px solid $black;
}

/*
   Typography
   ========================================================================== */

body {
	font-family: $base-font;
	color: $text-color;
	@include font-size(16);
}

p {
	@include font-size(18,yes,28);
}

li {
	@include font-size(16,12,24);
}

/* headings */

h1, h2, h3, h4, h5, h6 {
	font-family: $heading-font;
	text-rendering: optimizeLegibility; // Fix the character spacing for headings
}
h1 {
	@include font-size(36);
}
h2 {
	@include font-size(32);
}
h3 {
	@include font-size(28);
}
h4 {
	@include font-size(24);
}
h5 {
	@include font-size(20);
}
h6 {
	@include font-size(18);
}

/* underlined text */

u,
ins {
	text-decoration: none;
	border-bottom: 1px solid $text-color;
}

/*
   Links
   ========================================================================== */

a {
	text-decoration: none;
	color: $link-color;
	&:visited {
		color: lighten($link-color, 20);
	}
	&:hover {
		color: darken($link-color, 20);
	}
	&:focus {
		outline: thin dotted;
		color: darken($link-color, 20);
	}
	&:hover,
	&:active {
		outline: 0;
	}
}

/*
   Horizontal rules
   ========================================================================== */

hr {
    display: block;
    margin: 1em 0;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;
}

/*
   Figures and Images
   ========================================================================== */

figure {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  @include clearfix;
  img {
    margin-bottom: 10px;
  }
  a {
    img {
      @include transform(translateY(0));
      -webkit-transition-duration: 0.25s;
      -moz-transition-duration: 0.25s;
      -o-transition-duration: 0.25s;
      opacity: 0.7;
      &:hover {
        @include transform(translateY(-5px));
        @include box-shadow(0 0 10px rgba($black, .20));
        opacity: 1;
      }
    }
  }
}

svg:not(:root) {
  overflow: hidden;
}

// Figure captions

figcaption {
	padding-top: 10px;
	@include font-size(14);
	line-height: 1.3;
	color: lighten($text-color, 10);
}



// Tables
// --------------------------------------------------
table {
  width: 100%;
}


// Blockquotes
// --------------------------------------------------

blockquote {
	font-family: $alt-font;
	font-style: italic;
	@include font-size(16);
	padding-left: 20px;
	border-left: 8px solid $black;
}





// Code
// --------------------------------------------------

tt, code, kbd, samp, pre {
	font-family: $code-font;
}
p,
li {
	code {
		@include font-size(14);
		font-family: $code-font;
		white-space: nowrap;
		margin: 0 2px;
		padding: 0 5px;
		border: 1px solid lighten($black, 90);
		background-color: lighten($black, 95);
		@include rounded(3px);
	}
}
pre {
	@include font-size(14);
	overflow-x: auto;
}





// Global Transition
// ---------------------------------------------------

b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
	@include transition(all .2s ease);
}