css: remove top/bottom padding of .m-container, make it more flexible.

Updated padding of other elements accordingly, added new .m-nopad*
classes to make things easier for the templates.

diff --git a/css/m-components.css b/css/m-components.css
index f7078747c267660d70f5dfa244496a138aa51c06..39e51b5a28f126d8164ffeb678cbef73cacc359a 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -146,7 +146,7 @@ body > header > nav ol {
   padding-left: 1rem;
   margin: 0;
 }
-body > header > nav .m-container, body > header > nav [class*='m-col-'] {
+body > header > nav [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -234,6 +234,8 @@ body > footer {
   width: 100%;
 }
 body > footer > nav {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   font-size: var(--footer-font-size);
   text-align: center;
   color: var(--footer-color);
@@ -257,6 +259,12 @@ body > footer > nav a:hover, body > footer > nav a:focus, body > footer > nav a:
   color: var(--footer-link-active-color);
 }
 
+/* Main content */
+body > main {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 /* Article elements */
 article > header h1 {
   font-size: 2rem;
@@ -335,8 +343,8 @@ article section:target {
 }
 
 /* Jumbo article */
-article.m-jumbo, article.m-jumbo > header {
-  margin-bottom: 0;
+article.m-jumbo {
+  margin-top: -1rem;
 }
 article.m-jumbo > header .m-jumbo-image {
   background-size: cover;
@@ -346,6 +354,7 @@ article.m-jumbo > header .m-jumbo-image {
   font-size: 2.5vh;
   height: 60vh;
   margin-bottom: 1rem;
+  padding-top: 1rem;
 }
 article.m-jumbo > header .m-jumbo-cover {
   background: linear-gradient(transparent 0%, transparent 50%, var(--background-color) 100%);

diff --git a/css/m-grid.css b/css/m-grid.css
index 64cfdb25d259c8af313d4f3e17331c5a82d562e4..07c91ef88c518ea5ab7e4e5d0f18c981022fcaa4 100644 (file)
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -12,7 +12,8 @@ body {
 .m-container {
   width: 100%;
   margin: auto;
-  padding: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 .m-row {
   margin-left: -1rem;
@@ -48,12 +49,20 @@ body {
   margin-right: 0;
 }
 
-.m-container.m-nopad, [class*='m-col-'].m-nopad, .m-container.m-nopadx, [class*='m-col-'].m-nopadx {
+.m-container.m-nopad, [class*='m-col-'].m-nopad,
+.m-container.m-nopadx, [class*='m-col-'].m-nopadx,
+.m-container.m-nopadl, [class*='m-col-'].m-nopadl {
   padding-left: 0;
+}
+.m-container.m-nopad, [class*='m-col-'].m-nopad,
+.m-container.m-nopadx, [class*='m-col-'].m-nopadx,
+.m-container.m-nopadr, [class*='m-col-'].m-nopadr {
   padding-right: 0;
 }
-.m-container.m-nopad, [class*='m-col-'].m-nopad, .m-container.m-nopady, [class*='m-col-'].m-nopady {
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
   padding-top: 0;
+}
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb {
   padding-bottom: 0;
 }