ui: Changed modal to use a h1 in the body instead of title property, tried to fix font flashing.

marko/browser.json

@@ -1,8 +1,8 @@
 {
   "dependencies": [
+    "./global/fonts.less",
     "./global/base.less",
     "./global/colors.less",
-    "./global/navbar.less",
-    "./global/fonts.less"
+    "./global/navbar.less"
   ]
 }

marko/components/menu/index.marko

@@ -6,10 +6,12 @@
     <menu-link if(!input.user.loggedIn) icon="L" href="/auth/login" on-click("loginClicked")>Login</menu-link>
     <menu-link if(input.user.loggedIn) icon="L" href="/auth/logout" on-click("logoutClicked")>Logout <span class="weak">(${input.user.name})</span></menu-link>
   
-    <modal enabled=state.loggingIn notification title="Logging you in..." on-close("closeModal")>
+    <modal enabled=state.loggingIn notification on-close("closeModal")>
+      <h1>Logging you in...</h1>
       <p>You may be redirected to Auth0 if it's been a while.</p>
     </modal>
-    <modal enabled=state.loggingOut notification title="Logging you out..." on-close("closeModal")>
+    <modal enabled=state.loggingOut notification on-close("closeModal")>
+      <h1>Logging you out...</h1>
       <p>You can probably log back in without entering your info if you're quick.</p>
     </modal>
   </if>

marko/components/modal/index.marko

@@ -3,7 +3,6 @@
     <div class="overlay-options color-menu">
       <div if(input.closable) on-click("closeModal")>X</div>
     </div>
-    <h1 class="color-primary" if(input.title)>${input.title}</h1>
     <div class="modal color-text">
       <include(input.renderBody) />
     </div>

marko/global/base.less

@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: Aneliza, sans-serif;
+  font-display: swap;
   background-color: black;
   color: white;
 

marko/global/colors.less

@@ -8,7 +8,7 @@ body.theme-story {
   .menu-link:hover, .menu > .head-menu > a:hover {
     background-color: rgba(17, 187, 255, 0.25);
   }
-  .color-primary, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
+  .color-primary, .modal h1, .modal h2, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
     color: #4BF;
   }
   .color-text {
@@ -33,7 +33,7 @@ body.theme-logs {
   .menu-link:hover, .Menu > .head-menu > a:hover {
     background-color: rgba(255, 187, 17, 0.25);
   }
-  .color-primary, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
+  .color-primary, .modal h1, .modal h2, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
     color: #DA1;
   }
   .color-text {
@@ -58,7 +58,7 @@ body.theme-logs {
   .menu-link:hover, .menu > .head-menu > a:hover {
     background-color: rgba(35, 255, 128, 0.25);
   }
-  .color-primary, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
+  .color-primary, .modal h1, .modal h2, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a {
     color: #1F8;
   }
   .color-text {

marko/global/fonts.less

@@ -3,6 +3,7 @@
   font-family: 'Aneliza';
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-Regular.eot);
   src: url(/assets/fonts/Aneliza-Regular.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-Regular.woff2) format('woff2'),
@@ -16,6 +17,7 @@
   font-family: 'Aneliza';
   font-weight: normal;
   font-style: italic;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-Italic.eot);
   src: url(/assets/fonts/Aneliza-Italic.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-Italic.woff2) format('woff2'),
@@ -29,6 +31,7 @@
   font-family: 'Aneliza';
   font-weight: 100;
   font-style: normal;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-Thin.eot);
   src: url(/assets/fonts/Aneliza-Thin.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-Thin.woff2) format('woff2'),
@@ -42,6 +45,7 @@
   font-family: 'Aneliza';
   font-weight: 100;
   font-style: italic;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-ThinItalic.eot);
   src: url(/assets/fonts/Aneliza-ThinItalic.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-ThinItalic.woff2) format('woff2'),
@@ -55,6 +59,7 @@
   font-family: 'Aneliza';
   font-weight: 200;
   font-style: normal;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-Light.eot);
   src: url(/assets/fonts/Aneliza-Light.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-Light.woff2) format('woff2'),
@@ -68,6 +73,7 @@
   font-family: 'Aneliza';
   font-weight: 200;
   font-style: italic;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-LightItalic.eot);
   src: url(/assets/fonts/Aneliza-LightItalic.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-LightItalic.woff2) format('woff2'),
@@ -81,6 +87,7 @@
   font-family: 'Aneliza';
   font-weight: bold;
   font-style: normal;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-Bold.eot);
   src: url(/assets/fonts/Aneliza-Bold.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-Bold.woff2) format('woff2'),
@@ -94,6 +101,7 @@
   font-family: 'Aneliza';
   font-weight: bold;
   font-style: italic;
+  font-display: swap;
   src: url(/assets/fonts/Aneliza-BoldItalic.eot);
   src: url(/assets/fonts/Aneliza-BoldItalic.eot?#iefix) format('embedded-opentype'),
        url(/assets/fonts/Aneliza-BoldItalic.woff2) format('woff2'),