reduce unused styling

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

public/foo-style.css

@@ -1,14 +1,14 @@
 @charset "UTF-8";
 
 a,
-abbr,
+/* abbr, */
 acronym,
 address,
 applet,
-article,
+/* article, */
 aside,
 audio,
-b,
+/* b, */
 big,
 blockquote,
 canvas,
@@ -26,8 +26,8 @@ dt,
 em,
 embed,
 fieldset,
-figcaption,
-figure,
+/* figcaption, */
+/* figure, */
 footer,
 form,
 /* h1,
@@ -39,8 +39,8 @@ h6, */
 header,
 hgroup,
 html,
-i,
-iframe,
+/* i, */
+/* iframe, */
 img,
 ins,
 kbd,
@@ -59,7 +59,7 @@ q,
 ruby,
 s,
 samp,
-section,
+/* section, */
 small,
 /* span, */
 strike,
@@ -1436,7 +1436,7 @@ body {
 
 .foo-console,
 .foo-console .foo-cmd {
-    font-family: "Share Tech Mono", monospace;
+    /* font-family: "Share Tech Mono", monospace; */
     color: #fff
 }
 

public/index.html

@@ -5,8 +5,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/website/mdn-style.css">
-    <link rel="stylesheet" href="/website/foo-style.css">
+    <link rel="stylesheet" href="/website/mdn-style.min.css">
+    <link rel="stylesheet" href="/website/foo-style.min.css">
 
     <title>Document</title>
     <script src="/website/redirect.js"></script>
@@ -16,9 +16,6 @@
     <div id="app"></div>
 
     <script src="/website/app.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
-        crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="/website/prism.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
@@ -61,7 +58,6 @@
             marked.setOptions({
                 renderer: renderer,
                 highlight: function (code, lang) {
-                    console.log(Prism.languages);
                     const grammar = Prism.languages[lang];
                     if (!grammar) {
                         console.warn(
@@ -72,29 +68,12 @@
                     return Prism.highlight(code, grammar, lang);
                 }
             })
-            document.getElementById("insert-here").innerHTML = marked.parse(markdowndata);
+            document.getElementById("insert-here").innerHTML = marked.parse(markdowndata, function () {
+                app.ports.isRenderComplete.send(true);
+            });
             // document.getElementById("toc-entries").innerHTML = toc;
         });
-        $(function () {
-            // copy-btn HTML
-            var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
-            btn += '<i class="far fa-clone"></i>';
-            btn += '</span>';
-            // mount it!
-            $(".highlight table").before(btn);
-            var clip = new ClipboardJS('.btn-copy', {
-                text: function (trigger) {
-                    return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
-                }
-            });
-            clip.on('success', function (e) {
-                e.trigger.setAttribute('aria-label', "Copied!");
-                e.clearSelection();
-            })
-        });
     </script>
-
-
 </body>
 
 </html>

public/mdn-style.css

@@ -1,3 +1,9 @@
+@import url('https://rsms.me/inter/inter.css');
+html { font-family: 'Inter', sans-serif; }
+@supports (font-variation-settings: normal) {
+  html { font-family: 'Inter var', sans-serif; }
+}
+
 *,
 :after,
 :before {
@@ -557,7 +563,7 @@ u {
     --code-color: var(--plus-code-color);
     --mark-color: var(--plus-mark-color)
 }
-
+/* 
 .category-html {
     --background-toc-active: var(--html-accent-background-color);
     --category-color: var(--html-accent-color);
@@ -598,9 +604,9 @@ u {
     --category-color: var(--learn-accent-color);
     --category-color-background: var(--learn-accent-background-color);
     --mark-color: var(--api-mark-color)
-}
+} */
 
-.mify {
+/* .mify {
     margin-left: .5rem
 }
 
@@ -634,14 +640,14 @@ u {
     text-decoration-color: var(--text-link);
     text-decoration-thickness: .1em;
     text-underline-offset: .1em
-}
+} */
 
 @media(forced-colors:active) {
     .icon {
         background-color: CanvasText !important
     }
 }
-
+/* 
 .homepage {
     align-items: center;
     display: flex;
@@ -1173,7 +1179,7 @@ svg.icon {
 .icon.icon-yes-circle {
     -webkit-mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg);
     mask-image: url(/static/media/yes-circle.1c4f7a083d20df35ca93.svg)
-}
+} */
 
 .button,
 button {
@@ -1664,7 +1670,7 @@ button {
     display: block;
     right: 2.8rem
 }
-
+/* 
 .mandala-container {
     --mandala-primary: #4e4e4e;
     --mandala-accent-1: var(--html-accent-color);
@@ -2288,7 +2294,7 @@ button {
     to {
         opacity: 0
     }
-}
+} */
 
 .generic-loading {
     align-items: center;
@@ -3197,7 +3203,7 @@ li:last-child .submenu a:not(:focus) {
 .learn-link-container a:hover .submenu-icon.learn {
     background-color: var(--learn-accent-color) !important
 }
-
+/* 
 .submenu-icon.html {
     background-color: var(--html-accent-engage)
 }
@@ -3239,7 +3245,7 @@ li:last-child .submenu a:not(:focus) {
     .mdn-plus .mobile-only {
         display: none
     }
-}
+} */
 
 ul.main-menu {
     grid-gap: 1rem;
@@ -3320,7 +3326,7 @@ ul.main-menu.show {
     }
 }
 
-.signout-form {
+/* .signout-form {
     padding: .5rem
 }
 
@@ -3337,8 +3343,8 @@ button.signout-button {
 button.signout-button:focus,
 button.signout-button:hover {
     background-color: var(--background-secondary)
-}
-
+} */
+/* 
 .user-menu {
     position: relative
 }
@@ -3451,7 +3457,7 @@ button.signout-button:hover {
 .dropdown-item .button.action.active-menu-item {
     --button-bg: var(--background-primary);
     --button-border-color: var(--border-secondary)
-}
+} */
 
 .top-navigation-main {
     display: none;
@@ -3658,7 +3664,7 @@ button.signout-button:hover {
     }
 }
 
-.theme-switcher-menu {
+/* .theme-switcher-menu {
     margin-bottom: .5rem
 }
 
@@ -3794,7 +3800,7 @@ button.signout-button:hover {
         white-space: nowrap !important;
         width: 1px !important
     }
-}
+} */
 
 .top-navigation {
     background-color: var(--background-primary);
@@ -3847,8 +3853,8 @@ button.signout-button:hover {
     .top-navigation .top-navigation-wrap {
         flex: 0 1
     }
-}
-
+} 
+/*
 .breadcrumbs-container {
     align-items: center;
     display: flex;
@@ -4032,7 +4038,7 @@ button.signout-button:hover {
     .language-menu {
         right: 0
     }
-}
+} */
 
 .article-actions {
     margin-left: auto
@@ -4399,7 +4405,7 @@ button.signout-button:hover {
         max-height: 100vh;
         position: fixed;
         right: 0;
-        top: --var(--offset)
+        /* top: --var(--offset) */
     }
 
     .sidebar,
@@ -4627,7 +4633,7 @@ body {
     --color-announcement-banner-accent: #ff6d91
 }
 
-.light {
+/* .light {
     --text-primary: #1b1b1b;
     --text-secondary: #4e4e4e;
     --text-inactive: #9e9e9ea6;
@@ -5041,7 +5047,7 @@ body {
         --text-primary-yellow: #c7b700;
         color-scheme: dark
     }
-}
+} */
 
 .document-page .article-actions-container,
 .document-page .document-toc-container,
@@ -5074,8 +5080,8 @@ body {
         grid-gap: 3rem;
         display: grid;
         gap: 3rem;
-        grid-template-areas: "sidebar main";
-        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+        /* grid-template-areas: "sidebar main"; */
+        /* grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); */
         padding-left: 1.5rem;
         padding-right: 3rem
     }
@@ -5102,8 +5108,8 @@ body {
         grid-gap: 3rem;
         display: grid;
         gap: 3rem;
-        grid-template-areas: "sidebar main toc";
-        grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem);
+        /* grid-template-areas: "sidebar main toc"; */
+        /* grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem); */
         padding-left: 1rem;
         padding-right: 1rem
     }
@@ -5139,7 +5145,7 @@ body {
     font-stretch: 75% 100%;
     font-style: oblique 0deg 20deg;
     font-weight: 1 999;
-    src: url(/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2) format("woff2 supports variations"), url(/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2) format("woff2-variations")
+    src: url(/website/fonts/Inter.var.woff2) format("woff2 supports variations"), url(/website/fonts/Inter.var.woff2) format("woff2-variations")
 }
 
 :root {
@@ -6172,7 +6178,7 @@ screen and (min-width:688px)and (max-width:768px) {
 }
 
 .notification-card .desktop-only {
-    display: hidden
+    display: none
 }
 
 @media screen and (min-width:769px) {
@@ -6592,7 +6598,7 @@ article.settings .field-group ul li {
     grid-gap: 0 1rem;
     display: grid;
     gap: 0 1rem;
-    grid-template-columns: 1fr minmax(5em);
+    /* grid-template-columns: 1fr minmax(5em); */
     margin: 2em 0
 }
 
@@ -6849,8 +6855,8 @@ main.contribute section h1:before {
     content: "";
     display: inline-block;
     height: 1.2em;
-    -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%;
-    mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%;
+    /* -webkit-mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%;
+    mask: url(/static/media/m-logo.e19e04547be91a35c8ea.svg) no-repeat 50% 50%; */
     -webkit-mask-size: cover;
     mask-size: cover;
     -webkit-transform: translate(-.2em, .2em);