Skip to content
This repository has been archived by the owner on May 12, 2019. It is now read-only.

Commit

Permalink
better way to generate post font size and margins
Browse files Browse the repository at this point in the history
  • Loading branch information
Kikobeats committed Aug 7, 2015
1 parent 635d176 commit 49a6e49
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 53 deletions.
2 changes: 1 addition & 1 deletion assets/css/uno.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions assets/js/uno.js

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion assets/scss/components/_aside.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,10 @@
> h1 {
margin: 0;
font-family: $sans-font;
font-size: $font-size-normal * 1.6;
font-size: $unit * 1.6;
font-weight: $font-weight-bold;
color: $gray-lightest;
letter-spacing: .05rem;
}

> h3 {
Expand Down
22 changes: 12 additions & 10 deletions assets/scss/modules/_global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,33 +46,35 @@ h3,
h4,
h5,
h5 {
margin-top: 3rem;
margin-bottom: .8rem;
font-family: $serif-font;
font-weight: lighter;
color: $gray-darkest;
-webkit-font-smoothing: antialiased;
}
h1 {
margin-top: 0;
font-size: 2.3rem;
margin: $margin-h1 0;
font-size: $font-h1;
line-height: 3rem;
letter-spacing: .05rem;
}
h2 {
font-size: 1.6rem;
margin: $margin-h2 0;
font-size: $font-h2;
}
h3 {
font-size: 1.3rem;
margin: $margin-h3 0;
font-size: $font-h3;
}
h4 {
font-size: 1.05rem;
margin: $margin-h4 0;
font-size: $font-h4;
}
h5 {
font-size: .85rem;
margin: $margin-h5 0;
font-size: $font-h5;
}
h6 {
font-size: .66rem;
margin: $margin-h6 0;
font-size: $font-h6;
}
p {
margin-bottom: 1.3rem;
Expand Down
87 changes: 48 additions & 39 deletions assets/scss/modules/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,57 +1,66 @@
/* COLORS */

$gray-darkest : #333;
$gray-darker : #666;
$gray-dark : #999;
$gray : #ccc;
$gray-light : #ddd;
$gray-lighter : #eee;
$gray-lightest : #f8f8f8;
$gray-darkest : #333;
$gray-darker : #666;
$gray-dark : #999;
$gray : #ccc;
$gray-light : #ddd;
$gray-lighter : #eee;
$gray-lightest : #f8f8f8;

$black : #000000;
$white : #FFFFFF;
$cyan : #006064;
$red : #e74c3c;
$purple : #493252;
$slate : #3d4260;
$black : #000000;
$white : #FFFFFF;
$cyan : #006064;
$red : #e74c3c;
$purple : #493252;
$slate : #3d4260;

$primary-color : lighten($red, 5%);
$secondary-color : $gray-dark;
$primary-color : lighten($red, 5%);
$secondary-color : $gray-dark;

$cover-secondary : rgba(#5f2c82, .1);
$cover-primary : rgba(#49a09d, .2);
$cover-secondary : rgba(#5f2c82, .1);
$cover-primary : rgba(#49a09d, .2);

$mobile-primary : $gray-darkest;

$mobile-primary : $gray-darkest;

$link-color : $gray-darkest;
$hover-color : $primary-color;

$link-color : $gray-darkest;
$hover-color : $primary-color;

/* FONT */

$unit : 1rem;

$sans-font : 'Raleway', sans-serif;
$serif-font : 'Roboto Slab', serif;
$code-font : Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
$quote-font : "freight-text-pro", Georgia, Cambria, "Times New Roman", Times, serif;

$font-size-tiny : 0.8rem;
$font-size-small : 1.2rem;
$font-size-normal : 1rem;
$font-size-big : 2rem;

$font-weight-thin : 100;
$font-weight-normal : 300;
$font-weight-bold : 700;
$unit : 1rem;

$sans-font : 'Raleway', sans-serif;
$serif-font : 'Roboto Slab', serif;
$code-font : Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
$quote-font : "freight-text-pro", Georgia, Cambria, "Times New Roman", Times, serif;

$font-weight-thin : 100;
$font-weight-normal : 300;
$font-weight-bold : 700;

$margin-title : $unit * 2.5;
$margin-h1 : $margin-title * 1.1;
$margin-h2 : $margin-title * 0.8;
$margin-h3 : $margin-h2 * 0.8;
$margin-h4 : $margin-h3 * 0.8;
$margin-h5 : $margin-h4 * 0.8;
$margin-h6 : $margin-h5 * 0.8;

$font-title : $unit * 2;
$font-h1 : $font-title * 1.1;
$font-h2 : $font-title * 0.85;
$font-h3 : $font-h2 * 0.85;
$font-h4 : $font-h3 * 0.85;
$font-h5 : $font-h4 * 0.85;
$font-h6 : $font-h5 * 0.85;

/* ASIDE */

$aside-animation-time : 350ms;
$aside-animation : cubic-bezier(.645,.045,.355,1);
$aside-width-collapsed : 22.5rem;
$aside-width-collapsed : $unit * 22.5;

/* OTHER */

$border-radius : 3px;
$border-radius : 3px;

0 comments on commit 49a6e49

Please sign in to comment.