Adjust Reading Page (#535)

wbaldoumas · Jul 24, 2024 · 0ade8f8 · 0ade8f8
1 parent 14c4b9c
commit 0ade8f8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/Coding.Blog/Coding.Blog.Client/Pages/Reading.razor b/src/Coding.Blog/Coding.Blog.Client/Pages/Reading.razor
@@ -32,7 +32,7 @@
 
                 @foreach (var book in Books)
                 {
-                    <div class="card border-0 shadow rounded">
+                    <div class="card border-0 shadow rounded mb-3">
                         <div class="card-body rounded">
                             <a href="@book.Url" class="card-link" target="_blank">
                                 <h3 class="text-center card-title">@book.Title</h3>

diff --git a/src/Coding.Blog/Coding.Blog.Client/Pages/Reading.razor.css b/src/Coding.Blog/Coding.Blog.Client/Pages/Reading.razor.css
@@ -4,6 +4,16 @@
     padding: 2rem;
 }
 
+.card {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border-radius: 0.5rem;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
 @media (max-width: 640.99px) {
     .container {
         padding: 0.33rem;