Replace jQuery animations with CSS animations

src/scss/classes.scss

@@ -32,11 +32,20 @@ All rights reserved.
 
 .error-new { background: $color-error-new !important; }
 
-.hidden {
-    max-height: 0;
+.hideable {
+    opacity: 1;
+    transition: opacity $animate-normal;
+}
+
+.hiding {
     opacity: 0;
 }
 
+.hidden {
+    opacity: 0;
+    display: none;
+}
+
 .mainBody {
     position: relative; width: 81.25%;
 
@@ -67,7 +76,6 @@ All rights reserved.
     .externalLink {
         position: relative; width: 80%;
         margin: 0.5em 10%;
-        display: none;
 
         p {
             font-family: $font-family-normal;
@@ -104,8 +112,6 @@ All rights reserved.
 }
 
 .videos {
-    display: none;
-
     .panel {
         text-align: center;
     }

src/scss/main.scss

@@ -28,9 +28,9 @@ All rights reserved.
 
 // Animation Speeds ////////////////////////////////////////////////////////////////////////////////
 
-$animate-fast: 0.1s;
-$animate-normal: 0.25s;
-$animate-slow: 0.6s;
+$animate-fast:   0.200s;
+$animate-normal: 0.400s;
+$animate-slow:   1.200s;
 
 // Font Faces //////////////////////////////////////////////////////////////////////////////////////
 

src/scss/templates/item_page.scss

@@ -6,18 +6,12 @@ All rights reserved.
 */
 
 .view__item_page {
-    display: none;
-
     & > div {
         vertical-align: top;
         display: inline-block;
     }
 
     .sidebar {
-        .externalLink {
-            display: none;
-        }
-
         button.large {
             width: 100%;
         }
@@ -26,7 +20,6 @@ All rights reserved.
     .mainBody {
 
         .recipes {
-            display: none;
 
             .view__full_recipe {
                 width: 100%;
@@ -37,14 +30,6 @@ All rights reserved.
                 }
             }
         }
-
-        .similar {
-            display: none;
-        }
-
-        .usedToMake {
-            display: none;
-        }
     }
 
     .view__item {

src/scss/templates/mod_page.scss

@@ -6,8 +6,6 @@ All rights reserved.
 */
 
 .view__mod_page {
-    display: none;
-
     & > div {
         vertical-align: top;
         display: inline-block;