basic style homepage

podlove · Nov 19, 2023 · fb5ff48 · fb5ff48
1 parent cc6263d
commit fb5ff48
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 297 deletions.
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -13,8 +13,13 @@ module.exports = {
   ],
   theme: {
     extend: {
+      backgroundImage: {
+        "page-header": "url('/images/header.webp')"
+      },
       colors: {
         brand: "#FD4F00",
+        cta: "#EF8376",
+        "page-border": "#C0C0C0",
       }
     },
   },
@@ -25,15 +30,15 @@ module.exports = {
     //
     //     <div class="phx-click-loading:animate-ping">
     //
-    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
-    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
-    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
+    plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
 
     // Embeds Heroicons (https://heroicons.com) into your app.css bundle
     // See your `CoreComponents.icon/1` for more information.
     //
-    plugin(function({matchComponents, theme}) {
+    plugin(function ({ matchComponents, theme }) {
       let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
       let values = {}
       let icons = [
@@ -44,11 +49,11 @@ module.exports = {
       icons.forEach(([suffix, dir]) => {
         fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
           let name = path.basename(file, ".svg") + suffix
-          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
         })
       })
       matchComponents({
-        "hero": ({name, fullPath}) => {
+        "hero": ({ name, fullPath }) => {
           let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
           return {
             [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
@@ -62,7 +67,7 @@ module.exports = {
             "height": theme("spacing.5")
           }
         }
-      }, {values})
+      }, { values })
     })
   ]
 }
diff --git a/lib/radiator_web/components/layouts/app.html.heex b/lib/radiator_web/components/layouts/app.html.heex
@@ -1,31 +1,53 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
-  </div>
+<header class="text-white bg-fixed bg-center bg-cover bg-page-header">
+  <nav class="inset-x-0 py-6 overflow-hidden text-center">
+    <ul class={[
+      "relative inline-block px-4 border-l border-r border-page-border/40",
+      "before:border-page-border/40 before:left-full before:h-1 before:w-screen before:border-t before:border-b before:absolute before:top-1/2 before:-translate-y-1/2",
+      "after:border-page-border/40 after:right-full after:h-1 after:w-screen after:border-t after:border-b after:absolute after:top-1/2 after:-translate-y-1/2"
+    ]}>
+      <li class="inline-block">
+        <.link href={~p"/"} class="px-4 py-2">
+          Home
+        </.link>
+      </li>
+      <%= if @current_user do %>
+        <li class="inline-block">
+          <.link href={~p"/admin"} class="px-4 py-2">
+            Admin
+          </.link>
+        </li>
+        <!--
+        <li class="inline-block">
+          <%= @current_user.email %>
+        </li>
+        -->
+        <li class="inline-block">
+          <.link href={~p"/users/settings"} class="px-4 py-2">
+            Settings
+          </.link>
+        </li>
+        <li class="inline-block">
+          <.link href={~p"/users/log_out"} method="delete" class="px-4 py-2">
+            Log out
+          </.link>
+        </li>
+      <% else %>
+        <li class="inline-block">
+          <.link href={~p"/users/register"} class="px-4 py-2">
+            Register
+          </.link>
+        </li>
+        <li class="inline-block">
+          <.link href={~p"/users/log_in"} class="px-4 py-2">
+            Log in
+          </.link>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
 </header>
 <main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
+  <div class="max-w-2xl mx-auto">
     <.flash_group flash={@flash} />
     <%= @inner_content %>
   </div>

diff --git a/lib/radiator_web/components/layouts/root.html.heex b/lib/radiator_web/components/layouts/root.html.heex
@@ -4,55 +4,20 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <meta name="robots" content="noindex,nofollow" />
+    <meta
+      name="description"
+      content="Radiator is the 100% open source podcast hosting project for the next century of the internet."
+    />
+    <.live_title suffix=" · Radiator 🔥">
       <%= assigns[:page_title] || "Radiator" %>
     </.live_title>
+    <!--<link rel="canonical" href="" />-->
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
-    <ul class="relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">
-      <%= if @current_user do %>
-        <li class="text-[0.8125rem] leading-6 text-zinc-900">
-          <%= @current_user.email %>
-        </li>
-        <li>
-          <.link
-            href={~p"/users/settings"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Settings
-          </.link>
-        </li>
-        <li>
-          <.link
-            href={~p"/users/log_out"}
-            method="delete"
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Log out
-          </.link>
-        </li>
-      <% else %>
-        <li>
-          <.link
-            href={~p"/users/register"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Register
-          </.link>
-        </li>
-        <li>
-          <.link
-            href={~p"/users/log_in"}
-            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
-          >
-            Log in
-          </.link>
-        </li>
-      <% end %>
-    </ul>
+  <body class="antialiased bg-white">
     <%= @inner_content %>
   </body>
 </html>