Merge pull request #9 from pixincreate/contact-hotfix

fix(contact-button): Fix contact button, fix youtube box [#9]

content/about.md

@@ -30,7 +30,3 @@ A lot of my work is open-source on [GitHub](https://github.com).
 Did a lot of _SDE_ work in _RustLang_ and fixed a lot of bugs after joining as a **QE**, wrote an entire test suite to run automated tests to catch bugs within the product like a _DevOps_ Engineer
 
 {{< back-to-top >}}
-
-___
-
-All contents on this site is licensed under CC0 1.0 Universal unless stated otherwise.

layouts/shortcodes/contact-button-work.html

@@ -1,3 +1,3 @@
 <div>
-    {{ partial "contact-button.html" }}
+    <a href="/contact"><button type="button"><span>Get in touch</span></button></a>
 </div>

layouts/shortcodes/youtube.html

@@ -1,5 +1,5 @@
-<div class="box">
-    <iframe width="100%" height="315" src="https://www.youtube.com/embed/videoseries?list=UUjmblV8NFrB5MpEl7CT130w"
+<div class="youtube-box">
+    <iframe class="youtube-frame" src="https://www.youtube.com/embed/videoseries?list=UUjmblV8NFrB5MpEl7CT130w"
         frameborder="0" allowfullscreen id="iframe"></iframe>
 </div>
 <div>

static/css/styles.css

@@ -1,30 +1,21 @@
 /* Styles for the "Back to Top" button */
 .back-to-top-button {
+    display: flex;
     text-decoration: none;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: safe center;
+    height: 4%;
+    width: 4%;
     position: fixed;
     color: #030303;
-    font-weight: bold;
     right: 2rem;
     bottom: 2rem;
     background-color: #CCC;
-    border-radius: 50%;
-    height: 4%;
-    width: 4%;
     border: none;
     cursor: pointer;
     opacity: 100%;
     transition: opacity 0.5s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    -webkit-transition: all 0.5s;
-    /* add this line, chrome, safari, etc */
-    -moz-transition: all 0.5s;
-    /* add this line, firefox */
-    -o-transition: all 0.5s;
-    /* add this line, opera */
-    transition: all 0.5s;
-    /* add this line */
 }
 
 .back-to-top-button:hover {
@@ -174,4 +165,14 @@ button:hover span:after {
 .footer__content span {
     font-size: 10px;
     opacity: 0.5;
-}
+}
+
+.youtube-frame {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 1px 2px 3px 4px rgba(10, 10, 10, 0.2);
+    margin: 0 auto;
+    width: 640px;
+    height: 380px;
+}