add misc.css documentation

FartLabs · Jun 27, 2024 · cd4ca59 · cd4ca59
1 parent 2321eaa
commit cd4ca59
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -47,30 +47,43 @@ <h2 id="toc">On this page</h2>
         </li>
         <li>
           <a href="#semantics">Semantics</a>
-
           <ul>
             <li>
               <a href="#headings">Headings</a>
             </li>
             <li>
               <a href="#links">Links</a>
             </li>
-            <li>
-              <a href="#buttons">Buttons</a>
-            </li>
             <li>
               <a href="#lists">Lists</a>
             </li>
             <li>
               <a href="#blockquotes">Blockquotes</a>
             </li>
             <li>
-              <a href="#fart-break">Break</a>
+              <a href="#fart-hr">Horizontal rule</a>
             </li>
           </ul>
         </li>
         <li>
           <a href="#misc">Misc</a>
+          <ul>
+            <li>
+              <a href="#buttons">Buttons</a>
+            </li>
+            <li>
+              <a href="#fart-section">Sections</a>
+            </li>
+            <li>
+              <a href="#fart-header">Headers</a>
+            </li>
+            <li>
+              <a href="#fart-sparkle">Sparkles</a>
+            </li>
+            <li>
+              <a href="#fart-logo">Logos</a>
+            </li>
+          </ul>
         </li>
       </ul>
     </section>
@@ -168,25 +181,15 @@ <h3 id="links">Links</h3>
       </p>
       <ul>
         <li>
-          <a href="#links">Example link</a>
-        </li>
-        <li>
-          <a class="fart-link" href="#links">Example fart-link</a>
+          <a class="fart-link" href="#links">Example .fart-link</a>
         </li>
         <li>
           <a class="fart-link-visible-on-hover" href="#links"
-            >Example fart-link-visible-on-hover</a
+            >Example .fart-link-visible-on-hover</a
           >
         </li>
       </ul>
 
-      <h3 id="buttons">Buttons</h3>
-      <p>
-        Buttons <code>.fart-button</code> are have a rounded button style with a
-        custom color and hover effect.
-      </p>
-      <a class="fart-button" href="#buttons">Example button</a>
-
       <h3 id="lists">Lists</h3>
       <p>
         Lists <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> are styled
@@ -212,10 +215,10 @@ <h3 id="blockquotes">Blockquotes</h3>
       </p>
       <blockquote>Example blockquote</blockquote>
 
-      <h3 id="fart-break">Break</h3>
+      <h3 id="fart-hr">Horizontal rule</h3>
       <p>
-        Use <code>&lt;hr&gt;</code> or <code>.fart-break</code> to create a
-        horizontal rule. The rule is styled with a custom color.
+        Use <code>&lt;hr&gt;</code> or <code>.fart-hr</code> to create a
+        horizontal rule. The rule is styled with <code>var(--fart-green)</code>.
       </p>
 
       <hr />
@@ -227,7 +230,42 @@ <h2 id="misc">Misc</h2>
         fart.css provides miscellaneous styles in the
         <a href="misc.css">misc.css</a> file.
       </p>
-      <p><em>TODO: Document miscellaneous styles.</em></p>
+
+      <h3 id="buttons">Buttons</h3>
+      <p>
+        Buttons <code>.fart-button</code> are have a rounded button style with a
+        custom color and hover effect.
+      </p>
+      <a class="fart-button" href="#buttons">Example button</a>
+
+      <h3 id="fart-section">Sections</h3>
+      <p>
+        Sections <code>.fart-section</code> are styled with a custom color and
+        padding.
+      </p>
+
+      <h3 id="fart-header">Headers</h3>
+      <p>
+        Headers <code>.fart-header</code> are styled with a custom font and
+        size.
+      </p>
+      <span class="fart-header">Example header</span>
+
+      <h3 id="fart-sparkle">Sparkles</h3>
+      <p>
+        Sparkles <code>.fart-sparkle</code> are styled with a custom color and
+        hover effect.
+      </p>
+      <span class="fart-sparkle">Example sparkle</span>
+
+      <h3 id="fart-logo">Logos</h3>
+      <p>
+        Logos <code>.fart-logo</code> are styled with a custom color and hover
+        effect.
+      </p>
+      <a class="fart-logo" href="https://fart.tools"
+        ><img src="https://fart.tools/fl-logo.png" alt="FartLabs logo"
+      /></a>
     </section>
 
     <section class="fart-section">

diff --git a/semantics.css b/semantics.css
@@ -83,7 +83,7 @@ blockquote {
 }
 
 hr,
-.fart-break {
+.fart-hr {
   border-image: radial-gradient(circle, var(--fart-green) 0%, transparent 100%)
     1;
   max-width: 64ch;