From 7345e1787d2b4b2250b7c70328738ab00101349c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Sun, 10 Nov 2024 18:24:35 +0100
Subject: [PATCH 1/8] =?UTF-8?q?=E2=9E=95=20Component:=20Modal=20(wip)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/pages/components/modal.md | 24 ++++++++++++++++++++++++
 src/_components.css            |  2 +-
 src/components/_modal.css      |  8 ++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 docs/pages/components/modal.md
 create mode 100644 src/components/_modal.css

diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
new file mode 100644
index 0000000..4db29fc
--- /dev/null
+++ b/docs/pages/components/modal.md
@@ -0,0 +1,24 @@
+---
+title: 'Components: Modal - Sloth.css'
+description: Navigation for quickly switching between content divs
+tags: variants accent neutral success alert size outline pill
+---
+
+## Modal
+
+A tab navigation lets users quickly switch between content divs.
+
+### Basic modal
+
+Use the `modal` class on a parent element containing a `<nav>` with an ordered list for the tab bar and a `<section>` with one or more `<div>` elements for the actual content. The `disabled` class can be used to style a tab inactive.
+
+<div class="demo">
+  <a class="button" href="#modal-demo">Open Modal</a>
+
+  <div class="modal" id="modal-demo">
+    test
+  </div>
+</div>
+
+```html
+```
diff --git a/src/_components.css b/src/_components.css
index 4526e4a..b549d38 100644
--- a/src/_components.css
+++ b/src/_components.css
@@ -6,7 +6,7 @@
 @import 'components/_card.css';
 @import 'components/_input.css';
 @import 'components/_loader.css';
-/* @import 'components/_modal.css'; */
+@import 'components/_modal.css';
 @import 'components/_separator.css';
 @import 'components/_sequence.css';
 @import 'components/_state.css';
diff --git a/src/components/_modal.css b/src/components/_modal.css
new file mode 100644
index 0000000..ad4a148
--- /dev/null
+++ b/src/components/_modal.css
@@ -0,0 +1,8 @@
+.modal {
+  display: none;
+
+  &:target,
+  &.active {
+    display: block;
+  }
+}

From 93d15a0e74fde96975314b2001a68dc0a407072f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Sun, 10 Nov 2024 21:08:43 +0100
Subject: [PATCH 2/8] =?UTF-8?q?=E2=9E=95=20Develop=20modal=20(wip)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/assets/styles/docs.css    |  2 +-
 docs/pages/components/modal.md | 12 +++++++++++-
 src/components/_modal.css      | 10 ++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 06b3b37..e7816b1 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -264,7 +264,7 @@ body {
       }
     }
 
-    footer {
+    & > footer {
       margin: 4rem 0;
     }
   }
diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
index 4db29fc..098a285 100644
--- a/docs/pages/components/modal.md
+++ b/docs/pages/components/modal.md
@@ -16,7 +16,17 @@ Use the `modal` class on a parent element containing a `<nav>` with an ordered l
   <a class="button" href="#modal-demo">Open Modal</a>
 
   <div class="modal" id="modal-demo">
-    test
+    <header>
+      <a href="#close">X</a>
+    </header>
+    <footer>
+      <a class="button hollow neutral" href="#close">
+        Cancel
+      </a>
+      <button class="accent">
+        Save
+      </button>
+    </footer>
   </div>
 </div>
 
diff --git a/src/components/_modal.css b/src/components/_modal.css
index ad4a148..6fca498 100644
--- a/src/components/_modal.css
+++ b/src/components/_modal.css
@@ -1,5 +1,15 @@
 .modal {
   display: none;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--color-bg-base);
+  border-radius: var(--border-radius);
+  width: 100%;
+  max-width: var(--screen-md);
+  z-index: 50;
+  box-shadow: var(--color-shadow) var(--shadow-float);
 
   &:target,
   &.active {

From 440a1b7467b154b4d1ba5b8fde1a2c3df61ef489 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Sun, 10 Nov 2024 22:51:17 +0100
Subject: [PATCH 3/8] =?UTF-8?q?=E2=9E=95=20Component:=20Modal=20(wip)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/pages/components/button.md |  6 +++---
 docs/pages/components/modal.md  | 19 ++++++++++++-------
 src/components/_modal.css       | 32 ++++++++++++++++++++++++++------
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md
index 6d1412c..174a72b 100644
--- a/docs/pages/components/button.md
+++ b/docs/pages/components/button.md
@@ -146,15 +146,15 @@ The beautiful <a href="https://tabler.io/icons" target="_blank">Tabler Icons</a>
 
 <div class="demo flex flex-wrap gap-4">
   <button>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.875 6.27a2.225 2.225 0 0 1 1.125 1.948v7.284c0 .809 -.443 1.555 -1.158 1.948l-6.75 4.27a2.269 2.269 0 0 1 -2.184 0l-6.75 -4.27a2.225 2.225 0 0 1 -1.158 -1.948v-7.285c0 -.809 .443 -1.554 1.158 -1.947l6.75 -3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98h-.033z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M19.875 6.27a2.225 2.225 0 0 1 1.125 1.948v7.284c0 .809 -.443 1.555 -1.158 1.948l-6.75 4.27a2.269 2.269 0 0 1 -2.184 0l-6.75 -4.27a2.225 2.225 0 0 1 -1.158 -1.948v-7.285c0 -.809 .443 -1.554 1.158 -1.947l6.75 -3.98a2.33 2.33 0 0 1 2.25 0l6.75 3.98h-.033z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
     Settings
   </button>
   <button class="hollow alert">
     Donations
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
   </button>
   <button class="hollow neutral pill">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
   </button>
 </div>
 
diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
index 098a285..c6ec8fc 100644
--- a/docs/pages/components/modal.md
+++ b/docs/pages/components/modal.md
@@ -17,15 +17,20 @@ Use the `modal` class on a parent element containing a `<nav>` with an ordered l
 
   <div class="modal" id="modal-demo">
     <header>
-      <a href="#close">X</a>
+      <h3>The sloth</h3>
+      <a class="button ghost pill" href="#close">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+      </a>
     </header>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p>
+      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+      down in the trees of the tropical rainforests of South America and Central America.
+    </p>
+    <p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
     <footer>
-      <a class="button hollow neutral" href="#close">
-        Cancel
-      </a>
-      <button class="accent">
-        Save
-      </button>
+      <a class="button hollow neutral" href="#close">Cancel</a>
+      <button class="accent">Agree</button>
     </footer>
   </div>
 </div>
diff --git a/src/components/_modal.css b/src/components/_modal.css
index 6fca498..fc2323e 100644
--- a/src/components/_modal.css
+++ b/src/components/_modal.css
@@ -1,18 +1,38 @@
 .modal {
+  background: var(--color-bg-base);
+  border-radius: var(--border-radius);
+  box-shadow:
+    var(--color-shadow) 0 .5rem 2rem -.75rem,
+    var(--color-shadow) 0 0 0 9999rem;
+  box-sizing: border-box;
   display: none;
-  position: fixed;
+  opacity: 0;
   left: 50%;
+  max-width: var(--screen-md);
+  padding: 1rem;
+  position: fixed;
   top: 50%;
   transform: translate(-50%, -50%);
-  background: var(--color-bg-base);
-  border-radius: var(--border-radius);
-  width: 100%;
-  max-width: var(--screen-md);
+  width: calc(100% - 2rem);
   z-index: 50;
-  box-shadow: var(--color-shadow) var(--shadow-float);
+  transition: var(--transition-color), var(--transition-opacity);
+
+  header {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+  }
+
+  footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: .25rem;
+  }
 
   &:target,
   &.active {
     display: block;
+    opacity: 1;
   }
 }

From 4ab983269d00f42f8ea967f5a0c137eca7f7919a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Mon, 11 Nov 2024 20:59:30 +0100
Subject: [PATCH 4/8] =?UTF-8?q?=E2=9E=95=20Develop=20modal=20further=20(wi?=
 =?UTF-8?q?p)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/pages/components/modal.md | 36 +++++++++++++---
 src/components/_modal.css      | 75 ++++++++++++++++++++++------------
 2 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
index c6ec8fc..956399f 100644
--- a/docs/pages/components/modal.md
+++ b/docs/pages/components/modal.md
@@ -1,21 +1,47 @@
 ---
 title: 'Components: Modal - Sloth.css'
-description: Navigation for quickly switching between content divs
+description: Dialog that needs to be solved
 tags: variants accent neutral success alert size outline pill
 ---
 
 ## Modal
 
-A tab navigation lets users quickly switch between content divs.
+A modal is a dialog appearing above the current page content the user needs to solve or abort before moving on.
 
 ### Basic modal
 
-Use the `modal` class on a parent element containing a `<nav>` with an ordered list for the tab bar and a `<section>` with one or more `<div>` elements for the actual content. The `disabled` class can be used to style a tab inactive.
+Use the `modal` class on a parent element containing an anchor element having the `overlay` class and a `<section>` element containing the dialog content.
 
 <div class="demo">
   <a class="button" href="#modal-demo">Open Modal</a>
 
   <div class="modal" id="modal-demo">
+    <a class="overlay" href="#close"></a>
+    <section>
+      <header>
+        <h3>The sloth</h3>
+        <a class="button ghost pill" href="#close">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+        </a>
+      </header>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <p>
+        Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+        down in the trees of the tropical rainforests of South America and Central America.
+      </p>
+      <p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+      <footer>
+        <a class="button hollow neutral" href="#close">Cancel</a>
+        <button class="accent">Agree</button>
+      </footer>
+    </section>
+  </div>
+</div>
+
+```html
+<div class="modal">
+  <a class="overlay" href="#close"></a>
+  <section>
     <header>
       <h3>The sloth</h3>
       <a class="button ghost pill" href="#close">
@@ -32,8 +58,6 @@ Use the `modal` class on a parent element containing a `<nav>` with an ordered l
       <a class="button hollow neutral" href="#close">Cancel</a>
       <button class="accent">Agree</button>
     </footer>
-  </div>
+  </section>
 </div>
-
-```html
 ```
diff --git a/src/components/_modal.css b/src/components/_modal.css
index fc2323e..3974962 100644
--- a/src/components/_modal.css
+++ b/src/components/_modal.css
@@ -1,38 +1,63 @@
 .modal {
-  background: var(--color-bg-base);
-  border-radius: var(--border-radius);
-  box-shadow:
-    var(--color-shadow) 0 .5rem 2rem -.75rem,
-    var(--color-shadow) 0 0 0 9999rem;
-  box-sizing: border-box;
   display: none;
-  opacity: 0;
-  left: 50%;
-  max-width: var(--screen-md);
-  padding: 1rem;
-  position: fixed;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: calc(100% - 2rem);
-  z-index: 50;
-  transition: var(--transition-color), var(--transition-opacity);
 
-  header {
-    display: flex;
-    align-items: start;
-    justify-content: space-between;
+  & > .overlay {
+    animation: appear .15s ease-in-out 1;
+    background: var(--color-shadow);
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    z-index: 45;
   }
 
-  footer {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: end;
-    gap: .25rem;
+  & > section {
+    animation: scale-appear .15s ease-in-out 1;
+    background: var(--color-bg-base);
+    border-radius: var(--border-radius);
+    box-shadow: var(--color-shadow) 0 .5rem 2rem -.75rem;
+    box-sizing: border-box;
+    left: 50%;
+    max-width: var(--screen-md);
+    padding: 1rem 1rem 1rem 1.5rem;
+    position: fixed;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(100% - 2rem);
+    z-index: 50;
+  
+    header {
+      display: flex;
+      align-items: start;
+      justify-content: space-between;
+    }
+  
+    footer {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      gap: .25rem;
+    }
   }
 
   &:target,
   &.active {
     display: block;
+  }
+}
+
+@keyframes appear {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes scale-appear {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+  to {
     opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
   }
 }

From d56622f777a3f5fa83288c9c1bee28681bbaa005 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Tue, 12 Nov 2024 21:22:08 +0100
Subject: [PATCH 5/8] =?UTF-8?q?=E2=9E=95=20Modal=20sizes=20(wip)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/pages/components/modal.md | 96 +++++++++++++++++++++++++++++-----
 src/components/_modal.css      | 19 +++++++
 src/core/_text.css             |  2 +-
 3 files changed, 102 insertions(+), 15 deletions(-)

diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
index 956399f..4ea94d8 100644
--- a/docs/pages/components/modal.md
+++ b/docs/pages/components/modal.md
@@ -8,9 +8,9 @@ tags: variants accent neutral success alert size outline pill
 
 A modal is a dialog appearing above the current page content the user needs to solve or abort before moving on.
 
-### Basic modal
+### Basic structure
 
-Use the `modal` class on a parent element containing an anchor element having the `overlay` class and a `<section>` element containing the dialog content.
+Use the `modal` class on a parent element containing an anchor element having the `overlay` class and a `<section>` element containing the actual dialog content. The section content can have up to 3 parts: `<header>`, `<main>` and `<footer>`. If you don't need a a header or a footer, just use `<main>` here. If there is too much content, a vertical scrollbar appears.
 
 <div class="demo">
   <a class="button" href="#modal-demo">Open Modal</a>
@@ -24,12 +24,14 @@ Use the `modal` class on a parent element containing an anchor element having th
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
         </a>
       </header>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      <p>
-        Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
-        down in the trees of the tropical rainforests of South America and Central America.
-      </p>
-      <p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+      <main>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <p>
+          Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
+          down in the trees of the tropical rainforests of South America and Central America.
+        </p>
+        <p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+      </main>
       <footer>
         <a class="button hollow neutral" href="#close">Cancel</a>
         <button class="accent">Agree</button>
@@ -48,12 +50,9 @@ Use the `modal` class on a parent element containing an anchor element having th
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
       </a>
     </header>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    <p>
-      Noted for their slowness of movement, tree sloths spend most of their lives hanging upside
-      down in the trees of the tropical rainforests of South America and Central America.
-    </p>
-    <p>Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+    <main>
+      <p>...</p>
+    </main>
     <footer>
       <a class="button hollow neutral" href="#close">Cancel</a>
       <button class="accent">Agree</button>
@@ -61,3 +60,72 @@ Use the `modal` class on a parent element containing an anchor element having th
   </section>
 </div>
 ```
+
+### Sizes
+
+Use the `sm` or `lg` classes to reduce or increase the maximum width of the modal.
+
+<div class="demo flex gap-4">
+  <a class="button" href="#modal-demo-sm">Small Modal</a>
+  <a class="button" href="#modal-demo-lg">Large Modal</a>
+
+  <div class="modal sm" id="modal-demo-sm">
+    <a class="overlay" href="#close"></a>
+    <section>
+      <header>
+        <h3>Sign in</h3>
+        <a class="button ghost pill" href="#close">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+        </a>
+      </header>
+      <fieldset>
+        <input class="lg" type="email" placeholder="Email" />
+        <input class="lg" type="password" placeholder="Password" />
+      </fieldset>
+      <footer>
+        <a class="button hollow neutral" href="#close">Cancel</a>
+        <button class="accent">Login</button>
+      </footer>
+    </section>
+  </div>
+
+  <div class="modal lg" id="modal-demo-lg">
+    <a class="overlay" href="#close"></a>
+    <section>
+      <header>
+        <h3>Members Area</h3>
+        <a class="button ghost pill" href="#close">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+        </a>
+      </header>
+      <main class="flex gap-2">
+        <div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+        </div>
+        <div class="separator vertical"></div>
+        <fieldset>
+          <label>Sign in</label>
+          <input class="lg" type="email" placeholder="Email" />
+          <input class="lg" type="password" placeholder="Password" />
+        </fieldset>
+        <div class="separator vertical">OR</div>
+        <fieldset>
+          <label>Sign up</label>
+          <input class="lg" type="email" placeholder="Email" />
+          <input class="lg" type="password" placeholder="Password" />
+          <input class="lg" type="password" placeholder="Password repeat" />
+        </fieldset>
+      </main>
+      <footer>
+        <a class="button hollow neutral" href="#close">Cancel</a>
+        <button class="accent">Submit</button>
+      </footer>
+    </section>
+  </div>
+</div>
+
+```html
+<div class="modal sm">...</div>
+<div class="modal lg">...</div>
+```
diff --git a/src/components/_modal.css b/src/components/_modal.css
index 3974962..8eebd10 100644
--- a/src/components/_modal.css
+++ b/src/components/_modal.css
@@ -26,11 +26,23 @@
     transform: translate(-50%, -50%);
     width: calc(100% - 2rem);
     z-index: 50;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   
     header {
       display: flex;
       align-items: start;
       justify-content: space-between;
+
+      h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0;
+      }
+    }
+
+    main {
+      max-height: 75vh;
+      overflow-y: auto;
     }
   
     footer {
@@ -45,6 +57,13 @@
   &.active {
     display: block;
   }
+
+  &.sm > section {
+    max-width: var(--screen-xs);
+  }
+  &.lg > section {
+    max-width: var(--screen-xl);
+  }
 }
 
 @keyframes appear {
diff --git a/src/core/_text.css b/src/core/_text.css
index d6d2fd7..95aa716 100644
--- a/src/core/_text.css
+++ b/src/core/_text.css
@@ -144,7 +144,7 @@ var {
 
 /* <code> */
 code {
-  background: color-mix(in srgb, var(--color-border) 60%, transparent);
+  background: color-mix(in srgb, var(--color-bg-page) 60%, transparent);
   color: var(--color-text-em);
   border-radius: var(--border-radius);
   font-family: var(--font-mono);

From ea35662abca901f1908d399da3d4c3a2daef379f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 14 Nov 2024 20:44:57 +0100
Subject: [PATCH 6/8] =?UTF-8?q?=E2=9E=95=20Modal=20fullscreen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/pages/components/modal.md | 59 +++++++++++++++++++++++-----------
 src/components/_modal.css      | 11 +++++++
 2 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
index 4ea94d8..b94a00a 100644
--- a/docs/pages/components/modal.md
+++ b/docs/pages/components/modal.md
@@ -63,17 +63,18 @@ Use the `modal` class on a parent element containing an anchor element having th
 
 ### Sizes
 
-Use the `sm` or `lg` classes to reduce or increase the maximum width of the modal.
+Use the `sm` or `lg` classes to reduce or increase the maximum width of the modal. Use `fullscreen` to have the modal fill the entire screen.
 
 <div class="demo flex gap-4">
   <a class="button" href="#modal-demo-sm">Small Modal</a>
   <a class="button" href="#modal-demo-lg">Large Modal</a>
+  <a class="button" href="#modal-demo-fs">Fullscreen Modal</a>
 
   <div class="modal sm" id="modal-demo-sm">
     <a class="overlay" href="#close"></a>
     <section>
       <header>
-        <h3>Sign in</h3>
+        <h3>Members Area</h3>
         <a class="button ghost pill" href="#close">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
         </a>
@@ -93,33 +94,54 @@ Use the `sm` or `lg` classes to reduce or increase the maximum width of the moda
     <a class="overlay" href="#close"></a>
     <section>
       <header>
-        <h3>Members Area</h3>
+        <h3>Learn latin</h3>
         <a class="button ghost pill" href="#close">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
         </a>
       </header>
-      <main class="flex gap-2">
+      <main class="flex gap-8">
         <div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. t scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. t scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+        </div>
+        <div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
         </div>
-        <div class="separator vertical"></div>
-        <fieldset>
-          <label>Sign in</label>
-          <input class="lg" type="email" placeholder="Email" />
-          <input class="lg" type="password" placeholder="Password" />
-        </fieldset>
-        <div class="separator vertical">OR</div>
-        <fieldset>
-          <label>Sign up</label>
-          <input class="lg" type="email" placeholder="Email" />
-          <input class="lg" type="password" placeholder="Password" />
-          <input class="lg" type="password" placeholder="Password repeat" />
-        </fieldset>
       </main>
       <footer>
         <a class="button hollow neutral" href="#close">Cancel</a>
-        <button class="accent">Submit</button>
+      </footer>
+    </section>
+  </div>
+
+  <div class="modal fullscreen" id="modal-demo-fs">
+    <a class="overlay" href="#close"></a>
+    <section>
+      <header>
+        <h3>Cupcake ipsum</h3>
+        <a class="button ghost pill" href="#close">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+        </a>
+      </header>
+      <main class="flex gap-8">
+        <div>
+          <p>Cupcake ipsum dolor sit amet liquorice. Cheesecake caramels cake candy I love carrot cake. Croissant carrot cake chocolate cake topping carrot cake. Donut I love I love danish jelly beans. Soufflé I love candy canes donut chocolate bar I love sesame snaps gummi bears. Donut apple pie shortbread pudding soufflé. Jelly pastry sweet cheesecake dessert gingerbread toffee. Oat cake tootsie roll cake I love bear claw bonbon apple pie. Sesame snaps chocolate bear claw dragée sugar plum. Carrot cake oat cake dessert apple pie ice cream cake. Muffin tiramisu sesame snaps cotton candy jelly beans tart dragée. Bear claw I love chocolate bar caramels gummi bears cake.</p>
+          <p>Pie I love cake I love sweet roll jujubes tart gummies. Halvah ice cream I love brownie apple pie. Chupa chups lollipop wafer apple pie topping. Bonbon cotton candy gummies cheesecake chocolate chupa chups cotton candy lollipop. Jujubes candy canes jelly beans candy canes chupa chups I love cookie. Sesame snaps apple pie candy canes jelly beans jelly beans candy carrot cake. Pie jelly beans apple pie brownie cake dessert. Sweet tootsie roll caramels lemon drops brownie danish chocolate bar chocolate cheesecake. I love dragée macaroon macaroon biscuit fruitcake. Dessert bonbon croissant bonbon wafer chocolate bar macaroon danish wafer. Marshmallow marzipan donut candy I love sugar plum I love. Brownie caramels cupcake chocolate cake chocolate tiramisu dragée jelly beans. Tart marzipan halvah lollipop cake sweet halvah bear claw I love.</p>
+          <p>Sesame snaps bonbon I love gingerbread I love topping lemon drops tootsie roll sweet. Carrot cake cotton candy shortbread sugar plum I love. Gummi bears pudding fruitcake I love apple pie marzipan. Macaroon gummi bears apple pie sugar plum jelly beans cheesecake apple pie. Fruitcake tootsie roll cotton candy I love marzipan tart. Candy I love I love pastry brownie fruitcake cake cupcake. Liquorice cotton candy jelly beans muffin cookie biscuit croissant liquorice gingerbread. Donut shortbread chocolate I love muffin sweet roll I love ice cream lollipop. Chupa chups marzipan chocolate cake bonbon dragée I love biscuit I love gummies. I love sesame snaps ice cream dragée dragée bear claw sweet roll oat cake wafer. Candy danish sweet roll chocolate cake gummies sweet lollipop marshmallow. Marzipan cotton candy pie lollipop chupa chups sesame snaps.</p>
+          <p>Tart icing icing ice cream wafer toffee apple pie. Cookie topping I love cheesecake jelly-o dragée marzipan. Marzipan lollipop donut dragée topping. Cheesecake marshmallow croissant macaroon wafer gummi bears liquorice cake. Ice cream shortbread cheesecake cotton candy fruitcake halvah. Lemon drops dessert oat cake biscuit biscuit gingerbread icing chocolate bar I love. Chocolate marshmallow biscuit sesame snaps chocolate bar brownie. Cake jelly halvah lemon drops jujubes. Danish oat cake liquorice carrot cake soufflé pudding tiramisu. Muffin gummi bears croissant sugar plum gingerbread. Jelly-o powder chocolate bar I love pie chupa chups chocolate. Cake sweet roll I love I love chocolate bar. Pastry brownie pastry tiramisu lemon drops oat cake gingerbread. I love lemon drops danish muffin sugar plum.</p>
+          <p>Ice cream bear claw cheesecake bonbon powder wafer toffee. Pie shortbread jelly-o tiramisu ice cream bonbon. Chocolate bar cookie sweet muffin cookie cheesecake. Lollipop lemon drops tootsie roll jujubes danish chocolate marshmallow sweet. Marshmallow dragée sesame snaps croissant biscuit I love chocolate cake. Soufflé sesame snaps jelly-o macaroon oat cake marshmallow. I love chupa chups bonbon cookie donut. Pastry cheesecake lollipop bonbon tart oat cake chupa chups. Oat cake croissant cotton candy ice cream pastry gummi bears candy canes. Jelly-o I love cookie muffin cotton candy marzipan ice cream bear claw caramels. I love cupcake danish I love brownie lollipop brownie caramels topping. Caramels sugar plum biscuit cotton candy pastry gummies.</p>
+        </div>
+        <div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at.</p>
+        </div>
+      </main>
+      <footer>
+        <a class="button hollow neutral" href="#close">Close</a>
       </footer>
     </section>
   </div>
@@ -128,4 +150,5 @@ Use the `sm` or `lg` classes to reduce or increase the maximum width of the moda
 ```html
 <div class="modal sm">...</div>
 <div class="modal lg">...</div>
+<div class="modal fullscreen">...</div>
 ```
diff --git a/src/components/_modal.css b/src/components/_modal.css
index 8eebd10..65e1513 100644
--- a/src/components/_modal.css
+++ b/src/components/_modal.css
@@ -43,6 +43,7 @@
     main {
       max-height: 75vh;
       overflow-y: auto;
+      flex-grow: 1;
     }
   
     footer {
@@ -64,6 +65,16 @@
   &.lg > section {
     max-width: var(--screen-xl);
   }
+  &.fullscreen {
+    & > .overlay {
+      background: var(--color-bg-base);
+    }
+    & > section {
+      max-width: var(--screen-2xl);
+      box-shadow: none;
+      height: 99vh;
+    }
+  }
 }
 
 @keyframes appear {

From 7aa274c2fb0119ca0410ddbdb5c5dfcea916084b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 14 Nov 2024 20:48:57 +0100
Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=94=A8=20Optimize=20SVGs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/pages/components/state.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/pages/components/state.md b/docs/pages/components/state.md
index 0954ddc..83786bc 100644
--- a/docs/pages/components/state.md
+++ b/docs/pages/components/state.md
@@ -14,7 +14,7 @@ Use the `state empty` classes for a placeholder section which awaits user input
 
 <div class="demo">
   <div class="state empty">
-    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" ><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M17 17v-13h4" /><path d="M13 5h-10" /><path d="M3 9l10 0" /><path d="M9 13h-6" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" ><path d="M14 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M17 17v-13h4" /><path d="M13 5h-10" /><path d="M3 9l10 0" /><path d="M9 13h-6" /></svg>
     <h3>You have no playlists</h3>
     <p>Click the button to start collecting songs</p>
     <button>Add playlist</button>
@@ -36,7 +36,7 @@ Use the `state highlighted` classes for an accentuated section e.g. which awaits
 
 <div class="demo">
   <div class="state highlighted">
-    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /><path d="M13 13l9 3l-4 2l-2 4l-3 -9" /><path d="M3 3l0 .01" /><path d="M7 3l0 .01" /><path d="M11 3l0 .01" /><path d="M15 3l0 .01" /><path d="M3 7l0 .01" /><path d="M3 11l0 .01" /><path d="M3 15l0 .01" /></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /><path d="M13 13l9 3l-4 2l-2 4l-3 -9" /><path d="M3 3l0 .01" /><path d="M7 3l0 .01" /><path d="M11 3l0 .01" /><path d="M15 3l0 .01" /><path d="M3 7l0 .01" /><path d="M3 11l0 .01" /><path d="M3 15l0 .01" /></svg>
     <h3>Office document conversion</h3>
     <p>Drag supported documents here</p>
   </div>

From 5d02dcbd6e8fe95fbb4d7838273cf7ed5a08e343 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 14 Nov 2024 20:50:51 +0100
Subject: [PATCH 8/8] =?UTF-8?q?=F0=9F=94=A8=20Update=20modal=20page=20tags?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/pages/components/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md
index b94a00a..ecf5175 100644
--- a/docs/pages/components/modal.md
+++ b/docs/pages/components/modal.md
@@ -1,7 +1,7 @@
 ---
 title: 'Components: Modal - Sloth.css'
 description: Dialog that needs to be solved
-tags: variants accent neutral success alert size outline pill
+tags: overlay size fullscreen
 ---
 
 ## Modal