title size adjsts

pnmcosta · Apr 4, 2024 · ca7b9fb · ca7b9fb
1 parent 57d7155
commit ca7b9fb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/src/index.html b/src/index.html
@@ -18,49 +18,54 @@
     <meta property="og:type" content="article" />
     <meta property="og:url" content="https://www.csta.dev/" />
     <meta property="og:image" content="/ogimg.png" />
-    <meta property="og:description" content="I'm Pedro Maia Costa, product software engineer based in Braga, Portugal" />
+    <meta property="og:description"
+        content="I'm Pedro Maia Costa, product software engineer based in Braga, Portugal" />
 </head>
 
-<body class="bg-black text-stone-300 font-mono ">
+<body class="bg-black text-stone-300 font-mono">
     <div class="container md:w-2/3 lg:w-3/5 xl:w-1/2 space-y-3 px-3 mt-3">
-        <h1 class="text-6xl font-bold text-nowrap" id="title">
+        <h1 class="text-5xl sm:text-6xl font-bold text-nowrap" id="title">
             <span class="visible">csta.dev</span>
             <span>&lt;csta&#x2F;&gt;</span>
             <span>&amp;csta{}</span>
             <span>#csta</span>
             <span>()=>csta</span>
         </h1>
-        <p>Olá, I'm <a href="https://www.linkedin.com/in/pnmcosta/" target="_blank">Pedro Maia Costa</a> a product software
+        <p>Olá, I'm <a href="https://www.linkedin.com/in/pnmcosta/" target="_blank">Pedro Maia Costa</a> a product
+            software
             engineer based in Braga, Portugal.</p>
 
-        <p>Currently working on/with <a href="https://www.socialclique.app/" target="_blank">SocialClique</a> developing <a href="https://shopify.dev/building-for-the-app-store" targe="_blank">Shopify Apps</a>.</p>
+        <p>Currently working on/with <a href="https://www.socialclique.app/" target="_blank">SocialClique</a> developing
+            <a href="https://shopify.dev/building-for-the-app-store" targe="_blank">Shopify Apps</a>.</p>
 
         <p>Having previously worked at/with <a href="https://www.juni.co/" target="_blank">Juni</a>, <a
                 href="https://www.thesimgrid.com/" target="_blank">The SimGrid</a>, <a
                 href="http://www.jpmorganchase.com" target="_blank">JPMorgan
                 Chase & Co.</a> and <a href="https://allhuman.com/" target="_blank">All human</a>.</p>
 
-        <p>Drop me a line to <a href="mailto:&#112;&#101;&#100;&#114;&#111;&#064;&#099;&#115;&#116;&#097;&#046;&#100;&#101;&#118;">&#112;&#101;&#100;&#114;&#111;&#064;&#099;&#115;&#116;&#097;&#046;&#100;&#101;&#118;</a></p>
+        <p>Drop me a line to <a
+                href="mailto:&#112;&#101;&#100;&#114;&#111;&#064;&#099;&#115;&#116;&#097;&#046;&#100;&#101;&#118;">&#112;&#101;&#100;&#114;&#111;&#064;&#099;&#115;&#116;&#097;&#046;&#100;&#101;&#118;</a>
+        </p>
 
         <p>All the best</p>
     </div>
     <script>
-        const options = document.querySelectorAll("#title > span")
+        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 < options.length - 1) {
+            if (visible < titleEls.length - 1) {
                 visible++;
             } else {
                 visible = 0
             }
 
-            for (let i = 0; i < options.length; i++) {
+            for (let i = 0; i < titleEls.length; i++) {
                 if (visible === i) {
-                    options[i].classList.add("visible")
-                    document.title = options[i].textContent
+                    titleEls[i].classList.add("visible")
+                    document.title = titleEls[i].textContent
                 } else {
-                    options[i].classList.remove("visible")
+                    titleEls[i].classList.remove("visible")
                 }
             }
         }, 10000) // every 10s

diff --git a/src/input.css b/src/input.css
@@ -21,6 +21,10 @@
         padding-bottom: 2px;
     }
 
+    #title {
+        margin-left: -6px;
+    }
+
     #title span {
         transition: all .5s ease-in-out 0s;
         opacity: 0;