New UI improvements + URL interval handler made faster

* Log in button now has mastodon white icon
* Home navigation with FediLove icon added

src/intl/en-US.js

@@ -10,7 +10,7 @@ export default {
     <p>
       Start your journey to <b>meet your crush</b> !!
     </p>`,
-  logIn: 'Log in using <b>Mastodon</b>',
+  logIn: 'Log in <img id="btn-masto" src="/mastoicon.png"/>',
   logInText: 'Log In',
   footer: `
     <p>

src/routes/_components/Nav.html

@@ -1,6 +1,14 @@
 <nav id="main-nav" class="main-nav">
-  <div id="dummy-nav" style="height: 5em;"></div>
+
-	<ul class="main-nav-ul" style="display: none">
+  <div id="dummy-nav">
+    <div class="banner">
+       <a href="/">
+        <SvgIcon className="not-logged-header-svg" href="#pinafore-logo" />
+       </a>
+    </div>
+  </div>
+
+  <ul class="main-nav-ul" style="display: none">
     {#each $navPages as navPage (navPage.href)}
       <li class="main-nav-li">
         <NavItem
@@ -12,7 +20,8 @@
         />
       </li>
     {/each}
-	</ul>
+  </ul>
+
 <div id="chat-party-hide" style="display: none !important">
   <div style="width: 100%;background:#fff">
   <div id="chat-party-global">
@@ -74,6 +83,7 @@
 </style>
 <script>
   import NavItem from './NavItem'
+  import SvgIcon from './SvgIcon.html'
   import { importNavShortcuts } from '../_utils/asyncModules/importNavShortcuts.js'
   import { store } from '../_store/store'
 
@@ -84,7 +94,8 @@
     },
     store: () => store,
     components: {
-      NavItem
+      NavItem,
+      SvgIcon
     },
     data: () => ({
       navShortcuts: undefined

src/scss/themes/ozark.scss

@@ -20,8 +20,8 @@ $nav-a-border: #ffa700;
 $nav-a-border-hover: #fff;
 $nav-active-bg: lighten($nav-a-selected-bg-hover, 15%);
 $button-primary: #ff1b3b;
-$button-primary-hover: lighten($button-primary, 25%);
+$button-primary-hover: lighten($button-primary, 12%);
-$button-primary-active: lighten($button-primary, 10%);
+$button-primary-active: lighten($button-primary, 6%);
 $main-border: #ececec;
 $article-bg: #fff;
 $deemphasized-text-color: #939393;
@@ -38,6 +38,9 @@ $deemphasized-text-color: #939393;
     --button-primary-bg: #{$button-primary};
     --button-primary-bg-hover: #{$button-primary-hover};
     --button-primary-bg-active: #{$button-primary-active};
+    --scrollbar-face-color: #{$button-primary-active};
+    --scrollbar-face-color-hover: #{$button-primary-active};
+    --scrollbar-face-color-active: #{$button-primary-active};
     --main-bg: #{$main-bg-color};
     --nav-bg: #{$nav-bg};
     --nav-text-color: #{$nav-text-color};
@@ -54,6 +57,8 @@ $deemphasized-text-color: #939393;
     --nav-total-height: 3.8em;
     --main-border: #{$main-border};
     --article-bg: #{$article-bg};
+    --focus-outline: #{$button-primary-hover};
+    --focus-width: 1px;
     --deemphasized-text-color: #{$deemphasized-text-color};
     --very-deemphasized-text-color: #{$deemphasized-text-color};
 }
@@ -85,8 +90,35 @@ div.main-content { background: var(--main-bg); }
 div.no-script { display: none; }
 
 body.not-logged-in {
+  nav#main-nav {
+    border-bottom: 4px solid #fbb8b8;
+
+    #dummy-nav {
+      display: flex;
+      height: 4em;
+
+      div.banner {
+        margin: auto 0;
+        padding-left: .5em;
+        display: flex;
+
+        svg.not-logged-header-svg {
+          width: 2.5em;
+          height: 2.5em;
+          fill: url(#grad1);
+        }
+      }
+    }
+  }
   div.not-logged-in-home h1 { color: #dd6374 !important; }
   svg.not-logged-in-home-svg { fill: url(#grad1); }
+  a.button.primary > img#btn-masto,
+  button.primary > img#btn-masto {
+    width: 1.2em;
+    margin-left: .2em;
+    position: relative;
+    top: .3em;
+  }
 }
 
 body.not-logged-in.home {

static/fedilove-no-react.js

@@ -602,5 +602,5 @@ setInterval(function() {
         __window_url     = newurl;
         fedilove_customization();
     }
-}, 250);
+}, 100);