Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

519 lines (478 sloc) 11.234 kb
@import "compass/reset";
@import "compass/typography";
@import "compass/css3";
@import "compass/typography/vertical_rhythm";
@import "compass/typography/links/link-colors";
$total-columns : 12; // a 12-column grid
$column-width : 3em; // each column is 4em wide
$gutter-width : 1em; // 1em gutters between columns
$grid-padding : $gutter-width; // grid-padding equal to gutters
$media-layout: 12; // Use 12-col layout at matching min-width.
$container-style: magic;
$background-color: #f8faf4;
$link-color: #ff6600;
$title-link-color: #222;
@import "susy";
@import "buttons";
@include establish-baseline;
ul {
@include trailer(1);
}
body {
-webkit-font-smoothing: antialiased;
background-color: #fdfdfc;
a {
@include link-colors($link-color, lighten($link-color,10), lighten($link-color,15), lighten($link-color,20), lighten($link-color,25));
}
h1 a {
text-decoration: none;
color: #222;
@include link-colors($title-link-color, lighten($title-link-color,10), lighten($title-link-color,15), lighten($title-link-color,20), lighten($title-link-color,25));
}
color: rgb(50,50,50);
}
.sixteen-nine {
position: relative;
padding-bottom: 56.25%;
height: 0;
width: 100%;
@include trailer(1);
&.youtube {
padding-top: 25px;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.page {
font-family: "ff-tisa-web-pro",serif;
@include container;
header{
clear: both;
}
footer#footer {
clear: both;
text-align: center;
@include reset-columns;
@include leader(1);
@include trailer(1);
}
.twitter-follow-button {
position: relative;
top: 6px;
}
}
h1 {
@include adjust-font-size-to($base-font-size * 2, $lines:2);
font-family: "ratio", sans-serif;
font-weight: 100;
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 3, $lines:2);
}
}
h2 {
@include adjust-font-size-to($base-font-size * 1.4, $lines:2);
font-family: "ratio", sans-serif;
font-weight: 700;
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 2, $lines:2);
}
}
p {
strong {
font-weight: bold;
}
}
header#header {
h1 {
&#logo {
@include adjust-font-size-to($base-font-size * 4, $lines:2);
text-align: center;
font-family: "learning-curve-dashed", cursive;
font-weight: normal;
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 8, $lines:4);
}
}
}
h2 {
font-family: "ratio", sans-serif;
font-weight: 300;
@include adjust-font-size-to($base-font-size * 1, $lines:1);
text-align: center;
color: darken($background-color,40);
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 1.33, $lines:3);
}
}
@include padding-leader(1);
@include padding-trailer(1);
@include leader(1);
}
.back_link {
margin: auto;
@include leader(0);
padding-left: 1em;
padding-right: 1em;
@include padding-trailer(0.5);
@include padding-leader(0.5);
display: block;
text-align: center;
color: #222;
font-family: "learning-curve", cursive;
@include adjust-font-size-to($base-font-size * 2, $lines:1);
-webkit-font-smoothing: legibility;
text-decoration: none;
&:visited {
color: #222;
}
}
.mega {
text-align: center;
background-color: #fdf2ee;
@include trailer(2);
@include padding-leader(2);
@include padding-trailer(2);
@include span-columns(10 omega,10);
h1 {
font-family: "learning-curve-dashed", cursive;
word-spacing:12em;
@include text-shadow(rgba(255,255,255, 0.5) 0px 2px 1px);
@include at-breakpoint(0 12 30em) {
font-family: "learning-curve", cursive;
@include adjust-font-size-to($base-font-size * 4, $lines:2);
}
@include at-breakpoint(30em 12 60em) {
@include adjust-font-size-to($base-font-size * 6, $lines:3);
}
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 10, $lines:5);
}
}
}
.post {
border-bottom: 1px solid #ddd;
h1 {
a {
@include link-colors($title-link-color, lighten($title-link-color,10), lighten($title-link-color,15), lighten($title-link-color,20), lighten($title-link-color,25));
text-decoration: none;
}
}
&.draft {
opacity: 0.5;
}
}
.posts {
h1 {
font-weight: 700;
@include at-breakpoint(0 12 45em) {
@include adjust-font-size-to($base-font-size * 1.2 * 1.666, $lines:1.75);
}
@include at-breakpoint(45em 12) {
@include adjust-font-size-to($base-font-size * 1.4 * 1.666, $lines:1.75);
}
@include trailer(0);
}
article {
p {
@include at-breakpoint(0 12 30em) {
@include adjust-font-size-to($base-font-size * 1, $lines:1.5);
}
@include at-breakpoint(30 12 60em) {
@include adjust-font-size-to($base-font-size * 1.2, $lines:1.666);
}
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 1.4, $lines:1.75);
}
@include trailer(0);
}
}
}
.hacks {
article.hack {
h1 {
font-weight: 700;
@include at-breakpoint(0 12 45em) {
@include adjust-font-size-to($base-font-size * 1.2 * 1.5, $lines:2);
}
@include at-breakpoint(45em 12) {
@include adjust-font-size-to($base-font-size * 1.4 * 1.5, $lines:2);
}
@include trailer(0);
}
h2 {
font-weight: normal;
font-family: "ff-tisa-web-pro",serif;
font-style: italic;
@include leader(0);
@include at-breakpoint(0 12 45em) {
@include adjust-font-size-to($base-font-size * 1.2, $lines:1);
}
@include at-breakpoint(45em 12) {
@include adjust-font-size-to($base-font-size * 1.4, $lines:1);
}
}
p {
@include at-breakpoint(0 12 30em) {
@include adjust-font-size-to($base-font-size * 1, $lines:1);
}
@include at-breakpoint(30 12 60em) {
@include adjust-font-size-to($base-font-size * 1, $lines:1);
}
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 1, $lines:1);
}
@include trailer(1);
}
}
}
.hack {
h1 {
a {
@include link-colors($title-link-color, lighten($title-link-color,10), lighten($title-link-color,15), lighten($title-link-color,20), lighten($title-link-color,25));
text-decoration: none;
}
}
&.draft {
opacity: 0.5;
}
}
.page {
article {
@include padding-leader(1);
@include padding-trailer(1);
p, li {
@include at-breakpoint(0 12 30em) {
@include adjust-font-size-to($base-font-size * 1, $lines:1);
}
@include at-breakpoint(30em 12 60em) {
@include adjust-font-size-to($base-font-size * 1.2, $lines:1.333);
}
@include at-breakpoint(60em 12) {
@include adjust-font-size-to($base-font-size * 1.4, $lines:1.5);
}
}
header {
h1 {
@include trailer(1);
}
p {
@include trailer(0);
color: #aaa;
}
}
h2 {
font-family: "ratio", sans-serif;
@include adjust-font-size-to($base-font-size * 1.5, $lines:2);
@include leader(1);
@include trailer(1);
}
h3 {
font-family: "ratio", sans-serif;
font-weight: bold;
@include adjust-font-size-to($base-font-size * 1.275, $lines:2);
@include leader(1);
@include trailer(1);
}
h2.comments {
text-align: center;
@include leader(1);
@include trailer(1);
}
img {
max-width: 100%;
}
}
}
p {
&:first-child {
@include leader;
}
@include trailer;
}
ul.twitter_users {
@include clearfix();
li {
@include span-columns(10,10);
@include omega();
h3 {
@include trailer(1);
}
@include at-breakpoint(60em 12) {
.avatar {
@include span-columns(1,12);
}
.about {
@include span-columns(6,12);
}
.follow {
@include span-columns(3 omega,12);
}
}
@include trailer(1);
}
}
img.full-width {
width: 100%;
}
#draft_items {
background-color: rgba(0,0,0,0.1);
color: #222;
@include leader(1);
padding: 0.5em;
padding-left: 1.5em;
padding-right: 1.5em;
@include trailer(1);
font-family: "ratio", sans-serif;
}
.content {
clear: both;
@include clearfix;
ul {
li {
list-style-type: circle;
margin-left: 2em;
}
}
}
.footer {
@include leader(1);
h2 {
font-family: "ratio", sans-serif;
font-weight: 700;
@include adjust-font-size-to($base-font-size * 1.5, $lines:2);
text-align: left;
}
.top_footer, .bottom_footer {
@include span-columns(12 omega, 12);
clear: both;
@include clearfix;
}
.left_footer {
@include span-columns(3, 12);
img {
width: 100%;
}
}
.right_footer {
@include span-columns(9 omega, 12);
}
}
.hack_row {
clear: both;
@include clearfix();
@include at-breakpoint(30em 12) {
.hack {
@include span-columns(5, 10);
&.last {
@include omega;
}
}
}
}
.screengrab {
height: 0px;
overflow: hidden;
padding-bottom: 50%;
background-color: #eee;
border: 1px solid #ddd;
}
details:focus, details:active, details, details[open], summary, summary:focus { outline: none; }
summary {
@include trailer(1);
&:hover {
color: black;
}
}
nav {
display: block;
clear: both;
text-align: center;
@include trailer(2);
ul {
@include inline-list();
li {
display: inline-block;
padding-left: 1em;
padding-right: 1em;
@include adjust-font-size-to($base-font-size * 1.5, $lines:2);
}
}
}
.next-prev {
@include leader(4);
@include at-breakpoint(30em 12) {
.prev {
@include span-columns(5, 10);
}
.next {
@include span-columns(5 omega, 10);
text-align: right;
}
}
a {
display: block;
@include adjust-font-size-to($base-font-size * 1.5, $lines:1);
text-decoration: none;
}
}
.chapter-list {
@include clearfix();
clear: both;
@include leader(4);
@include trailer(4);
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
border-top: 1px solid #eee;
list-style-type: none;
a {
@include adjust-font-size-to($base-font-size * 1.2, $lines:2);
text-decoration: none;
display: block;
&.active {
color: #222;
}
&:hover {
cursor: pointer;
}
}
text-align: center;
width: 100%;
display: block;
}
}
}
.start-reading {
@include trailer(4);
@include adjust-font-size-to($base-font-size * 2, $lines:2);
h2 {
a {
color: #222;
}
}
}
form {
label, input[type=text], input[type=submit], input[type=email] {
@include adjust-font-size-to($base-font-size * 1.2, $lines:2);
}
}
.email_updates {
@include leader(2);
text-align: center;
input[type=submit] {
position: relative;
top: -4px;
}
input[type=email] {
margin-left: 1em;
padding-left: 1em;
}
}
Jump to Line
Something went wrong with that request. Please try again.