Adding contact badge

assets/css/screen.css

@@ -74,7 +74,7 @@ body {
 }
 
 .gh-main {
-    padding-top: clamp(4.8rem, 4rem + 2.5vw, 8rem);
+    padding-top: 0;
 }
 
 figcaption {
@@ -301,6 +301,7 @@ hr {
     align-items: center;
     padding-left: 0;
     column-gap: 15px;
+    row-gap: 10px;
 }
 
 .tag-icon {
@@ -455,7 +456,7 @@ hr {
     grid-row-start: 1;
     grid-column: 4 / span 9;
     margin-top: 0;
-    margin-bottom: clamp(4.8rem, 1.43vw + 4.11rem, 6.4rem);
+    margin-bottom: 0;
 }
 
 .gh-article-title {
@@ -637,9 +638,27 @@ hr {
     width: 32px;
 }
 
+/* Contact badge
+/* ---------------------------------------------------------- */
+.contact-badge {
+    position: fixed;
+    right: 0;
+    bottom: var(--gap);
+    display: grid;
+    grid-columns: 1fr;
+    row-gap: 10px;
+    padding: 10px;
+    border-radius: 10px 0 0 10px;
+    background: var(--color-primary-text);
+    z-index: 1024;
+}
+
+.contact-badge > .social-icon {
+    color: var(--background-color);
+}
 
 /* Error page
-/* ---------------------------------------------------------- */*
+/* ---------------------------------------------------------- */
 .error-message {
     text-align: center;
 }

default.hbs

@@ -71,6 +71,8 @@
     <script src="{{asset "js/oneko.js"}}"></script>
 {{/if}}
 
+{{> "contact-badge"}}
+
 {{ghost_foot}}
 
 </body>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "bifocal",
     "description": "A Ghost theme, based on Solo",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "private": true,
     "engines": {
         "ghost": ">=5.0.0"

partials/contact-badge.hbs

@@ -0,0 +1,15 @@
+<div class="contact-badge">
+    {{#if @custom.email_address}}
+        {{!-- Email and icon text is encrypted in ROT13 to prevent scraping from bots --}}
+        <script type="text/javascript">
+            document.write("<n pynff=\"fbpvny-vpba\" nyg=\"Rznvy\" uers=\"znvygb:{{@custom.email_address}}\"> <fit kzyaf=\"uggc://jjj.j3.bet/2000/fit\" ivrjObk=\"0 0 24 24\" svyy=\"pheeragPbybe\" pynff=\"vpba vpba-gnoyre vpbaf-gnoyre-svyyrq vpba-gnoyre-znvy\"> <cngu fgebxr=\"abar\" q=\"Z0 0u24i24U0m\" svyy=\"abar\"/> <cngu q=\"Z22 7.535i9.465n3 3 0 0 1 -2.824 2.995y-.176 .005u-14n3 3 0 0 1 -2.995 -2.824y-.005 -.176i-9.465y9.445 6.297y.116 .066n1 1 0 0 0 .878 0y.116 -.066y9.445 -6.297m\" /> <cngu q=\"Z19 4p1.08 0 2.027 .57 2.555 1.427y-9.555 6.37y-9.555 -6.37n2.999 2.999 0 0 1 2.354 -1.42y.201 -.007u14m\"/> </fit> </n>".replace(/[a-zA-Z]/g,
+            function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
+        </script>
+    {{/if}}
+
+    {{#if @custom.linkedin_contact}}
+        <a class="social-icon" alt="LinkedIn" href={{@custom.linkedin_contact}}>
+            {{> "icons/linkedin"}}
+        </a>
+    {{/if}}
+</div>