Improve CSS layout (#5602)

Improve CSS layout

AUTHORS

@@ -238,6 +238,7 @@ Tareq Alayan
 Ted Xiao
 Thomas Grainger
 Thomas Hisch
+Tim Hoffmann
 Tim Strazny
 Tom Dalton
 Tom Viner

doc/en/_themes/flask/static/flasky.css_t

@@ -8,11 +8,12 @@
 
 {% set page_width = '1020px' %}
 {% set sidebar_width = '220px' %}
-/* orange of logo is #d67c29 but we use black for links for now */
+/* muted version of green logo color #C9D22A */
-{% set link_color = '#000' %}
+{% set link_color = '#606413' %}
-{% set link_hover_color = '#000' %}
+/* blue logo color */
+{% set link_hover_color = '#009de0' %}
 {% set base_font = 'sans-serif' %}
-{% set header_font = 'serif' %}
+{% set header_font = 'sans-serif' %}
 
 @import url("basic.css");
 
@@ -20,7 +21,7 @@
 
 body {
     font-family: {{ base_font }};
-    font-size: 17px;
+    font-size: 16px;
     background-color: white;
     color: #000;
     margin: 0;
@@ -78,13 +79,13 @@ div.related {
 }
 
 div.sphinxsidebar a {
-    color: #444;
     text-decoration: none;
-    border-bottom: 1px dotted #999;
+    border-bottom: none;
 }
 
 div.sphinxsidebar a:hover {
-    border-bottom: 1px solid #999;
+    color: {{ link_hover_color }};
+    border-bottom: 1px solid {{ link_hover_color }};
 }
 
 div.sphinxsidebar {
@@ -205,10 +206,13 @@ div.body p, div.body dd, div.body li {
     line-height: 1.4em;
 }
 
+ul.simple li {
+    margin-bottom: 0.5em;
+}
+
 div.admonition {
     background: #fafafa;
-    margin: 20px -30px;
+    padding: 10px 20px;
-    padding: 10px 30px;
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
 }
@@ -217,11 +221,6 @@ div.admonition tt.xref, div.admonition a tt {
     border-bottom: 1px solid #fafafa;
 }
 
-dd div.admonition {
-    margin-left: -60px;
-    padding-left: 60px;
-}
-
 div.admonition p.admonition-title {
     font-family: {{ header_font }};
     font-weight: normal;
@@ -231,7 +230,7 @@ div.admonition p.admonition-title {
     line-height: 1;
 }
 
-div.admonition p.last {
+div.admonition :last-child {
     margin-bottom: 0;
 }
 
@@ -243,7 +242,7 @@ dt:target, .highlight {
     background: #FAF3E8;
 }
 
-div.note {
+div.note, div.warning {
     background-color: #eee;
     border: 1px solid #ccc;
 }
@@ -257,6 +256,11 @@ div.topic {
     background-color: #eee;
 }
 
+div.topic a {
+    text-decoration: none;
+    border-bottom: none;
+}
+
 p.admonition-title {
     display: inline;
 }
@@ -358,21 +362,10 @@ ul, ol {
 
 pre {
     background: #eee;
-    padding: 7px 30px;
+    padding: 7px 12px;
-    margin: 15px -30px;
     line-height: 1.3em;
 }
 
-dl pre, blockquote pre, li pre {
-    margin-left: -60px;
-    padding-left: 60px;
-}
-
-dl dl pre {
-    margin-left: -90px;
-    padding-left: 90px;
-}
-
 tt {
     background-color: #ecf0f3;
     color: #222;
@@ -393,6 +386,20 @@ a.reference:hover {
     border-bottom: 1px solid {{ link_hover_color }};
 }
 
+li.toctree-l1 a.reference,
+li.toctree-l2 a.reference,
+li.toctree-l3 a.reference,
+li.toctree-l4 a.reference {
+    border-bottom: none;
+}
+
+li.toctree-l1 a.reference:hover,
+li.toctree-l2 a.reference:hover,
+li.toctree-l3 a.reference:hover,
+li.toctree-l4 a.reference:hover {
+    border-bottom: 1px solid {{ link_hover_color }};
+}
+
 a.footnote-reference {
     text-decoration: none;
     font-size: 0.7em;
@@ -408,6 +415,12 @@ a:hover tt {
     background: #EEE;
 }
 
+#reference div.section h3 {
+    /* separate code elements in the reference section */
+    border-top: 1px solid #ccc;
+    padding-top: 0.5em;
+}
+
 
 @media screen and (max-width: 870px) {