Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wd-145: add not found page #212

Merged
merged 1 commit into from
Nov 23, 2023
Merged

wd-145: add not found page #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions source/includes/live-logo.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<svg
class="{{ liveLogoClassName }} live-logo"
width="65"
height="45"
viewBox="0 0 242 167"
aria-hidden="true"
>
<path
class="live-logo__logo-icon live-logo__logo-icon--letter"
d="M80.7999 166.2C80.6999 166.2 80.6 166.2 80.5 166.2C78.1 166.1 76 164.7 75 162.6L0.699952 9.70002C-0.900048 6.50002 0.499967 2.6 3.69997 1C6.89997 -0.599997 10.7999 0.800003 12.3999 4L81.6 146.3L101.2 115C103.1 112 107.1 111 110.2 112.9C113.2 114.8 114.2 118.8 112.3 121.9L86.5 163.1C85.2 165.1 83.0999 166.2 80.7999 166.2Z"
/>
<path
class="live-logo__logo-icon live-logo__logo-icon--letter"
d="M155.2 166.2C155.1 166.2 155 166.2 154.9 166.2C152.5 166.1 150.4 164.7 149.4 162.6L74.9998 9.70007C73.3998 6.50007 74.7998 2.60006 77.9998 1.00006C81.1998 -0.599939 85.0998 0.800061 86.6998 4.00006L155.9 146.3L186.5 97.4001C195.9 79.7001 193.1 75.5 187.6 67.3C184.5 62.6 174.3 46.7001 173.1 44.9001C169.4 39.7001 159.9 26.1001 166 12.2001C168.5 6.40007 175.9 0.300049 183.7 0.300049C192.5 0.300049 198.7 3.70007 202.7 8.10007C207.1 3.00007 213.5 0.300049 221.2 0.300049C230.6 0.300049 237.3 6.60006 239.5 12.5001C243.3 22.3001 241.5 34.1001 234.6 44.9001L197.6 103.9C197.6 103.9 197.6 103.9 197.6 104C197.4 104.3 197.3 104.5 197.1 104.8L160.5 163.1C159.5 165.1 157.4 166.2 155.2 166.2ZM183.8 13.4001C181.8 13.4001 178.7 15.7001 178 17.5001C175.8 22.6001 177.5 28.6001 183.9 37.6001C184 37.7001 184 37.8001 184.1 37.9001C184.2 38.1001 195.3 55.5001 198.4 60.1001C200.6 63.4001 202.6 66.5001 203.9 69.9001L223.8 38.1001C228.4 30.9001 229.8 23.1 227.6 17.3C227.3 16.5 225.3 13.5001 221.4 13.5001C211.3 13.5001 210 21.7001 209.9 24.2001C209.8 27.6001 207.1 30.3001 203.7 30.4001C200.3 30.6001 197.4 28.0001 197 24.7001C196.6 22.7001 194.7 13.4001 183.8 13.4001Z"
/>
<path
class="live-logo__logo-icon live-logo__logo-icon--heart"
fill="red"
d="M196.9 70.1001C199.7 75.7001 207.6 76.2 210.9 70.8L229.3 41.4001C234.3 33.5001 237 23.5 233.6 14.8C232.4 11.8 228.2 6.80005 221.3 6.80005C210.9 6.80005 206.5 12.9001 204.6 17.7001C204.1 19.1001 202.1 19.2 201.5 17.8C199.3 12.9 194.3 6.80005 183.8 6.80005C178.9 6.80005 173.7 10.9 172 14.8C167.9 24.3 173.2 33.8001 178.5 41.2001C178.5 41.2001 189.7 58.8001 192.9 63.6001C194.5 65.9001 195.8 68.0001 196.9 70.1001Z"
/>
</svg>
72 changes: 72 additions & 0 deletions source/includes/settings.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<ul class="{{ settingsClassName }} settings">
<li class="settings__item">
<fieldset
class="settings__item-fieldset settings__item-fieldset--theme"
>
<legend class="visually-hidden">Color theme</legend>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--light"
type="radio"
name="theme"
value="light"
/>
<span class="visually-hidden">Light</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--auto"
type="radio"
name="theme"
value="auto"
checked
/>
<span class="visually-hidden">Auto</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--dark"
type="radio"
name="theme"
value="dark"
/>
<span class="visually-hidden">Dark</span>
</label>
</fieldset>
</li>
<li class="settings__item">
<fieldset
class="settings__item-fieldset settings__item-fieldset--motion"
>
<legend class="visually-hidden">Reduced Motion</legend>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--nopreference"
type="radio"
name="motion"
value="no-preference"
/>
<span class="visually-hidden">No Preference</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--auto"
type="radio"
name="motion"
value="auto"
checked
/>
<span class="visually-hidden">Auto</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--reduce"
type="radio"
name="motion"
value="reduce"
/>
<span class="visually-hidden">Reduce</span>
</label>
</fieldset>
</li>
</ul>
18 changes: 14 additions & 4 deletions source/layouts/page.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
{% set title = global.title if page.url == '/' else title + ' – ' + global.title
%} {% set desc = desc if desc else global.desc %}

<!doctype html>
<html class="page" lang="en">
<head>
<meta charset="utf-8" />
<title>{{ global.title }}</title>
<title>{{ title }}</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="view-transition" content="same-origin" />
Expand All @@ -28,12 +31,12 @@
<link rel="icon" href="/images/icons/icon.svg" type="image/svg+xml" />
<link rel="manifest" href="/manifest.json" />

<meta name="description" content="{{ global.description }}" />
<meta name="description" content="{{ desc }}" />
<meta name="generator" content="{{ eleventy.generator }}" />

<meta property="og:type" content="website" />
<meta property="og:title" content="{{ global.title }}" />
<meta property="og:description" content="{{ global.description }}" />
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ desc }}" />
<meta property="og:url" content="{{ global.domain + page.url }}" />

<meta
Expand All @@ -48,5 +51,12 @@
</head>
<body class="page__body">
{{ content | safe }}
<p class="not-easter-egg">
<button class="not-easter-egg__button" type="button">
🥚 <span class="visually-hidden">(easter egg)</span>
</button>
</p>
<p class="toast" role="alert" aria-live="polite"></p>
<script src="/scripts/index.js" defer></script>
</body>
</html>
2 changes: 1 addition & 1 deletion source/manifest.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ permalink: manifest.json
{
"id": "/",
"name": "{{ global.title }}",
"description": "{{ global.description }}",
"description": "{{ global.desc }}",
"lang": "en",
"dir": "ltr",
"start_url": "/",
Expand Down
102 changes: 6 additions & 96 deletions source/pages/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,10 @@ permalink: 'index.html'
{% set MAIN_IMAGE_FORMATS = ['avif', 'webp'] %}

<h1 class="visually-hidden">Vladyslav Zubko - interface developer</h1>
<header class="header">
<span class="header__logo">
<svg width="65" height="45" viewBox="0 0 242 167" aria-hidden="true">
<path
class="header__logo-icon header__logo-icon--letter"
d="M80.7999 166.2C80.6999 166.2 80.6 166.2 80.5 166.2C78.1 166.1 76 164.7 75 162.6L0.699952 9.70002C-0.900048 6.50002 0.499967 2.6 3.69997 1C6.89997 -0.599997 10.7999 0.800003 12.3999 4L81.6 146.3L101.2 115C103.1 112 107.1 111 110.2 112.9C113.2 114.8 114.2 118.8 112.3 121.9L86.5 163.1C85.2 165.1 83.0999 166.2 80.7999 166.2Z"
/>
<path
class="header__logo-icon header__logo-icon--letter"
d="M155.2 166.2C155.1 166.2 155 166.2 154.9 166.2C152.5 166.1 150.4 164.7 149.4 162.6L74.9998 9.70007C73.3998 6.50007 74.7998 2.60006 77.9998 1.00006C81.1998 -0.599939 85.0998 0.800061 86.6998 4.00006L155.9 146.3L186.5 97.4001C195.9 79.7001 193.1 75.5 187.6 67.3C184.5 62.6 174.3 46.7001 173.1 44.9001C169.4 39.7001 159.9 26.1001 166 12.2001C168.5 6.40007 175.9 0.300049 183.7 0.300049C192.5 0.300049 198.7 3.70007 202.7 8.10007C207.1 3.00007 213.5 0.300049 221.2 0.300049C230.6 0.300049 237.3 6.60006 239.5 12.5001C243.3 22.3001 241.5 34.1001 234.6 44.9001L197.6 103.9C197.6 103.9 197.6 103.9 197.6 104C197.4 104.3 197.3 104.5 197.1 104.8L160.5 163.1C159.5 165.1 157.4 166.2 155.2 166.2ZM183.8 13.4001C181.8 13.4001 178.7 15.7001 178 17.5001C175.8 22.6001 177.5 28.6001 183.9 37.6001C184 37.7001 184 37.8001 184.1 37.9001C184.2 38.1001 195.3 55.5001 198.4 60.1001C200.6 63.4001 202.6 66.5001 203.9 69.9001L223.8 38.1001C228.4 30.9001 229.8 23.1 227.6 17.3C227.3 16.5 225.3 13.5001 221.4 13.5001C211.3 13.5001 210 21.7001 209.9 24.2001C209.8 27.6001 207.1 30.3001 203.7 30.4001C200.3 30.6001 197.4 28.0001 197 24.7001C196.6 22.7001 194.7 13.4001 183.8 13.4001Z"
/>
<path
class="header__logo-icon header__logo-icon--heart"
fill="red"
d="M196.9 70.1001C199.7 75.7001 207.6 76.2 210.9 70.8L229.3 41.4001C234.3 33.5001 237 23.5 233.6 14.8C232.4 11.8 228.2 6.80005 221.3 6.80005C210.9 6.80005 206.5 12.9001 204.6 17.7001C204.1 19.1001 202.1 19.2 201.5 17.8C199.3 12.9 194.3 6.80005 183.8 6.80005C178.9 6.80005 173.7 10.9 172 14.8C167.9 24.3 173.2 33.8001 178.5 41.2001C178.5 41.2001 189.7 58.8001 192.9 63.6001C194.5 65.9001 195.8 68.0001 196.9 70.1001Z"
/>
</svg>
<header class="header starry-sky">
<span class="header__live-logo-wrapper">
{% set liveLogoClassName = 'header__live-logo' %} {% include
'live-logo.njk' %}
</span>
<div class="header__navigation-wrapper">
<button
Expand Down Expand Up @@ -50,78 +37,8 @@ permalink: 'index.html'
</div>
<p class="header__name">Vladyslav Zubko</p>
<p class="header__name-intro">Interface developer</p>
<ul class="header__settings settings">
<li class="settings__item">
<fieldset
class="settings__item-fieldset settings__item-fieldset--theme"
>
<legend class="visually-hidden">Color theme</legend>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--light"
type="radio"
name="theme"
value="light"
/>
<span class="visually-hidden">Light</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--auto"
type="radio"
name="theme"
value="auto"
checked
/>
<span class="visually-hidden">Auto</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--dark"
type="radio"
name="theme"
value="dark"
/>
<span class="visually-hidden">Dark</span>
</label>
</fieldset>
</li>
<li class="settings__item">
<fieldset
class="settings__item-fieldset settings__item-fieldset--motion"
>
<legend class="visually-hidden">Reduced Motion</legend>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--nopreference"
type="radio"
name="motion"
value="no-preference"
/>
<span class="visually-hidden">No Preference</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--auto"
type="radio"
name="motion"
value="auto"
checked
/>
<span class="visually-hidden">Auto</span>
</label>
<label class="settings__item-wrapper">
<input
class="settings__item-control settings__item-control--reduce"
type="radio"
name="motion"
value="reduce"
/>
<span class="visually-hidden">Reduce</span>
</label>
</fieldset>
</li>
</ul>
{% set settingsClassName = 'header__settings ' %} {% include 'settings.njk'
%}
</header>
<main>
<section class="intro" id="intro">
Expand Down Expand Up @@ -318,10 +235,3 @@ permalink: 'index.html'
<span class="footer__routine"></span>
</span>
</footer>
<p class="not-easter-egg">
<button class="not-easter-egg__button" type="button">
🥚 <span class="visually-hidden">(easter egg)</span>
</button>
</p>
<p class="toast" role="alert" aria-live="polite"></p>
<script src="/scripts/index.js" defer></script>
27 changes: 27 additions & 0 deletions source/pages/not-found.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: Not found
desc: A missed page
layout: page.njk
permalink: 404.html
---

<main class="not-found section-header starry-sky">
<a class="not-found__logo-wrapper" href="/">
{% set liveLogoClassName = 'not-found__logo' %} {% include
'live-logo.njk' %}
<span class="visually-hidden">Go to home page</span>
</a>
<h1 class="section-header__title">Not found.</h1>
<p class="section-header__desc">
Yes, I also don't like broken links. Please,
<a
href="https://github.com/what1s1ove/whatislove.dev/issues"
target="_blank"
rel="noreferrer"
>create an issue</a
>
if you truly ended up here <i>unexpectedly</i>.
</p>
{% set settingsClassName = 'not-found__settings ' %} {% include
'settings.njk' %}
</main>
11 changes: 6 additions & 5 deletions source/scripts/libs/components/toast/toast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,12 @@ class Toast {
this.#isShowingMessage = false
}

/** @returns {void} */
init() {
this.#toastNode = /** @type {HTMLElement} */ (
document.querySelector(`.toast`)
)
/**
* @param {HTMLElement} toastNode
* @returns {void}
*/
init(toastNode) {
this.#toastNode = toastNode
}

/**
Expand Down
Loading
Loading