refactor: use header instead of div with id

2024-09-20 15:26:15 +08:00 · 2023-09-19 23:31:13 +01:00 · 2023-09-19 23:31:13 +01:00 · 412d415207
parent cbff23e125
commit 412d415207
40 changed files with 149 additions and 145 deletions
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@ -120,7 +120,7 @@
  }
 }

-#top {
+header {
  grid-template-areas: "logo menu";
  line-height: 2.3rem;
  font-size: 2.3rem;
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@ -346,7 +346,7 @@

 //800px
@media only screen and (max-width: 50rem) {
-  #top .logo .text {
+  header .logo .text {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-top: -0.1em;
@ -509,7 +509,7 @@

 //650px
@media only screen and (max-width: 40.625rem) {
-  #top {
+  header {
    #menu {
      .textButton.account {
        .text {
@ -693,7 +693,7 @@
  .pageAbout .section .contributors {
    grid-template-columns: 1fr 1fr;
  }
-  #top .logo .bottom {
+  header .logo .bottom {
    margin-top: 0;
  }
  .pageLogin {
@ -738,7 +738,7 @@

 //550px
@media only screen and (max-width: 34.375rem) {
-  #top {
+  header {
    .logo {
      grid-template-columns: auto;
      .text {
@ -894,7 +894,7 @@
    }
  }

-  #top {
+  header {
    #menu {
      font-size: 1rem;
    }
@ -916,7 +916,7 @@
    }
  }
  #centerContent {
-    #top {
+    header {
      // grid-template-columns: 1fr auto;
      .desktopConfig {
        display: none;
@ -972,7 +972,7 @@

 //400px
@media only screen and (max-width: 25rem) {
-  #top .config {
+  header .config {
    grid-gap: 0.25rem;
    .group .buttons {
      font-size: 0.65rem;
@ -980,7 +980,7 @@
    }
  }

-  #top #menu {
+  header #menu {
    font-size: 0.75rem;
  }

--- a/frontend/src/ts/commandline/lists/navigation.ts
+++ b/frontend/src/ts/commandline/lists/navigation.ts
@ -16,7 +16,7 @@ const commands: MonkeyTypes.Command[] = [
    display: "View Leaderboards",
    icon: "fa-crown",
    exec: (): void => {
-      $("#top #menu .textButton.view-leaderboards").trigger("click");
+      $("header #menu .textButton.view-leaderboards").trigger("click");
    },
  },
  {
@ -42,7 +42,7 @@ const commands: MonkeyTypes.Command[] = [
    icon: "fa-user",
    alias: "stats",
    exec: (): void => {
-      $("#top #menu .textButton.view-account").hasClass("hidden")
+      $("header #menu .textButton.view-account").hasClass("hidden")
        ? navigate("/login")
        : navigate("/account");
    },
--- a/frontend/src/ts/controllers/account-controller.ts
+++ b/frontend/src/ts/controllers/account-controller.ts
@ -100,7 +100,7 @@ async function getDataAndInit(): Promise<boolean> {
    const msg = e.message || e;
    Notifications.add("Failed to get user data: " + msg, -1);

-    $("#top #menu .account").css("opacity", 1);
+    $("header #menu .account").css("opacity", 1);
    return false;
  }
  if (ActivePage.get() === "loading") {
@ -194,7 +194,9 @@ export async function loadUser(user: UserType): Promise<void> {
  // var providerData = user.providerData;
  LoginPage.hidePreloader();

-  $("#top .signInOut .icon").html(`<i class="fas fa-fw fa-sign-out-alt"></i>`);
+  $("header .signInOut .icon").html(
+    `<i class="fas fa-fw fa-sign-out-alt"></i>`
+  );

  // showFavouriteThemesAtTheTop();

@ -226,12 +228,12 @@ if (Auth && ConnectionState.get()) {
    console.log(`auth state changed, user ${user ? true : false}`);
    console.debug(user);
    if (user) {
-      $("#top .signInOut .icon").html(
+      $("header .signInOut .icon").html(
        `<i class="fas fa-fw fa-sign-out-alt"></i>`
      );
      await loadUser(user);
    } else {
-      $("#top .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
+      $("header .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
      if (window.location.pathname === "/account") {
        window.history.replaceState("", "", "/login");
      }
@ -268,7 +270,7 @@ if (Auth && ConnectionState.get()) {
    // await UpdateConfig.loadPromise;
    const search = window.location.search;
    const hash = window.location.hash;
-    $("#top .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
+    $("header .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
    if (window.location.pathname === "/account") {
      window.history.replaceState("", "", "/login");
    }
@ -439,7 +441,7 @@ export function signOut(): void {
      DB.setSnapshot(undefined);
      LoginPage.enableSignUpButton();
      LoginPage.enableInputs();
-      $("#top .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
+      $("header .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
      setTimeout(() => {
        hideFavoriteQuoteLength();
      }, 125);
@ -613,7 +615,7 @@ $(".pageLogin .login button.signInWithGoogle").on("click", () => {
 // signInWithGitHub();
 // });

-$("#top .signInOut").on("click", () => {
+$("header .signInOut").on("click", () => {
  if (Auth === undefined) {
    Notifications.add("Authentication uninitialized", -1, {
      duration: 3,
--- a/frontend/src/ts/controllers/challenge-controller.ts
+++ b/frontend/src/ts/controllers/challenge-controller.ts
@ -204,7 +204,7 @@ export async function setup(challengeName: string): Promise<boolean> {
    Notifications.add(message, -1);
    ManualRestart.set();
    setTimeout(() => {
-      $("#top .config").removeClass("hidden");
+      $("header .config").removeClass("hidden");
      $(".page.pageTest").removeClass("hidden");
    }, 250);
    return false;
@ -217,7 +217,7 @@ export async function setup(challengeName: string): Promise<boolean> {
      Notifications.add("Challenge not found", 0);
      ManualRestart.set();
      setTimeout(() => {
-        $("#top .config").removeClass("hidden");
+        $("header .config").removeClass("hidden");
        $(".page.pageTest").removeClass("hidden");
      }, 250);
      return false;
@ -307,7 +307,7 @@ export async function setup(challengeName: string): Promise<boolean> {
    }
    ManualRestart.set();
    notitext = challenge.message;
-    $("#top .config").removeClass("hidden");
+    $("header .config").removeClass("hidden");
    $(".page.pageTest").removeClass("hidden");

    if (notitext === undefined) {
--- a/frontend/src/ts/elements/account-button.ts
+++ b/frontend/src/ts/elements/account-button.ts
@ -13,11 +13,13 @@ export function skipXpBreakdown(): void {

 export function loading(state: boolean): void {
  if (state) {
-    $("#top #menu .account").css("opacity", 1).css("pointer-events", "none");
+    $("header #menu .account").css("opacity", 1).css("pointer-events", "none");

    if (usingAvatar) {
-      $("#top #menu .account .loading").css("opacity", 1).removeClass("hidden");
-      $("#top #menu .account .avatar")
+      $("header #menu .account .loading")
+        .css("opacity", 1)
+        .removeClass("hidden");
+      $("header #menu .account .avatar")
        .stop(true, true)
        .css({ opacity: 1 })
        .animate(
@ -26,11 +28,11 @@ export function loading(state: boolean): void {
          },
          100,
          () => {
-            $("#top #menu .account .avatar").addClass("hidden");
+            $("header #menu .account .avatar").addClass("hidden");
          }
        );
    } else {
-      $("#top #menu .account .loading")
+      $("header #menu .account .loading")
        .stop(true, true)
        .removeClass("hidden")
        .css({ opacity: 0 })
@ -40,7 +42,7 @@ export function loading(state: boolean): void {
          },
          100
        );
-      $("#top #menu .account .user")
+      $("header #menu .account .user")
        .stop(true, true)
        .css({ opacity: 1 })
        .animate(
@ -49,16 +51,16 @@ export function loading(state: boolean): void {
          },
          100,
          () => {
-            $("#top #menu .account .user").addClass("hidden");
+            $("header #menu .account .user").addClass("hidden");
          }
        );
    }
  } else {
-    $("#top #menu .account").css("opacity", 1).css("pointer-events", "auto");
+    $("header #menu .account").css("opacity", 1).css("pointer-events", "auto");

    if (usingAvatar) {
-      $("#top #menu .account .loading").css("opacity", 1).addClass("hidden");
-      $("#top #menu .account .avatar")
+      $("header #menu .account .loading").css("opacity", 1).addClass("hidden");
+      $("header #menu .account .avatar")
        .stop(true, true)
        .removeClass("hidden")
        .css({ opacity: 0 })
@ -69,7 +71,7 @@ export function loading(state: boolean): void {
          100
        );
    } else {
-      $("#top #menu .account .loading")
+      $("header #menu .account .loading")
        .stop(true, true)
        .css({ opacity: 1 })
        .animate(
@ -78,10 +80,10 @@ export function loading(state: boolean): void {
          },
          100,
          () => {
-            $("#top #menu .account .loading").addClass("hidden");
+            $("header #menu .account .loading").addClass("hidden");
          }
        );
-      $("#top #menu .account .user")
+      $("header #menu .account .user")
        .stop(true, true)
        .removeClass("hidden")
        .css({ opacity: 0 })
@ -102,8 +104,8 @@ export async function update(
 ): Promise<void> {
  if (Auth?.currentUser) {
    if (xp !== undefined) {
-      $("#top #menu .level").text(Math.floor(Misc.getLevel(xp)));
-      $("#top #menu .bar").css({
+      $("header #menu .level").text(Math.floor(Misc.getLevel(xp)));
+      $("header #menu .bar").css({
        width: (Misc.getLevel(xp) % 1) * 100 + "%",
      });
    }
@ -111,20 +113,20 @@ export async function update(
      Misc.getDiscordAvatarUrl(discordId, discordAvatar).then(
        (discordAvatarUrl) => {
          if (discordAvatarUrl) {
-            $("#top #menu .account .avatar").css(
+            $("header #menu .account .avatar").css(
              "background-image",
              `url(${discordAvatarUrl})`
            );
            usingAvatar = true;

-            $("#top #menu .account .user").addClass("hidden");
-            $("#top #menu .account .avatar").removeClass("hidden");
+            $("header #menu .account .user").addClass("hidden");
+            $("header #menu .account .avatar").removeClass("hidden");
          }
        }
      );
    } else {
-      $("#top #menu .account .avatar").addClass("hidden");
-      $("#top #menu .account .user").removeClass("hidden");
+      $("header #menu .account .avatar").addClass("hidden");
+      $("header #menu .account .user").removeClass("hidden");
    }
    $("#menu .textButton.account")
      .removeClass("hidden")
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@ -337,9 +337,9 @@ function fillNotifications(): void {

 export function setNotificationBubbleVisible(tf: boolean): void {
  if (tf) {
-    $("#top #menu .showAlerts .notificationBubble").removeClass("hidden");
+    $("header #menu .showAlerts .notificationBubble").removeClass("hidden");
  } else {
-    $("#top #menu .showAlerts .notificationBubble").addClass("hidden");
+    $("header #menu .showAlerts .notificationBubble").addClass("hidden");
  }
 }

@ -430,7 +430,7 @@ $("#alertsPopupWrapper .accountAlerts").on("click", ".deleteAll", () => {
  }
 });

-$("#top #menu .showAlerts").on("click", () => {
+$("header #menu .showAlerts").on("click", () => {
  show();
 });

--- a/frontend/src/ts/elements/leaderboards.ts
+++ b/frontend/src/ts/elements/leaderboards.ts
@ -881,13 +881,13 @@ $(document).on("keydown", (event) => {
  }
 });

-$("#top #menu").on("click", ".textButton", (e) => {
+$("header #menu").on("click", ".textButton", (e) => {
  if ($(e.currentTarget).hasClass("leaderboards")) {
    show();
  }
 });

-$(document).on("keypress", "#top #menu .textButton", (e) => {
+$(document).on("keypress", "header #menu .textButton", (e) => {
  if (e.key === "Enter") {
    $(e.currentTarget).trigger("click");
  }
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@ -11,7 +11,7 @@ export function set(foc: boolean, withCursor = false): void {
  if (foc && !state) {
    state = true;
    Caret.stopAnimation();
-    $("#top").addClass("focus");
+    $("header").addClass("focus");
    $("#bottom").addClass("focus");
    if (!withCursor) $("body").css("cursor", "none");
    $("#middle").addClass("focus");
@ -30,7 +30,7 @@ export function set(foc: boolean, withCursor = false): void {
  } else if (!foc && state) {
    state = false;
    Caret.startAnimation();
-    $("#top").removeClass("focus");
+    $("header").removeClass("focus");
    $("#bottom").removeClass("focus");
    $("body").css("cursor", "default");
    $("#middle").removeClass("focus");
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@ -2,11 +2,11 @@ import * as ConfigEvent from "../observables/config-event";
 // import * as Misc from "../utils/misc";

 // export function show() {
-//   $("#top .config").removeClass("hidden").css("opacity", 1);
+//   $("header .config").removeClass("hidden").css("opacity", 1);
 // }

 // export function hide() {
-//   $("#top .config").css("opacity", 0).addClass("hidden");
+//   $("header .config").css("opacity", 0).addClass("hidden");
 // }

 export function show(): void {
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@ -1578,7 +1578,7 @@ $("#popups").on(
  }
 );

-$("#top").on("click", "#menu #startTestButton, .logo", () => {
+$("header").on("click", "#menu #startTestButton, .logo", () => {
  if (ActivePage.get() === "test") restart();
 });

--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@ -411,7 +411,7 @@ export async function screenshot(): Promise<void> {
    $(".pageTest .buttons").removeClass("hidden");
    $("noscript").removeClass("hidden");
    $("#nocss").removeClass("hidden");
-    $("#top, #bottom").removeClass("invisible");
+    $("header, #bottom").removeClass("invisible");
    $("#result").removeClass("noBalloons");
    if (revertCookie) $("#cookiePopupWrapper").removeClass("hidden");
    if (revealReplay) $("#resultReplay").removeClass("hidden");
@ -450,7 +450,7 @@ export async function screenshot(): Promise<void> {
  $("#ad-result-small-wrapper").addClass("hidden");
  $("#testConfig").addClass("hidden");
  $(".page.pageTest").prepend("<div class='screenshotSpacer'></div>");
-  $("#top, #bottom").addClass("invisible");
+  $("header, #bottom").addClass("invisible");
  $("#result").addClass("noBalloons");
  if (revertCookie) $("#cookiePopupWrapper").addClass("hidden");

--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@ -43,7 +43,7 @@ if (isLocalhost()) {
  window.onerror = function (error): void {
    Notifications.add(error.toString(), -1);
  };
-  $("#top .logo .top").text("localhost");
+  $("header .logo .top").text("localhost");
  $("head title").text($("head title").text() + " (localhost)");
  $("body").append(
    `<div class="devIndicator tl">local</div><div class="devIndicator br">local</div>`
--- a/frontend/static/email-handler.html
+++ b/frontend/static/email-handler.html
@ -44,7 +44,7 @@
    <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <style>
-      #top {
+      header {
        font-size: 2.5rem;
      }

@ -97,7 +97,7 @@

  <body>
    <div id="centerContent">
-      <div id="top">
+      <div header>
        <div class="logo">
          <div class="icon">
            <svg
@ -453,7 +453,7 @@
      false
    );

-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
      window.location = "/";
    });
  </script>
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@ -42,7 +42,7 @@ body.crtmode #scanline {
  );
  animation: scanline 10s linear infinite;
 }
-body.crtmode #top,
+body.crtmode header,
 body.crtmode #middle,
 body.crtmode #bottom,
 body.crtmode #result,
@ -102,7 +102,7 @@ body.crtmode .logo .icon {
 body.crtmode .avatars,
 body.crtmode #menu .account .avatar,
 body.crtmode #menu .account .levelAndBar,
-body.crtmode #top.focus .logo .icon {
+body.crtmode header.focus .logo .icon {
  filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
    drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
 }
--- a/frontend/static/html/header.html
+++ b/frontend/static/html/header.html
@ -1,4 +1,4 @@
-<div id="top">
+<header>
  <a class="logo" href="/" router-link>
    <div class="icon">
      <svg
@ -141,4 +141,4 @@
    <i class="fas fa-sign-out-alt"></i>
    sign out
  </div> -->
-</div>
+</header>
--- a/frontend/static/privacy-policy.html
+++ b/frontend/static/privacy-policy.html
@ -37,7 +37,7 @@
    <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <style>
-      #top {
+      header {
        font-size: 2.5rem;
      }

@ -61,7 +61,7 @@

  <body>
    <div id="centerContent">
-      <div id="top">
+      <header>
        <div class="logo">
          <div class="icon">
            <svg
@ -107,7 +107,7 @@
            <span style="color: var(--main-color)">Privacy Policy</span>
          </div>
        </div>
-      </div>
+      </header>
      <div id="middle">
        <p>
          <!-- make sure to update this date every time the policy is changed -->
@ -471,7 +471,7 @@
      }
    }

-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
      window.location = "/";
    });
  </script>
--- a/frontend/static/security-policy.html
+++ b/frontend/static/security-policy.html
@ -37,7 +37,7 @@
    <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <style>
-      #top {
+      header {
        font-size: 2.5rem;
      }

@ -65,7 +65,7 @@

  <body>
    <div id="centerContent">
-      <div id="top">
+      <header>
        <div class="logo">
          <div class="icon">
            <svg
@ -111,7 +111,7 @@
            <span style="color: var(--main-color)">Security Policy</span>
          </div>
        </div>
-      </div>
+      </header>
      <div id="middle">
        <p>
          We take the security and integrity of Monkeytype very seriously. If
@ -176,7 +176,7 @@
      }
    }

-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
      window.location = "/";
    });
  </script>
--- a/frontend/static/terms-of-service.html
+++ b/frontend/static/terms-of-service.html
@ -37,7 +37,7 @@
    <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <style>
-      #top {
+      header {
        font-size: 2.5rem;
      }

@ -61,7 +61,7 @@

  <body>
    <div id="centerContent">
-      <div id="top">
+      <header>
        <div class="logo">
          <div class="icon">
            <svg
@ -107,7 +107,7 @@
            <span style="color: var(--main-color)">Terms of Service</span>
          </div>
        </div>
-      </div>
+      </header>
      <div id="middle">
        <!-- make sure to update this date every time the tos is changed -->
        <p>These terms of service were last updated on June 19, 2022.</p>
@ -374,7 +374,7 @@
      }
    }

-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
      window.location = "/";
    });
  </script>
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@ -55,16 +55,16 @@
  animation: aurora-bg 5s linear infinite;
 }

-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
  animation: aurora 5s linear infinite;
--- a/frontend/static/themes/blueberry_dark.css
+++ b/frontend/static/themes/blueberry_dark.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #d996ac;
 }

-#top .logo .bottom {
+header .logo .bottom {
  color: #962f7e;
 }
--- a/frontend/static/themes/blueberry_light.css
+++ b/frontend/static/themes/blueberry_light.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #d996ac;
 }

-#top .logo .bottom {
+header .logo .bottom {
  color: #df4576;
 }
--- a/frontend/static/themes/camping.css
+++ b/frontend/static/themes/camping.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #7e3a39;
 }

-#top .logo .bottom {
+header .logo .bottom {
  color: #ad4f4e;
 }
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@ -12,17 +12,17 @@
  --colorful-error-extra-color: #b03c47;
 }

-#top .logo .text {
+header .logo .text {
  -webkit-transform: rotateY(180deg);
  unicode-bidi: bidi-override;
  transition: 0.5s;
 }

-#top .logo .top {
+header .logo .top {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
 }

-#top .logo .icon {
+header .logo .icon {
  -webkit-transform: rotateX(180deg);
  transition: 0.5s;
 }
@ -73,23 +73,23 @@
  align-content: right;
 }

-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
  background: var(--sub-color);
  -webkit-transform: rotateY(180deg) !important;
 }

-#top.focus .logo .text,
-#top.focus .logo:before,
-#top.focus .logo:after {
+header.focus .logo .text,
+header.focus .logo:before,
+header.focus .logo:after {
  -webkit-transform: rotateY(0deg);
  direction: ltr;
 }

-#top.focus .logo .icon,
-#top.focus .logo:before,
-#top.focus .logo:after {
+header.focus .logo .icon,
+header.focus .logo:before,
+header.focus .logo:after {
  -webkit-transform: rotateX(0deg);
  direction: ltr;
 }
@ -187,7 +187,7 @@ body.crtmode {
      drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
  }

-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
    box-shadow: 3px 0 1px var(--crt-sub-color-glow),
      -3px 0 var(--crt-sub-color-glow);
  }
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@ -43,6 +43,6 @@
  }
 }

-#top > div.logo > div.icon > svg path {
+header > div.logo > div.icon > svg path {
  animation: 10s linear infinite 0.1s rgb;
 }
--- a/frontend/static/themes/dmg.css
+++ b/frontend/static/themes/dmg.css
@ -15,15 +15,15 @@
  gap: 0.5rem;
 }

-#top.focus #menu .textButton {
+header.focus #menu .textButton {
  background: var(--bg-color);
  size: 1rem;
 }
-#top.focus #menu .textButton:nth-child(1) {
+header.focus #menu .textButton:nth-child(1) {
  background: #e34c6c;
 }
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu:before,
+header.focus #menu:after {
  background: var(--sub-color);
 }

@ -39,7 +39,7 @@ body.crtmode {
      -3px 0 var(--crt-main-color-glow), 0 0 3px;
  }

-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
    box-shadow: none;
    &:nth-child(1) {
      box-shadow: 3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
--- a/frontend/static/themes/dots.css
+++ b/frontend/static/themes/dots.css
@ -15,9 +15,9 @@
  gap: 0.5rem;
 }

-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
  background: var(--sub-color);
 }

@ -51,7 +51,7 @@
  background: #4acb8a;
 }

-#top.focus #menu .textButton:nth-child(6) {
+header.focus #menu .textButton:nth-child(6) {
  background: transparent !important;
 }

@ -84,7 +84,7 @@
    border-radius: 10rem;
 } */

-#top.focus #menu .textButton.discord::after {
+header.focus #menu .textButton.discord::after {
  border-color: transparent;
 }

@ -123,7 +123,7 @@ body.crtmode {
      -3px 0 color-mix(in srgb, #ff9349 30%, transparent), 0 0 3px;
  }

-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
    box-shadow: 3px 0 1px var(--crt-sub-color-glow),
      -3px 0 var(--crt-sub-color-glow);

--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@ -55,16 +55,16 @@
  animation: fire-bg 5s linear infinite;
 }

-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
  animation: fire 5s linear infinite;
--- a/frontend/static/themes/fundamentals.css
+++ b/frontend/static/themes/fundamentals.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #413157;
 }

-#top .logo .bottom {
+header .logo .bottom {
  color: #196378;
 }
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@ -55,16 +55,16 @@
  animation: pastel-bg 5s linear infinite;
 }

-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
  animation: pastel 5s linear infinite;
--- a/frontend/static/themes/ishtar.css
+++ b/frontend/static/themes/ishtar.css
@ -11,6 +11,6 @@
  --colorful-error-extra-color: #849224;
 }

-#top .logo .bottom {
+header .logo .bottom {
  color: #fae1c3;
 }
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@ -11,7 +11,7 @@
  --colorful-error-extra-color: #8f2f19;
 }

-#top .logo .bottom {
+header .logo .bottom {
  color: #f4bc46;
 }

--- a/frontend/static/themes/moonlight.css
+++ b/frontend/static/themes/moonlight.css
@ -14,9 +14,9 @@
 #menu {
  gap: 0.5rem;
 }
-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
  background: var(--bg-color);
 }
 #menu .textButton:nth-child(1),
@ -58,7 +58,7 @@
 #menu .textButton:nth-child(8) {
  background: #c69f68;
 } */
-#top.focus #menu .textButton.discord::after {
+header.focus #menu .textButton.discord::after {
  border-color: transparent;
 }

@ -70,7 +70,7 @@ body.crtmode {
    box-shadow: 3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
      -3px 0 color-mix(in srgb, #c69f68 30%, transparent), 0 0 3px;
  }
-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
    box-shadow: none;
  }
 }
--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@ -11,11 +11,11 @@
  --colorful-error-extra-color: #667c91;
 }

-#top .logo .bottom {
+header .logo .bottom {
  color: #8fadc9;
 }

-#top .config .group .buttons .textButton.active {
+header .config .group .buttons .textButton.active {
  color: #daa99b;
 }

--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@ -9,7 +9,7 @@
  --colorful-error-color: #ff0008;
 }

-#top .logo .text {
+header .logo .text {
  background: linear-gradient(
    90deg,
    #60b6ce,
@ -29,7 +29,7 @@
  animation: rainbow-gradient 30s alternate ease-in-out infinite;
 }

-#top .logo .top,
+header .logo .top,
 .account .levelAndBar .level,
 [aria-label][data-balloon-pos]::after {
  -webkit-text-fill-color: initial;
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@ -85,16 +85,16 @@
  animation: rgb-bg 5s linear infinite !important;
 }

-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
  animation: rgb 5s linear infinite;
@ -113,6 +113,6 @@ a:hover,
  animation: rgb 5s linear infinite;
 }

-#top .logo path {
+header .logo path {
  animation: rgb-fill 5s linear infinite;
 }
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@ -19,7 +19,7 @@
  color: #c6915e;
 }

-#top .logo .text {
+header .logo .text {
  background-color: #ffffff; /* fallback */
  background: -webkit-linear-gradient(
    #2d2076,
@ -36,7 +36,7 @@
  -webkit-text-fill-color: transparent;
 }

-#top .logo .text .top {
+header .logo .text .top {
  /* prevent it from being transparent */
  -webkit-text-fill-color: #385eca;
 }
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@ -11,11 +11,11 @@
  --colorful-error-extra-color: #d8d8d8;
 }

-#top .logo .icon {
+header .logo .icon {
  color: #8c3230;
 }

-#top .logo .text {
+header .logo .text {
  color: #557d8d;
 }

@ -39,10 +39,10 @@
  color: white;
 }

-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover {
  animation: shadow-repeat 3s linear infinite forwards;
 }
--- a/frontend/static/themes/snes.css
+++ b/frontend/static/themes/snes.css
@ -15,9 +15,9 @@
  gap: 0.5rem;
 }

-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
  background: #99989f;
 }

@ -50,7 +50,7 @@
  background: #a692d7;
 }

-#top.focus #menu .textButton.discord::after {
+header.focus #menu .textButton.discord::after {
  border-color: transparent;
 }

@ -86,7 +86,7 @@ body.crtmode {
      -3px 0 color-mix(in srgb, #a692d7 30%, transparent), 0 0 3px;
  }

-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
    box-shadow: 3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
      -3px 0 color-mix(in srgb, #99989f 30%, transparent), 0 0 3px;
  }
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@ -43,16 +43,16 @@
  animation: trance-bg 5s linear infinite;
 }

-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
  animation-name: none !important;
 }

 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
  animation: trance 5s linear infinite;