cleaner layout

pnmcosta · Apr 5, 2024 · 1a92ccc · 1a92ccc
1 parent a286b4d
commit 1a92ccc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/internal/templates/layout/base.templ b/internal/templates/layout/base.templ
@@ -24,15 +24,13 @@ templ Base() {
 		</head>
 		<body class="bg-black font-mono">
 			<div class="container md:w-2/3 lg:w-3/5 xl:w-1/2 space-y-3 p-4 sm:p-6 lg:p-8 mb-8 sm:mb-4 text-lg sm:text-xl lg:text-2xl text-stone-300">
-				<h1 class="text-6xl lg:text-8xl pb-4 sm:pb-6 lg:pb-8 font-bold text-nowrap" id="title">
-					<a href="/">
-						<span class="visible">csta.dev</span>
-						<span>&lt;csta&#x2F;&gt;</span>
-						<span>&amp;csta{  }</span>
-						<span>#csta</span>
-						<span>()=>csta</span>
-					</a>
-				</h1>
+				<a href="/" id="title" class="text-6xl lg:text-8xl pb-4 sm:pb-6 lg:pb-8 font-bold text-nowrap">
+					<span class="visible">csta.dev</span>
+					<span>&lt;csta&#x2F;&gt;</span>
+					<span >&amp;csta&#123;&#125;</span>
+					<span>#csta</span>
+					<span >()=>&#123;csta&#125;</span>
+				</a>
 				{ children... }
 			</div>
 			<div class="clouds">
@@ -41,8 +39,8 @@ templ Base() {
 				<div class="clouds-3"></div>
 			</div>
 			<script>
-				const titleEls = document.querySelectorAll("#title > a > span")
-				const visibleEl = document.querySelector("#title > a > span.visible")
+				const titleEls = document.querySelectorAll("#title > span")
+				const visibleEl = document.querySelector("#title > span.visible")
 				let visible = Array.prototype.indexOf.call(visibleEl.parentNode.children, visibleEl);
 				setInterval(() => {
 					if (visible < titleEls.length - 1) {

diff --git a/style.css b/style.css
@@ -17,7 +17,6 @@
         background: linear-gradient(#000000, #111111);
     }
 
-    h1,
     a {
         @apply text-white;
         transition: color .2s ease-in-out 0s;
@@ -27,13 +26,11 @@
         @apply text-zinc-400;
     }
 
-    h1 {
+    #title {
         overflow: hidden;
         padding-bottom: 2px;
-    }
-
-    #title {
-        margin-left: -6px;
+        margin-left: -4px;
+        display: block;
     }
 
     #title span {