Merge pull request #3 from nfoert/redesign-v5

Redesign v5

Author: nfoert

repo/images/image.png

@@ -1 +1,5 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+@theme {
+    --font-mono: "Courier New", "Courier", monospace;
+}

src/App.svelte

@@ -13,14 +13,14 @@
 {#if icon.startsWith("https://")}
     <!-- Create link with image icon -->
     <div class={open ? "bg-slate-700/40 border-2 border-slate-600/50 transition-all rounded-xl p-4" : ""}>
-        <button onclick={() => open = !open} class="gap-1 flex items-center md:items-start text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white">
+        <button onclick={() => open = !open} class="gap-1 flex items-center md:items-start text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white font-mono">
             <img src={icon} alt={text} class="w-6 h-6 inline">
-            <span class="ml-1">{text}</span>
+            <span class="ml-1 font-mono">{text}</span>
             {#if open}
                 <i class="ph-bold ph-caret-up"></i>
                 {#if archived}
-                    <div class="flex flex-row items-center gap-2 bg-orange-500/50 rounded-full px-2">
-                        <p class="text-sm text-white opacity-80 text-center">Archived</p>
+                    <div class="flex flex-row items-center gap-2 bg-orange-500/50 rounded-full px-2 ml-2">
+                        <p class="text-sm text-white opacity-80 text-center font-mono">Archived</p>
                     </div>
                 {/if}
             {:else}
@@ -30,7 +30,7 @@
 
         {#if open}
             <div class="flex flex-col gap-2" transition:slide>
-                <p class="text-md text-white opacity-80 text-center max-w-128">{description}</p>
+                <p class="text-md text-white opacity-80 text-left max-w-128 font-mono">{description}</p>
                 <div class="flex flex-row items-center justify-center gap-2">
                     <div class="flex flex-row gap-2 items-center justify-center">
                         {#each buttons as button}
@@ -44,14 +44,14 @@
 {:else}
     <!-- Create link with Phosphor icon -->
     <div class={open ? "bg-slate-700/40 border-2 border-slate-600/50 transition-all rounded-xl p-4" : ""}>
-        <button onclick={() => open = !open} class="gap-1 flex items-center md:items-start text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white">
+        <button onclick={() => open = !open} class="gap-1 flex items-center md:items-start text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white font-mono">
             <i class={icon}></i>
-            <span class="ml-1">{text}</span>
+            <span class="ml-1 font-mono">{text}</span>
             {#if open}
                 <i class="ph-bold ph-caret-up"></i>
                 {#if archived}
-                    <div class="flex flex-row items-center gap-2 bg-orange-500/50 rounded-full px-2">
-                        <p class="text-sm text-white opacity-80 text-center">Archived</p>
+                    <div class="flex flex-row items-center gap-2 bg-orange-500/50 rounded-full px-2 ml-2">
+                        <p class="text-sm text-white opacity-80 text-center font-mono">Archived</p>
                     </div>
                 {/if}
             {:else}
@@ -61,7 +61,7 @@
 
         {#if open}
             <div class="flex flex-col gap-2" transition:slide>
-                <p class="text-md text-white opacity-80 text-center">{description}</p>
+                <p class="text-md text-white opacity-80 text-left font-mono">{description}</p>
                 <div class="flex flex-row items-center gap-2">
                     {#each buttons as button}
                         <SmallLink href={button.href} text={button.text} bold={""} icon={button.icon} />

src/app.css

@@ -4,14 +4,14 @@
 
 {#if icon.startsWith("https://") || icon.startsWith("http://") || icon.startsWith("/")}
     <!-- Create link with image icon -->
-    <a {href} class="flex items-center md:items-left text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white">
+    <a {href} class="flex items-center md:items-left text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white font-mono opacity-80 hover:opacity-100">
         <img src={icon} alt={text} class="w-6 h-6 inline">
         <span class="ml-1">{text}</span>
         <span><strong>{bold}</strong></span>
     </a>
 {:else}
     <!-- Create link with Phosphor icon -->
-    <a {href} class="flex items-center md:items-left text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white">
+    <a {href} class="flex items-center md:items-left text-md px-6 py-2 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center md:text-left text-white font-mono opacity-80 hover:opacity-100">
         <i class={icon}></i>
         <span class="ml-1">{text}</span>
         <span><strong>{bold}</strong></span>

src/lib/CollapsableLink.svelte

@@ -0,0 +1,5 @@
+<script>
+    const { href, text } = $props();
+</script>
+
+<a {href} class="flex items-center text-sm px-4 py-1 rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center text-white font-mono">{text}</a>

src/lib/Link.svelte

@@ -6,14 +6,14 @@
 
 {#if icon.startsWith("https://")}
     <!-- Create link with image icon -->
-    <a {href} class="flex items-center grow-2 text-sm px-4 py-1 justify-center rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center text-white">
+    <a {href} class="flex items-center grow-2 text-sm px-4 py-1 justify-center rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center text-white font-mono">
         <img src={icon} alt={text} class="w-6 h-6 inline">
         <span class="ml-1">{text}</span>
         <span><strong>{bold}</strong></span>
     </a>
 {:else}
     <!-- Create link with Phosphor icon -->
-    <a {href} class="flex items-center grow-2 text-sm px-4 py-1 justify-center rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center text-white">
+    <a {href} class="flex items-center grow-2 text-sm px-4 py-1 justify-center rounded-full hover:bg-slate-600/40 active:bg-slate-700/60 transition-all hover:scale-105 active:scale-95 text-center text-white font-mono">
         <i class={icon}></i>
         <span class="ml-1">{text}</span>
         <span><strong>{bold}</strong></span>