v1.11

andybrewer · Sep 19, 2022 · 9382453 · 9382453
1 parent bac9952
commit 9382453
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -6,12 +6,15 @@ Out of the box CSS styling for HTML elements. No class names, no framework to le
 
 Live demo: https://andybrewer.github.io/mvp/
 
-Unpkg: https://unpkg.com/mvp.css@1.10.2/mvp.css
+Unpkg: https://unpkg.com/mvp.css@1.11/mvp.css
 
 NPM: https://www.npmjs.com/package/mvp.css
 
 ## Versions
 
+### v1.11
+* Styled `<dialog>` element 
+
 ### v1.10.2
 * Updated `<input type="text">` and `<textarea>` styling to be full-width elements 
 

diff --git a/index.html b/index.html
@@ -31,7 +31,7 @@ <h1>A <u>minimalist</u> stylesheet for HTML elements</h1>
                 download="mvp.css" href="./mvp.css" target="_blank"><b>Download MVP.css (9kb) &nearr;</b></a></p>
         <br><br>
         <p><sup>PRO TIP</sup> Add this code to a new HTML
-            file:<br><br><code>&lt;link rel="stylesheet" href="https://unpkg.com/mvp.css@1.10.2/mvp.css"&gt;</code></p>
+            file:<br><br><code>&lt;link rel="stylesheet" href="https://unpkg.com/mvp.css@1.11/mvp.css"&gt;</code></p>
     </header>
     <main>
         <hr>
@@ -391,11 +391,12 @@ <h2>What can you build with MVP.css?</h2>
                 <label for="valuation">Valuation:</label>
                 <input type="range" id="valuation" name="valuation" value="50" />
                 <br>
-                <button type="submit" onclick="newIdea(); return false;">Submit</button>
-                <div id="results" style="max-width: 100%;">
-
-                </div>
+                <button type="submit" id="show">Submit</button>
             </form>
+            <dialog id="popup">
+                <div id="results"></div>
+                <button id="close">Close</button>
+            </dialog>
         </section>
     </main>
     <footer>
@@ -407,7 +408,8 @@ <h2>What can you build with MVP.css?</h2>
     </footer>
 
     <script>
-        function newIdea() {
+        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) });
@@ -417,8 +419,14 @@ <h2>What can you build with MVP.css?</h2>
             let model = document.getElementById("model").value;
             let valuation = document.getElementById("valuation").value;
 
-            document.getElementById("results").innerHTML = `<br><h3>Amazing Idea &mdash;</h3><p>A ${model} <mark><b>${company} for ${hobby}</b></mark><br>with ${founders} and a focus on<br>${focus} and targeting a $${valuation}B valuation.</p>`;
-        }
+            document.getElementById("results").innerHTML = `<h3>Amazing Idea &mdash;</h3><p>A ${model} <mark><b>${company} for ${hobby}</b></mark> with ${founders} and a focus on ${focus}, targeting a $${valuation}B valuation.</p>`;
+            dialog.show();
+            return false;
+        };
+        document.querySelector('#close').onclick = function() {
+            dialog.close();
+            return false;
+        };
     </script>
 </body>
 

diff --git a/mvp.css b/mvp.css
@@ -1,4 +1,4 @@
-/* MVP.css v1.10.2 - https://github.com/andybrewer/mvp */
+/* MVP.css v1.11 - https://github.com/andybrewer/mvp */
 
 :root {
     --active-brightness: 0.85;
@@ -345,7 +345,6 @@ figure figcaption {
 }
 
 /* Forms */
-
 button:disabled,
 input:disabled {
     background: var(--color-bg-secondary);
@@ -424,6 +423,19 @@ label {
     margin-bottom: 0.2rem;
 }
 
+/* Popups */
+dialog {
+    border: 1px solid var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow) var(--color-shadow);
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    z-index: 999;
+}
+
 /* Tables */
 table {
     border: 1px solid var(--color-bg-secondary);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mvp.css",
-  "version": "1.10.2",
+  "version": "1.11",
   "description": "A minimalist stylesheet for HTML elements",
   "main": "mvp.css",
   "repository": {