Change px to rem

Change all px declaration to rem with the rem-calc function

Author: verpixelt

dist/sass/_colour.scss

@@ -65,7 +65,7 @@ article figure {
 .orange {
 
     #content {
-        background: url('../img/logo_cut.png') no-repeat center 56px;
+        background: url('../img/logo_cut.png') no-repeat center rem-calc(56);
     }
 
     footer {
@@ -97,7 +97,7 @@ article figure {
 .blue {
 
     #content {
-        background: url('../img/logo_cut_blue.png') no-repeat center 56px;
+        background: url('../img/logo_cut_blue.png') no-repeat center rem-calc(56);
     }
 
     footer {
@@ -129,7 +129,7 @@ article figure {
 // green theme --------------------
 .green {
     #content {
-        background: url('../img/logo_cut_green.png') no-repeat center 56px;
+        background: url('../img/logo_cut_green.png') no-repeat center rem-calc(56);
     }
 
     footer {
@@ -161,7 +161,7 @@ article figure {
 // yellow theme --------------------
 .yellow {
     #content {
-        background: url('../img/logo_cut_yellow.png') no-repeat center 56px;
+        background: url('../img/logo_cut_yellow.png') no-repeat center rem-calc(56);
     }
 
     footer {
@@ -194,7 +194,7 @@ article figure {
 .gray {
 
     #content {
-        background: url('../img/logo_cut_gray.png') no-repeat center 56px;
+        background: url('../img/logo_cut_gray.png') no-repeat center rem-calc(56);
     }
 
     footer {
@@ -227,7 +227,7 @@ article figure {
 .lilac {
 
     #content {
-        background: url('../img/logo_cut_lilac.png') no-repeat center 56px;
+        background: url('../img/logo_cut_lilac.png') no-repeat center rem-calc(56);
     }
 
     footer {

dist/sass/_layout.scss

@@ -10,39 +10,38 @@ header section a {
 }
 
 footer {
-    padding-top: 90px;
-    margin-top: 85px;
+    padding-top: rem-calc(90);
+    margin-top: rem-calc(85);
 }
 
-
 #nav {
-    height: 65px;
+    height: rem-calc(65);
 }
 
 #logo {
-    left: 20px;
-    top: 20px;
+    left: rem-calc(20);
+    top: rem-calc(20);
 }
 
 #meta-nav {
-    right: 30px;
-    top: 25px;
+    right: rem-calc(30);
+    top: rem-calc(25);
 }
 
 #main-nav {
-    top: 25px;
+    top: rem-calc(25);
 }
 
 #sub-nav {
-    top: 65px;
-    padding-top: 8px;
-    padding-bottom: 5px;
-    height: 24px;
+    top: rem-calc(65);
+    padding-top: rem-calc(8);
+    padding-bottom: rem-calc(5);
+    height: rem-calc(24);
 }
 
 #logo,
 #meta-nav {
-    width: 230px;
+    width: rem-calc(230);
 }
 
 // header section { div, nav, ul { float: left; } }
@@ -76,64 +75,64 @@ footer {
 }
 
 .cb {
-    width: 830px;
-    padding: 35px 0 50px;
+    width: rem-calc(830);
+    padding: rem-calc(35 0 50);
 
     &.teaser {
-        padding: 0 0 60px;
+        padding: rem-calc(0 0 60);
     }
 
     article {
-        width: 600px;
+        width: rem-calc(600);
         float: left;
     }
 
     aside {
-        width: 180px;
+        width: rem-calc(180);
         float: left;
-        margin-right: 50px;
+        margin-right: rem-calc(50);
     }
 }
 
 #content {
-    padding-top: 300px;
+    padding-top: rem-calc(300);
 }
 
 .teaser h1,
 .cb h2 {
-    padding-left: 230px;
+    padding-left: rem-calc(230);
 }
 
 code {
-    padding-top: 25px;
+    padding-top: rem-calc(25);
     display: block;
 }
 
 .grid-9 figure { // @todo: over think this rulest (better don't style elements)
     img {
-        padding-bottom: 10px;
+        padding-bottom: rem-calc(10);
     }
 
     figcaption {
-        padding-bottom: 30px;
+        padding-bottom: rem-calc(30);
     }
 }
 
 // grids
 .grid-9 {
     width: 100%;
-    max-width: 600px;
+    max-width: rem-calc(600);
 }
 
 .grid-6 {
     width: 65%;
-    max-width: 450px;
+    max-width: rem-calc(450);
 }
 
 .grid-3 {
     width: 32%;
-    max-width: 170px;
-    margin-right: 45px;
+    max-width: rem-calc(170);
+    margin-right: rem-calc(45);
 }
 
 .grid-3:nth-child(3n) {

dist/sass/_modules.scss

@@ -1,22 +1,22 @@
 .person-bio {
     .grid-3 {
-        margin: 5px 25px 0 0;
-        max-width: 150px;
+        margin: rem-calc(5 25 0 0);
+        max-width: rem-calc(150);
     }
 
     .bio-link {
-        padding-top: 129px;
+        padding-top: rem-calc(129);
     }
 }
 
 .friends {
 
     .grid-3 {
-        margin-bottom: 80px;
+        margin-bottom: rem-calc(80);
 
         figure {
             text-align: left;
-            height: 175px;
+            height: rem-calc(175);
         }
     }
 }
@@ -26,12 +26,12 @@
 }
 
 .sitemap-item {
-    width: 260px;
-    margin-right: 25px;
+    width: rem-calc(260);
+    margin-right: rem-calc(25);
     text-align: right;
     font-size: .938em;
     line-height: 1.6;
-    padding-bottom: 25px;
+    padding-bottom: rem-calc(25);
 
     &:last-child {
         margin-right: 0;
@@ -43,7 +43,7 @@ code {
     white-space: normal !important;
     border: 0 none !important;
     background-color: transparent !important;
-    margin-top: 25px !important;
+    margin-top: rem-calc(25) !important;
 }
 
 

dist/sass/_typo.scss

@@ -24,7 +24,7 @@ body {
     font-size: .938em;
 
     li {
-        margin-right: 9px;
+        margin-right: rem-calc(9);
     }
 }
 
@@ -44,7 +44,7 @@ a:hover,
 
 #nav a,
 #meta-nav li {
-    margin-right: 9px;
+    margin-right: rem-calc(9);
 }
 
 #nav a:last-child,