master
Nisse Lommerde 1 year ago
parent 15d7038419
commit 5a057fa913

@ -1,7 +1,14 @@
<button class="filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black "> @props(['active'])
<div class="py-1 px-3 bg-zinc-800 text-white hover:bg-neutral-700 group pixel-corner-sm @php
active:bg-zinc-900"> $classes = ($active ?? false)
? 'py-1 px-3 bg-zinc-700/75 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
: 'py-1 px-3 bg-zinc-800 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
@endphp
<button class=" filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black">
<div class="{{$classes}}">
<div class="flex flex-row"> <div class="flex flex-row">
<div class="text-neutral-200 mr-1 text-shadow-sm shadow-zinc-950"> <div class="text-neutral-200 mr-1 text-shadow-sm shadow-zinc-950">

@ -0,0 +1,19 @@
@props(['date', 'link' => '', 'link_name', 'title', 'newest' => false])
<div class="inline-flex w-full">
<!-- Date -->
<div class="pr-2">
<span {{$attributes->merge(['class' => "font-bold"])}} ">{{ $date }}</span>:
</div>
<!-- Title -->
<div class="grow {{$newest ? 'text-white' : ''}} justify-self-start max-w-sm overflow-hidden text-ellipsis">{{ $title }}</div>
<!-- Link -->
@if ($link !== '')
<div>
(<span class="text-blue-400 hover:text-blue-300 underline"><a href="{{ $link }}">{{ $link_name }}</a></span>)
</div>
@endif
</div>

@ -10,9 +10,9 @@
</div> </div>
</div> </div>
<div class="flex flex-row gap-x-4"> <div class="mt-4 grid grid-cols-1 md:grid-cols-5 lg:grid-cols-12 gap-4">
<div class="filter drop-shadow-pixel-md shadow-zinc-950 my-2"> <div class="col-span-1 md:col-span-3 lg:col-span-8 filter drop-shadow-pixel-md shadow-zinc-950">
<div class="bg-zinc-800 p-6 pixel-corner-sm shadow-black "> <div class="bg-zinc-800 p-6 pixel-corner-sm shadow-black text-justify ">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
@ -23,34 +23,65 @@
</div> </div>
<!-- Changelog --> <!-- Changelog -->
<div class="filter drop-shadow-pixel-md shadow-zinc-950 my-2"> <div class="col-span-1 md:col-span-2 lg:col-span-4 filter drop-shadow-pixel-md shadow-zinc-950">
<div class="bg-zinc-800 p-4 pixel-corner-sm shadow-black "> <div class="bg-zinc-800 p-4 pixel-corner-sm shadow-black ">
<div class="space-y-2 whitespace-nowrap"> <div class="space-y-2 whitespace-nowrap">
<h2 class="text-xl text-shadow-sm shadow-zinc-900 font-bold">What's new?</h2> <h2 class="text-xl text-shadow-sm shadow-zinc-900 font-bold">What's new?</h2>
<hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900"> <hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
<ul class="list-disc list-inside marker:font-ibm marker:text-lime-400">
<ul class="list-disc list-inside mr-7 marker:font-ibm marker:text-lime-400">
<li> <li>
<span class="text-white font-bold">2023-06-08</span><span class="text-white">: Newest Item, special styling</span> <x-news-item class="text-white"
(<span class="text-blue-400 hover:text-blue-300 underline"><a href="">link</a></span>) newest="true"
date="2023-06-08"
link="#"
link_name="link"
title="Newest item style">
</x-news-item>
</li> </li>
<li> <li>
<span class="text-red-500 font-bold">2023-06-06</span>: A Blog Post <x-news-item class="text-red-500"
(<span class="text-blue-400 hover:text-blue-300 underline"><a href="">blog</a></span>) date="2023-06-07"
link="#"
link_name="blog"
title="A Blog Entry">
</x-news-item>
</li> </li>
<li> <li>
<span class="text-red-600 font-bold">2023-05-28</span>: Another Blog Post <x-news-item class="text-red-600"
(<span class="text-blue-400 hover:text-blue-300 underline"><a href="">blog</a></span>) date="2023-06-05"
link="#"
link_name="blog"
title="Another Blog Entry">
</x-news-item>
</li> </li>
<li> <li>
<span class="text-red-700 font-bold">2023-05-28</span>: Website Maintenance <x-news-item class="text-red-700"
(<span class="text-blue-400 hover:text-blue-300 underline"><a href="">blog</a></span>) date="2023-06-02"
link="#"
link_name="project"
title="Project Update">
</x-news-item>
</li>
<li>
<x-news-item class="text-red-700"
date="2023-06-02"
link="#"
link_name="link"
title="Another link">
</x-news-item>
</li> </li>
</ul> </ul>
<hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900"> <hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
<div> <div>
For more, see the For more, see the
<span class="text-blue-400 hover:text-blue-300 underline"><a href="">changelog</a></span>. <span class="text-blue-400 hover:text-blue-300 underline"><a href="">changelog</a></span>.
</div> </div>
</div> </div>
</div> </div>
</div> </div>

@ -20,7 +20,7 @@
</head> </head>
<body class="bg-zinc-900 text-zinc-300"> <body class="bg-zinc-900 text-zinc-300">
<div class="min-h-screen bg-zinc-900 max-w-6xl mx-auto overflow-y-auto"> <div class="min-h-screen bg-zinc-900 max-w-7xl mx-auto overflow-y-auto">
<main> <main>
<div class="mx-16"> <div class="mx-16">

@ -3,14 +3,16 @@
<div class="my-4"> <div class="my-4">
<div class="flex flex-row gap-x-2 text-xl font-ibm whitespace-nowrap"> <div class="flex flex-row gap-x-2 text-xl font-ibm whitespace-nowrap">
<x-nav-button class="text-red-400 shadow-red-950">Home</x-nav-button> <x-nav-button class="text-red-400 shadow-red-950"
:active="request()->routeIs('dashboard')">Home
</x-nav-button>
<x-nav-button class="text-yellow-300 shadow-yellow-950">About Me</x-nav-button> <x-nav-button class="text-yellow-300 shadow-yellow-950">About Me</x-nav-button>
<x-nav-button class="text-green-400 shadow-green-950">Projects</x-nav-button> <x-nav-button class="text-green-400 shadow-green-950">Projects</x-nav-button>
<x-nav-button class="text-blue-400 shadow-blue-950">Blog</x-nav-button> <x-nav-button class="text-blue-400 shadow-blue-950">Blog</x-nav-button>
{{-- <div class="filter drop-shadow-pixel-sm w-full">--}} {{-- <div class="filter drop-shadow-pixel-sm w-full">--}}
{{-- <div class="py-1 px-3 bg-zinc-800 w-full h-full shadow-pixel-sm pixel-corner-sm"></div>--}} {{-- <div class="py-1 px-3 bg-zinc-800 w-full h-full shadow-pixel-sm pixel-corner-sm"></div>--}}
{{-- </div>--}} {{-- </div>--}}
<div class="ml-auto"> <div class="ml-auto">
<x-nav-button class="text-shadow-sm shadow-black">niisse.net</x-nav-button> <x-nav-button class="text-shadow-sm shadow-black">niisse.net</x-nav-button>

Loading…
Cancel
Save