From 38743a1df3406039c0a56f1be4c4290595f7d774 Mon Sep 17 00:00:00 2001
From: Andy Brewer <andyb82@gmail.com>
Date: Thu, 14 Nov 2024 15:05:55 -0800
Subject: [PATCH] v1.17

---
 mvp.css      | 573 ++++++++++++++++++++++++++-------------------------
 package.json |   2 +-
 2 files changed, 288 insertions(+), 287 deletions(-)

diff --git a/mvp.css b/mvp.css
index e88887d..da3d654 100644
--- a/mvp.css
+++ b/mvp.css
@@ -1,241 +1,242 @@
-/* MVP.css v1.16 - https://github.com/andybrewer/mvp */
+/* MVP.css v1.17 - https://github.com/andybrewer/mvp */
 
 :root {
-    --active-brightness: 0.85;
-    --border-radius: 5px;
-    --box-shadow: 2px 2px 10px;
-    --color-accent: #118bee15;
-    --color-bg: #fff;
-    --color-bg-secondary: #e9e9e9;
-    --color-link: #118bee;
-    --color-secondary: #920de9;
-    --color-secondary-accent: #920de90b;
-    --color-shadow: #f4f4f4;
-    --color-table: #118bee;
-    --color-text: #000;
-    --color-text-secondary: #999;
-    --color-scrollbar: #cacae8;
-    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    --hover-brightness: 1.2;
-    --justify-important: center;
-    --justify-normal: left;
-    --line-height: 1.5;
-    --width-card: 285px;
-    --width-card-medium: 460px;
-    --width-card-wide: 800px;
-    --width-content: 1080px;
+  --active-brightness: 0.85;
+  --border-radius: 5px;
+  --box-shadow: 2px 2px 10px;
+  --color-accent: #118bee15;
+  --color-bg: #fff;
+  --color-bg-secondary: #e9e9e9;
+  --color-link: #118bee;
+  --color-secondary: #920de9;
+  --color-secondary-accent: #920de90b;
+  --color-shadow: #f4f4f4;
+  --color-table: #118bee;
+  --color-text: #000;
+  --color-text-secondary: #999;
+  --color-scrollbar: #cacae8;
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --hover-brightness: 1.2;
+  --justify-important: center;
+  --justify-normal: left;
+  --line-height: 1.5;
+  --width-card: 285px;
+  --width-card-medium: 460px;
+  --width-card-wide: 800px;
+  --width-content: 1080px;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root[color-mode="user"] {
-        --color-accent: #0097fc4f;
-        --color-bg: #333;
-        --color-bg-secondary: #555;
-        --color-link: #0097fc;
-        --color-secondary: #e20de9;
-        --color-secondary-accent: #e20de94f;
-        --color-shadow: #bbbbbb20;
-        --color-table: #0097fc;
-        --color-text: #f7f7f7;
-        --color-text-secondary: #aaa;
-    }
+  :root[color-mode="user"] {
+    --color-accent: #0097fc4f;
+    --color-bg: #333;
+    --color-bg-secondary: #555;
+    --color-link: #0097fc;
+    --color-secondary: #e20de9;
+    --color-secondary-accent: #e20de94f;
+    --color-shadow: #bbbbbb20;
+    --color-table: #0097fc;
+    --color-text: #f7f7f7;
+    --color-text-secondary: #aaa;
+  }
 }
 
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 /* Layout */
 article aside {
-    background: var(--color-secondary-accent);
-    border-left: 4px solid var(--color-secondary);
-    padding: 0.01rem 0.8rem;
+  background: var(--color-secondary-accent);
+  border-left: 4px solid var(--color-secondary);
+  padding: 0.01rem 0.8rem;
 }
 
 body {
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: var(--font-family);
-    line-height: var(--line-height);
-    margin: 0;
-    overflow-x: hidden;
-    padding: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+  margin: 0;
+  overflow-x: hidden;
+  padding: 0;
 }
 
 footer,
 header,
 main {
-    margin: 0 auto;
-    max-width: var(--width-content);
-    padding: 3rem 1rem;
+  margin: 0 auto;
+  max-width: var(--width-content);
+  padding: 3rem 1rem;
 }
 
 hr {
-    background-color: var(--color-bg-secondary);
-    border: none;
-    height: 1px;
-    margin: 4rem 0;
-    width: 100%;
+  background-color: var(--color-bg-secondary);
+  border: none;
+  height: 1px;
+  margin: 4rem 0;
+  width: 100%;
 }
 
 section {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: var(--justify-important);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--justify-important);
 }
 
 section img,
 article img {
-    max-width: 100%;
+  max-width: 100%;
 }
 
 section pre {
-    overflow: auto;
+  overflow: auto;
 }
 
 section aside {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    margin: 1rem;
-    padding: 1.25rem;
-    width: var(--width-card);
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  margin: 1rem;
+  padding: 1.25rem;
+  width: var(--width-card);
 }
 
 section aside:hover {
-    box-shadow: var(--box-shadow) var(--color-bg-secondary);
+  box-shadow: var(--box-shadow) var(--color-bg-secondary);
 }
 
 [hidden] {
-    display: none;
+  display: none;
 }
 
 /* Headers */
 article header,
 div header,
 main header {
-    padding-top: 0;
+  padding-top: 0;
 }
 
 header {
-    text-align: var(--justify-important);
+  text-align: var(--justify-important);
 }
 
 header a b,
 header a em,
 header a i,
 header a strong {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 header nav img {
-    margin: 1rem 0;
+  margin: 1rem 0;
 }
 
 section header {
-    padding-top: 0;
-    width: 100%;
+  padding-top: 0;
+  width: 100%;
 }
 
 /* Nav */
 nav {
-    align-items: center;
-    display: flex;
-    font-weight: bold;
-    justify-content: space-between;
-    margin-bottom: 7rem;
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+  justify-content: space-between;
+  margin-bottom: 7rem;
 }
 
 nav ul {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
 }
 
 nav ul li {
-    display: inline-block;
-    margin: 0 0.5rem;
-    position: relative;
-    text-align: left;
+  display: inline-block;
+  margin: 0 0.5rem;
+  position: relative;
+  text-align: left;
 }
 
 /* Nav Dropdown */
 nav ul li:hover ul {
-    display: block;
+  display: block;
 }
 
 nav ul li ul {
-    background: var(--color-bg);
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    display: none;
-    height: auto;
-    left: -2px;
-    padding: .5rem 1rem;
-    position: absolute;
-    top: 1.7rem;
-    white-space: nowrap;
-    width: auto;
-    z-index: 1;
+  background: var(--color-bg);
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  display: none;
+  height: auto;
+  left: -2px;
+  padding: 0.5rem 1rem;
+  position: absolute;
+  top: 1.7rem;
+  white-space: nowrap;
+  width: auto;
+  z-index: 1;
 }
 
 nav ul li ul::before {
-    /* fill gap above to make mousing over them easier */
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -0.5rem;
-    height: 0.5rem;
+  /* fill gap above to make mousing over them easier */
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -0.5rem;
+  height: 0.5rem;
 }
 
 nav ul li ul li,
 nav ul li ul li a {
-    display: block;
+  display: block;
 }
 
 /* Nav for Mobile */
 @media (max-width: 768px) {
-    nav {
-        flex-wrap: wrap;
-    }
+  nav {
+    flex-wrap: wrap;
+  }
 
-    nav ul li {
-        width: calc(100% - 1em);
-    }
+  nav ul li {
+    width: calc(100% - 1em);
+  }
 
-    nav ul li ul {
-        border: none; box-shadow: none;
-        display: block;
-        position: static;
-    }
+  nav ul li ul {
+    border: none;
+    box-shadow: none;
+    display: block;
+    position: static;
+  }
 }
 
 /* Typography */
 code,
 samp {
-    background-color: var(--color-accent);
-    border-radius: var(--border-radius);
-    color: var(--color-text);
-    display: inline-block;
-    margin: 0 0.1rem;
-    padding: 0 0.5rem;
+  background-color: var(--color-accent);
+  border-radius: var(--border-radius);
+  color: var(--color-text);
+  display: inline-block;
+  margin: 0 0.1rem;
+  padding: 0 0.5rem;
 }
 
 details {
-    margin: 1.3rem 0;
+  margin: 1.3rem 0;
 }
 
 details summary {
-    font-weight: bold;
-    cursor: pointer;
+  font-weight: bold;
+  cursor: pointer;
 }
 
 h1,
@@ -244,69 +245,69 @@ h3,
 h4,
 h5,
 h6 {
-    line-height: var(--line-height);
-    text-wrap: balance;
+  line-height: var(--line-height);
+  text-wrap: balance;
 }
 
 mark {
-    padding: 0.1rem;
+  padding: 0.1rem;
 }
 
 ol li,
 ul li {
-    padding: 0.2rem 0;
+  padding: 0.2rem 0;
 }
 
 p {
-    margin: 0.75rem 0;
-    padding: 0;
-    width: 100%;
+  margin: 0.75rem 0;
+  padding: 0;
+  width: 100%;
 }
 
 pre {
-    margin: 1rem 0;
-    max-width: var(--width-card-wide);
-    padding: 1rem 0;
+  margin: 1rem 0;
+  max-width: var(--width-card-wide);
+  padding: 1rem 0;
 }
 
 pre code,
 pre samp {
-    display: block;
-    max-width: var(--width-card-wide);
-    padding: 0.5rem 2rem;
-    white-space: pre-wrap;
+  display: block;
+  max-width: var(--width-card-wide);
+  padding: 0.5rem 2rem;
+  white-space: pre-wrap;
 }
 
 small {
-    color: var(--color-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 sup {
-    background-color: var(--color-secondary);
-    border-radius: var(--border-radius);
-    color: var(--color-bg);
-    font-size: xx-small;
-    font-weight: bold;
-    margin: 0.2rem;
-    padding: 0.2rem 0.3rem;
-    position: relative;
-    top: -2px;
+  background-color: var(--color-secondary);
+  border-radius: var(--border-radius);
+  color: var(--color-bg);
+  font-size: xx-small;
+  font-weight: bold;
+  margin: 0.2rem;
+  padding: 0.2rem 0.3rem;
+  position: relative;
+  top: -2px;
 }
 
 /* Links */
 a {
-    color: var(--color-link);
-    display: inline-block;
-    font-weight: bold;
-    text-decoration: underline;
+  color: var(--color-link);
+  display: inline-block;
+  font-weight: bold;
+  text-decoration: underline;
 }
 
 a:hover {
-    filter: brightness(var(--hover-brightness));
+  filter: brightness(var(--hover-brightness));
 }
 
 a:active {
-    filter: brightness(var(--active-brightness));
+  filter: brightness(var(--active-brightness));
 }
 
 a b,
@@ -315,279 +316,279 @@ a i,
 a strong,
 button,
 input[type="submit"] {
-    border-radius: var(--border-radius);
-    display: inline-block;
-    font-size: medium;
-    font-weight: bold;
-    line-height: var(--line-height);
-    margin: 0.5rem 0;
-    padding: 1rem 2rem;
+  border-radius: var(--border-radius);
+  display: inline-block;
+  font-size: medium;
+  font-weight: bold;
+  line-height: var(--line-height);
+  margin: 0.5rem 0;
+  padding: 1rem 2rem;
 }
 
 button,
 input[type="submit"] {
-    font-family: var(--font-family);
+  font-family: var(--font-family);
 }
 
 button:hover,
 input[type="submit"]:hover {
-    cursor: pointer;
-    filter: brightness(var(--hover-brightness));
+  cursor: pointer;
+  filter: brightness(var(--hover-brightness));
 }
 
 button:active,
 input[type="submit"]:active {
-    filter: brightness(var(--active-brightness));
+  filter: brightness(var(--active-brightness));
 }
 
 a b,
 a strong,
 button,
 input[type="submit"] {
-    background-color: var(--color-link);
-    border: 2px solid var(--color-link);
-    color: var(--color-bg);
+  background-color: var(--color-link);
+  border: 2px solid var(--color-link);
+  color: var(--color-bg);
 }
 
 a em,
 a i {
-    border: 2px solid var(--color-link);
-    border-radius: var(--border-radius);
-    color: var(--color-link);
-    display: inline-block;
-    padding: 1rem 2rem;
+  border: 2px solid var(--color-link);
+  border-radius: var(--border-radius);
+  color: var(--color-link);
+  display: inline-block;
+  padding: 1rem 2rem;
 }
 
 article aside a {
-    color: var(--color-secondary);
+  color: var(--color-secondary);
 }
 
 /* Images */
 figure {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 figure img {
-    max-width: 100%;
+  max-width: 100%;
 }
 
 figure figcaption {
-    color: var(--color-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 /* Forms */
 button:disabled,
 input:disabled {
-    background: var(--color-bg-secondary);
-    border-color: var(--color-bg-secondary);
-    color: var(--color-text-secondary);
-    cursor: not-allowed;
+  background: var(--color-bg-secondary);
+  border-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  cursor: not-allowed;
 }
 
 button[disabled]:hover,
 input[type="submit"][disabled]:hover {
-    filter: none;
+  filter: none;
 }
 
 form {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    display: block;
-    max-width: var(--width-card-wide);
-    min-width: var(--width-card);
-    padding: 1.5rem;
-    text-align: var(--justify-normal);
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow) var(--color-shadow);
+  display: block;
+  max-width: var(--width-card-wide);
+  min-width: var(--width-card);
+  padding: 1.5rem;
+  text-align: var(--justify-normal);
 }
 
 form header {
-    margin: 1.5rem 0;
-    padding: 1.5rem 0;
+  margin: 1.5rem 0;
+  padding: 1.5rem 0;
 }
 
 input,
 label,
 select,
 textarea {
-    display: block;
-    font-size: inherit;
-    max-width: var(--width-card-wide);
+  display: block;
+  font-size: inherit;
+  max-width: var(--width-card-wide);
 }
 
 input[type="checkbox"],
 input[type="radio"] {
-    display: inline-block;
+  display: inline-block;
 }
 
-input[type="checkbox"]+label,
-input[type="radio"]+label {
-    display: inline-block;
-    font-weight: normal;
-    position: relative;
-    top: 1px;
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  display: inline-block;
+  font-weight: normal;
+  position: relative;
+  top: 1px;
 }
 
 input[type="range"] {
-    padding: 0.4rem 0;
+  padding: 0.4rem 0;
 }
 
 input,
 select,
 textarea {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    margin-bottom: 1rem;
-    padding: 0.4rem 0.8rem;
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  margin-bottom: 1rem;
+  padding: 0.4rem 0.8rem;
 }
 
 input[type="text"],
 input[type="password"],
 textarea {
-    width: calc(100% - 1.6rem);
+  width: calc(100% - 1.6rem);
 }
 
 input[readonly],
 textarea[readonly] {
-    background-color: var(--color-bg-secondary);
+  background-color: var(--color-bg-secondary);
 }
 
 label {
-    font-weight: bold;
-    margin-bottom: 0.2rem;
+  font-weight: bold;
+  margin-bottom: 0.2rem;
 }
 
 /* Popups */
 dialog {
-    max-width: 90%;
-    max-height: 85dvh;
-    margin: auto;
-    padding: 0;
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: 0.5rem;
-    overscroll-behavior: contain;
-    scroll-behavior: smooth;
-    scrollbar-width: none; /* Hide scrollbar for Firefox */
-    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
-    scrollbar-color: transparent transparent;
-    animation: bottom-to-top 0.25s ease-in-out forwards;
+  max-width: 90%;
+  max-height: 85dvh;
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: 0.5rem;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Hide scrollbar for Firefox */
+  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
+  scrollbar-color: transparent transparent;
+  animation: bottom-to-top 0.25s ease-in-out forwards;
 }
 
 dialog::-webkit-scrollbar {
-    width: 0;
-    display: none;
+  width: 0;
+  display: none;
 }
 
 dialog::-webkit-scrollbar-track {
-    background: transparent;
+  background: transparent;
 }
 
 dialog::-webkit-scrollbar-thumb {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 @media (min-width: 650px) {
-    dialog {
-        max-width: 39rem;
-    }
+  dialog {
+    max-width: 39rem;
+  }
 }
 
 dialog::backdrop {
-    background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 @keyframes bottom-to-top {
-    0% {
-        opacity: 0;
-        transform: translateY(10%);
-    }
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
 
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Tables */
 table {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    border-spacing: 0;
-    display: inline-block;
-    max-width: 100%;
-    overflow-x: auto;
-    padding: 0;
-    white-space: nowrap;
+  border: 1px solid var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  border-spacing: 0;
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 0;
+  white-space: nowrap;
 }
 
 table td,
 table th,
 table tr {
-    padding: 0.4rem 0.8rem;
-    text-align: var(--justify-important);
+  padding: 0.4rem 0.8rem;
+  text-align: var(--justify-important);
 }
 
 table thead {
-    background-color: var(--color-table);
-    border-collapse: collapse;
-    border-radius: var(--border-radius);
-    color: var(--color-bg);
-    margin: 0;
-    padding: 0;
+  background-color: var(--color-table);
+  border-collapse: collapse;
+  border-radius: var(--border-radius);
+  color: var(--color-bg);
+  margin: 0;
+  padding: 0;
 }
 
 table thead tr:first-child th:first-child {
-    border-top-left-radius: var(--border-radius);
+  border-top-left-radius: var(--border-radius);
 }
 
 table thead tr:first-child th:last-child {
-    border-top-right-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
 }
 
 table thead th:first-child,
 table tr td:first-child {
-    text-align: var(--justify-normal);
+  text-align: var(--justify-normal);
 }
 
 table tr:nth-child(even) {
-    background-color: var(--color-accent);
+  background-color: var(--color-accent);
 }
 
 /* Quotes */
 blockquote {
-    display: block;
-    font-size: x-large;
-    line-height: var(--line-height);
-    margin: 1rem auto;
-    max-width: var(--width-card-medium);
-    padding: 1.5rem 1rem;
-    text-align: var(--justify-important);
+  display: block;
+  font-size: x-large;
+  line-height: var(--line-height);
+  margin: 1rem auto;
+  max-width: var(--width-card-medium);
+  padding: 1.5rem 1rem;
+  text-align: var(--justify-important);
 }
 
 blockquote footer {
-    color: var(--color-text-secondary);
-    display: block;
-    font-size: small;
-    line-height: var(--line-height);
-    padding: 1.5rem 0;
+  color: var(--color-text-secondary);
+  display: block;
+  font-size: small;
+  line-height: var(--line-height);
+  padding: 1.5rem 0;
 }
 
 /* Scrollbars */
 * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-scrollbar) transparent;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-scrollbar) transparent;
 }
 
 *::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+  width: 5px;
+  height: 5px;
 }
 
 *::-webkit-scrollbar-track {
-    background: transparent;
+  background: transparent;
 }
 
 *::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar);
-    border-radius: 10px;
+  background-color: var(--color-scrollbar);
+  border-radius: 10px;
 }
diff --git a/package.json b/package.json
index 5fab359..36b0a22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mvp.css",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "A minimalist stylesheet for HTML elements",
   "main": "mvp.css",
   "repository": {