Add mono font; continue v3 implementation

tighten · Jul 11, 2024 · 0162159 · 0162159
1 parent 8868957
commit 0162159
Show file tree

Hide file tree

Showing 18 changed files with 111 additions and 27 deletions.
diff --git a/public/fonts/pitch-sans-bold-italic.woff2 b/public/fonts/pitch-sans-bold-italic.woff2
diff --git a/public/fonts/pitch-sans-bold.woff2 b/public/fonts/pitch-sans-bold.woff2
diff --git a/public/fonts/pitch-sans-light-italic.woff2 b/public/fonts/pitch-sans-light-italic.woff2
diff --git a/public/fonts/pitch-sans-light.woff2 b/public/fonts/pitch-sans-light.woff2
diff --git a/public/fonts/pitch-sans-medium-italic.woff2 b/public/fonts/pitch-sans-medium-italic.woff2
diff --git a/public/fonts/pitch-sans-medium.woff2 b/public/fonts/pitch-sans-medium.woff2
diff --git a/public/fonts/pitch-sans-regular-italic.woff2 b/public/fonts/pitch-sans-regular-italic.woff2
diff --git a/public/fonts/pitch-sans-regular.woff2 b/public/fonts/pitch-sans-regular.woff2
diff --git a/public/fonts/pitch-sans-semibold-italic.woff2 b/public/fonts/pitch-sans-semibold-italic.woff2
diff --git a/public/fonts/pitch-sans-semibold.woff2 b/public/fonts/pitch-sans-semibold.woff2
diff --git a/public/images/arrow-back.svg b/public/images/arrow-back.svg
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -5,3 +5,73 @@
 html {
     scroll-behavior: smooth;
 }
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: url('/fonts/pitch-sans-light.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: italic;
+    font-weight: 300;
+    src: url('/fonts/pitch-sans-light-italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/pitch-sans-regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: italic;
+    font-weight: 400;
+    src: url('/fonts/pitch-sans-regular-italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/pitch-sans-medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: italic;
+    font-weight: 500;
+    src: url('/fonts/pitch-sans-medium-italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/pitch-sans-semibold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: italic;
+    font-weight: 600;
+    src: url('/fonts/pitch-sans-semibold-italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/fonts/pitch-sans-bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Pitch Sans';
+    font-style: italic;
+    font-weight: 700;
+    src: url('/fonts/pitch-sans-bold-italic.woff2') format('woff2');
+}
diff --git a/resources/views/components/org-in-list.blade.php b/resources/views/components/org-in-list.blade.php
@@ -10,12 +10,12 @@ class="group relative cursor-pointer rounded-lg bg-black/4 p-4 backdrop-blur-lg
     <h2 class="mb-5 text-xl font-bold">
         <img src="{{ $org->favicon }}" alt="{{ $org->name }}" class="mr-2 inline-block w-9 rounded-lg" />
         {{ $org->name }}
-        {{-- <a href="{{ $org->url }}">@include('icons.link')</a> --}}
     </h2>
     <div class="relative aspect-[600/444] overflow-hidden rounded border border-black/4">
         <div class="absolute bottom-0 z-50 h-full w-full"></div>
         <img
-            alt=""
+            loading="lazy"
+            alt="{{ $org->name }}"
             width="540"
             height="400"
             class="aspect-[600/444] max-w-full rounded-sm drop-shadow-[0_5px_5px_rgba(0,0,0,0.5)] transition duration-300 group-hover:scale-115"

diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -1,7 +1,7 @@
 <x-public-layout>
     <livewire:orgs-list />
 
-    <div class="mt-36 text-center text-bgrey-500 md:text-2xl" id="about">
+    <div class="mt-24 md:mt-36 text-center text-bgrey-500 md:text-2xl" id="about">
         <h2 class="mb-6 text-2xl font-bold uppercase text-black md:text-4xl">About</h2>
 
         <div class="mx-auto mb-6 max-w-4xl">

diff --git a/resources/views/layouts/public.blade.php b/resources/views/layouts/public.blade.php
@@ -21,27 +21,32 @@ class="bg-cover bg-fixed bg-no-repeat font-sans text-black antialiased"
         <div class="relative flex min-h-screen flex-col items-center">
             <div class="relative w-full max-w-2xl px-6 lg:max-w-8xl">
                 <header class="pb-10 pt-4">
+                    @if (in_array(request()->route()->getName(), ['organizations.show']))
+                        <a href="/"><img src="/images/arrow-back.svg" alt="<-" class="inline-block" /> Back</a>
+                    @endif
+                    <a
+                        href="/"
+                        class="mb-5 mt-8 flex justify-center text-5xl font-bold hover:text-black/70 lg:col-start-2 w-72 mx-auto md:w-auto"
+                    >
+                        <h1><img src="/images/bwl-logo.svg" alt="Built With Laravel" class="w-144" /></h1>
+                    </a>
+
                     <a
                         href="https://tighten.com/"
-                        class="group flex flex-1 justify-center text-xs font-bold uppercase tracking-wide text-bgrey-400 hover:text-bgrey-500 md:justify-end"
+                        class="group w-48 lg:top-6 lg:right-0 lg:absolute text-xs mb-8 font-bold block mx-auto uppercase tracking-wide text-bgrey-400 hover:text-bgrey-500"
                     >
                         <span class="mr-2 mt-1">Curated by</span>
                         <img
                             src="/images/tighten-logo.svg"
                             alt="Tighten"
                             width="100"
                             height="22"
-                            class="transition group-hover:scale-110"
+                            class="transition group-hover:scale-110 inline-block"
                         />
                     </a>
-                    <a
-                        href="/"
-                        class="mb-5 mt-8 flex justify-center text-5xl font-bold hover:text-black/70 lg:col-start-2"
-                    >
-                        <h1><img src="/images/bwl-logo.svg" alt="Built With Laravel" class="w-144" /></h1>
-                    </a>
+
                     <div x-data="{ expanded: false }">
-                        <h2 class="text-center text-xl text-bgrey-400 md:text-3xl">
+                        <h2 class="text-center text-2xl max-w-xs mx-auto text-bgrey-400 md:text-3xl">
                             A curated catalog of organizations using Laravel
                             <a
                                 href="#"

diff --git a/resources/views/livewire/orgs-list.blade.php b/resources/views/livewire/orgs-list.blade.php
@@ -1,16 +1,16 @@
 <div>
-    <div class="mb-10">
-        <div class="flex flex-wrap justify-center text-xs font-bold uppercase md:text-sm">
+    <div class="mb-2 md:mb-10">
+        <div class="flex flex-wrap justify-center text-sm font-bold uppercase md:text-base font-mono">
             <a
                 href="/"
-                class="{{ $filterTechnology == null ? 'border-tighten-yellow text-black hover:border-tighten-yellow' : 'text-gray-400 hover:text-gray-600 hover:border-gray-400 ' }} border-b-2 px-3 py-1 transition duration-300 active:border-tighten-yellow active:text-tighten-yellow"
+                class="{{ $filterTechnology == null ? 'border-tighten-yellow text-black hover:border-tighten-yellow' : 'text-gray-400 hover:text-gray-600 hover:border-gray-400 ' }} border-b-2 border-black/10 px-3 py-1 transition duration-300 active:border-tighten-yellow active:text-tighten-yellow"
             >
-                All Technologies
+                All <span class="hidden md:inline-block"> Technologies</span>
             </a>
             @foreach ($this->technologies as $tech)
                 <a
                     href="{{ route('technologies.show', $tech->slug) }}"
-                    class="{{ $filterTechnology == $tech->slug ? 'border-tighten-yellow hover:border-tighten-yellow text-black ' : 'text-bgrey-400 hover:text-gray-600 hover:border-gray-400 ' }} border-b-2 px-3 py-1 transition duration-300 active:border-tighten-yellow active:text-tighten-yellow"
+                    class="{{ $filterTechnology == $tech->slug ? 'border-tighten-yellow hover:border-tighten-yellow text-black ' : 'text-bgrey-400 hover:text-gray-600 hover:border-gray-400 ' }} border-b-2 border-black/10 px-3 py-1 transition duration-300 active:border-tighten-yellow active:text-tighten-yellow"
                 >
                     {{ $tech->name }}
                 </a>

diff --git a/resources/views/organizations/show.blade.php b/resources/views/organizations/show.blade.php
@@ -1,23 +1,23 @@
 <x-public-layout>
-    <div class="grid-cols-4 gap-10 md:grid">
+    <div class="grid-cols-3 xl:grid-cols-4 gap-10 lg:grid">
         <div>
-            <div class="rounded-lg bg-black/4 p-4 backdrop-blur-lg">
-                <h2 class="mb-5 text-xl font-bold">
+            <div class="rounded-xl bg-black/4 p-4 backdrop-blur-lg">
+                <h2 class="mb-3 text-xl font-bold">
                     <img
                         src="{{ $organization->favicon }}"
                         alt="{{ $organization->name }}"
                         class="mr-2 inline-block w-9 rounded-lg"
                     />
                     {{ $organization->name }}
                 </h2>
-                <p class="mt-2 text-bgrey-500 md:text-lg">{{ $organization->description }}</p>
-                <hr class="my-4 border-black/8" />
+                <p class="text-bgrey-500 md:text-lg">{{ $organization->description }}</p>
+                <hr class="my-3 border-black/4" />
 
-                <h3 class="font-bold">How do we know they use Laravel?</h3>
-                <p class="text-bgrey-500">{{ $organization->public_source }}</p>
+                <h3 class="text-sm font-bold">How do we know they use Laravel?</h3>
+                <p class="text-sm text-bgrey-500">{{ $organization->public_source }}</p>
 
                 @if ($organization->technologies->count() > 0)
-                    <div class="mt-3 flex gap-2">
+                    <div class="mt-3 flex gap-2 font-mono">
                         @foreach ($organization->technologies as $tech)
                             <a
                                 href="{{ route('technologies.show', $tech) }}"
@@ -35,7 +35,7 @@ class="inline-flex items-center rounded bg-white px-2 text-sm font-bold uppercas
                     @foreach ($organization->sites as $site)
                         <a
                             href="{{ $site->url }}"
-                            class="mb-3 block rounded-lg bg-black/4 p-4 py-2 text-lg backdrop-blur-lg transition duration-300 hover:bg-black/13"
+                            class="mb-3 block rounded-xl bg-black/4 p-4 py-2 text-lg backdrop-blur-lg transition duration-300 hover:bg-black/13"
                         >
                             {{ $site->name }}
                             <span class="float-right mt-1"><img src="/images/chevron-forward.svg" alt=">" /></span>
@@ -50,7 +50,7 @@ class="mb-3 block rounded-lg bg-black/4 p-4 py-2 text-lg backdrop-blur-lg transi
             </div>
         </div>
 
-        <div class="col-span-3 mt-8 md:mt-0">
+        <div class="col-span-2 xl:col-span-3 mt-8 md:mt-0">
             <img src="{{ $organization->image }}" class="rounded-md border" />
         </div>
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -26,6 +26,7 @@ export default {
             },
             fontFamily: {
                 sans: ['Figtree', ...defaultTheme.fontFamily.sans],
+                mono: ['"Pitch Sans"', ...defaultTheme.fontFamily.mono],
             },
             maxWidth: {
                 '8xl': '88rem',