Use jQuery for some effects

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

diff --git a/quotes/static/quotes/style.css b/quotes/static/quotes/style.css
index e49678241fcccf381491fd186e3b291c28bcbfae..0d5423b47bcace28443db046056501e94638a04b 100644 (file)
--- a/quotes/static/quotes/style.css
+++ b/quotes/static/quotes/style.css
@@ -15,7 +15,8 @@ a:hover {
     border: 7px solid darkorange;
     border-radius: 15px;
     padding: 1.5em 2em;
-    margin: 2em 30em;
+    margin: 2em auto;
+    max-width: 500px;
 }
 
 .quote .author {
@@ -32,14 +33,11 @@ a:hover {
 }
 
 .hidden_details {
-    /* displayed through Javascript */
-    height: 0;
-    overflow: hidden;
-    transition: height 3s linear;
-    /* visibility: hidden; */
-    /* opacity: 0; */
-    /* transition: opacity 2s linear; */
-
+    /* hidden, and then toggled, from Javascript. */
+    border: 1px solid transparent;
+    /* without this invisible border there is a jump at the end of the
+       animation. */
+    padding-top: -1em;
 }
 
 .tag_link {