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": {