diff --git a/assets/style.scss b/assets/style.scss
index ae495a28..0f8ebe75 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -70,7 +70,7 @@ body {
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 300;
   font-size: 24px;
-  line-height: 1.5em;
+  line-height: 1.5;
 
   a {
     color: $color-links;
@@ -101,14 +101,14 @@ body {
       margin: 0 0 20px 0;
       font-size: 1.5em;
       font-weight: 500;
-      line-height: 1em;
+      line-height: 1;
     }
 
     h2 {
       margin: 20px 0;
       font-size: 1.2em;
       font-weight: 400;
-      line-height: 1.4em;
+      line-height: 1.4;
     }
 
     p {
@@ -301,14 +301,8 @@ body {
       &#single article div {
         &#content {
           font-size: 16px;
-          line-height: 1.7;
+          line-height: 1.8;
           object-fit: contain;
-
-          p {
-            font-size: 16px;
-            line-height: 1.7;
-            object-fit: contain;
-          }
         }
 
         &#info {
@@ -318,7 +312,7 @@ body {
             margin-top: 0;
             margin-bottom: 20px;
             font-size: 32px;
-            line-height: 1.4em;
+            line-height: 1.4;
 
             a {
               color: $color-text;
@@ -332,7 +326,7 @@ body {
             margin-top: 18px;
             margin-bottom: 10px;
             font-weight: 500;
-            line-height: 1.5em;
+            line-height: 1.5;
           }
         }
 
@@ -340,7 +334,7 @@ body {
           margin: -5px 0 0 0;
           color: $color-light;
           font-size: 13px;
-          line-height: 1.5em;
+          line-height: 1.5;
           letter-spacing: 1px;
 
           a {
@@ -350,7 +344,7 @@ body {
 
           div.tags {
             text-transform: uppercase;
-            line-height: 1.5em;
+            line-height: 1.5;
             letter-spacing: 2px;
             margin-top: 5px;
 
@@ -536,7 +530,7 @@ body {
 
     p {
       font-size: 1.1em;
-      line-height: 1.5em;
+      line-height: 1.5;
       margin: 12px 0;
     }
 
@@ -605,13 +599,13 @@ body {
         &#copyright {
           width: 50%;
           font-size: 14px;
-          line-height: 1.8em;
+          line-height: 1.8;
         }
 
         &#poweredby {
           width: 50%;
           font-size: 14px;
-          line-height: 1.8em;
+          line-height: 1.8;
 
           a#hugo::after {
             content: "\A";
diff --git a/content/notes/css-waving-hand-emoji/index.md b/content/notes/css-waving-hand-emoji/index.md
index 3023b651..26017a4e 100644
--- a/content/notes/css-waving-hand-emoji/index.md
+++ b/content/notes/css-waving-hand-emoji/index.md
@@ -18,7 +18,7 @@ If you examine [my homepage](https://jarv.is/) long enough, you might notice the
 Below are the code snippets you can grab and customize to make your own 
 ["waving hand" 👋](https://emojipedia.org/waving-hand-sign/) emojis ***actually wave***, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing.
 
-<iframe height="400" style="width: 100%;" scrolling="no" title="Waving Hand Emoji w/ CSS Keyframes" src="https://codepen.io/jakejarvis/embed/pBZWZw/?height=400&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>
+{{<codepen username="jakejarvis" id="pBZWZw" left-tab="css" right-tab="result" height="400">}}
 
 ### CSS:
 
diff --git a/layouts/shortcodes/codepen.html b/layouts/shortcodes/codepen.html
new file mode 100644
index 00000000..ee58c233
--- /dev/null
+++ b/layouts/shortcodes/codepen.html
@@ -0,0 +1 @@
+<iframe height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}" style="width: 100%;" scrolling="no" src="https://codepen.io/{{ .Get "username" }}/embed/{{ .Get "id" }}/?height={{ if .Get "height" }}{{ .Get "height" }}{{ else }}500{{ end }}&amp;theme-id=light&amp;default-tab={{ .Get "left-tab" }}{{ if .Get "right-tab" }},{{ .Get "right-tab" }}{{ end }}" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe>