From de9a2864f0bc2120975d6e9489febfc6172b116c Mon Sep 17 00:00:00 2001
From: davegson <3080765+davegson@users.noreply.github.com>
Date: Mon, 11 May 2020 16:48:33 +0200
Subject: [PATCH] Move custom style to its own file

---
 _includes/custom_style.html | 141 ++++++++++++++++++++++++++++++++++++
 _layouts/page.html          |   2 +
 index.html                  | 102 --------------------------
 3 files changed, 143 insertions(+), 102 deletions(-)
 create mode 100644 _includes/custom_style.html

diff --git a/_includes/custom_style.html b/_includes/custom_style.html
new file mode 100644
index 0000000..8c93003
--- /dev/null
+++ b/_includes/custom_style.html
@@ -0,0 +1,141 @@
+<style>
+  * {
+    font-family: "Roboto";
+  }
+
+  body {
+    overflow-x: hidden;
+  }
+
+  .not-allowed {
+    cursor: not-allowed;
+  }
+
+  .spn-shadow {
+    box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
+  }
+
+  .hover:hover {
+    box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
+  }
+
+  .shake-horizontal {
+    -webkit-animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both;
+    animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both
+  }
+
+  @-webkit-keyframes shake-horizontal {
+    0%, 100% {
+      -webkit-transform: translateX(0);
+      transform: translateX(0)
+    }
+
+    10%, 30%, 50%, 70% {
+      -webkit-transform: translateX(-10px);
+      transform: translateX(-10px)
+    }
+
+    20%, 40%, 60% {
+      -webkit-transform: translateX(10px);
+      transform: translateX(10px)
+    }
+
+    80% {
+      -webkit-transform: translateX(8px);
+      transform: translateX(8px)
+    }
+
+    90% {
+      -webkit-transform: translateX(-8px);
+      transform: translateX(-8px)
+    }
+  }
+
+  @keyframes shake-horizontal {
+    0%, 100% {
+      -webkit-transform: translateX(0);
+      transform: translateX(0)
+    }
+
+    10%, 30%, 50%, 70% {
+      -webkit-transform: translateX(-10px);
+      transform: translateX(-10px)
+    }
+
+    20%, 40%, 60% {
+      -webkit-transform: translateX(10px);
+      transform: translateX(10px)
+    }
+
+    80% {
+      -webkit-transform: translateX(8px);
+      transform: translateX(8px)
+    }
+
+    90% {
+      -webkit-transform: translateX(-8px);
+      transform: translateX(-8px)
+    }
+  }
+
+  .spin {
+    animation-name: spin;
+    animation-duration: 21000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .heart {
+    animation: .8s infinite beatHeart;
+  }
+
+  @keyframes beatHeart {
+    0% {
+      transform: scale(1);
+    }
+
+    25% {
+      transform: scale(1.1);
+    }
+
+    40% {
+      transform: scale(1);
+    }
+
+    60% {
+      transform: scale(1.1);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  #menu-toggle:checked+#menu {
+    display: block;
+  }
+
+  .wiggle {
+    animation: wiggle .2s infinite alternate;
+  }
+
+  @keyframes wiggle {
+    0% {
+      transform: rotate(4deg);
+    }
+
+    100% {
+      transform: rotate(10deg);
+    }
+  }
+</style>
diff --git a/_layouts/page.html b/_layouts/page.html
index 43e03c9..f4341b3 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -7,5 +7,7 @@
     {% include nav.html %}
     {{ content }}
     {% include footer.html %}
+
+    {% include custom_style.html %}
   </body>
 </html>
diff --git a/index.html b/index.html
index b9268d2..e9fbdb5 100644
--- a/index.html
+++ b/index.html
@@ -255,105 +255,3 @@ title: Safing
     </div>
   </div>
 </section>
-
-<style>
-  *{
-      font-family: "Roboto";
-  }
-
-  body{
-      overflow-x: hidden;
-  }
-
-  .shake-horizontal{
-      -webkit-animation:shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both;
-      animation:shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both
-  }
-
-  @-webkit-keyframes shake-horizontal{
-      0%,100%{
-          -webkit-transform:translateX(0);
-          transform:translateX(0)
-      }
-      10%,30%,50%,70%{
-          -webkit-transform:translateX(-10px);
-          transform:translateX(-10px)
-      }
-      20%,40%,60%{
-          -webkit-transform:translateX(10px);
-           transform:translateX(10px)}80%
-      {
-          -webkit-transform:translateX(8px);
-          transform:translateX(8px)
-      }
-      90%{
-          -webkit-transform:translateX(-8px);
-          transform:translateX(-8px)
-      }
-  }
-
-  @keyframes shake-horizontal{
-      0%,100%{
-          -webkit-transform:translateX(0);
-          transform:translateX(0)
-      }
-      10%,30%,50%,70%{
-          -webkit-transform:translateX(-10px);
-          transform:translateX(-10px)
-      }
-      20%,40%,60%{
-          -webkit-transform:translateX(10px);
-          transform:translateX(10px)
-      }
-      80%{
-          -webkit-transform:translateX(8px);
-          transform:translateX(8px)
-      }
-      90%{
-          -webkit-transform:translateX(-8px);
-          transform:translateX(-8px)
-      }
-  }
-
-  .spin {
-  animation-name: spin;
-  animation-duration: 21000ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  }
-
-  @keyframes spin {
-      from {
-          transform:rotate(0deg);
-      }
-      to {
-          transform:rotate(360deg);
-      }
-  }
-
-  .heart {
-  animation: .8s infinite beatHeart;
-  }
-
-  @keyframes beatHeart {
-  0% {
-      transform: scale(1);
-  }
-  25% {
-      transform: scale(1.1);
-  }
-  40% {
-      transform: scale(1);
-  }
-  60% {
-      transform: scale(1.1);
-  }
-  100% {
-      transform: scale(1);
-  }
-  }
-
-  #menu-toggle:checked + #menu {
-    display: block;
-  }
-</style>