feat: restyle Topics Page layout and components (#248)

## Description
Restyle Topics Page layout and components
    - Update left-aside layout with reversed flex direction
    - Style topic cards with new background and hover states
    - Add rounded corners to main content area
    - Implement responsive layout adjustments for mobile/desktop
    - Update typography and spacing for topic descriptions
    
### Dependencies
- This PR depends on
#[242](#242)
(feat-ui-redesign-commands-page)
- The changes in this PR should be reviewed and merged after the base PR
is merged

<img width="1728" alt="Screenshot 2025-04-24 at 1 20 16 PM"
src="https://github.com/user-attachments/assets/31875fcc-5331-41d7-85bf-5ac5523f096b"
/>

---------

Signed-off-by: Daniel Phillips <[email protected]>
Signed-off-by: Madelyn Olson <[email protected]>
Co-authored-by: Madelyn Olson <[email protected]>

Author: phiro56

sass/_valkey.scss

@@ -504,6 +504,7 @@ p {
           color: #000;
           text-transform: uppercase;
           cursor: pointer;
+          font-weight: 600;
 
           &:hover {
             background-color: #b9c6ff;
@@ -514,6 +515,12 @@ p {
   }
 }
 
+.topic-description {
+  display: block;
+  text-transform: none;
+  font-size: 90%;
+}
+
 .search-container {
   display: flex;
   align-items: center;
@@ -939,8 +946,7 @@ pre table {
   margin-bottom: 0.5em;
 }
 
-.block-menu ul li,
-.index-entry {
+.block-menu ul li {
   border: 1px solid $line;
   border-radius: 3px;
   a {

templates/docs.html

@@ -1,9 +1,11 @@
-{% extends "right-aside.html" %}
+{% extends "left-aside.html" %}
 
 {% import "macros/docs.html" as docs %}
 
 {% block subhead_content %}
-<h1 class="page-title">Documentation by topic</h1>
+<div class="styled-title">
+    <h1>Documentation by Topic</h1>
+</div>
 {% endblock subhead_content %}
 
 {% block main_content %}
@@ -42,10 +44,15 @@ <h2>Alphabetical Index</h2>
     {% set joined_list =  list | join(sep=",") %}
     {% set topic_list = load_data(literal= "[" ~ joined_list ~ "]", format="json") | sort(attribute="title") %} 
 
-    {% for topic in topic_list %}
-        <div class="index-entry">
-            <a href="{{ topic.path }}">{{ topic.title }}</a> {{ topic.description | safe }} <br />
-        </div>
-    {% endfor %}
+    <ul class="topic-list">
+        {% for topic in topic_list %}
+            <li>
+                <a href="{{ topic.path }}">
+                    {{ topic.title }}
+                    <span class="topic-description">{{ topic.description | safe }}</span>
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
 
 {% endblock related_content %}