Implement Hover Shadow on Link Cards2.0.0

2 files changed, 6 insertions, 2 deletions

diff --git a/libweb.css b/libweb.css
index dbfaee3..3412b70 100644
--- a/libweb.css
+++ b/libweb.css
@@ -190,7 +190,7 @@ footer {
   margin-top: var(--vertical-space-medium);
   margin-bottom: var(--vertical-space-medium);
   padding: 1em;
-  box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2);
+  box-shadow: 0 0.2em 0.4em 0 rgba(0,0,0,0.2);
   border-radius: 0.5em;
 }
 
@@ -234,6 +234,10 @@ button:hover {
   background-color: var(--background-color-dark2);
 }
 
+a .card:hover {
+  box-shadow: 0 0.4em 0.8em 0 rgba(0,0,0,0.2);
+}
+
 }
 
 /******************************************************************************/
diff --git a/test.html b/test.html
index f718f91..00be4e1 100644
--- a/test.html
+++ b/test.html
@@ -136,7 +136,7 @@ echo "I am $(whoami)"
 			<!-- a .card -->
 			<a href="https://example.com">
 				<div class="card">
-					<h3 class="card-first-item">This is a Card</h3>
+					<h3 class="card-first-item">This is a clickable Card</h3>
 					<p class="card-last-item">Lorem ipsum dolor sit amet,
 					consetetur sadipscing elitr, sed diam nonumy eirmod tempor
 					invidunt ut labore et dolore magna aliquyam erat, sed diam