` button styles
-* Added a `--font` variable
-* Added dropdown menus
-
-### v1.2
-* Added `checkbox` and `radio` styling for `` instead of ``
-* Added light styling for `` fields
-* Added `` and `` tags
-* Added `prefers-color-scheme: dark` media query (commented out by default)
-* Updated `` styling
+Documentation:
-To submit your site built with MVP.css create a pull request or an issue. For pull requests, please keep sites in alphabetical order.
+NPM:
diff --git a/img/icon-copy.png b/img/icon-copy.png
new file mode 100644
index 0000000..d8fa910
Binary files /dev/null and b/img/icon-copy.png differ
diff --git a/index.html b/index.html
index 8b16975..1346624 100644
--- a/index.html
+++ b/index.html
@@ -1,263 +1,264 @@
-
+
+
+ MVP.css - Minimalist stylesheet for HTML elements
+
-
-
-
+
-
-
- A minimalist stylesheet for HTML elements
- No class names, no frameworks, just semantic HTML and you're done .
- Download HTML ↗ Download MVP.css (8kb) ↗
- PRO TIP Add this code to a new HTML
- file:<link rel="stylesheet" href="https://unpkg.com/mvp.css">
+
+
+ MVP.css — A minimalist stylesheet for HTML elements
+ No class names, no frameworks, just semantic HTML and you're done .
+
+ Download HTML ↗ Download MVP.css (10kb) ↗
+
+ PRO TIP Add this code to a new HTML file:<link rel="stylesheet" href="https://unpkg.com/mvp.css">
+
-
-
-
- HTML and You're Done
- MVP styles your root HTML elements, so you don't need to learn a new CSS framework or naming
- conventions.
- HTML Guide
- ↗
-
-
- Mobile-friendly UI
- MVP is designed to look great on all browsers and devices out of the box for rapid prototyping.
-
- It's like an amped up CSS reset that you can toss into any project to get decent styling.
-
-
- MIT License
- MVP is released under the permissive MIT license so you can freely use it however you'd like.
- That means personal projects, commercial ventures, remixes and more are all welcome.
-
-
-
-
- one all of my
- startup projects."
- - Andy Brewer, Author of
- MVP.css
-
-
-
-
-
-
- MVP.css
- No CSS
- Custom CSS
-
-
-
- Mobile friendly
- ✓ ✓
- ✓
-
-
- Works out of the box
- ✓ ✓
- ∅
-
-
- Easy to customize
- ✓ ✓
- ∅
-
-
- Only semantic HTML
- ✓ ✓
- ∅
-
-
- No class names
- ✓ ✓
- ∅
-
-
- Perfect for an MVP
- ✓ ∅
- ∅
-
-
-
-
- Docs
- HTML Reference
- MVP.css works with the following HTML elements:
+
+
+
+ HTML and You're Done
+ MVP styles your root HTML elements, so you don't need to learn a new CSS framework or naming conventions.
+
+ HTML Guide ↗
+
+
+ Mobile-friendly UI
+ MVP is designed to look great on all browsers and devices out of the box for rapid prototyping.
+ It's like an amped up CSS reset that you can toss into any project to get decent styling.
+
+
+ MIT License
+ MVP is released under the permissive MIT license so you can freely use it however you'd like.
+ That means personal projects, commercial ventures, remixes and more are all welcome.
+
+
+
+
+ one all of my startup projects."
+ - Andy Brewer, Author of MVP.css
+
+
+
+
+
+
+ MVP.css
+ No CSS
+ Custom CSS
+
+
+
+ Mobile friendly
+ ✓ ✓
+ ✓
+
+
+ Works out of the box
+ ✓ ✓
+ ∅
+
+
+ Easy to customize
+ ✓ ✓
+ ∅
+
+
+ Only semantic HTML
+ ✓ ✓
+ ∅
+
+
+ No class names
+ ✓ ✓
+ ∅
+
+
+ Perfect for an MVP
+ ✓ ∅
+ ∅
+
+
+
+
+ Docs
+ HTML Reference
+
+ MVP.css works with the following HTML elements:
+
+ Modifying the CSS variables
+ MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.
+
:root {
--active-brightness: 0.85;
--border-radius: 5px;
--box-shadow: 2px 2px 10px;
- --color: #118bee;
--color-accent: #118bee15;
--color-bg: #fff;
--color-bg-secondary: #e9e9e9;
@@ -281,146 +282,169 @@ Modifying the CSS variables
- Custom styles can be added inside a <style> tag, or at the end of your local mvp.css file
-
-
- Frequently Asked Questions
-
- Why would I use this?
- If you just want to launch already.
- PRO TIP An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.
-
-
-
- What skills will I need?
- Mostly HTML, maybe a hint of CSS if you want to get fancy.
- CSS 5
- Design 0
- HTML 100
-
-
- Is there a minified version?
- No, you don't need one for an MVP.
-
-
- How can I improve my design?
- Here are some helpful resources:
-
-
-
- How do I handle a user's dark mode preference?
- By default <html> will force users into light mode. By using <html color-mode="user"> MVP.css will respect the user's dark mode preferences. The original concept and additional tips can be found in this article: https://ryanfeigenbaum.com/dark-mode/
-
-
- What if I don't like the default styles?
- Most styles are editable through CSS variables . You can also add your own styles
- inline, at the end of MVP.css or in a new stylesheet.
- PRO TIP If there are two conflicting CSS styles, the last one will take precedence.
-
+ Custom styles can be added inside a <style> tag, or at the end of your local mvp.css file
+
+
+ Frequently Asked Questions
+
+ Why would I use this?
+ If you just want to launch already.
+ PRO TIP An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.
+
+
+ What skills will I need?
+ Mostly HTML, maybe a hint of CSS if you want to get fancy.
+ CSS 5
+ Design 0
+ HTML 100
+
+
+ Is there a minified version?
+ No, you don't need one for an MVP.
+
+
+ How can I improve my design?
+ Here are some helpful resources:
+
+
+
+ How do I handle a user's dark mode preference?
+
+ By default <html> will force users into light mode. By using <html color-mode="user"> MVP.css will respect the user's dark mode preferences. The
+ original concept and additional tips can be found in this article: https://ryanfeigenbaum.com/dark-mode/
+
+
+
+ What if I don't like the default styles?
+ Most styles are editable through CSS variables . You can also add your own styles inline, at the end of MVP.css or in a new stylesheet.
+ PRO TIP If there are two conflicting CSS styles, the last one will take precedence.
+
:root {
- --color: #118bee;
+ --color-bg: #fff;
}
/* Lower in the CSS, or in a 2nd stylesheet */
:root {
- --color: green; /* This will take precedence */
+ --color-bg: #000; /* This will take precedence */
}
-
-
- What if I still don't like it?
- That's OK, you probably shouldn't love your MVP. The goal of MVP.css is to help you
- feel slightly less embarrased about it.
- 👉 If you
- want a CSS framework with more features check out Bulma
- ↗ or Tailwind ↗ .
-
-
-
-
- What can you build with MVP.css?
- Free ideas below ↓
-
-
-
+
+ Hello, I am a header of the modal
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam at assumenda cum placeat aperiam ab error, doloribus eligendi sit. Lorem ipsum dolor sit amet consectetur adipisicing
+ elit. Quos ullam.
+
+
+
-
+ var dialog = document.getElementById("popup");
+ document.querySelector("#show").onclick = function () {
+ let company = document.getElementById("company").value || "GitHub";
+ let focusAreas = [];
+ document.querySelectorAll("input[name='focus[]']:checked").forEach((el) => {
+ focusAreas.push(el.value);
+ });
+ let focus = focusAreas.join(" / ") || "stealthy growth";
+ let founders = document.querySelector("input[name='founders']:checked").value;
+ let hobby = document.getElementById("hobby").value || "design";
+ let model = document.getElementById("model").value;
+ let valuation = document.getElementById("valuation").value;
+ document.getElementById(
+ "results"
+ ).innerHTML = `Amazing Idea — A ${model} ${company} for ${hobby}
`;
+ dialog.show();
+ return false;
+ };
+ document.querySelector("#close").onclick = function () {
+ dialog.close();
+ return false;
+ };
+
+
diff --git a/mvp.css b/mvp.css
index c6a761c..e7d64f8 100644
--- a/mvp.css
+++ b/mvp.css
@@ -1,215 +1,242 @@
-/* MVP.css v1.9 - https://github.com/andybrewer/mvp */
+/* MVP.css v1.17.2 - https://github.com/andybrewer/mvp */
:root {
- --active-brightness: 0.85;
- --border-radius: 5px;
- --box-shadow: 2px 2px 10px;
- --color: #118bee;
- --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;
- --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: #0097fc;
- --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;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ 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;
+}
+
+/* Nav for Mobile */
+@media (max-width: 768px) {
+ nav {
+ flex-wrap: wrap;
+ }
+
+ nav ul li {
+ width: calc(100% - 1em);
+ }
+
+ 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,
@@ -218,269 +245,356 @@ h3,
h4,
h5,
h6 {
- line-height: var(--line-height);
+ 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: none;
+ color: var(--color-link);
+ display: inline-block;
+ font-weight: bold;
+ text-decoration: underline;
}
-a:active {
- filter: brightness(var(--active-brightness));
- text-decoration: underline;
+a:hover {
+ filter: brightness(var(--hover-brightness));
}
-a:hover {
- filter: brightness(var(--hover-brightness));
- text-decoration: underline;
+a:active {
+ filter: brightness(var(--active-brightness));
}
a b,
a em,
a i,
a strong,
-button {
- 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"] {
+ 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 {
- font-family: var(--font-family);
+button,
+input[type="submit"] {
+ font-family: var(--font-family);
}
-button:active {
- filter: brightness(var(--active-brightness));
+button:hover,
+input[type="submit"]:hover {
+ cursor: pointer;
+ filter: brightness(var(--hover-brightness));
}
-button:hover {
- cursor: pointer;
- filter: brightness(var(--hover-brightness));
+button:active,
+input[type="submit"]:active {
+ filter: brightness(var(--active-brightness));
}
a b,
a strong,
-button {
- background-color: var(--color-link);
- border: 2px solid var(--color-link);
- color: var(--color-bg);
+button,
+input[type="submit"] {
+ 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 {
- filter: none;
+button[disabled]:hover,
+input[type="submit"][disabled]:hover {
+ 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"],
+input[type="email"],
+textarea {
+ 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-block: 0;
+ padding-inline: 20px;
+ 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;
+}
+
+dialog::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+dialog::-webkit-scrollbar-thumb {
+ background-color: transparent;
+}
+
+@media (min-width: 650px) {
+ dialog {
+ max-width: 39rem;
+ }
+}
+
+dialog::backdrop {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+@keyframes bottom-to-top {
+ 0% {
+ opacity: 0;
+ transform: translateY(10%);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+dialog hr {
+ margin-block: 1rem;
}
/* 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 th:first-child {
- border-top-left-radius: var(--border-radius);
+table thead tr:first-child th:first-child {
+ border-top-left-radius: var(--border-radius);
}
-table thead th:last-child {
- border-top-right-radius: var(--border-radius);
+table thead tr:first-child th:last-child {
+ 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;
+}
+
+*::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+}
+
+*::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+ background-color: var(--color-scrollbar);
+ border-radius: 10px;
}
diff --git a/mvp.html b/mvp.html
index a275750..9b750dc 100644
--- a/mvp.html
+++ b/mvp.html
@@ -20,7 +20,7 @@