Fixes for margin collapse.

Adding main element as part of the design.
pdelboca · Feb 7, 2024 · 6dc84b9 · 6dc84b9
1 parent 38eff0e
commit 6dc84b9
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 69 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,20 @@
+header {
+    display: grid;
+    margin-inline: auto;
+    place-content: center;
+    text-align: center;
+    background-color: canvastext;
+    color: canvas;
+}
+
+strong {
+    color: var(--color-10)
+}
+
+h1 {
+    font-size: 3rem;
+}
+
+h2 {
+    margin-top: 3rem
+}
diff --git a/css/sustainable.css b/css/sustainable.css
@@ -1,6 +1,6 @@
 /*!
- * Sustainable CSS v0.0.6 (https://github.com/pdelboca/sustainable-css/)
- * Copyright 2023 - Licensed under MIT
+ * Sustainable CSS v0.0.7 (https://github.com/pdelboca/sustainable-css/)
+ * Copyright 2023 by Patricio Del Boca - Licensed under MIT
  *
  * Sustainable CSS reuses system colors:
  * https://drafts.csswg.org/css-color-4/#css-system-colors
@@ -18,10 +18,32 @@
 }
 
 body {
+    line-height: 1.65;
+    font-size: 1.15rem;
+    margin-top: 0;
+}
+
+main {
     max-width: var(--max-width);
-    padding: 0 20px 20px 20px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 4vb auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+/*
+* Setting margins to 0 to avoid margin collapse:
+* https://www.joshwcomeau.com/css/rules-of-margin-collapse/
+*/
+    margin:0;
+}
+
+p ~ p {
+    margin-bottom: 0.75rem;
 }
 
 img {
@@ -45,14 +67,10 @@ fieldset, input:not([type=submit]), select, textarea {
     border: 1px solid;
 }
 
-input[type=submit], input[type=reset] {
+input[type=submit], input[type=reset], button[type=submit] {
     cursor: pointer;
 }
 
-ul > li, ol > li {
-    margin: 0.125em;
-}
-
 header > nav > * > a, header > nav > a {
     font-size: larger;
     text-decoration: none;
@@ -61,11 +79,13 @@ header > nav > * > a, header > nav > a {
 
 details > summary {
     cursor: pointer;
+    padding: 0.5em;
 }
 
 /* Branding and colors */
 a {
     color: inherit;
+    font-size: inherit;
     text-decoration-color: var(--color-10);
 }
 
@@ -77,7 +97,7 @@ input {
     accent-color: var(--color-10);
 }
 
-input[type=submit], input[type=reset] {
+input[type=submit], input[type=reset], button[type=submit] {
     background-color: var(--color-10);
     color: canvas;
 }
@@ -95,10 +115,12 @@ mark {
 article {
     border: 1px solid;
     border-radius: .25em;
-    padding: 0em 0.5em 0.5em 0.5em;
+    padding: 0.5em;
 }
-article > footer {
-    font-size: 0.9em;
+article footer {
+    font-size: 0.9rem;
     text-align: right;
 }
-
+article footer, article > p + p {
+    margin-top: 1rem;
+  }
diff --git a/demo.html b/demo.html
@@ -6,46 +6,35 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sustainable.css Demo</title>
   <link rel="stylesheet" href="css/sustainable.css">
-  <style>
-    strong {
-      color: var(--color-10)
-    }
-  </style>
+  <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
   <header>
-  <nav style="display: flex; justify-content: space-between;">
+  <h1 style="text-align: center; color: var(--color-10);">Sustainable.css</h1>
+  <p>A long lasting simple CSS framework for semantic HTML.</p>
+  <nav style="display: flex; justify-content: space-between; margin: 0.75rem 0;">
     <a href="/sustainable-css/">Home</a>
     <a href="/sustainable-css/demo.html">Demo</a>
   </nav>
   </header>
-  <hr>
-  <h1>Header 1</h1>
-  <h2>Header 2</h2>
-  <h3>Header 3</h3>
-  <h4>Header 4</h4>
-  <h5>Header 5</h5>
-  <h6>Header 6</h6>
+  <main>
+  <h2>Header and paragraphs</h2>
+  <p>Header and paragraphs do not have margins. Avoiding <a href="https://www.joshwcomeau.com/css/rules-of-margin-collapse/" target="_blank">margin collapse</a> makes styling way easier.</p>
 
   <h2>Top Navigation links</h2>
   <p>I only make the <code>font-size: larger</code> and <code>text-decoration: none</code>. You can then layout it as you want.</p>
 
-  <h2>Paragraph</h2>
-  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque minima libero sint, veritatis quo ratione. Magni
-    assumenda fuga fugiat iure dolor eaque ratione culpa mollitia expedita voluptates. Alias, odio vel?</p>
-
   <h2>Details</h2>
   <details>
     <summary>Click to expand</summary>
-    <p>I just added <code>cursor: pointer;</code> to the summary element, <mark>good enough</mark>.</p>
+    <p>A little bit or margin is <mark>good enough</mark></p>
   </details>
 
   <h2>Anchors and links</h2>
   <a href="#">Default font color that becomes strong on hovering and accented underline.</a>
 
   <h2>Forms</h2>
-
   <p>
     Forms layout are always customized and the styling is highly coupled with the layout. Example: margins of labels are
     highly coupled with the decision on puting them above the input or besides it. That's why Sustainable.css do not add
@@ -55,11 +44,9 @@ <h2>Forms</h2>
     We focus on giving a small styling to the inputs elements and let the user define how to layout it and further customize it.
     We do recommend using the sadly forgotten fieldset element.
   </p>
-
   <p>
     The following form is just 10 lines of CSS, <mark>good enough</mark>.
   </p>
-
   <form>
     <fieldset style="display: grid">
       <legend>Monster Sight Form</legend>
@@ -130,7 +117,6 @@ <h2>Block quote</h2>
   </blockquote>
 
   <h2>Lists</h2>
-  <p>We add just <code>margin: 0.125em</code> for some extra spacing.</p>
   <ol>
     <li>first item</li>
     <li>
@@ -145,8 +131,7 @@ <h2>Lists</h2>
     <!-- Here's the closing </li> tag -->
     <li>third item</li>
   </ol>
-
-
+</main>
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -5,67 +5,57 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/sustainable.css">
+  <link rel="stylesheet" href="css/style.css">
   <title>Sustainable CSS</title>
-  <style>
-    strong {
-      color: var(--color-10)
-    }
-  </style>
 </head>
 
 <body>
   <header>
-  <nav style="display: flex; justify-content: space-between;">
+    <h1 style="color: var(--color-10); font-size: 2.5em;">Sustainable.css</h1>
+    <p>A long lasting simple CSS framework for semantic HTML.</p>
+  <nav style="display: flex; justify-content: space-between; margin: 0.75rem 0;">
     <a href="/sustainable-css/">Home</a>
     <a href="/sustainable-css/demo.html">Demo</a>
   </nav>
   </header>
-  <hr>
-  <h1 style="color: var(--color-10); font-size: 2.5em;">Sustainable.css</h1>
-  <p>A sustainable and <mark>good enough</mark> CSS boilerplate that:
+  <main>
+  <p>A sustainable and <mark>good enough</mark> CSS boilerplate that:</p>
   <ol>
-    <li>Leverages web browsers built-in aesthetics.</li>
+    <li>Leverages web browsers built-in aesthetics (including <a href="https://drafts.csswg.org/css-color-4/#css-system-colors">system colors</a>).</li>
     <li>It embraces semantic HTML.</li>
     <li>It focuses in basic styling, not layout.</li>
     <li>Is built with branding in mind so you can color pallette your site.</li>
     <li>It focuses to work properly on mobile.</li>
     <li>Works great with native browsers light/dark schemes</li>
-    <li>Is built with sustainability in mind.</li>
+    <li>Is built to last.</li>
   </ol>
-  </p>
   <p>It is 2023, Web Browers are amazing at rendering and handling natively light-dark schemes, I'm building on top of that.</p>
 
   <h2>Yet another minimalistic CSS Framework?</h2>
-  <p>
-    Yes.
-  </p>
-  <p>
-    I built <strong>Sustainable.css</strong> because I usually do lots of simple websites that require a couple of basic things:
+  <p> Yes. </p>
+  <p> I built <strong>Sustainable.css</strong> because I usually do lots of simple websites that require a couple of basic things: </p>
   <ol>
     <li>Some kind of centering</li>
     <li>Some basic color pallette.</li>
     <li>Support for dark/light schemes</li>
     <li>Support for mobile</li>
   </ol>
-  I built this framework to help me with that and I hope it helps you too.
-  </p>
+  <p>It helps me, I hope it helps you too.</p>
 
   <h2>Is it for me?</h2>
   <p><strong>Sustainable.css</strong> aims to be <mark>good enough</mark> at styling plain HTML. Perfect for MVPs and sites
     built on <a href="https://htmx.org/essays/hateoas/">HATEOAS</a>.</p>
-
   <p>It does not provide styling that you will probably change anyways (like headers font size and margins) nor layout
     system (it's 2023, you should be leveraging modern CSS).</p>
 
   <h2>Sustainability?</h2>
-  <p>With sustainability I refer to several things:
+  <p>With sustainability I refer to several things:</p>
   <ol>
     <li>It is just a few KB, <strong>Sustainable.css</strong> does not require lot of bandwith and energy to work.</li>
     <li>It will work as long as HTML and CSS work, with extremely low maintenaince.</li>
     <li>It is not hosted nor packaged with expensive pipelines or infrastructure. (#NoBuild FTW!)</li>
     <li>Web browsers spends lots of money on styling and rendering features. I build on top of that.</li>
   </ol>
-  </p>
 
   <h2>Branding</h2>
   <p>
@@ -75,39 +65,42 @@ <h2>Branding</h2>
   <p>
     I might extend this as I explore and understand better minimalistic ideas to add color to a website.
   </p>
+
   <h2>Customization</h2>
   <p>
-    Just add your own css file and override/extend whatever you want.
+    Just add your own css file and extend whatever you want. (This site adds 4 small css rules and some inlines)
   </p>
   <p>
     So far only 2 variables are exposed:
+  </p>
   <ul>
     <li><code>--max-width</code> to control the width of the body </li>
     <li><code>--color-10</code> to control the accent color of your theme.</li>
   </ul>
-
   <p>
     <strong>Sustainbale.css</strong> is being developed with the 60/30/10 design rule in mind (being 60% the main black/white used for backgrounds!).
   </p>
   <p>
     <code>--color-10</code> will customize:
-    <ul style="list-style-type: lower-latin;">
-      <li>submit inputs,</li>
-      <li>links underlines</li>
-      <li>form input's accent-colors</li>
-    </ul>
   </p>
+  <ul style="list-style-type: lower-latin;">
+    <li>submit inputs,</li>
+    <li>links underlines</li>
+    <li>form input's accent-colors</li>
+  </ul>
   <p>
     It's up to you to use it to add some extra "splash" of it to your UI. (For this page I decided to style strong tags and the main header with it)
   </p>
-  </p>
+
   <h2>Sustainable.css in action</h2>
   <ul>
     <li>Catálogo Social: <a href="https://catalogosocial.fly.dev">Link</a></li>
     <li>4.5:1 Colors: <a href="https://451colors.fly.dev">Link</a></li>
     <li>FindYourFind.com: <a href="https://www.findyourfind.com">Link</a></li>
   </ul>
+
   <h2>Contributions</h2>
   You can read the code, fork and contribute in the Github repository: <a href="https://github.com/pdelboca/sustainable-css/">pdelboca/sustainable-css</a>.
+</main>
 </body>
 </html>