Wireframe layout refinements

Author: fromonda

Wireframe/git-branch.png

@@ -44,8 +44,9 @@ <h2>What is a Wireframe?</h2>
         <h2>What is a Git Branch?</h2>
         <p>
           A branch in Git is an independent line of development. Branches allow
-          developers to work on new features or fixes without affecting the main
-          project.
+          developers to work on new features, updates, or fixes without
+          affecting the main project. This helps keep changes organized and
+          separate until they are ready to be merged.
         </p>
         <a
           href="https://book.the-turing-way.org/reproducible-research/vcs/vcs-git-branches/"

Wireframe/index.html

@@ -6,8 +6,7 @@
   --line: 1px solid;
   --container: 1280px;
 }
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
+/* ====== Base Elements ====== */
 body {
   background: var(--paper);
   color: var(--ink);
@@ -23,10 +22,7 @@ svg {
   width: 100%;
   object-fit: cover;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
+/* ====== Site Layout ====== */
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
@@ -40,13 +36,7 @@ footer {
   border-top: 1px solid black;
   z-index: 9999;
 }
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
+/* ====== Articles Grid Layout ==== */
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -55,17 +45,14 @@ main {
     grid-column: span 2;
   }
 }
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
+/* ====== Article Layout ====== */
 article {
   border: var(--line);
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
+  row-gap: 0.5rem;
 }
 
 article > * {
@@ -76,7 +63,10 @@ article > img {
   grid-column: span 3;
 }
 
-article h2,
-article p {
+article h2 {
   margin: 0;
 }
+
+article p {
+  margin: 0.5rem 0 0 0;
+}