Add fonts and design

2023-11-28 14:15:01 +00:00
parent 39e6f36e9a
commit 8ece628b30
16 changed files with 202 additions and 31 deletions
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -15,7 +15,18 @@ module.exports = {
    extend: {
      colors: {
        brand: "#FD4F00",
-      }
+      },
+	  fontFamily: {
+		display: [
+		  "Fraunces",
+		  {
+			fontVariationSettings: '"WONK" 0,"SOFT" 100',
+		  }
+		]
+	  },
+	  boxShadow: {
+		'sharp': '5px 5px 0 0 black'
+	  }
    },
  },
  plugins: [
--- a/assets/vendor/fonts/Fraunces/README.md
+++ b/assets/vendor/fonts/Fraunces/README.md
@@ -0,0 +1,7 @@
+# Self-hosting subset fonts
+
+Fonts are subset with the expectation that multiple font files will be used along with the CSS property `unicode-range` to specify unicodes present in each file. This enables a website browser to automatically download **only** the fonts needed to display text on a given site, and [works in all modern browsers](https://caniuse.com/font-unicode-range).
+
+To support only "Latin Basic" characters, you can use just the `latin_basic` font file. To use "Latin Extended" characters, you should use *both* `latin_basic` *and* `latin_ext` font files (this makes sure basic punctuation isn’t left out). For Vietnamese, you must use `latin_basic` *and* `vietnamese` subsets at minimum, but may wish to also use `latin_ext`.
+
+Files are provided along with example CSS to provide an example of how this works. Feel free to copy the fonts.css to jump-start your own projects!
--- a/assets/vendor/fonts/Fraunces/fonts.css
+++ b/assets/vendor/fonts/Fraunces/fonts.css
@@ -0,0 +1,60 @@
+/* Latin Basic, as defined by Google Fonts */
+@font-face {
+  font-family: 'Fraunces';
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('fonts/Fraunces--latin_basic.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* Latin extended, for diacritics in font which are not included in Latin Basic */
+@font-face {
+  font-family: 'Fraunces';
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('fonts/Fraunces--latin_ext.woff2') format('woff2');
+  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* Vietnamese glyphs not included in Latin Basic */
+@font-face {
+  font-family: 'Fraunces';
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('fonts/Fraunces--vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+}
+
+/* ---------------------------------------------------------------------------- */
+/* ITALICS */
+
+/* Latin Basic, as defined by Google Fonts */
+@font-face {
+  font-family: 'Fraunces';
+  font-display: swap;
+  font-weight: 100 900;
+  font-style: italic;
+  src: url('fonts/Fraunces-Italic--latin_basic.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* Latin extended, for diacritics in font which are not included in Latin Basic */
+@font-face {
+  font-family: 'Fraunces';
+  font-display: swap;
+  font-weight: 100 900;
+  font-style: italic;
+  src: url('fonts/Fraunces-Italic--latin_ext.woff2') format('woff2');
+  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* Vietnamese glyphs not included in Latin Basic */
+@font-face {
+  font-family: 'Fraunces';
+  font-display: swap;
+  font-weight: 100 900;
+  font-style: italic;
+  src: url('fonts/Fraunces-Italic--vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+}
+
--- a/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_basic.woff2
+++ b/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_basic.woff2
--- a/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_ext.woff2
+++ b/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_ext.woff2
--- a/assets/vendor/fonts/Fraunces/fonts/Fraunces--vietnamese.woff2
+++ b/assets/vendor/fonts/Fraunces/fonts/Fraunces--vietnamese.woff2
--- a/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_basic.woff2
+++ b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_basic.woff2
--- a/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_ext.woff2
+++ b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_ext.woff2
--- a/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--vietnamese.woff2
+++ b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--vietnamese.woff2
--- a/assets/vendor/fonts/Fraunces/index.html
+++ b/assets/vendor/fonts/Fraunces/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang='en'>
+	<head>
+		<meta charset='UTF-8'>
+		<meta name='viewport' content='width=device-width, initial-scale=1.0'>
+		<title>Fraunces Subset</title>
+		<link rel='stylesheet' href='fonts.css'>
+		<style>
+			html {
+				font-family: Fraunces, sans-serif;
+				margin: 1rem;
+			}
+			body {
+				max-width: 1400px;
+				margin: 5rem auto 15rem;
+			}
+			h1 {
+				font-size: 6rem;
+			}
+			h2, h3 {
+				margin-top: 3em;
+			}
+			p {
+				font-size: 48px;
+				word-break: break-all;
+				line-height: 1.75;
+				letter-spacing: 0.3em;
+				font-weight: 900;
+				font-variation-settings: SOFT 100;
+				text-align: justify;
+			}
+			.italic {
+				font-style: italic;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>
+			Fraunces Subsets
+		</h1>
+		<h2>
+			Fraunces
+		</h2>
+		<h3>
+			Latin Basic
+		</h3>
+		<p>
+			  ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬  ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ ʼ ˆ ˚ ˜ ‐ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ⁄ ⁒ ⁴ € ™ − ∕ 
+		</p>
+		<h3>
+			Latin Extended
+		</h3>
+		<p>
+			Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı Ĳ ĳ Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž Ə ƒ Ơ ơ Ư ư Ǆ ǅ ǆ Ǉ ǈ ǉ Ǌ ǋ ǌ Ǚ ǚ Ǧ ǧ Ǫ ǫ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ȁ ȁ Ȃ ȃ Ȅ ȅ Ȇ ȇ Ȉ ȉ Ȋ ȋ Ȍ ȍ Ȏ ȏ Ȑ ȑ Ȓ ȓ Ȕ ȕ Ȗ ȗ Ș ș Ț ț Ȫ ȫ Ȭ ȭ Ȱ ȱ Ȳ ȳ ȷ ə Ḉ ḉ Ḍ ḍ Ḏ ḏ Ḕ ḕ Ḗ ḗ Ḝ ḝ Ḡ ḡ Ḥ ḥ Ḫ ḫ Ḯ ḯ Ḷ ḷ Ḻ ḻ Ṃ ṃ Ṇ ṇ Ṉ ṉ Ṍ ṍ Ṏ ṏ Ṑ ṑ Ṓ ṓ Ṛ ṛ Ṟ ṟ Ṣ ṣ Ṥ ṥ Ṭ ṭ Ṯ ṯ Ṹ ṹ Ṻ ṻ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ẓ ẓ ẗ ẞ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ † ₡ ₣ ₤ ₦ ₧ ₩ ₫ ₭ ₱ ₲ ₵ ₹ ₺ ₼ ₽ 
+		</p>
+		<h3>
+			Latin Vietnamese
+		</h3>
+		<p>
+			Ă ă Đ đ Ĩ ĩ Ũ ũ Ơ ơ Ư ư Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ ₫ 
+		</p>
+		<div class=italic>
+			<h2>
+				Fraunces-Italic
+			</h2>
+			<h3>
+				Latin Basic
+			</h3>
+			<p>
+				  ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬  ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ ʼ ˆ ˚ ˜ ‐ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ⁄ ⁒ ⁴ € ™ − ∕ 
+			</p>
+			<h3>
+				Latin Extended
+			</h3>
+			<p>
+				Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı Ĳ ĳ Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž Ə ƒ Ơ ơ Ư ư Ǆ ǅ ǆ Ǉ ǈ ǉ Ǌ ǋ ǌ Ǚ ǚ Ǧ ǧ Ǫ ǫ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ȁ ȁ Ȃ ȃ Ȅ ȅ Ȇ ȇ Ȉ ȉ Ȋ ȋ Ȍ ȍ Ȏ ȏ Ȑ ȑ Ȓ ȓ Ȕ ȕ Ȗ ȗ Ș ș Ț ț Ȫ ȫ Ȭ ȭ Ȱ ȱ Ȳ ȳ ȷ ə Ḉ ḉ Ḍ ḍ Ḏ ḏ Ḕ ḕ Ḗ ḗ Ḝ ḝ Ḡ ḡ Ḥ ḥ Ḫ ḫ Ḯ ḯ Ḷ ḷ Ḻ ḻ Ṃ ṃ Ṇ ṇ Ṉ ṉ Ṍ ṍ Ṏ ṏ Ṑ ṑ Ṓ ṓ Ṛ ṛ Ṟ ṟ Ṣ ṣ Ṥ ṥ Ṭ ṭ Ṯ ṯ Ṹ ṹ Ṻ ṻ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ẓ ẓ ẗ ẞ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ † ₡ ₣ ₤ ₦ ₧ ₩ ₫ ₭ ₱ ₲ ₵ ₹ ₺ ₼ ₽ 
+			</p>
+			<h3>
+				Latin Vietnamese
+			</h3>
+			<p>
+				Ă ă Đ đ Ĩ ĩ Ũ ũ Ơ ơ Ư ư Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ ₫ 
+			</p>
+		</div>
+	</body>
+</html>
+
--- a/config/config.exs
+++ b/config/config.exs
@@ -36,7 +36,7 @@ config :esbuild,
  version: "0.17.11",
  default: [
    args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js vendor/fonts/Fraunces/fonts.css --bundle --loader:.woff2=file --target=es2017 --entry-names=[name] --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]
--- a/lib/wish_web/components/core_components.ex
+++ b/lib/wish_web/components/core_components.ex
@@ -230,8 +230,9 @@ defmodule WishWeb.CoreComponents do
    <button
      type={@type}
      class={[
-        "phx-submit-loading:opacity-75 rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
+        "phx-submit-loading:opacity-75 bg-purple-400 hover:bg-purple-500 py-2 px-3",
        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "border-2 border-black",
        @class
      ]}
      {@rest}
@@ -429,7 +430,7 @@ defmodule WishWeb.CoreComponents do
    ~H"""
    <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
      <div>
-        <h1 class="text-lg font-semibold leading-8 text-zinc-800">
+        <h1 class="text-xl font-display font-bold leading-8 text-zinc-800">
          <%= render_slot(@inner_block) %>
        </h1>
        <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
--- a/lib/wish_web/components/layouts/app.html.heex
+++ b/lib/wish_web/components/layouts/app.html.heex
@@ -1,8 +1,8 @@
 <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="/">
-        wish
+      <a class="font-display text-6xl font-black text-violet-600" href="/">
+        Wish
      </a>
    </div>
    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900"></div>
--- a/lib/wish_web/components/layouts/root.html.heex
+++ b/lib/wish_web/components/layouts/root.html.heex
@@ -8,15 +8,24 @@
      <%= assigns[:page_title] || "Wish" %>
    </.live_title>
    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <link phx-track-static rel="stylesheet" href={~p"/assets/fonts.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
    </script>
  </head>
-  <body class="bg-white antialiased">
+  <body class="bg-purple-50 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
+            navigate={~p"/items"}
+            class="text-[0.8125rem] leading-6 text-zinc-900 font-semibold hover:text-zinc-700"
+          >
+            Edit list
+          </.link>
+        </li>
        <li>
          <.link
            href={~p"/users/settings"}
--- a/lib/wish_web/live/home_live/index.ex
+++ b/lib/wish_web/live/home_live/index.ex
@@ -41,19 +41,15 @@ defmodule WishWeb.HomeLive.Index do
    ~H"""
    <div
      id={"dropdown-#{@item.id}"}
-      class="absolute z-10 w-40 bg-white origin-top right-0 whitespace-nowrap p-1 border rounded"
+      class="absolute z-10 w-40 bg-purple-100 origin-top right-0 whitespace-nowrap border border-black"
      phx-click-away={JS.hide()}
      hidden
    >
-      <.link
-        href={@item.url}
-        class="block p-1 w-full border border-white hover:bg-slate-100 hover:border-black select-none"
-        target="_blank"
-      >
+      <.link href={@item.url} class="block p-2 w-full hover:bg-purple-300 select-none" target="_blank">
        Go to URL
      </.link>
      <div
-        class="block p-1 w-full border border-white hover:bg-slate-100 hover:border-black select-none cursor-pointer"
+        class="block p-2 w-full hover:bg-purple-300 select-none cursor-pointer"
        phx-click={
          JS.push("toggle_received", value: %{"id" => @item.id})
          |> JS.hide(to: "#dropdown-#{@item.id}")
--- a/lib/wish_web/live/home_live/index.html.heex
+++ b/lib/wish_web/live/home_live/index.html.heex
@@ -1,5 +1,5 @@
 <.header>
-  Listing Items
+  Daniel's Wishlist
  <:actions>
    <.button phx-click={
      JS.push("toggle_view_state")
@@ -11,13 +11,13 @@
 </.header>

 <%= if @grid do %>
-  <div class="grid grid-cols-3 gap-2" id="items-grid">
+  <div class="grid grid-cols-3 gap-4 mt-4" id="items-grid">
    <div
      :for={item <- @items}
      phx-click={JS.navigate(~p"/details/#{item}")}
-      class="h-72 p-2 rounded hover:bg-zinc-100 active:bg-zinc-200"
+      class="p-3 hover:bg-purple-200 active:bg-purple-300 border-2 border-black hover:shadow-sharp transition cursor-pointer"
    >
-      <div class="aspect-square relative flex flex-col justify-center">
+      <div class="aspect-square relative flex flex-col justify-center bg-white border border-black">
        <img
          :if={item.image_url}
          src={item.image_url}
@@ -32,45 +32,45 @@
          </div>
        <% end %>
      </div>
-      <div class="flex flex-row justify-between">
+      <div class="flex flex-row justify-between mt-1 font-display">
        <%= item.title %>
        <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
-          <.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
+          <div class="w-7 h-7 rounded-full hover:bg-purple-300 active:bg-purple-400">
+            <.icon name="hero-ellipsis-vertical" class="w-full h-full" />
+          </div>
          <.dropdown item={item} />
        </div>
      </div>
-      <div class="text-sm">
+      <div class="text-sm text-zinc-500">
        <%= item.description %>
      </div>
    </div>
  </div>
 <% else %>
-  <div class="flex flex-col space-y-4">
+  <div class="flex flex-col mt-4 space-y-4">
    <div
      :for={item <- @items}
-      class="grid grid-cols-8 grid-rows-4 h-24 p-1 border rounded"
+      class="grid grid-cols-6 grid-rows-4 gap-3 h-56 p-3 border-2 border-black hover:shadow-sharp transition"
      phx-click={JS.navigate(~p"/details/#{item}")}
    >
-      <div class="relative flex flex-col justify-center max-h-full h-full row-span-4">
-        <img
-          :if={item.image_url}
-          src={item.image_url}
-          alt={item.title}
-          class="max-h-full rounded"
-        />
+      <div class="relative col-span-2 flex flex-col justify-center max-h-full h-full row-span-4 border border-black">
+        <img :if={item.image_url} src={item.image_url} alt={item.title} class="max-h-full" />
        <%= if item.received && !@current_user do %>
          <div class="absolute bg-red-400 text-xs text-white w-full h-7 bottom-0">
            <.icon name="hero-check-circle" />Received
          </div>
        <% end %>
      </div>
-      <div class="col-span-6 row-span-4 px-2">
+      <div class="col-span-3 text-lg font-display">
        <%= item.title %>
      </div>
      <div phx-click={JS.toggle(to: "#dropdown-#{item.id}")} class="relative">
        <.icon name="hero-ellipsis-vertical" class="w-7 h-7" />
        <.dropdown item={item} />
      </div>
+      <div class="col-span-3 row-span-2 w-full text-zinc-500">
+        <%= item.description %>
+      </div>
    </div>
  </div>
 <% end %>