mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-07-07 19:32:26 +00:00
Michael Rose
parent
1749e1722c
commit
e987aeb88e
13
.editorconfig
Normal file
13
.editorconfig
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
# editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -1,131 +1,33 @@
|
|||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
/* ==========================================================================
|
||||
Animations
|
||||
========================================================================== */
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.half {
|
||||
@include media($large) {
|
||||
img {
|
||||
width: 47.5%;
|
||||
float: left;
|
||||
margin-right: 2.5%;
|
||||
margin-bottom: 2.5%;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.third {
|
||||
@include media($large) {
|
||||
img {
|
||||
width: 30.8%;
|
||||
float: left;
|
||||
margin-right: 2.5%;
|
||||
margin-bottom: 2.5%;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
/* add .animated class to elements you wish to animate
|
||||
* along with the type of animation (eg: <div class="animated fadeIn"></div>)
|
||||
*/
|
||||
|
||||
|
||||
// Tables
|
||||
// --------------------------------------------------
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
@include font-size(14);
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
border: 2px solid $black !important;
|
||||
border-radius: $border-radius;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background-color: transparent;
|
||||
border: 0 solid transparent;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Well
|
||||
// --------------------------------------------------
|
||||
.well {
|
||||
padding: 20px;
|
||||
border: 1px solid $comp-color;
|
||||
@include rounded(4px);
|
||||
}
|
||||
|
||||
// Animations
|
||||
// --------------------------------------------------
|
||||
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;} 100% {opacity: 1;}
|
||||
}
|
||||
|
||||
/*
|
||||
Fade-in animation .fadeIn
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
|
|
@ -135,48 +37,46 @@ table {
|
|||
-o-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
/*
|
||||
Fade-in down animation .fadeInDown
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
|
@ -189,48 +89,46 @@ table {
|
|||
-o-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
/*
|
||||
Fade-in down big animation .fadeInDownBig
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
|
@ -243,81 +141,71 @@ table {
|
|||
-o-animation-name: fadeInDownBig;
|
||||
animation-name: fadeInDownBig;
|
||||
}
|
||||
|
||||
/*
|
||||
Bounce-in animation .bounceIn
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-webkit-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-moz-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
-o-transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
-o-transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
|
@ -329,81 +217,71 @@ table {
|
|||
-o-animation-name: bounceIn;
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
|
||||
/*
|
||||
Bounce-in down animation .bounceInDown
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-moz-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-o-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
|
@ -416,10 +294,14 @@ table {
|
|||
animation-name: bounceInDown;
|
||||
}
|
||||
|
||||
/*
|
||||
Drop animation .drop
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes drop {
|
||||
0% {
|
||||
-webkit-transform: translateY(-500px);
|
||||
}
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
|
|
@ -427,7 +309,7 @@ table {
|
|||
@-moz-keyframes drop {
|
||||
0% {
|
||||
-moz-transform: translateY(-500px);
|
||||
}
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
|
|
@ -435,7 +317,7 @@ table {
|
|||
@-o-keyframes drop {
|
||||
0% {
|
||||
-o-transform: translateY(-500px);
|
||||
}
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
|
|
@ -443,7 +325,7 @@ table {
|
|||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
|
@ -453,4 +335,4 @@ table {
|
|||
-moz-animation-name: drop;
|
||||
-o-animation-name: drop;
|
||||
animation-name: drop;
|
||||
}
|
||||
}
|
||||
77
_sass/_archives.scss
Normal file
77
_sass/_archives.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/* ==========================================================================
|
||||
Archive pages
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Post archive
|
||||
========================================================================== */
|
||||
|
||||
.post-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid lighten($black,80);
|
||||
border-bottom: 1px solid rgba($black,.10);
|
||||
@include font-size(18,no);
|
||||
@include clearfix;
|
||||
> a {
|
||||
border-bottom-width: 0; /* remove underlines from items in post indexes */
|
||||
}
|
||||
}
|
||||
a > span {
|
||||
float: right;
|
||||
}
|
||||
.entry-date {
|
||||
@include font-size(14,no);
|
||||
text-transform: uppercase;
|
||||
display: none;
|
||||
@include media($medium) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
/* post excerpt */
|
||||
.excerpt {
|
||||
display: block;
|
||||
float: none;
|
||||
@include font-size(14, no, 16);
|
||||
@include media($medium) {
|
||||
width: 70%;
|
||||
}
|
||||
@include media($large) {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Tag archive
|
||||
========================================================================== */
|
||||
|
||||
.tag-box {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
overflow: hidden;
|
||||
@include clearfix;
|
||||
&.inline li {
|
||||
float: left;
|
||||
@include font-size(14);
|
||||
line-height: 2.5;
|
||||
}
|
||||
a {
|
||||
padding: 4px 6px;
|
||||
margin: 2px;
|
||||
background-color: lighten($black, 90);
|
||||
@include rounded(4px);
|
||||
text-decoration: none;
|
||||
span {
|
||||
vertical-align: super;
|
||||
@include font-size(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
221
_sass/_base.scss
Normal file
221
_sass/_base.scss
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
/* ==========================================================================
|
||||
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);
|
||||
}
|
||||
39
_sass/_buttons.scss
Normal file
39
_sass/_buttons.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
/* ==========================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Default button
|
||||
========================================================================== */
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
@include font-size(14);
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
border: 2px solid $black !important;
|
||||
border-radius: $border-radius;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Close button
|
||||
========================================================================== */
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background-color: transparent;
|
||||
border: 0 solid transparent;
|
||||
color: $white;
|
||||
}
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
.CodeRay {
|
||||
background-color: #efefef;
|
||||
font-family: $code-font;
|
||||
@include font-size(12);
|
||||
color: #333332;
|
||||
margin-bottom: 1.5em;
|
||||
@include rounded(4px);
|
||||
pre {
|
||||
margin: 0px;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
div.CodeRay { }
|
||||
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
|
||||
|
||||
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
|
||||
table.CodeRay td {
|
||||
padding: 1em 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers, .CodeRay .no {
|
||||
background-color: #ECECEC;
|
||||
color: #AAA;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers a {
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers tt { font-weight: bold }
|
||||
.CodeRay .line-numbers .highlighted { color: red }
|
||||
.CodeRay .line { display: block; float: left; width: 100%; }
|
||||
.CodeRay span.line-numbers { padding: 0 24px 0 4px }
|
||||
.CodeRay .code { width: 100% }
|
||||
|
||||
ol.CodeRay { font-size: 10pt }
|
||||
ol.CodeRay li { white-space: pre }
|
||||
|
||||
.CodeRay .code pre { overflow: auto }
|
||||
.CodeRay .debug { color:white ! important; background:blue ! important; }
|
||||
|
||||
.CodeRay .annotation { color:#007 }
|
||||
.CodeRay .attribute-name { color:#f08 }
|
||||
.CodeRay .attribute-value { color:#700 }
|
||||
.CodeRay .binary { color:#509; font-weight:bold }
|
||||
.CodeRay .comment { color:#998; font-style: italic;}
|
||||
.CodeRay .char { color:#04D }
|
||||
.CodeRay .char .content { color:#04D }
|
||||
.CodeRay .char .delimiter { color:#039 }
|
||||
.CodeRay .class { color:#458; font-weight:bold }
|
||||
.CodeRay .complex { color:#A08; font-weight:bold }
|
||||
.CodeRay .constant { color:teal; }
|
||||
.CodeRay .color { color:#0A0 }
|
||||
.CodeRay .class-variable { color:#369 }
|
||||
.CodeRay .decorator { color:#B0B; }
|
||||
.CodeRay .definition { color:#099; font-weight:bold }
|
||||
.CodeRay .directive { color:#088; font-weight:bold }
|
||||
.CodeRay .delimiter { color:black }
|
||||
.CodeRay .doc { color:#970 }
|
||||
.CodeRay .doctype { color:#34b }
|
||||
.CodeRay .doc-string { color:#D42; font-weight:bold }
|
||||
.CodeRay .escape { color:#666; font-weight:bold }
|
||||
.CodeRay .entity { color:#800; font-weight:bold }
|
||||
.CodeRay .error { color:#F00; background-color:#FAA }
|
||||
.CodeRay .exception { color:#C00; font-weight:bold }
|
||||
.CodeRay .filename { color:#099; }
|
||||
.CodeRay .function { color:#900; font-weight:bold }
|
||||
.CodeRay .global-variable { color:teal; font-weight:bold }
|
||||
.CodeRay .hex { color:#058; font-weight:bold }
|
||||
.CodeRay .integer { color:#099; }
|
||||
.CodeRay .include { color:#B44; font-weight:bold }
|
||||
.CodeRay .inline { color: black }
|
||||
.CodeRay .inline .inline { background: #ccc }
|
||||
.CodeRay .inline .inline .inline { background: #bbb }
|
||||
.CodeRay .inline .inline-delimiter { color: #D14; }
|
||||
.CodeRay .inline-delimiter { color: #D14; }
|
||||
.CodeRay .important { color:#f00; }
|
||||
.CodeRay .interpreted { color:#B2B; font-weight:bold }
|
||||
.CodeRay .instance-variable { color:teal }
|
||||
.CodeRay .label { color:#970; font-weight:bold }
|
||||
.CodeRay .local-variable { color:#963 }
|
||||
.CodeRay .octal { color:#40E; font-weight:bold }
|
||||
.CodeRay .operator { }
|
||||
.CodeRay .predefined-constant { font-weight:bold }
|
||||
.CodeRay .predefined { color:#369; font-weight:bold }
|
||||
.CodeRay .preprocessor { color:#579; }
|
||||
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
|
||||
.CodeRay .predefined-type { color:#074; font-weight:bold }
|
||||
.CodeRay .reserved, .keyword { color:#000; font-weight:bold }
|
||||
|
||||
.CodeRay .key { color: #808; }
|
||||
.CodeRay .key .delimiter { color: #606; }
|
||||
.CodeRay .key .char { color: #80f; }
|
||||
.CodeRay .value { color: #088; }
|
||||
|
||||
.CodeRay .regexp { background-color:#fff0ff }
|
||||
.CodeRay .regexp .content { color:#808 }
|
||||
.CodeRay .regexp .delimiter { color:#404 }
|
||||
.CodeRay .regexp .modifier { color:#C2C }
|
||||
.CodeRay .regexp .function { color:#404; font-weight: bold }
|
||||
|
||||
.CodeRay .string { color: #D20; }
|
||||
.CodeRay .string .string { }
|
||||
.CodeRay .string .string .string { background-color:#ffd0d0 }
|
||||
.CodeRay .string .content { color: #D14; }
|
||||
.CodeRay .string .char { color: #D14; }
|
||||
.CodeRay .string .delimiter { color: #D14; }
|
||||
|
||||
.CodeRay .shell { color:#D14 }
|
||||
.CodeRay .shell .content { }
|
||||
.CodeRay .shell .delimiter { color:#D14 }
|
||||
|
||||
.CodeRay .symbol { color:#990073 }
|
||||
.CodeRay .symbol .content { color:#A60 }
|
||||
.CodeRay .symbol .delimiter { color:#630 }
|
||||
|
||||
.CodeRay .tag { color:#070 }
|
||||
.CodeRay .tag-special { color:#D70; font-weight:bold }
|
||||
.CodeRay .type { color:#339; font-weight:bold }
|
||||
.CodeRay .variable { color:#036 }
|
||||
|
||||
.CodeRay .insert { background: #afa; }
|
||||
.CodeRay .delete { background: #faa; }
|
||||
.CodeRay .change { color: #aaf; background: #007; }
|
||||
.CodeRay .head { color: #f8f; background: #505 }
|
||||
|
||||
.CodeRay .insert .insert { color: #080; font-weight:bold }
|
||||
.CodeRay .delete .delete { color: #800; font-weight:bold }
|
||||
.CodeRay .change .change { color: #66f; }
|
||||
.CodeRay .head .head { color: #f4f; }
|
||||
30
_sass/_footer.scss
Normal file
30
_sass/_footer.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/* ==========================================================================
|
||||
Site footer
|
||||
========================================================================== */
|
||||
|
||||
.footer-wrapper {
|
||||
@include clearfix;
|
||||
margin: 2em auto;
|
||||
text-align: center;
|
||||
font-family: $alt-font;
|
||||
@include font-size(14);
|
||||
font-style: italic;
|
||||
color: lighten($text-color,20);
|
||||
a {
|
||||
color: lighten($text-color,20);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Social media icons
|
||||
========================================================================== */
|
||||
|
||||
.social-icons {
|
||||
margin: 1em 0 2em;
|
||||
a {
|
||||
padding: 4px 8px;
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
_sass/_footnotes.scss
Normal file
8
_sass/_footnotes.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/* ==========================================================================
|
||||
Footnotes (class generated by Kramdown)
|
||||
========================================================================== */
|
||||
|
||||
.footnotes {
|
||||
@include font-size(14);
|
||||
font-family: $base-font;
|
||||
}
|
||||
116
_sass/_helpers.scss
Normal file
116
_sass/_helpers.scss
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
/* ==========================================================================
|
||||
Helpers and Utility Classes
|
||||
========================================================================== */
|
||||
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/* capitalize all letters */
|
||||
|
||||
.all-caps {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* center text */
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* remove bullets from list items */
|
||||
|
||||
/**
|
||||
* <ul class="unstyled-list">
|
||||
* <li>Item 1</li>
|
||||
* <li>Item 2</li>
|
||||
* </ul>
|
||||
*/
|
||||
|
||||
.unstyled-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Image alignment
|
||||
========================================================================== */
|
||||
|
||||
/* float left */
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
padding-right: $gutter;
|
||||
}
|
||||
|
||||
/* float right */
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
padding-left: $gutter;
|
||||
}
|
||||
|
||||
/*
|
||||
Image layout in <figure>
|
||||
========================================================================== */
|
||||
|
||||
figure {
|
||||
|
||||
/* 2 images in a row. should be of equal height/width to maintain layout */
|
||||
|
||||
&.half {
|
||||
@include media($large) {
|
||||
img {
|
||||
width: 47.5%;
|
||||
float: left;
|
||||
margin-right: 2.5%;
|
||||
margin-bottom: 2.5%;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 3 images in a row. should be of equal height/width to maintain layout */
|
||||
|
||||
&.third {
|
||||
@include media($large) {
|
||||
img {
|
||||
width: 30.8%;
|
||||
float: left;
|
||||
margin-right: 2.5%;
|
||||
margin-bottom: 2.5%;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
No scrollbars
|
||||
========================================================================== */
|
||||
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
Link arrow (used in link post titles)
|
||||
========================================================================== */
|
||||
|
||||
.link-arrow {
|
||||
font-weight: 100;
|
||||
text-decoration: underline;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -1,529 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: $body-color;
|
||||
border-top: 5px solid $black;
|
||||
}
|
||||
|
||||
|
||||
// Top Navigation
|
||||
// --------------------------------------------------
|
||||
|
||||
.navigation-wrapper {
|
||||
text-align: center;
|
||||
@include clearfix;
|
||||
ul {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
margin: 0 0 50px;
|
||||
padding: 4px 20px;
|
||||
background-color: $black;
|
||||
@include media($medium) {
|
||||
width: auto;
|
||||
@include rounded(0 0 10px 10px);
|
||||
}
|
||||
@include clearfix;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
@include font-size(24,no);
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
@include media($medium) {
|
||||
@include font-size(14,no);
|
||||
}
|
||||
a:hover {
|
||||
@include box-shadow($shadow: inset 0 0 1px $white);
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px 20px;
|
||||
@include media($medium) {
|
||||
margin-bottom: 0;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
color: $white;
|
||||
@include rounded(4px);
|
||||
&:hover {
|
||||
background-color: lighten($black, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsive nav toggle stuff
|
||||
#site-nav {
|
||||
display: none;
|
||||
z-index: 5;
|
||||
@include media($medium) {
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
-o-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
&.closed {
|
||||
@include media($medium) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.opened {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
li {
|
||||
float: none;
|
||||
@include media($medium) {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-js #site-nav {
|
||||
display: block;
|
||||
}
|
||||
#nav-toggle {
|
||||
z-index: 20;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 6px 20px;
|
||||
background-color: $black;
|
||||
height: 44px;
|
||||
@include rounded(0);
|
||||
@include media($medium) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// menu overlay
|
||||
.menu-screen {
|
||||
@include position(fixed, 0px 0px 0px 0px);
|
||||
@include transition;
|
||||
background: $black;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 10;
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Masthead
|
||||
// --------------------------------------------------
|
||||
|
||||
.masthead {
|
||||
margin-top: 40px;
|
||||
@include clearfix;
|
||||
@include media($medium) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.wrap {
|
||||
text-align: center;
|
||||
max-width: em(440);
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
@include media($medium) {
|
||||
max-width: em(728);
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
@include media($large) {
|
||||
max-width: em(960);
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-logo {
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
@include animation-duration(1s);
|
||||
@include animation-delay(.05s);
|
||||
border: 4px solid $white;
|
||||
@include rounded(100px);
|
||||
@include media($medium) {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
@include rounded(150px);
|
||||
}
|
||||
@include media($large) {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
@include rounded(200px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-title {
|
||||
margin-bottom: 0;
|
||||
@include animation-duration(1s);
|
||||
@include animation-delay(.75s);
|
||||
a {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.site-description {
|
||||
margin-top: 0;
|
||||
font-family: $alt-font;
|
||||
@include font-size(16);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
@include animation-duration(1s);
|
||||
@include animation-delay(1s);
|
||||
@include media($medium) {
|
||||
@include font-size(20);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Main
|
||||
// --------------------------------------------------
|
||||
|
||||
#main {
|
||||
@include clearfix;
|
||||
}
|
||||
.entry,
|
||||
.hentry {
|
||||
@include clearfix;
|
||||
border-bottom: 1px solid lighten($black,80);
|
||||
border-bottom: 1px solid rgba($black,.10);
|
||||
}
|
||||
.entry-feature-image {
|
||||
margin: 20px 0 0;
|
||||
width: 100%;
|
||||
@include media($medium) {
|
||||
margin-top: -75px;
|
||||
}
|
||||
@include media($large) {
|
||||
margin-top: -145px;
|
||||
}
|
||||
}
|
||||
.entry-header {
|
||||
@include fill-parent;
|
||||
}
|
||||
.entry-tags {
|
||||
display: block;
|
||||
margin-top: 2em;
|
||||
text-transform: uppercase;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
span + .entry-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
.entry-title {
|
||||
font-family: $alt-font;
|
||||
font-style: italic;
|
||||
@include font-size(36,yes,36);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: -3px;
|
||||
a {
|
||||
color: $black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@include media($medium) {
|
||||
@include font-size(52,yes,54);
|
||||
}
|
||||
@include media($large) {
|
||||
@include font-size(68,yes,72);
|
||||
}
|
||||
}
|
||||
.entry-wrapper {
|
||||
@include outer-container;
|
||||
margin-top: 0;
|
||||
margin-bottom: 3em;
|
||||
padding-right: $gutter;
|
||||
padding-left: $gutter;
|
||||
}
|
||||
.entry-meta {
|
||||
@include span-columns(12);
|
||||
text-transform: uppercase;
|
||||
@include font-size(14);
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
@include media($large) {
|
||||
@include span-columns(2.5);
|
||||
}
|
||||
& > span {
|
||||
padding: 0 20px 10px 0;
|
||||
display: inline-block;
|
||||
@include media($large) {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid lighten($black,80);
|
||||
border-bottom: 1px solid rgba($black,.10);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bio-photo {
|
||||
display: none;
|
||||
@include media($large) {
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
@include rounded(150px);
|
||||
@include clearfix;
|
||||
}
|
||||
}
|
||||
.entry-content {
|
||||
@include span-columns(12);
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@include media($large) {
|
||||
@include span-columns(9.5);
|
||||
}
|
||||
p > a,
|
||||
li > a {
|
||||
border-bottom: 1px dotted lighten($link-color, 50);
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
.post-list {
|
||||
li > a {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
// Disqus Comments
|
||||
#disqus_thread {
|
||||
margin-top: 2em;
|
||||
}
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
// Page layout
|
||||
#home,
|
||||
#page {
|
||||
.entry-wrapper {
|
||||
max-width: em(760);
|
||||
}
|
||||
.entry-title {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
.entry-content {
|
||||
@include span-columns(12);
|
||||
}
|
||||
}
|
||||
// Post index layout
|
||||
.post-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid lighten($black,80);
|
||||
border-bottom: 1px solid rgba($black,.10);
|
||||
@include font-size(18,no);
|
||||
@include clearfix;
|
||||
}
|
||||
a > span {
|
||||
float: right;
|
||||
}
|
||||
.entry-date {
|
||||
@include font-size(14,no);
|
||||
text-transform: uppercase;
|
||||
display: none;
|
||||
@include media($medium) {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
/* post excerpt */
|
||||
.excerpt {
|
||||
display: block;
|
||||
float: none;
|
||||
@include font-size(14, no, 16);
|
||||
@include media($medium) {
|
||||
width: 70%;
|
||||
}
|
||||
@include media($large) {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tag index
|
||||
.tag-box {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
overflow: hidden;
|
||||
@include clearfix;
|
||||
&.inline li {
|
||||
float: left;
|
||||
@include font-size(14);
|
||||
line-height: 2.5;
|
||||
}
|
||||
a {
|
||||
padding: 4px 6px;
|
||||
margin: 2px;
|
||||
background-color: lighten($black, 90);
|
||||
@include rounded(4px);
|
||||
text-decoration: none;
|
||||
span {
|
||||
vertical-align: super;
|
||||
@include font-size(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Table of Contents
|
||||
#markdown-toc {
|
||||
font-family: $alt-font;
|
||||
margin-top: $gutter;
|
||||
margin-bottom: $gutter;
|
||||
padding-left: 0;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
li {
|
||||
@include font-size(16,no,18);
|
||||
border-bottom: 1px solid $border-color;
|
||||
list-style-type: none;
|
||||
}
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: (.25 * $gutter) (.5 * $gutter);
|
||||
background: $table-stripe-color;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: (.25 * $gutter) (.5 * $gutter);
|
||||
border-left: 2px solid transparent;
|
||||
border-bottom: 0 solid transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($border-color,5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
margin: ((0px + $doc-line-height) / 2) 0;
|
||||
margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
|
||||
width: 100%;
|
||||
tbody {
|
||||
tr:hover > td, tr:hover > th {
|
||||
background-color: $table-hover-color;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
tr:first-child td {
|
||||
border-bottom: 2px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
th {
|
||||
padding: (0px + $doc-line-height) / 2;
|
||||
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
|
||||
font-family: $alt-font;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background-color: $table-header-color;
|
||||
border-bottom: 1px solid darken($border-color, 15%);
|
||||
}
|
||||
td {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: (0px + $doc-line-height) / 2;
|
||||
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
|
||||
@include font-size(18);
|
||||
}
|
||||
tr, td, th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
// --------------------------------------------------
|
||||
|
||||
.footer-wrapper {
|
||||
@include clearfix;
|
||||
margin: 2em auto;
|
||||
text-align: center;
|
||||
font-family: $alt-font;
|
||||
@include font-size(14);
|
||||
font-style: italic;
|
||||
color: lighten($text-color,20);
|
||||
a {
|
||||
color: lighten($text-color,20);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Search Overlay
|
||||
// --------------------------------------------------
|
||||
|
||||
.search-wrapper {
|
||||
@include outer-container;
|
||||
margin-top: 0;
|
||||
padding-right: $gutter;
|
||||
padding-left: $gutter;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
|
||||
// Social Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
.social-icons {
|
||||
margin: 1em 0 2em;
|
||||
a {
|
||||
padding: 4px 8px;
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Browser Upgrade
|
||||
// --------------------------------------------------
|
||||
|
||||
.upgrade {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// Google Search Form
|
||||
// --------------------------------------------------
|
||||
|
||||
#goog-fixurl {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
#goog-wm-qt {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
padding: 8px 10px;
|
||||
@include font-size(14);
|
||||
border-width: 2px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
#goog-wm-sb {
|
||||
@extend .btn;
|
||||
}
|
||||
80
_sass/_masthead.scss
Normal file
80
_sass/_masthead.scss
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/* ==========================================================================
|
||||
Masthead
|
||||
========================================================================== */
|
||||
|
||||
.masthead {
|
||||
margin-top: 40px;
|
||||
@include clearfix;
|
||||
@include media($medium) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.wrap {
|
||||
text-align: center;
|
||||
max-width: em(440);
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
@include media($medium) {
|
||||
max-width: em(728);
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
@include media($large) {
|
||||
max-width: em(960);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Site logo
|
||||
========================================================================== */
|
||||
|
||||
.site-logo {
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
@include animation-duration(1s);
|
||||
@include animation-delay(.05s);
|
||||
border: 4px solid $white;
|
||||
@include rounded(100px); /* crops in a circle */
|
||||
@include media($medium) {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
@include rounded(150px); /* crops in a circle */
|
||||
}
|
||||
@include media($large) {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
@include rounded(200px); /* crops in a circle */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Site title/name
|
||||
========================================================================== */
|
||||
|
||||
.site-title {
|
||||
margin-bottom: 0;
|
||||
@include animation-duration(1s);
|
||||
@include animation-delay(.75s);
|
||||
a {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Site description text
|
||||
========================================================================== */
|
||||
|
||||
.site-description {
|
||||
margin-top: 0;
|
||||
font-family: $alt-font;
|
||||
@include font-size(16);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
@include animation-duration(1s);
|
||||
@include animation-delay(1s);
|
||||
@include media($medium) {
|
||||
@include font-size(20);
|
||||
}
|
||||
}
|
||||
99
_sass/_navigation.scss
Normal file
99
_sass/_navigation.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/* ==========================================================================
|
||||
Top navigation
|
||||
========================================================================== */
|
||||
|
||||
.navigation-wrapper {
|
||||
text-align: center;
|
||||
@include clearfix;
|
||||
ul {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
margin: 0 0 50px;
|
||||
padding: 4px 20px;
|
||||
background-color: $black;
|
||||
@include media($medium) {
|
||||
width: auto;
|
||||
@include rounded(0 0 10px 10px);
|
||||
}
|
||||
@include clearfix;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
@include font-size(24,no);
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
@include media($medium) {
|
||||
@include font-size(14,no);
|
||||
}
|
||||
a:hover {
|
||||
@include box-shadow($shadow: inset 0 0 1px $white);
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px 20px;
|
||||
@include media($medium) {
|
||||
margin-bottom: 0;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
color: $white;
|
||||
@include rounded(4px);
|
||||
&:hover {
|
||||
background-color: lighten($black, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Responsive navigation toggle
|
||||
========================================================================== */
|
||||
|
||||
#site-nav {
|
||||
display: none;
|
||||
z-index: 5;
|
||||
@include media($medium) {
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
-o-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
&.closed {
|
||||
@include media($medium) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.opened {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
li {
|
||||
float: none;
|
||||
@include media($medium) {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* display when JavaScript is disabled */
|
||||
.no-js #site-nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
z-index: 20;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 6px 20px;
|
||||
background-color: $black;
|
||||
height: 44px;
|
||||
@include rounded(0);
|
||||
@include media($medium) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
26
_sass/_notices.scss
Normal file
26
_sass/_notices.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* ==========================================================================
|
||||
Notices
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Default notice
|
||||
========================================================================== */
|
||||
|
||||
.notice {
|
||||
margin-top: 1.5em;
|
||||
padding: .5em 1em;
|
||||
text-indent: 0;
|
||||
@include font-size(16);
|
||||
background-color: lighten($black, 95);
|
||||
border: 1px solid lighten($black, 90);
|
||||
@include rounded(4px);
|
||||
}
|
||||
|
||||
/*
|
||||
Browser upgrade notice
|
||||
========================================================================== */
|
||||
|
||||
.upgrade {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
295
_sass/_page.scss
Normal file
295
_sass/_page.scss
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
/* ==========================================================================
|
||||
Page/post layout and styling
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Main content
|
||||
========================================================================== */
|
||||
|
||||
#main {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.entry,
|
||||
.hentry {
|
||||
@include clearfix;
|
||||
border-bottom: 1px solid lighten($black,80);
|
||||
border-bottom: 1px solid rgba($black,.10);
|
||||
}
|
||||
|
||||
/* feature image */
|
||||
|
||||
.entry-feature-image {
|
||||
margin: 20px 0 0;
|
||||
width: 100%;
|
||||
@include media($medium) {
|
||||
margin-top: -75px; /* move up to be overlapped by site logo */
|
||||
}
|
||||
@include media($large) {
|
||||
margin-top: -145px; /* move up further to be overlapped by site logo */
|
||||
}
|
||||
}
|
||||
|
||||
/* page header */
|
||||
|
||||
.entry-header {
|
||||
@include fill-parent;
|
||||
}
|
||||
|
||||
/* tag listing in page header */
|
||||
|
||||
.entry-tags {
|
||||
display: block;
|
||||
margin-top: 2em;
|
||||
text-transform: uppercase;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* page title */
|
||||
|
||||
span + .entry-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-family: $alt-font;
|
||||
font-style: italic;
|
||||
@include font-size(36,yes,36);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: -3px;
|
||||
a {
|
||||
color: $black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@include media($medium) {
|
||||
@include font-size(52,yes,54);
|
||||
}
|
||||
@include media($large) {
|
||||
@include font-size(68,yes,72);
|
||||
}
|
||||
}
|
||||
|
||||
/* page/post wrapper */
|
||||
|
||||
.entry-wrapper {
|
||||
@include outer-container;
|
||||
margin-top: 0;
|
||||
margin-bottom: 3em;
|
||||
padding-right: $gutter;
|
||||
padding-left: $gutter;
|
||||
}
|
||||
|
||||
/* page/post meta content (date, author, etc) */
|
||||
|
||||
.entry-meta {
|
||||
@include span-columns(12);
|
||||
text-transform: uppercase;
|
||||
@include font-size(14);
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
@include media($large) {
|
||||
@include span-columns(2.5);
|
||||
}
|
||||
& > span {
|
||||
padding: 0 20px 10px 0;
|
||||
display: inline-block;
|
||||
@include media($large) {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid lighten($black,80);
|
||||
border-bottom: 1px solid rgba($black,.10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* author avatar (circular) */
|
||||
|
||||
.bio-photo {
|
||||
display: none;
|
||||
@include media($large) {
|
||||
display: block;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
@include rounded(150px);
|
||||
@include clearfix;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* feature image credit */
|
||||
|
||||
.image-credit {
|
||||
margin: 0 auto;
|
||||
max-width: 440px;
|
||||
padding-top: 5px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
@include font-size(12, no);
|
||||
line-height: 1.3;
|
||||
color: lighten($text-color, 30);
|
||||
@include clearfix();
|
||||
@include media($medium) {
|
||||
max-width: 760px;
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
@include font-size(14, no);
|
||||
}
|
||||
@include media($large) {
|
||||
max-width: 960px;
|
||||
}
|
||||
a {
|
||||
color: lighten($text-color, 30);
|
||||
}
|
||||
}
|
||||
|
||||
/* main content block */
|
||||
|
||||
.entry-content {
|
||||
@include span-columns(12);
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@include media($large) {
|
||||
@include span-columns(9.5);
|
||||
}
|
||||
/* nice link underlines */
|
||||
p > a,
|
||||
li > a {
|
||||
border-bottom: 1px dotted lighten($link-color, 50);
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Disqus
|
||||
========================================================================== */
|
||||
|
||||
#disqus_thread {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
Pagination
|
||||
========================================================================== */
|
||||
|
||||
.pagination {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
Overrides
|
||||
========================================================================== */
|
||||
|
||||
/* adjust width for lack of meta/author column */
|
||||
|
||||
#home,
|
||||
#page {
|
||||
.entry-wrapper {
|
||||
max-width: em(760);
|
||||
}
|
||||
.entry-title {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
.entry-content {
|
||||
@include span-columns(12);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Kramdown generated table of contents
|
||||
========================================================================== */
|
||||
|
||||
#markdown-toc {
|
||||
font-family: $alt-font;
|
||||
margin-top: $gutter;
|
||||
margin-bottom: $gutter;
|
||||
padding-left: 0;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
li {
|
||||
@include font-size(16,no,18);
|
||||
border-bottom: 1px solid $border-color;
|
||||
list-style-type: none;
|
||||
}
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: (.25 * $gutter) (.5 * $gutter);
|
||||
background: $table-stripe-color;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: (.25 * $gutter) (.5 * $gutter);
|
||||
border-left: 2px solid transparent;
|
||||
border-bottom: 0 solid transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($border-color,5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/** For nicer looking tables apply the .table class
|
||||
* Example:
|
||||
* <table class="table">
|
||||
* <tr>
|
||||
* <td>cell1</td>
|
||||
* <td>cell2</td>
|
||||
* <td>cell3</td>
|
||||
* </tr>
|
||||
* </table>
|
||||
*/
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
margin: ((0px + $doc-line-height) / 2) 0;
|
||||
margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
|
||||
width: 100%;
|
||||
tbody {
|
||||
tr:hover > td, tr:hover > th {
|
||||
background-color: $table-hover-color;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
tr:first-child td {
|
||||
border-bottom: 2px solid $table-border-color;
|
||||
}
|
||||
}
|
||||
th {
|
||||
padding: (0px + $doc-line-height) / 2;
|
||||
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
|
||||
font-family: $alt-font;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
background-color: $table-header-color;
|
||||
border-bottom: 1px solid darken($border-color, 15%);
|
||||
}
|
||||
td {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: (0px + $doc-line-height) / 2;
|
||||
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
|
||||
@include font-size(18);
|
||||
}
|
||||
tr, td, th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
40
_sass/_search.scss
Normal file
40
_sass/_search.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/* ==========================================================================
|
||||
Search
|
||||
========================================================================== */
|
||||
|
||||
.search-wrapper {
|
||||
@include outer-container;
|
||||
margin-top: 0;
|
||||
padding-right: $gutter;
|
||||
padding-left: $gutter;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/*
|
||||
Google search form
|
||||
========================================================================== */
|
||||
|
||||
#goog-fixurl {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#goog-wm-qt {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
padding: 8px 10px;
|
||||
@include font-size(14);
|
||||
border-width: 2px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
/* button */
|
||||
#goog-wm-sb {
|
||||
@extend .btn;
|
||||
}
|
||||
239
_sass/_site.scss
239
_sass/_site.scss
|
|
@ -1,239 +0,0 @@
|
|||
// Selection
|
||||
// --------------------------------------------------
|
||||
|
||||
::-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 {
|
||||
font-family: $base-font;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.link-arrow {
|
||||
font-weight: 100;
|
||||
text-decoration: underline;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
// Figures
|
||||
// --------------------------------------------------
|
||||
|
||||
figcaption {
|
||||
padding-top: 10px;
|
||||
@include font-size(14);
|
||||
line-height: 1.3;
|
||||
color: lighten($text-color, 10);
|
||||
}
|
||||
|
||||
|
||||
// Feature Image Caption
|
||||
// --------------------------------------------------
|
||||
|
||||
.image-credit {
|
||||
margin: 0 auto;
|
||||
max-width: 440px;
|
||||
padding-top: 5px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
@include font-size(14,no);
|
||||
line-height: 1.3;
|
||||
color: lighten($text-color, 30);
|
||||
@include clearfix();
|
||||
@include media($medium) {
|
||||
max-width: 760px;
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
@include media($large) {
|
||||
max-width: 960px;
|
||||
}
|
||||
a {
|
||||
color: lighten($text-color, 30);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Note text
|
||||
// --------------------------------------------------
|
||||
|
||||
.notice {
|
||||
margin-top: 1.5em;
|
||||
padding: .5em 1em;
|
||||
text-indent: 0;
|
||||
@include font-size(16);
|
||||
background-color: lighten($black, 95);
|
||||
border: 1px solid lighten($black, 90);
|
||||
@include rounded(4px);
|
||||
}
|
||||
|
||||
|
||||
// Blockquotes
|
||||
// --------------------------------------------------
|
||||
|
||||
blockquote {
|
||||
font-family: $alt-font;
|
||||
font-style: italic;
|
||||
@include font-size(16);
|
||||
padding-left: 20px;
|
||||
border-left: 8px solid $black;
|
||||
}
|
||||
|
||||
|
||||
// Footnotes
|
||||
// --------------------------------------------------
|
||||
|
||||
.footnotes {
|
||||
@include font-size(14);
|
||||
font-family: $base-font;
|
||||
}
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
|
||||
// Utility Classes
|
||||
// --------------------------------------------------
|
||||
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.all-caps {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pull-left {
|
||||
float: left;
|
||||
padding-right: $gutter;
|
||||
}
|
||||
.pull-right {
|
||||
float: right;
|
||||
padding-left: $gutter;
|
||||
}
|
||||
.unstyled-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
.center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// Global Transition
|
||||
// ---------------------------------------------------
|
||||
|
||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
|
||||
@include transition(all .2s ease);
|
||||
}
|
||||
|
|
@ -1,3 +1,11 @@
|
|||
/* ==========================================================================
|
||||
Syntax highlighting and formatting
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
Pygments.rb and Rouge
|
||||
========================================================================== */
|
||||
|
||||
.highlight {
|
||||
background-color: #efefef;
|
||||
font-family: $code-font;
|
||||
|
|
@ -71,4 +79,146 @@
|
|||
.vg { color: #008080 } /* Name.Variable.Global */
|
||||
.vi { color: #008080 } /* Name.Variable.Instance */
|
||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Coderay
|
||||
========================================================================== */
|
||||
|
||||
.CodeRay {
|
||||
background-color: #efefef;
|
||||
font-family: $code-font;
|
||||
@include font-size(12);
|
||||
color: #333332;
|
||||
margin-bottom: 1.5em;
|
||||
@include rounded(4px);
|
||||
pre {
|
||||
margin: 0px;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
div.CodeRay { }
|
||||
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
|
||||
|
||||
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
|
||||
table.CodeRay td {
|
||||
padding: 1em 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
ol.CodeRay { font-size: 10pt }
|
||||
ol.CodeRay li { white-space: pre }
|
||||
|
||||
.CodeRay {
|
||||
|
||||
.line-numbers,
|
||||
.no {
|
||||
background-color: #ececec;
|
||||
color: #aaa;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.line-numbers a {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.line-numbers tt { font-weight: bold }
|
||||
.line-numbers .highlighted { color: red }
|
||||
.line { display: block; float: left; width: 100%; }
|
||||
span.line-numbers { padding: 0 24px 0 4px }
|
||||
.code { width: 100% }
|
||||
|
||||
.code pre { overflow: auto }
|
||||
.debug { color: white !important; background: blue !important; }
|
||||
.annotation { color: #007 }
|
||||
.attribute-name { color: #f08 }
|
||||
.attribute-value { color: #700 }
|
||||
.binary { color: #509; font-weight: bold }
|
||||
.comment { color: #998; font-style: italic;}
|
||||
.char { color: #04d }
|
||||
.char .content { color: #04d }
|
||||
.char .delimiter { color: #039 }
|
||||
.class { color: #458; font-weight: bold }
|
||||
.complex { color: #a08; font-weight: bold }
|
||||
.constant { color: teal; }
|
||||
.color { color: #0a0 }
|
||||
.class-variable { color: #369 }
|
||||
.decorator { color: #b0b; }
|
||||
.definition { color: #099; font-weight: bold }
|
||||
.directive { color: #088; font-weight: bold }
|
||||
.delimiter { color: black }
|
||||
.doc { color: #970 }
|
||||
.doctype { color: #34b }
|
||||
.doc-string { color: #d42; font-weight: bold }
|
||||
.escape { color: #666; font-weight: bold }
|
||||
.entity { color: #800; font-weight: bold }
|
||||
.error { color: #f00; background-color: #faa }
|
||||
.exception { color: #c00; font-weight: bold }
|
||||
.filename { color: #099; }
|
||||
.function { color: #900; font-weight: bold }
|
||||
.global-variable { color: teal; font-weight: bold }
|
||||
.hex { color: #058; font-weight: bold }
|
||||
.integer { color: #099; }
|
||||
.include { color: #b44; font-weight: bold }
|
||||
.inline { color: black }
|
||||
.inline .inline { background: #ccc }
|
||||
.inline .inline .inline { background: #bbb }
|
||||
.inline .inline-delimiter { color: #d14; }
|
||||
.inline-delimiter { color: #d14; }
|
||||
.important { color: #f00; }
|
||||
.interpreted { color: #b2b; font-weight: bold }
|
||||
.instance-variable { color: teal }
|
||||
.label { color: #970; font-weight: bold }
|
||||
.local-variable { color: #963 }
|
||||
.octal { color: #40e; font-weight: bold }
|
||||
.operator { }
|
||||
.predefined-constant { font-weight: bold }
|
||||
.predefined { color: #369; font-weight: bold }
|
||||
.preprocessor { color: #579; }
|
||||
.pseudo-class { color: #00c; font-weight: bold }
|
||||
.predefined-type { color: #074; font-weight: bold }
|
||||
.reserved,
|
||||
.keyword { color: #000; font-weight: bold }
|
||||
|
||||
.key { color: #808; }
|
||||
.key .delimiter { color: #606; }
|
||||
.key .char { color: #80f; }
|
||||
.value { color: #088; }
|
||||
|
||||
.regexp { background-color: #fff0ff }
|
||||
.regexp .content { color: #808 }
|
||||
.regexp .delimiter { color: #404 }
|
||||
.regexp .modifier { color: #c2c }
|
||||
.regexp .function { color: #404; font-weight: bold }
|
||||
|
||||
.string { color: #d20; }
|
||||
.string .string { }
|
||||
.string .string .string { background-color: #ffd0d0 }
|
||||
.string .content { color: #d14; }
|
||||
.string .char { color: #d14; }
|
||||
.string .delimiter { color: #d14; }
|
||||
|
||||
.shell { color: #d14 }
|
||||
.shell .content { }
|
||||
.shell .delimiter { color: #d14 }
|
||||
|
||||
.symbol { color: #990073 }
|
||||
.symbol .content { color: #a60 }
|
||||
.symbol .delimiter { color: #630 }
|
||||
|
||||
.tag { color: #070 }
|
||||
.tag-special { color: #d70; font-weight: bold }
|
||||
.type { color: #339; font-weight: bold }
|
||||
.variable { color: #036 }
|
||||
|
||||
.insert { background: #afa; }
|
||||
.delete { background: #faa; }
|
||||
.change { color: #aaf; background: #007; }
|
||||
.head { color: #f8f; background: #505 }
|
||||
|
||||
.insert .insert { color: #080; font-weight: bold }
|
||||
.delete .delete { color: #800; font-weight: bold }
|
||||
.change .change { color: #66f; }
|
||||
.head .head { color: #f4f; }
|
||||
}
|
||||
|
|
|
|||
11
_sass/_wells.scss
Normal file
11
_sass/_wells.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* ==========================================================================
|
||||
Wells
|
||||
========================================================================== */
|
||||
|
||||
/* Used to call out text in a subtle manner */
|
||||
|
||||
.well {
|
||||
padding: 20px;
|
||||
border: 1px solid $comp-color;
|
||||
@include rounded(4px);
|
||||
}
|
||||
|
|
@ -11,18 +11,45 @@ sitemap: false
|
|||
*
|
||||
*/
|
||||
|
||||
// Partials
|
||||
@import "variables";
|
||||
@import "vendor/bourbon/bourbon";
|
||||
@import "grid-settings";
|
||||
@import "vendor/neat/neat";
|
||||
|
||||
/*
|
||||
Vendor
|
||||
========================================================================== */
|
||||
|
||||
@import "vendor/bourbon/bourbon"; /* Bourbon mixins (bourbon.io) */
|
||||
@import "grid-settings"; /* Bourbon Neat settings */
|
||||
@import "vendor/neat/neat"; /* Bourbon Neat grid mixins (neat.bourbon.io) */
|
||||
@import "vendor/font-awesome/font-awesome"; /* Font Awesome icons */
|
||||
@import "vendor/magnific-popup/magnific-popup"; /* Magnific Popup lightbox */
|
||||
|
||||
/*
|
||||
Global
|
||||
========================================================================== */
|
||||
|
||||
@import "mixins";
|
||||
@import "reset";
|
||||
@import "site";
|
||||
@import "base";
|
||||
|
||||
/*
|
||||
Components
|
||||
========================================================================== */
|
||||
|
||||
@import "helpers";
|
||||
@import "buttons";
|
||||
@import "wells";
|
||||
@import "syntax";
|
||||
@import "coderay";
|
||||
@import "elements";
|
||||
@import "forms";
|
||||
@import "layout";
|
||||
@import "vendor/font-awesome/font-awesome";
|
||||
@import "vendor/magnific-popup/magnific-popup";
|
||||
@import "notices"; /* notices and alerts */
|
||||
@import "animations";
|
||||
@import "masthead";
|
||||
@import "navigation";
|
||||
@import "search";
|
||||
@import "footer";
|
||||
|
||||
/*
|
||||
Page specific
|
||||
========================================================================== */
|
||||
|
||||
@import "page"; /* layout and styles that apply to posts and pages */
|
||||
@import "archives"; /* archive pages (post/tag lists, etc) */
|
||||
|
|
|
|||
Loading…
Reference in a new issue