From: Zachary Vance <za3k@za3k.com>
Date: Fri, 21 Jul 2023 23:36:51 +0000 (-0400)
Subject: Finish cheatsheet
X-Git-Url: https://git.za3k.com/?a=commitdiff_plain;h=4a6e293d9dc26a90f8c026ad6ac4576cc919386c;p=za3k.git

Finish cheatsheet
---

diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html
index c522b55..8e83255 100644
--- a/html-css-cheatsheet.html
+++ b/html-css-cheatsheet.html
@@ -710,11 +710,57 @@ tr:nth-child(odd)  { background-color: lightyellow; }</code></pre>
 </div>
 
 <div>
-    <h3>TODO: Grid layout</h3>
+    <h3>Grid layout</h3>
+    <style>
+    div.wrapper { display: grid; 
+                  grid-template-columns: repeat(3, 1fr);
+                  gap: 10px;
+                  grid-auto-rows: minmax(10px, auto); }
+    div.wrapper div { opacity: 50%; }
+    div.red    { grid-column: 1 / 3;
+                 grid-row: 1; }
+    div.blue   { grid-column: 2 / 4;
+                 grid-row: 1 / 3; }
+    div.yellow { grid-column: 1 / 3;
+                 grid-row: 2; }
+    </style>
+
+    <div class="demo wrapper">
+        <div class="demo red"></div>
+        <div class="demo blue"></div>
+        <div class="demo yellow"></div>
+    </div>
+
+    <pre><code>div.wrapper { display: grid; 
+              grid-template-columns: repeat(3, 1fr);
+              gap: 10px;
+              grid-auto-rows: minmax(10px, auto); }
+div.red     { grid-column: 1 / 3;
+              grid-row: 1; }
+div.blue    { grid-column: 2 / 4;
+              grid-row: 1 / 3; }
+div.yellow  { grid-column: 1 / 3;
+              grid-row: 2; }</code></pre>
+
+    I don't really know grid layout yet.
 </div>
 
 <div>
-    <h3>TODO: Overflow and Scrolling</h3>
+    <h3>Overflow and Scrolling</h3>
+
+    <div class="demo" style="height: 50px; border: 1px solid; overflow: hidden;">
+    Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,
+
+    Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,
+    </div>
+    <pre><code>div { overflow: hidden; }</code></pre>
+
+    <div class="demo" style="height: 50px; border: 1px solid; overflow: scroll; ">
+    Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world,
+
+    Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,
+    </div>
+    <pre><code>div { overflow: scroll; }</code></pre>
 </div>
 
 <div>
diff --git a/index.html b/index.html
index 260c86b..c8072fe 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,7 @@
             <li><a href="/games/">games</a> i've designed</li>
             <li><a href="https://github.com/za3k/cookbook">a cookbook</a> i wrote</li>
             <li><a href="/hackaday">hack-a-day</a>, a 2022 programming challenge</li>
+            <li><a href="/html-css-cheatsheet">cheatsheet</a> for HTML+CSS</li>
         </ul>
     </section>