mostly finished welcome page

Author: sharkaccino

assets/global.css

@@ -18,6 +18,25 @@
   --ease-out-func: cubic-bezier(0, 0.55, 0.45, 1);
 }
 
+/* Dark Theme */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --light-color: #503016;
+    --light-hover: #724623;
+    --dark-color: #F9EBBB;
+    --dark-hover: #FFF;
+    --light-color-inverse: #F9EBBB;
+    --light-hover-inverse: #FFF;
+    --dark-color-inverse: #503016;
+    --dark-hover-inverse: #724623;
+    --list-bg-color: #F9EBBB10;
+    --list-bg-alt-color: #F9EBBB10;
+    --link-color: #3296D3;
+    --link-hover: #7bc7f5;
+  }
+}
+
 /* General Rules */
 
 * {
@@ -39,11 +58,22 @@
 }
 
 html {
+  display: flex;
+  margin: 3rem;
+  justify-content: center;
   background-color: var(--light-color);
   color: var(--dark-color);
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 64rem;
+  margin: 0;
+}
+
 .disabled, button:disabled {
   opacity: 0.25;
   pointer-events: none;
@@ -405,31 +435,4 @@ input[type="number"] {
   display: none;
   pointer-events: none;
   user-select: none;
-}
-
-/* Dark Theme */
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --light-color: #503016;
-    --light-hover: #724623;
-    --dark-color: #F9EBBB;
-    --dark-hover: #FFF;
-    --light-color-inverse: #F9EBBB;
-    --light-hover-inverse: #FFF;
-    --dark-color-inverse: #503016;
-    --dark-hover-inverse: #724623;
-    --list-bg-color: #F9EBBB10;
-    --list-bg-alt-color: #F9EBBB10;
-    --link-color: #3296D3;
-    --link-hover: #7bc7f5;
-  }
-
-  #logo-dark {
-    display: none;
-  }
-
-  #logo-light {
-    display: initial;
-  }
 }

components/Header.module.css

@@ -0,0 +1,55 @@
+header {
+  display: flex;
+}
+
+.largeHeader {
+  flex-direction: column;
+  align-items: center;
+}
+
+.smallHeader {
+  gap: 1rem;
+  flex-direction: row;
+  align-items: center;
+}
+
+.smallHeader > .logo {
+  width: 8rem;
+}
+
+.smallHeader .version {
+  text-align: left;
+}
+
+.logo {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 10rem;
+  height: auto;
+  aspect-ratio: 1 / 1;
+}
+
+.logo > * {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.title {
+  margin: 0;
+}
+
+.version {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+
+.extlinks {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  width: 100%;
+}

components/Header.tsx

@@ -0,0 +1,32 @@
+import { Show } from "solid-js";
+
+import style from './Header.module.css';
+
+interface HeaderProps {
+  style: string
+}
+
+const Header = (props: HeaderProps) => {
+  const headerStyle = () => props.style;
+
+  return (
+    <header class={headerStyle() === "large" ? style.largeHeader : style.smallHeader}>
+      <picture class={style.logo}>
+        <source srcset="/light_256x.png" media="(prefers-color-scheme: dark)" />
+        <img src="/dark_256x.png" />
+      </picture>
+      <div>
+        <h1 class={style.title}>Auto Clear Cache</h1>
+        <h3 class={style.version}>Version {browser.runtime.getManifest().version}</h3>
+        <Show when={headerStyle() === "large"}>
+          <nav class={style.extlinks}>
+            <a href="https://github.com/JackDotJS/auto-clear-cache">GitHub</a>
+            <a href="https://jackdotjs.github.io/">My Website</a>
+          </nav>
+        </Show>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

entrypoints/welcome/PageWelcome.module.css

@@ -0,0 +1,4 @@
+.welcome {
+  text-align: center;
+  font-size: 4rem;
+}

entrypoints/welcome/PageWelcome.tsx

@@ -1,25 +1,20 @@
-const PageWelcome = () => {
+import { Component } from "solid-js";
+import Header from '~/components/Header';
+
+import style from './PageWelcome.module.css';
+
+const PageWelcome: Component = () => {
   return (
     <>
-      <header>
-        <img id="logo-light" src="../../icon/light_256x.png" />
-        <img id="logo-dark" src="../../icon/dark_256x.png" />
-        <h1>Auto Clear Cache</h1>
-        <footer>
-          <span id="ext-version">Version ...</span>
-          <div id="links">
-            <a href="https://github.com/JackDotJS/auto-clear-cache">GitHub</a>
-            <a href="https://jackdotjs.github.io/">My Website</a>
-          </div>
-        </footer>
-      </header>
+      <Header style="small"/>
       <main>
-        <h1>Welcome!</h1>
+        <h1 class={style.welcome}>Welcome!</h1>
         <p>Thanks for installing my web extension! I've spent countless hours developing this, so I hope it works well for you. Before you leave, there's a few things you should know:</p>
         <h2>This extension does nothing until you explicitly tell it to.</h2>
         <p>Throughout the development this extension, I've made a rule to avoid touching any browser data until the user (that's you!) gives explicit permission to. I don't want to be responsible for any unintentional data loss, so you should take a minute to go through the options page and make sure everything is set up to your heart's content.</p>
         <h2>Despite my best efforts, some things may break</h2>
         <p>I'm never gonna claim to be a good developer, but I do try my best to make things work. If you find a bug, I strongly encourage you to write a bug report on this project's GitHub repository.</p>
+        {/* TODO: github and website links here */}
       </main>
     </>
   );