Replace calcs with proper variable substitution for scss files and un…

…hide the syntax highlighter

_sass/base.scss

@@ -49,7 +49,7 @@ h1, h2, h3, h4, h5, h6,
 p, blockquote, pre,
 ul, ol, dl, figure, hr,
 %vertical-rhythm {
-  margin-bottom: calc($spacing-unit / 2);
+  margin-bottom: #{$spacing-unit / 2};
 }
 
 
@@ -127,7 +127,7 @@ a {
 blockquote {
   color: $grey-color;
   border-left: 4px solid $grey-color-light;
-  padding-left: calc($spacing-unit / 2);
+  padding-left: #{$spacing-unit / 2};
   font-size: 1.125em;
   letter-spacing: -1px;
   font-style: italic;
@@ -193,7 +193,7 @@ table {
     }
   }
   th, td {
-    padding: calc($spacing-unit / 3) calc($spacing-unit / 2);
+    padding: #{$spacing-unit / 3} #{$spacing-unit / 2};
   }
   th {
     background-color: lighten($grey-color-light, 3%);

_sass/layout/content.scss

@@ -15,15 +15,15 @@ $content-title-line-height: 1.2;
 }
 
 .authors{
-  padding: calc($spacing-unit/2) 0;
+  padding: #{$spacing-unit/2} 0;
   .box {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-evenly;
     align-items: baseline;
-    column-gap: calc($spacing-unit/2);
-    row-gap: calc($spacing-unit/3);
-    margin-bottom: calc($spacing-unit/2);
+    column-gap: #{$spacing-unit/2};
+    row-gap: #{$spacing-unit/3};
+    margin-bottom: #{$spacing-unit/2};
     font-size: $authors-base-font-size;
     line-height: $base-line-height*0.8;
 
@@ -62,15 +62,15 @@ $content-title-line-height: 1.2;
 
 
 .external-links{
-  padding: calc($spacing-unit/4) 0;
+  padding: #{$spacing-unit/4} 0;
   .box {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-evenly;
     align-items: baseline;
-    column-gap: calc($spacing-unit/2);
-    row-gap: calc($spacing-unit/3);
-    margin-bottom: calc($spacing-unit/2);
+    column-gap: #{$spacing-unit/2};
+    row-gap: #{$spacing-unit/3};
+    margin-bottom: #{$spacing-unit/2};
 
     .single {
       position: relative;
@@ -136,12 +136,12 @@ $content-title-line-height: 1.2;
   }
 
   .content-block {
-    margin: $spacing-unit calc(0rem - $spacing-unit);
-    padding: calc($spacing-unit/2) $spacing-unit;
+    margin: $spacing-unit #{-$spacing-unit};
+    padding: #{$spacing-unit/2} $spacing-unit;
   }
 
   .no-pre {
-    margin-top: calc(0rem - $spacing-unit/2);
+    margin-top: #{-$spacing-unit/2};
     * {
       margin-top: revert;
     }
@@ -156,16 +156,16 @@ $content-title-line-height: 1.2;
   }
 
   .fullwidth {
-    margin: 0 calc(0rem - $spacing-unit);
+    margin: 0 #{-$spacing-unit};
   }
 
   hr {
-    margin-left: calc(0rem - $spacing-unit);
-    margin-right: calc(0rem - $spacing-unit);
+    margin-left: #{-$spacing-unit};
+    margin-right: #{-$spacing-unit};
   }
 
   img {
     margin: $spacing-unit;
-    max-width: calc(100% - 2*$spacing-unit);
+    max-width: calc(100% - #{2*$spacing-unit});
   }
 }

_sass/layout/footer.scss

@@ -6,14 +6,14 @@
  */
 
 // Break these out to variables to simplify modification
-$footer-vertical-rhythm: calc($spacing-unit/3);
+$footer-vertical-rhythm: #{$spacing-unit/3};
 
 // Style code
 .site-footer {
   // isolate the footer
   font-size: $small-font-size;
   border-top: 1px solid $grey-color-light;
-  padding: calc($spacing-unit/2) 0;
+  padding: #{$spacing-unit/2} 0;
 
   p {
     @include center-block;
@@ -32,7 +32,7 @@ $footer-vertical-rhythm: calc($spacing-unit/3);
 
   .credit-text {
     /* small fudge factor to account for change in line heights */
-    margin-top: calc($footer-vertical-rhythm/4);
+    margin-top: #{$footer-vertical-rhythm/4};
     .large-symbol {
       font-size: 1.15em;
       padding-right: .25em;

_sass/layout/header.scss

@@ -28,7 +28,7 @@
 
   .page-description {
     font-family: $subtitle-font-family;
-    margin: calc($spacing-unit/2) auto;
+    margin: #{$spacing-unit/2} auto;
     font-size: $description-font-size;
     line-height: $base-line-height*0.8;
     letter-spacing: -1px;