Make it useable on smaller screens

[djsite.git] / quotes / static / quotes / style.css

diff --git a/quotes/static/quotes/style.css b/quotes/static/quotes/style.css
index 6898422c211255b696c03672593501c7a5c26ca4..efd85c9c2cd5c5fe1bc4f1d8a280ca7bdfdf4b71 100644 (file)
--- a/quotes/static/quotes/style.css
+++ b/quotes/static/quotes/style.css
@@ -15,14 +15,15 @@ a:hover {
     border: 7px solid darkorange;
     border-radius: 15px;
     padding: 1.5em 2em;
-    margin: 2em 30em;
+    margin: 2em auto;
+    max-width: 500px;
 }
 
 .quote .author {
     text-align: right;
 }
 
-.quote .author .name {
+.quote .author .work_name {
     font-style: italic;
 }
 
@@ -33,7 +34,13 @@ a:hover {
 
 .hidden_details {
     /* displayed through Javascript */
-    display: none;
+    height: 0;
+    overflow: hidden;
+    transition: height 3s linear;
+    /* visibility: hidden; */
+    /* opacity: 0; */
+    /* transition: opacity 2s linear; */
+
 }
 
 .tag_link {