css: make padding consistent.

diff --git a/css/m-components.css b/css/m-components.css
index c07a90de404cb3835530b68d18a9d0a0f8c3363c..4e083216ec05c62faaf4ec283c97287a67db742e 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -16,10 +16,6 @@ h1, h2, h3, h4, h5, h6 {
 }
 p, ul, ol, dl {
   margin-top: 0;
-  margin-bottom: 1rem;
-}
-article > header, article > footer, article section {
-  margin-bottom: 1rem;
 }
 ul, ol {
   padding-left: 2rem;
@@ -37,7 +33,6 @@ main p.m-noindent {
 }
 blockquote {
   margin-top: 0;
-  margin-bottom: 1rem;
   margin-left: 1rem;
   margin-right: 1rem;
   padding: 1rem;
@@ -48,7 +43,6 @@ hr {
   width: 75%;
   border-width: 0.0625rem;
   border-style: solid;
-  margin-bottom: 1rem;
 }
 blockquote, hr {
   border-color: var(--line-color);
@@ -56,7 +50,6 @@ blockquote, hr {
 pre {
   font-family: var(--code-font), monospace, monospace; /* https://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
   font-size: 0.9rem;
-  margin: 0 0 1rem 0;
   padding: 0.5rem 1rem;
   color: var(--code-color);
   background-color: var(--code-background-color);
@@ -67,10 +60,6 @@ pre {
   max-width: 100%;
   overflow-x: auto;
 }
-/* TODO: get rid of div.highlight */
-p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child, div.highligt:last-child pre {
-  margin-bottom: 0;
-}
 
 /* Inline elements */
 abbr {
@@ -354,6 +343,9 @@ article section:target pre {
 }
 
 /* Jumbo article */
+article.m-jumbo, article.m-jumbo > header {
+  margin-bottom: 0;
+}
 article.m-jumbo > header .m-jumbo-image {
   background-size: cover;
   background-color: var(--article-jumbo-cover-background-color);
@@ -437,7 +429,6 @@ ul.m-tagcloud li.m-tag-5 { font-size: 1.5rem; }
 div.m-scroll {
   max-width: 100%;
   overflow-x: auto;
-  margin-bottom: 1rem;
 }
 .m-fullwidth {
   width: 100%;
@@ -518,7 +509,6 @@ dl.m-diary dd {
 .m-note {
   border-radius: 0.2rem;
   padding: 1rem;
-  margin: 0 0 1rem 0;
 }
 .m-frame {
   background-color: var(--background-color);
@@ -527,7 +517,6 @@ dl.m-diary dd {
   border-radius: 0.2rem;
   border-color: var(--line-color);
   padding: 0.875rem;
-  margin: 0 0 1rem 0;
 }
 .m-block {
   border-style: solid;
@@ -536,15 +525,7 @@ dl.m-diary dd {
   border-radius: 0.2rem;
   border-color: var(--line-color);
   padding: 1rem;
-  margin: 0 0 1rem 0;
-}
-.m-note p:last-child, .m-note ul:last-child, .m-note ol:last-child,
-.m-frame p:last-child, .m-frame ul:last-child, .m-frame ol:last-child {
-  margin-bottom: 0;
 }
-/* .m-note:last-child, .m-frame:last-child, .m-block:last-child { */
-/*   margin-bottom: 0; */
-/* } */
 
 /* Inflatable content */
 #m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
@@ -577,7 +558,6 @@ dl.m-diary dd {
 /* Tables */
 table.m-table {
   border-collapse: collapse;
-  margin-bottom: 1rem;
 }
 div.m-scroll > table.m-table:last-child {
   margin-bottom: 0.0625rem;
@@ -767,7 +747,6 @@ img.m-image {
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 1rem;
   border-radius: 0.2rem;
 }
 figure.m-figure {
@@ -775,7 +754,6 @@ figure.m-figure {
   margin-top: 0;
   margin-left: auto;
   margin-right: auto;
-  margin-bottom: 1rem;
   position: relative;
   display: table;
 }
@@ -830,10 +808,6 @@ figure.m-figure.m-fullwidth img {
 }
 
 /* Image grid */
-.m-imagegrid {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 .m-imagegrid > figure {
   display: block;
   float: left;
@@ -884,4 +858,19 @@ figure.m-figure.m-fullwidth img {
   }
 }
 
+/* Spacing after every block element, but not after the last */
+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 {
+  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 {
+  margin-bottom: 0;
+}
+
 /* kate: indent-width 2; */