changed text decoration and animation

.gitignore

@@ -1,3 +1,4 @@
 /bin
 /obj
 config.ini
+.session

static/main.css

@@ -1,34 +1,41 @@
+@import url("https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css");
+
 :root {
-    --bg-main: #ffffff;
+  --bg-main: var(--ctp-latte-base);
-    --bg-card: #f8f9fa;
+  --bg-card: var(--ctp-latte-overlay0);
-    --border: #e0e0e0;
+  --border: var(--ctp-latte-overlay2);
-    --text-primary: #1a1a1a;
+  --text-primary: var(--ctp-latte-text);
-    --text-secondary: #5f6368;
+  --text-secondary: var(--ctp-latte-subtext0);
-    --text-muted: #757575;
+  --text-muted: var(--ctp-latte-overlay1);
-    --accent: #202124;
+  --accent: var(--ctp-latte-mauve);
   --accent-glow: rgba(0, 0, 0, 0.05);
 }
 @media (prefers-color-scheme: dark) {
   :root {
-        --bg-main: #121212;
+    --bg-main: var(--ctp-mocha-base);
-        --bg-card: #1e1e1e;
+    --bg-card: var(--ctp-mocha-surface1);
-        --border: #333333;
+    --border: var(--ctp-mocha-overlay2);
-        --text-primary: #ffffff;
+    --text-primary: var(--ctp-mocha-text);
-        --text-secondary: #a0a0a0;
+    --text-secondary: var(--ctp-mocha-subtext0);
-        --text-muted: #d1d1d1;
+    --text-muted: var(--ctp-mocha-subtext1);
-        --accent: #e2e2e2;
+    --accent: var(--ctp-mocha-mauve);
-        --accent-glow: rgba(255,255,255,0.1);
+    --accent-glow: rgba(0, 0, 0, 0.05);
   }
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
 body {
   background-color: var(--bg-main);
   color: var(--text-primary);
-    font-family:system-ui,-apple-system,sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
   margin: 0;
   padding: 0;
   -webkit-tap-highlight-color: transparent;
@@ -38,13 +45,22 @@ img[src=""] {
   display: none;
 }
 
+#header-icon {
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
 .view-home {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   padding: 20px;
-    background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%);
+  background: radial-gradient(
+    circle at top right,
+    var(--accent) 0%,
+    var(--bg-main) 100%
+  );
 }
 
 .view-home .container {
@@ -70,7 +86,9 @@ img[src=""] {
 .view-home .search-box {
   font-size: 1.1rem;
   padding: 16px 28px;
-    box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 .view-home .buttons {
@@ -134,7 +152,9 @@ h1 span {
   background: var(--bg-card);
   color: var(--text-primary);
   outline: none;
-    transition: border-color 0.2s, box-shadow 0.2s;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
 }
 
 .search-box:focus {
@@ -183,7 +203,9 @@ h1 span {
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--border);
-    transition:transform 0.2s ease,border-color 0.2s;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s;
 }
 .image-card:hover {
   transform: translateY(-4px);
@@ -303,10 +325,15 @@ h1 span {
 }
 .result > a {
   color: var(--accent);
-    text-decoration:none;
+  text-decoration: underline;
+  text-decoration-color: transparent;
   font-size: 1.25rem;
   display: inline-block;
   margin-bottom: 4px;
+  transition: text-decoration-color 0.1s;
+}
+.result > a:hover {
+  text-decoration-color: var(--accent);
 }
 .url {
   color: var(--text-secondary);
@@ -341,7 +368,8 @@ h1 span {
   font-size: 1.5rem;
   font-weight: 600;
   margin: 0;
-} .infobox-content {
+}
+.infobox-content {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -357,7 +385,8 @@ h1 span {
 
 .read-more:hover {
   text-decoration: underline;
-} .infobox-main {
+}
+.infobox-main {
   display: flex;
   gap: 15px;
   padding: 20px;
@@ -405,7 +434,6 @@ h1 span {
   border-color: var(--text-secondary);
 }
 
-
 .pagination-current {
   background: var(--bg-card);
   color: var(--text-primary);
@@ -424,21 +452,22 @@ h1 span {
   border-color: var(--text-secondary);
 }
 
-
 @media (max-width: 1200px) {
   .content-layout {
     grid-template-columns: 1fr;
     padding: 20px 30px;
     gap: 20px;
   }
-    .results-container,.infobox-sidebar {
+  .results-container,
+  .infobox-sidebar {
     grid-column: 1;
     max-width: 100%;
   }
   .infobox-sidebar {
     order: -1;
   }
-    .nav-tabs,.image-results-container {
+  .nav-tabs,
+  .image-results-container {
     padding: 0 30px;
   }
   header {

templates/home.html

@@ -18,7 +18,7 @@
         <div class="view-home">
             <div class="container">
                 <h1 class="hero-logo">
-                    Omni<span>Search</span>
+                    <span>Void</span>arc
                 </h1>
                 <form action="/search" class="home-search-form">
                     <div class="search-input-wrapper">

templates/images.html

@@ -14,7 +14,7 @@
     <body class="images-view">
         <header>
             <h1>
-                Omni<span>Search</span>
+                <a id="header-icon" href="/"><span>Void</span>arc</a>
             </h1>
             <form action="/images" method="GET" class="search-form">
                 <input name="q" autocomplete="off"="text" class="search-box" placeholder="Search for images..."

templates/results.html

@@ -17,7 +17,7 @@
     <body class="results-view">
         <header>
             <h1>
-                Omni<span>Search</span>
+                <a id="header-icon" href="/"><span>Void</span>arc</a>
             </h1>
             <form action="/search" method="GET" class="search-form">
                 <input name="q" type="text" class="search-box" autocomplete="off" placeholder="Search the web..."