From: Vladimír Vondruš <mosra@centrum.cz>
Date: Mon, 11 Sep 2017 14:18:29 +0000 (+0200)
Subject: css: fix clickable .m-image.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=240ed7ca5ede454faab420802ff6561124248075;p=blog.git

css: fix clickable .m-image.

The bottom margin was not applied because of the outer <a> element,
moreover the <a> element was spanning the whole page width instead of
just the image. A fix requires additional outer <div> now.
---

diff --git a/css/m-components.css b/css/m-components.css
index ead162c5..e39d1180 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -755,14 +755,24 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   color: var(--dim-link-active-color);
 }
 
-/* Image, figure */
+/* Image */
 img.m-image {
   display: block;
-  max-width: 100%;
   margin-left: auto;
   margin-right: auto;
+}
+div.m-image {
+  text-align: center;
+}
+img.m-image, div.m-image img {
+  max-width: 100%;
   border-radius: 0.2rem;
 }
+div.m-image.m-fullwidth img {
+  width: 100%;
+}
+
+/* Figure */
 figure.m-figure {
   max-width: 100%;
   margin-top: 0;
@@ -1001,14 +1011,16 @@ div.highlight pre span.hll {
 p, ul, ol, dl, blockquote, hr, pre,
 article, article > header, article section,
 .m-note, .m-frame, .m-block,
-div.m-scroll, table.m-table, img.m-image, figure.m-figure, .m-imagegrid {
+div.m-scroll, table.m-table, div.m-image, img.m-image,
+figure.m-figure, .m-imagegrid {
   margin-bottom: 1rem;
 }
 p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child, hr:last-child,
 div.highligt:last-child pre, /* TODO: get rid of div.highlight */
 article:last-child, article section:last-child,
 .m-note:last-child, .m-frame:last-child, .m-block:last-child,
-table.m-table:last-child, img.m-image:last-child, figure.m-figure:last-child {
+table.m-table:last-child, img.m-image:last-child, div.m-image:last-child,
+figure.m-figure:last-child, .m-imagegrid:last-child {
   margin-bottom: 0;
 }