nisse
/
niisse-net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

work

Browse Source
master
Nisse Lommerde 1 year ago
parent 1a15eaf608
commit ea473179f5
11 changed files with 200 additions and 86 deletions
Show Stats Download Patch File Download Diff File

17
resources/css/app.css
Unescape Escape View File

@ -48,3 +48,20 @@ h2 {
0px 2px
);
}
.pixel-corner-md {
clip-path: polygon(
0px calc(100% - 3px),
3px calc(100% - 3px),
3px 100%,
calc(100% - 3px) 100%,
calc(100% - 3px) calc(100% - 3px),
100% calc(100% - 3px),
100% 3px,
calc(100% - 3px) 3px,
calc(100% - 3px) 0px,
3px 0px,
3px 3px,
0px 3px
);
}

4
resources/views/components/inner-card.blade.php
Unescape Escape View File

@ -0,0 +1,4 @@
<div {{$attributes->merge(['class'=> "bg-zinc-800 p-6 pixel-corner-md shadow-black text-justify h-full"])}}>
{{ $slot }}
</div>

2
resources/views/components/news-item.blade.php
Unescape Escape View File

@ -8,7 +8,7 @@
</div>
<!-- Title -->
<div class="grow {{$newest ? 'text-white' : ''}} justify-self-start max-w-sm overflow-hidden text-ellipsis">{{ $title }}</div>
<div class="{{$newest ? 'text-white' : ''}} grow overflow-hidden text-ellipsis">{{ $title }}</div>
<!-- Link -->
@if ($link !== '')

3
resources/views/components/outer-card.blade.php
Unescape Escape View File

@ -0,0 +1,3 @@
<div {{$attributes->merge(['class'=> "col-span-1 filter drop-shadow-card shadow-zinc-950"])}}>
{{ $slot }}
</div>

92
resources/views/dashboard.blade.php
Unescape Escape View File

@ -1,90 +1,36 @@
<x-app-layout>
<div class="filter drop-shadow-pixel-md shadow-zinc-950 my-2">
<div class="bg-zinc-800 p-6 pixel-corner-sm">
<div class="filter drop-shadow-pixel-sm shadow-black">
<h1 class="text-5xl uppercase text-center font-bold text-shadow-md shadow-blue-700">
We belong to another time</h1>
</div>
@include('home.title-banner')
</div>
</div>
<div class="mt-4 grid grid-rows-[1fr] sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-[auto_auto_375px] gap-4 ">
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-4">
<div class="col-span-1 md:col-span-2 lg:col-span-8 filter drop-shadow-pixel-md shadow-zinc-950">
<div class="bg-zinc-800 p-6 pixel-corner-sm shadow-black text-justify ">
<x-outer-card class="md:col-span-2">
<x-inner-card class="h-full">
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
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</x-inner-card>
</x-outer-card>
<!-- Changelog -->
<div class="col-span-1 md:col-span-1 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="space-y-2 whitespace-nowrap">
<h2 class="text-xl text-shadow-sm shadow-zinc-900 font-bold">What's new?</h2>
@include('home.changelog')
<hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
<!-- Recent blog posts -->
@include('home.recent-blog')
<ul class="list-disc list-inside mr-7 marker:font-ibm marker:text-lime-400">
<li>
<x-news-item class="text-white"
newest="true"
date="2023-06-08"
link="#"
link_name="link"
title="Newest item style">
</x-news-item>
</li>
<li>
<x-news-item class="text-red-500"
date="2023-06-07"
link="#"
link_name="blog"
title="A Blog Entry">
</x-news-item>
</li>
<li>
<x-news-item class="text-red-600"
date="2023-06-05"
link="#"
link_name="blog"
title="Another Blog Entry">
</x-news-item>
</li>
<li>
<x-news-item class="text-red-700"
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>
</ul>
<hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
<div>
For more, see the
<span class="text-blue-400 hover:text-blue-300 underline"><a href="">changelog</a></span>.
</div>
</div>
</div>
</div>
</div>
<x-outer-card class="md:col-span-2">
<x-inner-card>
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
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</x-inner-card>
</x-outer-card>
</x-app-layout>

63
resources/views/home/changelog.blade.php
Unescape Escape View File

@ -0,0 +1,63 @@
<x-outer-card class="col-span-1">
<x-inner-card>
<div class="h-full grid space-y-2 content-center whitespace-nowrap ">
<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">
<ul class="list-disc list-inside mr-7 marker:font-ibm marker:text-lime-400">
<li>
<x-news-item class="text-white"
newest="true"
date="2023-06-08"
link="#"
link_name="link"
title="Newest item style">
</x-news-item>
</li>
<li>
<x-news-item class="text-red-400"
date="2023-06-07"
link="#"
link_name="blog"
title="A Blog Entry">
</x-news-item>
</li>
<li>
<x-news-item class="text-red-500"
date="2023-06-05"
link="#"
link_name="blog"
title="Another Blog Entry">
</x-news-item>
</li>
<li>
<x-news-item class="text-red-600"
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>
</ul>
<hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
<div>
// For more, see the
<span class="text-blue-400 hover:text-blue-300 underline"><a href="">changelog</a></span>.
</div>
</div>
</x-inner-card>
</x-outer-card>

63
resources/views/home/recent-blog.blade.php
Unescape Escape View File

@ -0,0 +1,63 @@
<x-outer-card class="col-span-1">
<x-inner-card>
<div class="h-full w-full grid space-y-2 content-center whitespace-nowrap ">
<h2 class="text-xl text-shadow-sm shadow-zinc-900 font-bold"> < Recent Blog Posts > </h2>
<hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
<ul class="list-disc list-inside mr-7 marker:font-ibm marker:text-lime-400">
<li>
<x-news-item class="text-white"
newest="true"
date="2023-06-08"
link="#"
link_name="blog"
title="Newest item style">
</x-news-item>
</li>
<li>
<x-news-item class="text-green-300"
date="2023-06-07"
link="#"
link_name="blog"
title="A Blog Entry">
</x-news-item>
</li>
<li>
<x-news-item class="text-green-400"
date="2023-06-05"
link="#"
link_name="blog"
title="Another Blog Entry">
</x-news-item>
</li>
<li>
<x-news-item class="text-green-500"
date="2023-06-02"
link="#"
link_name="blog"
title="Project Update">
</x-news-item>
</li>
<li>
<x-news-item class="text-green-600"
date="2023-06-02"
link="#"
link_name="blog"
title="Another link">
</x-news-item>
</li>
</ul>
<hr class="border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900">
<div>
// For more, head over to the
<span class="text-blue-400 hover:text-blue-300 underline"><a href="">blog</a></span>.
</div>
</div>
</x-inner-card>
</x-outer-card>

16
resources/views/home/title-banner.blade.php
Unescape Escape View File

@ -0,0 +1,16 @@
<x-outer-card>
<x-inner-card>
<div class="filter drop-shadow-pixel-lg shadow-black/75">
<div class="filter drop-shadow-pixel-lg shadow-blue-400/80">
<h1 class="text-6xl uppercase text-center font-bold text-red-500/50 text-shadow-md shadow-yellow-600">
<< niisse.net >>
</h1>
</div>
</div>
</x-inner-card>
</x-outer-card>
{{--<div class="filter drop-shadow-pixel-lg shadow-red-800/50">--}}
{{-- <div class="filter drop-shadow-pixel-lg shadow-indigo-700/75">--}}
{{-- <h1 class="text-6xl uppercase text-center font-bold text-red-500 text-shadow-md shadow-yellow-600">--}}

2
resources/views/layouts/app.blade.php
Unescape Escape View File

@ -22,7 +22,7 @@
<body class="bg-zinc-900 text-zinc-300">
<div class="min-h-screen bg-zinc-900 max-w-7xl mx-auto overflow-y-auto">
<main>
<div class="md:mx-16 mx-4">
<div class="lg:mx-16 mx-2 sm:mx-8">
@include('layouts.navigation')
{{ $slot }}
</div>

12
resources/views/layouts/navigation.blade.php
Unescape Escape View File

@ -1,21 +1,17 @@
<nav>
<!-- Primary Navigation Menu -->
<div class="my-4">
<div class="flex flex-row gap-x-1 md: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"
: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-green-400 shadow-green-950">Projects</x-nav-button>
<x-nav-button class="text-green-300 shadow-green-950">Projects</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="py-1 px-3 bg-zinc-800 w-full h-full shadow-pixel-sm pixel-corner-sm"></div>--}}
{{-- </div>--}}
<div class="ml-auto">
<x-nav-button class="text-shadow-sm shadow-black">niisse.net</x-nav-button>
<div class="ml-auto hidden md:flex">
<x-nav-button class="text-zinc-200 text-shadow-sm shadow-zinc-950">niisse.net</x-nav-button>
</div>
</div>
</div>

12
tailwind.config.js
Unescape Escape View File

@ -12,6 +12,10 @@ export default {
],
theme: {
// screens: {
// 'sm': '600px',
// 'md': '950px',
// },
fontFamily: {
'display': ['ibm-vga'],
'body': ['ibm-vga'],
@ -29,13 +33,15 @@ export default {
dropShadow: {
'pixel-sm': '2px 2px var(--tw-shadow-color)',
'pixel-sm-hover': '2px 4px var(--tw-shadow-color)',
'pixel-md': '4px 4px var(--tw-shadow-color)'
'card': '4px 4px var(--tw-shadow-color)',
'pixel-md': '2px 4px var(--tw-shadow-color)',
'pixel-lg': '2px 5px var(--tw-shadow-color)',
},
textShadow: {
sm: '2px 2px var(--tw-shadow-color)',
DEFAULT: '0px 2px var(--tw-shadow-color)',
md: '2px 4px var(--tw-shadow-color)',
retro: '1px 4px var(--tw-shadow-color)',
md: '2px 5px var(--tw-shadow-color)',
lg: '0px 5px var(--tw-shadow-color)',
},
},
},

Write Preview
Loading…
Cancel
Save