Skip to content

Commit

Permalink
Tweak blog styling
Browse files Browse the repository at this point in the history
jimirobaer committed Jan 30, 2025
1 parent 9c44cdd commit 0b09e3c
Showing 8 changed files with 82 additions and 70 deletions.
12 changes: 6 additions & 6 deletions resources/views/components/blog/list-item.blade.php
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<?php /** @var \Spatie\ContentApi\Data\Post $insight */ ?>
<div wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="insights-list-item relative cursor-pointer flex flex-col sm:flex-row gap-3 sm:gap-8 group mx-0 sm:p-9 {{ $class ?? '' }}">
<div class="absolute inset-0 rounded-[20px] pointer-events-none w-full h-full opacity-50 border {{ ($border ?? false) ? 'bg-link-card-light-hover border-oss-gray-dark' : 'border-transparent' }} group-hover:bg-link-card-light-hover group-hover:border-oss-gray-dark"></div>
<div wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="insights-list-item relative cursor-pointer flex flex-col sm:flex-row gap-6 sm:gap-8 group mx-0 sm:p-9 {{ $class ?? '' }}">
<div class="transition-opacity duration-150 absolute inset-0 rounded-[20px] pointer-events-none w-full h-full opacity-0 border bg-link-card-light-hover border-oss-gray-dark group-hover:opacity-50"></div>
<figure>
<a wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="text-oss-royal-blue no-underline block w-[120px] h-[120px] bg-oss-green-pale rounded-8">
<a wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="size-36 sm:size-[120px] text-oss-royal-blue no-underline block bg-oss-green-pale rounded-8">
@if ($insight->header_image)
<img class="w-full h-full object-cover rounded-8" src="{{ $insight->header_image }}" alt="">
@endif
</a>
</figure>
<div>
<h3 class="text-24 leading-snug font-bold normal-case mb-3 group-hover:text-oss-spatie-blue hover:text-oss-spatie-blue">
<h3 class="text-24/tight font-bold normal-case mb-3 group-hover:text-oss-spatie-blue hover:text-oss-spatie-blue">
<a wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="text-oss-royal-blue no-underline">
{{ $insight->title }}
</a>
</h3>
<a wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="text-oss-royal-blue no-underline block mt-3 [&_p]:mt-2 [&_code]:text-16 [&_code]:bg-transparent">
<a wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="text-oss-royal-blue no-underline block mt-3 text-base sm:text-18 [&_p]:mt-2 [&_code]:text-16 [&_code]:bg-transparent">
{!! $insight->summary !!}
</a>
<a wire:navigate href="{{ route('blog.show', $insight->slug) }}" class="text-oss-royal-blue no-underline mt-4 flex gap-3 text-14">
@@ -24,7 +24,7 @@
</time>
@endisset
@if (count($insight->tags))
<ul class="contents font-bold">
<ul class="lowercase contents font-bold">
@foreach ($insight->tags as $tag)
<li>#{{ $tag }}</li>
@endforeach
2 changes: 1 addition & 1 deletion resources/views/components/headers/h1.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@php
$tag = $tag ?? 'h1';
@endphp
<{{ $tag }} {{ $attributes->twMerge('font-druk uppercase text-[72px] lg:text-[144px] leading-72 lg:leading-[125px] font-bold') }} style="text-shadow: 0px 0px 110px rgba(0, 0, 0, 0.2)">
<{{ $tag }} {{ $attributes->twMerge('font-druk uppercase text-[60px]/[0.9] sm:text-[96px]/[0.83] font-bold') }}>
{{ $slot }}
</{{ $tag }}>
2 changes: 1 addition & 1 deletion resources/views/components/headers/h2.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@php
$tag = $tag ?? 'h2';
@endphp
<{{ $tag }} {{ $attributes->twMerge('font-druk uppercase text-72 leading-90 font-bold') }}>
<{{ $tag }} {{ $attributes->twMerge('font-druk uppercase text-5xl/[0.9] sm:text-7xl/[0.9] font-bold') }}>
{{ $slot }}
</{{ $tag }}>
6 changes: 6 additions & 0 deletions resources/views/components/headers/super.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@php
$tag = $tag ?? 'h1';
@endphp
<{{ $tag }} {{ $attributes->twMerge('font-druk uppercase text-7xl/[0.9] lg:text-[9rem]/[0.9] font-bold') }}>
{{ $slot }}
</{{ $tag }}>
80 changes: 39 additions & 41 deletions resources/views/front/pages/blog/index.blade.php
Original file line number Diff line number Diff line change
@@ -4,62 +4,60 @@
body-class="bg-oss-gray"
main-class="font-pt text-oss-royal-blue font-medium text-18 leading-140 antialiased"
>
<header class="wrapper-lg mt-12">
<x-headers.h1 class="text-right text-white">
<header class="wrapper-lg px-7 sm:px-16 mt-4 lg:mt-12">
<x-headers.super class="md:text-[96px] md:text-right text-white drop-shadow-2xl">
Blog
</x-headers.h1>
</x-headers.super>
</header>

@if($highlight)
<article class="wrapper-lg flex flex-col sm:flex-row gap-8 sm:gap-16 mt-8">
<a href="{{ route('blog.show', $highlight->slug) }}" class="flex-shrink-0">
@if ($highlight->header_image)
<img
src="{{ $highlight->header_image }}"
alt="{{ $highlight->title }}"
class="w-[220px] h-[220px] sm:w-[440px] sm:h-[440px] object-cover rounded-8"
>
@else
<div class="w-[220px] h-[220px] sm:w-[440px] sm:h-[440px] bg-oss-green-pale rounded-8"></div>
@endif
</a>
<div class="sm:pt-24 flex flex-col gap-6 sm:gap-9">
<p class="flex items-center gap-3 text-sm">
<a href="{{ route('blog.show', $highlight->slug) }}" class="bg-oss-green-pale font-semibold rounded-8 px-2 py-1.5">
Latest post
</a>
<a href="{{ route('blog.show', $highlight->slug) }}">
<article class="wrapper-lg px-7 sm:px-16 mt-8">
<a href="{{ route('blog.show', $highlight->slug) }}" class="group flex flex-col sm:flex-row gap-8 sm:gap-24">
<div href="{{ route('blog.show', $highlight->slug) }}" class="flex-shrink-0 self-start sm:w-[440px] sm:h-[440px] rounded-8 overflow-hidden">
@if ($highlight->header_image)
<img
src="{{ $highlight->header_image }}"
alt="{{ $highlight->title }}"
class="transition duration-300 object-cover group-hover:scale-[1.0125]"
>
@else
<div class="w-[220px] h-[220px] sm:w-[440px] sm:h-[440px] bg-oss-green-pale rounded-8"></div>
@endif
</div>
<div href="{{ route('blog.show', $highlight->slug) }}" class="sm:pt-24 flex flex-col gap-6 sm:gap-9">
<p class="flex items-center gap-3 text-sm">
<span class="bg-oss-green-pale font-semibold rounded-8 px-2 py-1.5">
Latest post
</span>
<time datetime="{{ $highlight->date->format('Y-m-d') }}">
{{ $highlight->date->format('F d, Y') }}
</time>
</a>
</p>
<x-headers.h2>
<a href="{{ route('blog.show', $highlight->slug) }}" class="hover:text-oss-spatie-blue">
</p>
<x-headers.h2 class="transition duration-150 group-hover:text-oss-spatie-blue">
{{ $highlight->title }}
</a>
</x-headers.h2>
<div>
{!! $highlight->summary !!}
</x-headers.h2>
<div>
{!! $highlight->summary !!}
</div>
</div>
</div>
</a>
</article>
<hr class="sm:hidden mx-3 my-16 h-px bg-oss-gray-medium">
<hr class="sm:hidden mx-3 my-8 h-px bg-oss-gray-medium">
@endif

@if($posts->isNotEmpty())
<div class="wrapper-lg mt-12 sm:mt-16 lg:mt-32">
<div class="grid sm:grid-cols-[1fr,2fr] gap-8">
<div class="wrapper-lg px-7 sm:px-16 mt-8 sm:mt-16 lg:mt-24">
<div class="grid gap-8 sm:grid-cols-[1fr,3fr]">
<h2 class="hidden sm:block text-24 font-bold pt-9">More posts</h2>
<div>
<div class="space-y-8 sm:space-y-0">
@foreach($posts as $post)
<x-blog.list-item :insight="$post" />
@if(!$loop->last)
<hr class="sm:hidden h-px bg-oss-gray-medium">
@endif
@endforeach
@if ($posts->hasMorePages())
<a href="{{ route('blog.all') }}" wire:navigate.hover class="flex w-full items-center justify-center py-6 text-blue bg-link-card-light border border-gray/25 rounded">
<a href="{{ route('blog.all') }}" wire:navigate.hover class="flex w-full items-center justify-center py-6 text-blue text-base bg-link-card-light border border-gray/25 rounded">
View more
</a>
@endif
@@ -68,21 +66,21 @@ class="w-[220px] h-[220px] sm:w-[440px] sm:h-[440px] object-cover rounded-8"
</div>
@endif

<div class="wrapper-lg my-16">
<div class="wrapper-lg sm:px-16 my-16 lg:my-24">
<livewire:newsletter />
</div>

@isset($externalFeedItems)
<div class="wrapper-lg mt-24 mb-20">
<div class="grid sm:grid-cols-[1fr,2fr] gap-8">
<h2 class="text-24 font-bold leading-snug text-center sm:text-left">From our team <br class="hidden sm:inline"> &&nbsp;products</h2>
<div class="pt-1.5 grid gap-8">
<div class="wrapper-lg px-7 sm:px-16 my-16 lg:my-24">
<div class="grid gap-8 sm:grid-cols-[1fr,3fr]">
<h2 class="text-2xl/tight font-bold">From our team <br class="hidden sm:inline"> &&nbsp;products</h2>
<div class="sm:px-9 grid gap-8">
@foreach($externalFeedItems as $externalFeedItem)
@include('front.pages.blog.partials.externalFeedItem')
@endforeach
@if($externalFeedItems->hasMorePages())
<p class="pt-2">
<a href="{{ route('external-feed-items') }}" wire:navigate.hover class="flex w-full items-center justify-center py-4 text-blue bg-link-card-light border border-gray/25 rounded">
<a href="{{ route('external-feed-items') }}" wire:navigate.hover class="flex w-full items-center justify-center py-4 text-blue text-base bg-link-card-light border border-gray/25 rounded">
View more
</a>
</p>
36 changes: 21 additions & 15 deletions resources/views/front/pages/blog/show.blade.php
Original file line number Diff line number Diff line change
@@ -8,31 +8,31 @@
>
<article>
<header class="wrapper-lg sm:wrapper-inset-lg mt-6 sm:mt-12 -mb-6 sm:-mb-12 relative z-10">
<div class="pr-6 flex flex-col sm:flex-row gap-8">
<div class="px-4 flex flex-col sm:flex-row gap-8">
<div class="flex-1 sm:pb-28">
<time datetime="{{ $post->date?->format('Y-m-d') }}" class="text-oss-royal-blue">
<time datetime="{{ $post->date?->format('Y-m-d') }}" class="text-oss-royal-blue text-base">
{{ $post->date?->format('F d, Y') ?? 'Preview' }}
</time>
<h1 class="my-6 md:mt-6 md:mb-9 font-druk font-bold text-[64px] md:text-[96px] leading-[90%] text-balance uppercase">
<x-headers.h1 class="mt-6">
{!! $post->title !!}
</h1>
</x-headers.h1>
<div class="mt-6 md:mt-9 font-semibold text-oss-royal-blue">
@foreach ($post->tags as $tag)
#{{ strtolower($tag) }}
@endforeach
</div>
</div>
<div class="w-3/5 sm:w-2/5 ml-auto sm:mr-0 mt-auto flex-shrink-0 aspect-square bg-oss-green-pale rounded-8 shadow-big">
<div class="sm:w-2/5 ml-auto sm:mr-0 mt-auto flex-shrink-0 aspect-square bg-oss-green-pale rounded-8 shadow-big">
@if($post->header_image)
<img class="w-full rounded-8" alt="" src="{{ $post->header_image }}"/>
@endif
</div>
</div>
</header>

<section class="wrapper-lg">
<div class="pt-12 md:pt-12 pb-16 md:pb-20 bg-white rounded-2xl">
<div class="wrapper-sm px-9">
<section class="wrapper-lg sm:px-16">
<div class="pt-12 md:pt-16 pb-12 md:pb-20 bg-white rounded-2xl">
<div class="wrapper-sm px-6">
<aside class="mb-10 flex flex-col gap-3">
@foreach ($post->authors->sortBy('name') as $author)
<div class="flex items-center gap-2">
@@ -58,11 +58,13 @@
</aside>

<div @class([
'markup markup-titles markup-lists markup-tables markup-embeds links-blue links-underline docs-markup',
'text-base sm:text-lg markup markup-titles markup-lists markup-tables markup-embeds links-blue links-underline docs-markup',
'md:[&_>.insights-list-item]:-mx-12 md:[&_>.insights-list-item]:px-12 md:[&_>.insights-list-item]:my-8',
'md:[&_>pre]:-mx-12 md:[&_>pre]:px-12',
'[&_>:not(pre)>code]:text-16 [&_>:not(pre)>code]:p-[2px]',
'[&_>:not(pre)>code]:text-14 [&_>:not(pre)>code]:p-[2px]',
'[&_>pre]:bg-oss-gray-light',
'[&_>pre]:p-6',
'sm:[&_>:not(pre)>code]:text-16 [&_>:not(pre)>code]:p-[2px]',
])>
{!! $content !!}
</div>
@@ -72,19 +74,23 @@
</article>

@if(count($otherPosts))
<div class="wrapper-inset-lg mt-16 sm:mt-24">
<div class="grid gap-6 sm:grid-cols-[1fr,3fr]">
<h2 class="text-24 font-bold text-center sm:text-left">Continue reading</h2>
<div class="sm:-mt-9">
<div class="wrapper-lg px-7 sm:px-16 my-16 lg:my-24">
<div class="grid gap-8 sm:grid-cols-[1fr,3fr]">
<h2 class="text-24 font-bold">Continue reading</h2>
<div class="space-y-8 sm:space-y-0 sm:-mt-9">
@foreach($otherPosts as $otherPost)
<x-blog.list-item :insight="$otherPost" />
@if(!$loop->last)
<hr class="sm:hidden h-px bg-oss-gray-medium">
@endif
@endforeach
</div>

</div>
</div>
@endif

<div class="wrapper-lg sm:wrapper-inset-lg my-12 md:mb-16">
<div class="wrapper-lg sm:px-16 my-16 lg:my-24">
<livewire:newsletter />
</div>
</x-page>
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
main-class="font-pt text-oss-royal-blue font-medium text-18 leading-140 antialiased"
>
<div class="wrapper-lg mt-8 grid gap-8">
<h1 class="text-24 font-bold leading-snug text-center sm:text-left">
<h1 class="text-2xl/tight sm:text-4xl/tight font-bold">
From our team & products
</h1>
<div class="grid gap-8 pb-16">
12 changes: 7 additions & 5 deletions resources/views/livewire/newsletter.blade.php
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<aside>
<div class="px-12 py-8 lg:px-16 lg:py-12 bg-oss-green-pale rounded-lg grid md:grid-cols-[2fr,3fr] gap-8 items-center">
<div class="px-6 py-6 lg:px-16 lg:py-12 bg-oss-green-pale rounded-lg grid md:grid-cols-[2fr,3fr] gap-8 items-center">
<div>
<header class="text-oss-royal-blue font-bold text-[64px] leading-[90%] uppercase font-druk">
Get the latest from Spatie
<x-headers.h2 class="text-balance">
Get the latest from Spatie
</x-headers.h2>
</header>
<div class="mt-6 flex items-center gap-2 sm:max-w-[50%] md:max-w-full">
<svg class="size-9 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 37"><g clip-path="url(#clip0_724_4187)"><path fill="#142D6F" d="M24 .5H12C5.371.5 0 5.872 0 12.5v12c0 6.628 5.372 12 12 12h12c6.628 0 12-5.372 12-12v-12c0-6.628-5.372-12-12-12Z"/><path fill="#fff" d="M12.65 19.99h-.008c-.984 0-1.905.38-2.593 1.068a3.64 3.64 0 0 0-1.069 2.596c0 .986.38 1.907 1.07 2.596a3.64 3.64 0 0 0 2.595 1.069c.986 0 1.907-.38 2.596-1.07l.031-.03a3.681 3.681 0 0 0-.03-5.158 3.66 3.66 0 0 0-2.591-1.075v.003Zm1.548 5.153-.031.031c-.401.4-.94.623-1.52.623a2.126 2.126 0 0 1-2.144-2.143c0-.58.223-1.12.623-1.52.401-.401.94-.623 1.52-.623.58.003 1.12.226 1.522.627.4.4.623.94.623 1.516 0 .576-.21 1.091-.592 1.49h-.001Zm11.752-4.08a3.663 3.663 0 0 0-2.59-1.074h-.01c-.983 0-1.905.381-2.592 1.069a3.64 3.64 0 0 0-1.069 2.596c0 .986.38 1.907 1.069 2.596a3.64 3.64 0 0 0 2.596 1.069c.986 0 1.891-.373 2.579-1.052h.001l.016-.017a3.646 3.646 0 0 0 1.068-2.598c0-.985-.38-1.9-1.071-2.591l.003.001Zm-1.075 4.111c-.4.402-.94.624-1.52.624a2.126 2.126 0 0 1-2.143-2.143 2.125 2.125 0 0 1 2.142-2.143 2.15 2.15 0 0 1 1.52.629c.402.402.624.94.624 1.514a2.14 2.14 0 0 1-.623 1.52Zm-.412-7.25.116-1.021.521-4.617.294-2.605-2.407 1.037L18 12.862l-4.986-2.144-2.408-1.037.294 2.605.522 4.617.115 1.02.99.275a11.183 11.183 0 0 1 4.455 2.46l1.018.918 1.018-.917a11.155 11.155 0 0 1 4.455-2.461l.99-.275ZM18 19.527a12.661 12.661 0 0 0-5.065-2.797l-.522-4.617L18 14.517l5.587-2.403-.521 4.617a12.657 12.657 0 0 0-5.067 2.797H18Z"/></g><defs><clipPath id="clip0_724_4187"><path fill="#fff" d="M0 .5h36v36H0z"/></clipPath></defs></svg>
@@ -19,7 +21,7 @@
<p class="text-oss-royal-blue">You'll receive a confirmation email shortly.</p>
</div>
@else
<div class="bg-white/80 py-4 px-6 rounded-md w-full flex justify-between items-center">
<div class="bg-white/80 py-3 sm:py-4 px-4 sm:px-6 rounded-md w-full flex justify-between items-center text-base">
<div class="flex-1">
<input class="bg-transparent w-full h-full placeholder-oss-royal-blue-light" name="email" wire:model="email" type="email" placeholder="Your email address">
@error('email')
@@ -33,9 +35,9 @@
</button>
</div>
@endif
<p class="mt-3 text-oss-royal-blue-light text-sm leading-tight">
<p class="mt-4 text-oss-royal-blue-light text-sm leading-tight">
Sign up for occasional emails on Spatie products and promotions.
By submitting this from, you acknowledge our <a class="underline" href="{{ route('legal.privacy') }}">Privacy Policy</a>.
By submitting this form, you acknowledge our <a class="underline" href="{{ route('legal.privacy') }}">Privacy Policy</a>.
</p>
</div>
</div>

0 comments on commit 0b09e3c

Please sign in to comment.