Pixels to ems.

7 years ago · 4f07995586
8 changed files with 42 additions and 32 deletions
--- a/resources/assets/styles/common/_functions.scss
+++ b/resources/assets/styles/common/_functions.scss
@ -0,0 +1,3 @@
+@function em($pixels, $context: $base-font-size) {
+  @return #{$pixels / $context}em;
+}
--- a/resources/assets/styles/common/_global.scss
+++ b/resources/assets/styles/common/_global.scss
@ -5,7 +5,8 @@
 body {
  margin: 0;
  color: $dark-grey;
-  font-family: Spectral, serif;
+  font-family: $font-family-serif;
+  font-size: #{$base-font-size}px;
 }

 h1,
@ -14,22 +15,22 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Karla, sans-serif;
+  font-family: $font-family-sans-serif;
 }

 h1 {
-  font-size: 30px;
+  font-size: em(30);
  font-weight: 600;
  text-transform: uppercase;
-  letter-spacing: 2px;
-  line-height: 36px;
+  letter-spacing: em(2);
+  line-height: (36/30);
  margin: 0;
 }

 h2 {
-  font-size: 16px;
+  font-size: em(16);
  font-weight: normal;
-  line-height: 30px;
+  line-height: (30/16);
  margin: 0;
 }

--- a/resources/assets/styles/common/_variables.scss
+++ b/resources/assets/styles/common/_variables.scss
@ -5,7 +5,7 @@ $dark-grey:             #444;
 $black:                 #000;
 $white:                 #fff;

-/** Box Model  */
+/** Box Model */
 $spacer:                2rem;

 /** Breakpoints */
@ -13,3 +13,8 @@ $small: 768px;
 $medium: 960px;
 $large: 1200px;
 $extra-large: 1650px;
+
+/** Fonts */
+$font-family-sans-serif: 'Karla', sans-serif;
+$font-family-serif: 'Spectral', serif;
+$base-font-size: 18;
--- a/resources/assets/styles/components/_buttons.scss
+++ b/resources/assets/styles/components/_buttons.scss
@ -8,7 +8,7 @@
  border-radius: 3px;
  background: $brand-primary;
  font-family: Karla, sans-serif;
-  font-size: 16px;
+  font-size: em(16);
  font-weight: 600;
  color: $white;
  letter-spacing: 2px;
--- a/resources/assets/styles/layouts/_footer.scss
+++ b/resources/assets/styles/layouts/_footer.scss
@ -4,7 +4,7 @@
    margin-bottom: 0;
    padding: 60px 42.5px 40px;
    font-family: Karla, sans-serif;
-    font-size: 16px;
+    font-size: em(16);
    color: $white;

    ul {
@ -13,7 +13,7 @@
      list-style: none;
      text-align: center;
      font-weight: 600;
-      line-height: 36px;
+      line-height: (36/16);
    }

    a {
@ -59,7 +59,7 @@
    margin-top: 1em;

    a {
-      font-size: 32px;
+      font-size: em(32);
      margin: 0 0.25em;
      transition: all 0.4s;
    }
@ -74,7 +74,7 @@
    width: 100%;
    height: 125px;
    background-color: $dark-grey;
-    font-size: 14px;
+    font-size: em(14);

    h1,
    li,
@ -87,7 +87,7 @@
    }

    h1 {
-      font-size: 16px;
+      font-size: em(16);
      font-weight: normal;
      margin-bottom: 0;

--- a/resources/assets/styles/layouts/_header.scss
+++ b/resources/assets/styles/layouts/_header.scss
@ -90,10 +90,10 @@

    a {
      font-family: Karla, sans-serif;
-      font-size: 24px;
+      font-size: em(24);
      color: $white;
      letter-spacing: 0;
-      line-height: 80px;
+      line-height: (80/24);
      text-decoration: none;
      display: none;
    }
@ -181,7 +181,7 @@
      align-items: center;

      a {
-        font-size: 18px;
+        font-size: em(18);
        display: inline-block;
        line-height: normal;
        color: $black;
@ -211,16 +211,16 @@
    }

    h1 {
-      font-size: 72px;
+      font-size: em(72);
      letter-spacing: 1.8px;
-      line-height: 40px;
+      line-height: (40/72);
      margin-bottom: 0.5em;
    }

    h2 {
-      font-size: 30px;
+      font-size: em(30);
      letter-spacing: 0.75px;
-      line-height: 40px;
+      line-height: (40/30);
    }
  }
 }
--- a/resources/assets/styles/layouts/_pages.scss
+++ b/resources/assets/styles/layouts/_pages.scss
@ -10,12 +10,12 @@
    background-color: $white;

    h3 {
-      font-size: 30px;
+      font-size: em(30);
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
-      line-height: 36px;
+      line-height: (36/30);
      color: $brand-primary;
      margin: 0;

@ -30,8 +30,8 @@
    }

    p {
-      font-size: 16px;
-      line-height: 32px;
+      font-size: em(16);
+      line-height: (32/16);
      text-align: center;
    }

@ -74,14 +74,14 @@
          display: block;
          height: 91px;
          margin-top: 22px;
-          font-size: 24px;
+          font-size: em(24);
          text-align: center;
        }

        .title {
          display: block;
          height: 329px - 115px;
-          font-size: 30px;
+          font-size: em(30);
          font-weight: 500;
          text-align: center;
        }
@ -89,7 +89,7 @@
        .read-more {
          display: block;
          height: auto;
-          font-size: 18px;
+          font-size: em(18);
          text-align: left;
        }
      }
@ -151,8 +151,8 @@
      box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);

      h3 {
-        font-size: 48px;
-        line-height: 56px;
+        font-size: em(48);
+        line-height: (56/48);

        &::before {
          width: 74px;
@ -160,8 +160,8 @@
      }

      p {
-        font-size: 18px;
-        line-height: 32px;
+        font-size: em(18);
+        line-height: (32/18);
      }

      .inside {
--- a/resources/assets/styles/main.scss
+++ b/resources/assets/styles/main.scss
@ -12,6 +12,7 @@
 // @import "~some-node-module";

 /** Import theme styles */
+@import "common/functions";
@import "common/global";
@import "components/buttons";
@import "components/comments";