make links hover cool thing

loftwah · Sep 19, 2023 · c5aab92 · c5aab92
1 parent 6fdbbf2
commit c5aab92
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/app/assets/stylesheets/loftwah.scss b/app/assets/stylesheets/loftwah.scss
@@ -149,4 +149,38 @@
     background-color: #DC3545;
     color: #fff;
   }
-
+
+  .link-item {
+    text-decoration: none;
+    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    width: 150px;  /* Fixed width */
+    height: 80px;  /* Fixed height */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }  
+
+  .link-item:hover {
+    transform: scale(1.1);
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+  }
+
+  .favicon-container {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .link-favicon {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .link-text {
+    padding: 5px;
+  }
+
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -37,12 +37,12 @@
                     <% @links.each_with_index do |link, index| %>
                       <% if link.links_enabled && !link.public && !link.links_pinned %>
                         <div class="col-3 d-flex flex-column justify-content-center align-items-center">
-                          <a href="<%= link.links_url %>" class="align-self-center text-center text-light" target="_blank" rel="noopener noreferrer" style="text-decoration: none;">
+                          <a href="<%= link.links_url %>" class="link-item align-self-center text-center text-light" target="_blank" rel="noopener noreferrer">
                             <img src="https://www.google.com/s2/favicons?domain=<%= URI.parse(link.links_url).host.split('.').last(2).join('.') %>" 
                             alt="favicon" 
                             class="fa-2x text-light"
                             onerror="this.alt=''; this.style.display='none'; this.nextElementSibling.style.display='inline-block';">
-                            <span class="d-block text-light"><%= link.links_display_name %></span>
+                            <span class="d-block mt-2 link-text"><%= link.links_display_name %></span>
                           </a>
                         </div>
                       <% end %>