Skip to content

Commit

Permalink
feat(whatislove-dev): 404 page redesign wd-480 (#482)
Browse files Browse the repository at this point in the history 
* refactor(whatislove-dev): change page block  structure wd-480

* feat(whatislove-dev): 404 page redesign wd-480
  • Loading branch information
@what1s1ove
what1s1ove authored May 5, 2024
1 parent 41c3f31 commit 1b146ce
Show file tree
Hide file tree
Showing 12 changed files with 308 additions and 306 deletions.
6 changes: 6 additions & 0 deletions apps/whatislove-dev/src/includes/easter-egg.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<section class="not-easter-egg">
<h2 class="not-easter-egg__title visually-hidden">Not an Easter Egg (but actually it is, yes 😁)</h2>
<div class="not-easter-egg__button-wrapper">
<button class="not-easter-egg__button action" type="button" aria-label="Easter egg">🥚</button>
</div>
</section>
1 change: 0 additions & 1 deletion apps/whatislove-dev/src/includes/header.njk
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
{% from 'settings.njk' import settings %}
{% include 'skip-link.njk' %}

<header class="header column">
<a class="header__logo-link" href="/" aria-label="Home">
Expand Down
1 change: 1 addition & 0 deletions apps/whatislove-dev/src/includes/toast.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p class="toast" role="alert" aria-live="polite"></p>
22 changes: 10 additions & 12 deletions apps/whatislove-dev/src/layouts/page.njk
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% set title = global.title if page.url == '/' else title + ' | ' + global.title %}
{% set isRoot = page.url == '/' %}
{% set title = global.title if isRoot else title + ' | ' + global.title %}
{% set description = description if description else global.description %}

<!doctype html>
Expand Down Expand Up @@ -47,20 +48,17 @@
<meta name="twitter:site" content="@what1s1oveee" />
</head>
<body class="page__body">
{% include 'skip-link.njk' %}
{% include 'header.njk' %}

{{ content | safe }}
{% include 'footer.njk' %}

<section class="not-easter-egg">
<h2 class="not-easter-egg__title visually-hidden">Not an Easter Egg (but actually it is, yes 😁)</h2>
<div class="not-easter-egg__button-wrapper">
<button class="not-easter-egg__button action" type="button" aria-label="Easter egg">🥚</button>
</div>
</section>

<p class="toast" role="alert" aria-live="polite"></p>
<main class="main" id="main">{{ content | safe }}</main>

{% if isRoot %}
{% include 'aside.njk' %}
{% endif %}
{% include 'footer.njk' %}
{% include 'easter-egg.njk' %}
{% include 'toast.njk' %}
{% include 'shapes.njk' %}

<script src="/scripts/index.js" defer></script>
Expand Down
186 changes: 84 additions & 102 deletions apps/whatislove-dev/src/pages/form.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,117 +5,99 @@ layout: page.njk
permalink: form.html
---

<main class="timeline-form starry-sky">
<a class="timeline-form__logo-wrapper" href="/">
<span class="visually-hidden">Go to home page</span>
</a>
<div class="timeline-form__wrapper flex flex-col justify-center w-1/2 h-screen m-auto p-5">
<h1 class="mb-5 text-4xl font-bold">Timeline Form</h1>
<form name="timeline" action="/timeline">
<div class="flex flex-row mb-3 gap-x-4">
<span class="flex flex-col gap-y-2 w-1/2">
<label class="text-sm font-medium" for="skill-type">Skill Type:</label>
<select
class="block p-2.5 text-gray-900 text-sm capitalize bg-gray-50 border border-gray-300 rounded-lg"
id="skill-type"
name="skillType"
required
>
<option value="">Select...</option>
</select>
</span>
<span class="flex flex-col gap-y-2 w-1/2">
<label class="text-sm font-medium" for="type">Type:</label>
<select
class="block p-2.5 text-gray-900 text-sm capitalize bg-gray-50 border border-gray-300 rounded-lg"
id="type"
name="type"
required
>
<option value="">Select...</option>
</select>
</span>
</div>
<label class="flex flex-col mb-3 gap-y-2">
<span class="text-sm font-medium">Title:</span>
<div class="flex flex-col justify-center w-1/2 h-screen m-auto p-5">
<h1 class="mb-5 text-4xl font-bold">Timeline Form</h1>
<form name="timeline" action="/timeline">
<span class="flex flex-col mb-3 gap-y-2">
<label class="text-sm font-medium" for="type">Type:</label>
<select
class="block p-2.5 text-gray-900 text-sm capitalize bg-gray-50 border border-gray-300 rounded-lg"
id="type"
name="type"
required
>
<option value="">Select...</option>
</select>
</span>
<label class="flex flex-col mb-3 gap-y-2">
<span class="text-sm font-medium">Title:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="title"
type="text"
required
/>
</label>
<label class="flex flex-col mb-3 gap-y-2">
<span class="text-sm font-medium">Description:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="desc"
type="text"
/>
</label>
<div class="flex flex-row mb-3 gap-x-4">
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Origin Link:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="origin"
type="url"
/>
</label>
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Origin Link Description:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="title"
name="originDesc"
type="text"
required
/>
</label>
<label class="flex flex-col mb-3 gap-y-2">
<span class="text-sm font-medium">Description:</span>
</div>
<div class="flex flex-row mb-3 gap-x-4">
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Link:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="link"
type="url"
/>
</label>
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Link Description:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="desc"
name="linkDesc"
type="text"
/>
</label>
<div class="flex flex-row mb-3 gap-x-4">
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Origin Link:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="origin"
type="url"
/>
</label>
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Origin Link Description:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="originDesc"
type="text"
/>
</label>
</div>
<div class="flex flex-row mb-3 gap-x-4">
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Link:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="link"
type="url"
/>
</label>
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Link Description:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="linkDesc"
type="text"
/>
</label>
</div>
<div class="flex flex-row mb-3 gap-x-4">
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Date:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="date"
type="date"
required
/>
</label>
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">End Date:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="endDate"
type="date"
/>
</label>
</div>
<button
class="w-full px-5 py-2.5 text-white bg-blue-700 font-medium rounded-lg text-sm text-center"
type="submit"
>
Submit
</button>
</form>
</div>
</main>
</div>
<div class="flex flex-row mb-3 gap-x-4">
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">Date:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="date"
type="date"
required
/>
</label>
<label class="flex flex-col gap-y-2 w-1/2">
<span class="text-sm font-medium">End Date:</span>
<input
class="block p-2.5 text-gray-900 text-sm bg-gray-50 border border-gray-300 rounded-lg"
name="endDate"
type="date"
/>
</label>
</div>
<button
class="w-full px-5 py-2.5 text-white bg-blue-700 font-medium rounded-lg text-sm text-center"
type="submit"
>
Submit
</button>
</form>
</div>

<script src="https://cdn.tailwindcss.com" defer></script>
Loading

0 comments on commit 1b146ce

Please sign in to comment.