feat: blinking cursor (#29)

Author: esacteksab

assets/css/main.css

@@ -394,6 +394,34 @@ blockquote {
   }
 }
 
+.title_cursor {
+  display: inline-block;
+  width: 10px;
+  height: 1.25rem;
+  /* margin-left: 1px; */
+  border-radius: 1px;
+  background: var(--accent-color);
+  animation: cursor 1s infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .title_cursor {
+    animation: none;
+  }
+}
+
+@keyframes cursor {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
 /*
 Dark Mode
 */

layouts/partials/header.html

@@ -5,7 +5,7 @@ <h1>
   class="header-title no-underline md:pl-4 mt-2 max-sm:mb-0 md:font-extrabold"
   title="{{ .Title }}"
   href="{{ .Site.BaseURL | absURL }}">
-  {{ site.Title }}
+  {{ site.Title }} <span class="tight title_cursor"></span>
 </a>
 </h1>
 {{- else -}}
@@ -18,7 +18,7 @@ <h1>
   </a>
 </h1>
 <h3 class="hidden md:contents">
-  &nbsp;&gt;&nbsp;{{ .Title | emojify }}
+  &nbsp;&nbsp;{{ .Title | emojify }}&nbsp;<span class="tight title_cursor"></span>
 </h3>
 {{- end -}}
 {{- partial "menu.html" (dict "menuID" "main" "page" .) -}}