Adapt the CSS for the side-image change + improve figure, table and…

… line rendering
ivoa · Oct 16, 2024 · fb18660 · fb18660
1 parent 898f40f
commit fb18660
Showing 1 changed file with 103 additions and 28 deletions.
diff --git a/static/css/ivoa.css b/static/css/ivoa.css
@@ -19,7 +19,7 @@ body {
     font-family: "Inter", sans-serif;
 }
 
-h1, h2, h3 {
+h1, h2, h3, hr {
     color: #012647;
     clear: both;
 }
@@ -33,7 +33,6 @@ p { text-align: justify }
 
 a {
     color: #004d91;
-    font-weight: 500;
     text-decoration: none;
 }
 a:hover { text-decoration: underline }
@@ -45,6 +44,11 @@ article {
     margin: 2em auto;
 }
 
+
+/* =============================================================================
+   TABLE
+ */
+
 table {
     font-family: Arial, Helvetica, sans-serif;
     border-collapse: collapse;
@@ -69,6 +73,44 @@ table th {
     color: white;
 }
 
+/* Make the table's header cells disappear if empty
+ * (i.e. no height, no border, no background): */
+table th:empty {
+    padding   : 0;
+    margin    : 0;
+    max-height: 0;
+
+    border          : none;
+    background-color: transparent;
+}
+
+
+/* =============================================================================
+   FIGURE with caption
+   The figure is dynamic. The caption (if any) should not be longer than the
+   width of the responsive image.
+   (source: https://stackoverflow.com/questions/10264463/can-a-figcaption-be-restricted-to-the-width-of-a-responsively-sized-image#answer-13363408)
+ */
+
+figure { display: table }
+
+figure img {
+    display  : block;
+    max-width: 100%;
+}
+
+figure > figcaption {
+    display     : table-caption;
+    caption-side: bottom;
+    padding     : 1em;
+
+    font-size : .8em;
+    text-align: justify;
+
+    color           : #555;
+    background-color: #eee;
+}
+
 
 /* =============================================================================
    LAYOUTS SPECIFICITIES
@@ -77,7 +119,10 @@ table th {
  */
 
 /* Center the sections title in the Newsletters: */
-body > main > article.newsletter > h1 { text-align: center }
+body > main > article.newsletter > h1 {
+    text-align: center;
+    text-transform: uppercase;
+}
 
 
 /* =============================================================================
@@ -259,25 +304,71 @@ section > main + aside  { margin-left: 1em }
    SECTION WITH A SIDE IMAGE
  */
 
-.with-image {
-    display              : grid;
-    grid-template-columns: auto 1fr;
-    grid-template-areas  : "image content";
+.with-image + .with-image {
+    margin-top: 2em;
+}
+
+/* LAYOUT-1: 2 COLUMNS */
+
+.with-image:not(.is-floating) {
+    display   : grid;
     column-gap: 1em;
 }
 
-.with-image.right {
-    grid-template-columns: 1fr auto;
+.with-image:not(.is-floating).left,
+.with-image:not(.is-floating):not(.right) {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas  : "image content";
+}
+
+.with-image:not(.is-floating).right {
+    grid-template-columns: 3fr 1fr;
     grid-template-areas  : "content image";
 }
 
-.with-image > aside {
+.with-image:not(.is-floating) > figure {
     grid-area : image;
     margin-top: 1em;
+
+    /* center the image horizontally and vertically: */
+    align-self: center;
+    place-self: center;
+
+}
+
+/* Image not larger than the image area: */
+.with-image:not(.is-floating) > figure img { max-width: 100% }
+
+.with-image:not(.is-floating) > main      { grid-area: content }
+
+/* LAYOUT-2: FLOATING IMAGE */
+
+.with-image.is-floating { display: block }
+
+.with-image.is-floating > h1,
+.with-image.is-floating > h2,
+.with-image.is-floating > h3 {
+    margin-top: 0;
+    clear     : none;
 }
 
-.with-image > aside > img { max-width: 30vw }
-.with-image > main        { grid-area: content }
+
+/* =============================================================================
+   FLOATING CONTENT
+ */
+
+.floating {
+    margin    : 1em;
+    margin-top: 0;
+}
+.floating.left  { float: left ; margin-left: 0; }
+.floating.right { float: right; margin-right: 0; }
+
+img.floating,
+figure.floating,
+.floating > img {
+    max-width: 30vw;
+}
 
 
 /* =============================================================================
@@ -443,22 +534,6 @@ section > main.carrousel {
 .sitemap .card:nth-child(3) > .card-title { border-bottom-color: #aa3f3f }
 
 
-/* =============================================================================
-   FLOATING
- */
-
-.floating {
-    margin: 1em;
-    margin-top: 0;
-}
-.floating.left  { float: left ; margin-left: 0; }
-.floating.right { float: right; margin-right: 0; }
-
-.floating > img {
-    max-width: 30vw;
-}
-
-
 /* =============================================================================
    SOCIAL LINKS
  */