Init

TatianaFokina · Nov 28, 2024 · c5048d0 · c5048d0
commit c5048d0
Show file tree

Hide file tree

Showing 38 changed files with 1,536 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = tab
+indent_size = 2
+
+[*.json]
+indent_style = space
+
+[*.yml]
+indent_style = space
+
+[*.md]
+indent_style = space
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+/node_modules/
+/.cache/
+/test/
+/dist/
+/.idea/
+/.DS_Store/
+/Thumbs.db/
+!content.json
+!site.json
diff --git a/CC.md b/CC.md
diff --git a/MIT.md b/MIT.md
@@ -0,0 +1,7 @@
+Copyright © 2024 Tatiana Fokina.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,41 @@
+# TypographA11y: accessible typography checklists
+
+First and foremost, a11y means ″accessibility.″
+
+The TypographA11y project provides checklists for evaluating content legibility and readability. This project supports content in English and Russian, with language-specific parameters for each criterion.
+
+## Technologies
+
+[Nunjucks](https://mozilla.github.io/nunjucks/), CSS, JavaScript, and [Node.js](https://nodejs.org/en/).
+
+## Commands
+
+Install [pnpm](https://pnpm.io):
+
+```bash
+npm install -g pnpm
+```
+
+The second installation option:
+
+```bash
+pnpm install
+```
+
+For Windows users run the standalone script and open your IDE or PowerShell as administrator (″run as administrator″):
+
+```bash
+iwr https://get.pnpm.io/install.ps1 -useb | iex
+```
+
+Build the production version of the project:
+
+```bash
+pnpm build:prod
+```
+
+## Licenses
+
+Code from this project is licensed under [MIT](https://github.com/TatianaFokina/a11y-blog/blob/main/MIT.md), the content is licensed under [CC BY-NC-SA 4.0](https://github.com/TatianaFokina/a11y-blog/blob/main/CC.md).
+
+Pictures are from [FreePNGimg](https://freepngimg.com) and licensed under the [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/). The fonts, Open Sans and Yeseva One, are licensed under [OFL](https://openfontlicense.org/open-font-license-official-text/).
diff --git a/config/.nunjucksignore b/config/.nunjucksignore
@@ -0,0 +1,2 @@
+**/partials/**
+**/layouts/**
diff --git a/docs/assets/background-dots.svg b/docs/assets/background-dots.svg
diff --git a/docs/assets/cover.png b/docs/assets/cover.png
diff --git a/docs/assets/favicons/apple-touch-icon.png b/docs/assets/favicons/apple-touch-icon.png
diff --git a/docs/assets/favicons/favicon.ico b/docs/assets/favicons/favicon.ico
diff --git a/docs/assets/favicons/favicon.svg b/docs/assets/favicons/favicon.svg
diff --git a/docs/assets/favicons/icon-192.png b/docs/assets/favicons/icon-192.png
diff --git a/docs/assets/favicons/icon-512.png b/docs/assets/favicons/icon-512.png
diff --git a/docs/assets/legibility-prev.png b/docs/assets/legibility-prev.png
diff --git a/docs/assets/readability-prev.png b/docs/assets/readability-prev.png
diff --git a/docs/en/index.html b/docs/en/index.html
@@ -0,0 +1 @@
+<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="description"content="Checklists for evaluating text content legibility and readability."><meta http-equiv="X-UA-Compatible"content="ie=edge"><link rel="alternate"href="https://change-this-example.com/en/index.html"hreflang="en"><link rel="alternate"href="https://change-this-example.com/ru/index.html"hreflang="ru"><link rel="alternate"href="https://change-this-example.com"hreflang="x-default"><meta property="og:type"content="website"><meta property="og:url"content="https://change-this-example.com/en/index.html"><meta property="og:title"content="TypographA11y"><meta property="og:description"content="Checklists for evaluating text content legibility and readability."><meta property="og:image"content="https://change-this-example.com/assets/cover.png"><meta name="twitter:card"content="summary_large_image"><meta property="twitter:url"content="https://change-this-example.com/en/index.html"><meta name="twitter:title"content="TypographA11y"><meta name="twitter:description"content="Checklists for evaluating text content legibility and readability."><meta name="twitter:site"content="https://change-this-example.com/en/index.html"><meta name="twitter:image"content="https://change-this-example.com/assets/cover.png"><link rel="manifest"href="https://change-this-example.com/manifest.json"><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap&family=Yeseva+One&display=swap"rel="stylesheet"><title>TypographA11y</title><link href="./../styles/styles.css"rel="stylesheet"><header class="menu"><div class="menu__container"><div class="menu__logo"><span class="logo__letters"aria-hidden="true">1l6б</span> <span class="logo__text"hidden>TypographA11y</span></div><a href="../ru/index.html"lang="ru"hreflang="ru"class="menu__lang">Русский</a></div></header><div class="container"><main class="content"><div class="content__block"><h1 class="block__heading block__heading--main">TypographA11y</h1><p class="block__text">Typography refers to the design and arrangement of printed or digital text. Typography is closely related to accessibility, often abbreviated as a11y.<p class="block__text">Bad typography in an interface can be a significant barrier for people with low or impaired vision, astigmatism, chronic migraines, attention deficit disorder, autism, or other conditions affecting the perception of visual information.<p class="block__text">The level of accessibility of the appearance and content of text are is an objective metric. This metric consists of two parts: legibility and readability.<p class="block__text">The project contains two checklists to assess the main parameters of legibility and readability. These checklists will help ensure that the font and the text on a website are minimally accessible to most people. Remember to ask users about their experiences and opinions. Accessibility is more than just ticking checkboxes.</div><section class="content__block"><h2 class="block__heading block__heading--secondary">Checklists</h2><div class="block__cards"><article class="card card--first"><h3 class="card__title"><a role="link"aria-disabled="true"class="title__link">Legibility (coming soon)</a></h3></article><article class="card card--second"><h3 class="card__title"><a href="./readability.html"class="title__link">Readability</a></h3></article></div></section></main></div><footer class="footer"><div class="footer__container"><div class="footer__block"><span class="footer__text">2024, Tatiana Fokina </span><span class="footer__text">Find the issue? Let me know on <a href="github/"class="footer__link">GitHub</a> 🐞</span></div><div class="footer__block"><ul class="footer__nav"><li class="footer__nav-item"><a href="https://a11y-blog.dev/en/"class="footer__link">Personal blog</a><li class="footer__nav-item"><a href="https://www.linkedin.com/in/tatiana-fokina-frontend/"class="footer__link">LinkedIn</a></ul></div></div></footer>
diff --git a/docs/en/readability.html b/docs/en/readability.html
@@ -0,0 +1 @@
+<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="description"content="Checklists for evaluating text content legibility and readability."><meta http-equiv="X-UA-Compatible"content="ie=edge"><link rel="alternate"href="https://change-this-example.com/en/readability.html"hreflang="en"><link rel="alternate"href="https://change-this-example.com/ru/readability.html"hreflang="ru"><link rel="alternate"href="https://change-this-example.com"hreflang="x-default"><meta property="og:type"content="website"><meta property="og:url"content="https://change-this-example.com/en/readability.html"><meta property="og:title"content="TypographA11y"><meta property="og:description"content="Checklists for evaluating text content legibility and readability."><meta property="og:image"content="https://change-this-example.com/assets/cover.png"><meta name="twitter:card"content="summary_large_image"><meta property="twitter:url"content="https://change-this-example.com/en/readability.html"><meta name="twitter:title"content="TypographA11y"><meta name="twitter:description"content="Checklists for evaluating text content legibility and readability."><meta name="twitter:site"content="https://change-this-example.com/en/readability.html"><meta name="twitter:image"content="https://change-this-example.com/assets/cover.png"><link rel="manifest"href="https://change-this-example.com/manifest.json"><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap&family=Yeseva+One&display=swap"rel="stylesheet"><title>TypographA11y</title><link href="./../styles/styles.css"rel="stylesheet"><header class="menu"><div class="menu__container"><a href="../en/index.html"class="menu__logo menu__logo--link"><span class="logo__letters"aria-hidden="true">1l6б</span> <span class="logo__text"hidden>TypographA11y</span> </a><a href="../ru/readability.html"lang="ru"hreflang="ru"class="menu__lang">Русский</a></div></header><div class="container"><main class="content"><div class="content__block"><h1 class="block__heading block__heading--main">Readability</h1><p class="block__text">Readability defines how easy to read the text.</div><section class="content__block"><h2 class="block__heading block__heading--secondary"id="heading">Checklist</h2><form class="block__list"aria-labelledby="heading"><ul class="list"><li class="list__item"><input class="list__item-checkbox"type="checkbox"id="check-1"name="checkbox-1"> <label class="list__item-label"for="check-1">Mood and tone match the audience.</label><li class="list__item"><input class="list__item-checkbox"type="checkbox"id="check-2"name="checkbox-2"> <label class="list__item-label"for="check-2">Complexity is as low as possible.</label><li class="list__item"><input class="list__item-checkbox"type="checkbox"id="check-3"name="checkbox-3"> <label class="list__item-label"for="check-3">Words and sentences are short and plain.</label><li class="list__item"><input class="list__item-checkbox"type="checkbox"id="check-4"name="checkbox-4"> <label class="list__item-label"for="check-4">Sentences use the active grammatical voice.</label><li class="list__item"><input class="list__item-checkbox"type="checkbox"id="check-5"name="checkbox-5"> <label class="list__item-label"for="check-5">There are no spelling and grammar mistakes.</label><li class="list__item"><input class="list__item-checkbox"type="checkbox"id="check-6"name="checkbox-6"> <label class="list__item-label"for="check-6">Readability score is 70–100 based on the automatic test.</label><li class="list__item"><input class="list__item-checkbox"type="checkbox"id="check-7"name="checkbox-7"> <label class="list__item-label"for="check-7">There is no critical issues with legibility.</label></ul></form></section></main></div><footer class="footer"><div class="footer__container"><div class="footer__block"><span class="footer__text">2024, Tatiana Fokina </span><span class="footer__text">Find the issue? Let me know on <a href="github/"class="footer__link">GitHub</a> 🐞</span></div><div class="footer__block"><ul class="footer__nav"><li class="footer__nav-item"><a href="https://a11y-blog.dev/en/"class="footer__link">Personal blog</a><li class="footer__nav-item"><a href="https://www.linkedin.com/in/tatiana-fokina-frontend/"class="footer__link">LinkedIn</a></ul></div></div></footer>
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -0,0 +1,23 @@
+{
+	"name": "TypographA11y",
+	"description": "Checklists for evaluating text content legibility and readability.",
+	"lang": "en",
+	"dir": "ltr",
+	"start_url": "/en/",
+	"orientation": "natural",
+	"icons": [
+		{
+			"src": "/assets/favicons/icon-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/assets/favicons/icon-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "browser"
+}
diff --git a/docs/robots.txt b/docs/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/docs/ru/index.html b/docs/ru/index.html
@@ -0,0 +1 @@
+<!doctypehtml><html lang="ru"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="description"content="Чеклисты для проверки разборчивости и читабельности в веб-интерфейсах."><meta http-equiv="X-UA-Compatible"content="ie=edge"><link rel="alternate"href="https://change-this-example.com/ru/index.html"hreflang="ru"><link rel="alternate"href="https://change-this-example.com/en/index.html"hreflang="en"><link rel="alternate"href="https://change-this-example.com"hreflang="x-default"><meta property="og:type"content="website"><meta property="og:url"content="https://change-this-example.com/ru/index.html"><meta property="og:title"content="ТипографA11y"><meta property="og:description"content="Чеклисты для проверки разборчивости и читабельности в веб-интерфейсах."><meta property="og:image"content="https://change-this-example.com/assets/cover.png"><meta name="twitter:card"content="summary_large_image"><meta property="twitter:url"content="https://change-this-example.com/ru/index.html"><meta name="twitter:title"content="ТипографA11y"><meta name="twitter:description"content="Чеклисты для проверки разборчивости и читабельности в веб-интерфейсах."><meta name="twitter:site"content="https://change-this-example.com/ru/index.html"><meta name="twitter:image"content="https://change-this-example.com/assets/cover.png"><link rel="manifest"href="https://change-this-example.com/manifest.json"><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap&family=Yeseva+One&display=swap"rel="stylesheet"><title>ТипографA11y</title><link href="./../styles/styles.css"rel="stylesheet"><header class="menu"><div class="menu__container"><div class="menu__logo"><span class="logo__letters"aria-hidden="true">1l6б</span> <span class="logo__text"hidden>ТипографA11y</span></div><a href="../en/index.html"lang="en"hreflang="en"class="menu__lang">English</a></div></header><div class="container"><main class="content"><div class="content__block"><h1 class="block__heading block__heading--main">ТипографA11y</h1><p class="block__text">Типографика — оформление печатного или цифрового текста. С типографикой тесно связана веб-доступность или коротко a11y.<p class="block__text">Непродуманная типографика в интерфейсе — серьёзный барьер для людей с пониженным или сниженным зрением, астигматизмом, хроническими мигренями, синдромом дефицита внимания и аутизмом, особенностями восприятия визуальной информации.<p class="block__text">Насколько внешний вид текста и содержание доступны, — объективная метрика. Эта метрика состоит из двух частей: разборчивости и читабельности.<p class="block__text">Проект включает два чеклиста для проверки главных параметров разборчивости и читабельности. Чеклисты помогут убедиться, что шрифт и сам текст сайта минимально доступны для большинства людей. Не забывайте сверяться с опытом и мнением пользователей. Доступность больше, чем выбор чекбоксов 🫰</div><section class="content__block"><h2 class="block__heading block__heading--secondary">Чеклисты</h2><div class="block__cards"><article class="card card--first"><h3 class="card__title"><a role="link"aria-disabled="true"class="title__link">Разборчивость (готовится)</a></h3></article><article class="card card--second"><h3 class="card__title"><a href="./readability.html"class="title__link">Читабельность</a></h3></article></div></section></main></div><footer class="footer"><div class="footer__container"><div class="footer__block"><span class="footer__text">2024, Татьяна Фокина </span><span class="footer__text">Нашли ошибку? Поделитесь ей на <a href="github/"class="footer__link">GitHub</a> 🐞</span></div><div class="footer__block"><ul class="footer__nav"><li class="footer__nav-item"><a href="https://a11y-blog.dev/ru/"class="footer__link">Мой блог</a><li class="footer__nav-item"><a href="https://www.linkedin.com/in/tatiana-fokina-frontend/"class="footer__link">LinkedIn</a></ul></div></div></footer>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="description"content="Checklists for evaluating text content legibility and readability."><meta http-equiv="X-UA-Compatible"content="ie=edge"><link rel="alternate"href="https://change-this-example.com/en/index.html"hreflang="en"><link rel="alternate"href="https://change-this-example.com/ru/index.html"hreflang="ru"><link rel="alternate"href="https://change-this-example.com"hreflang="x-default"><meta property="og:type"content="website"><meta property="og:url"content="https://change-this-example.com/en/index.html"><meta property="og:title"content="TypographA11y"><meta property="og:description"content="Checklists for evaluating text content legibility and readability."><meta property="og:image"content="https://change-this-example.com/assets/cover.png"><meta name="twitter:card"content="summary_large_image"><meta property="twitter:url"content="https://change-this-example.com/en/index.html"><meta name="twitter:title"content="TypographA11y"><meta name="twitter:description"content="Checklists for evaluating text content legibility and readability."><meta name="twitter:site"content="https://change-this-example.com/en/index.html"><meta name="twitter:image"content="https://change-this-example.com/assets/cover.png"><link rel="manifest"href="https://change-this-example.com/manifest.json"><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap&family=Yeseva+One&display=swap"rel="stylesheet"><title>TypographA11y</title><link href="./../styles/styles.css"rel="stylesheet"><header class="menu"><div class="menu__container"><div class="menu__logo"><span class="logo__letters"aria-hidden="true">1l6б</span> <span class="logo__text"hidden>TypographA11y</span></div><a href="../ru/index.html"lang="ru"hreflang="ru"class="menu__lang">Русский</a></div></header><div class="container"><main class="content"><div class="content__block"><h1 class="block__heading block__heading--main">TypographA11y</h1><p class="block__text">Typography refers to the design and arrangement of printed or digital text. Typography is closely related to accessibility, often abbreviated as a11y.<p class="block__text">Bad typography in an interface can be a significant barrier for people with low or impaired vision, astigmatism, chronic migraines, attention deficit disorder, autism, or other conditions affecting the perception of visual information.<p class="block__text">The level of accessibility of the appearance and content of text are is an objective metric. This metric consists of two parts: legibility and readability.<p class="block__text">The project contains two checklists to assess the main parameters of legibility and readability. These checklists will help ensure that the font and the text on a website are minimally accessible to most people. Remember to ask users about their experiences and opinions. Accessibility is more than just ticking checkboxes.</div><section class="content__block"><h2 class="block__heading block__heading--secondary">Checklists</h2><div class="block__cards"><article class="card card--first"><h3 class="card__title"><a role="link"aria-disabled="true"class="title__link">Legibility (coming soon)</a></h3></article><article class="card card--second"><h3 class="card__title"><a href="./readability.html"class="title__link">Readability</a></h3></article></div></section></main></div><footer class="footer"><div class="footer__container"><div class="footer__block"><span class="footer__text">2024, Tatiana Fokina </span><span class="footer__text">Find the issue? Let me know on <a href="github/"class="footer__link">GitHub</a> 🐞</span></div><div class="footer__block"><ul class="footer__nav"><li class="footer__nav-item"><a href="https://a11y-blog.dev/en/"class="footer__link">Personal blog</a><li class="footer__nav-item"><a href="https://www.linkedin.com/in/tatiana-fokina-frontend/"class="footer__link">LinkedIn</a></ul></div></div></footer>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctypehtml><html lang="ru"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><meta name="description"content="Чеклисты для проверки разборчивости и читабельности в веб-интерфейсах."><meta http-equiv="X-UA-Compatible"content="ie=edge"><link rel="alternate"href="https://change-this-example.com/ru/index.html"hreflang="ru"><link rel="alternate"href="https://change-this-example.com/en/index.html"hreflang="en"><link rel="alternate"href="https://change-this-example.com"hreflang="x-default"><meta property="og:type"content="website"><meta property="og:url"content="https://change-this-example.com/ru/index.html"><meta property="og:title"content="ТипографA11y"><meta property="og:description"content="Чеклисты для проверки разборчивости и читабельности в веб-интерфейсах."><meta property="og:image"content="https://change-this-example.com/assets/cover.png"><meta name="twitter:card"content="summary_large_image"><meta property="twitter:url"content="https://change-this-example.com/ru/index.html"><meta name="twitter:title"content="ТипографA11y"><meta name="twitter:description"content="Чеклисты для проверки разборчивости и читабельности в веб-интерфейсах."><meta name="twitter:site"content="https://change-this-example.com/ru/index.html"><meta name="twitter:image"content="https://change-this-example.com/assets/cover.png"><link rel="manifest"href="https://change-this-example.com/manifest.json"><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap&family=Yeseva+One&display=swap"rel="stylesheet"><title>ТипографA11y</title><link href="./../styles/styles.css"rel="stylesheet"><header class="menu"><div class="menu__container"><div class="menu__logo"><span class="logo__letters"aria-hidden="true">1l6б</span> <span class="logo__text"hidden>ТипографA11y</span></div><a href="../en/index.html"lang="en"hreflang="en"class="menu__lang">English</a></div></header><div class="container"><main class="content"><div class="content__block"><h1 class="block__heading block__heading--main">ТипографA11y</h1><p class="block__text">Типографика — оформление печатного или цифрового текста. С типографикой тесно связана веб-доступность или коротко a11y.<p class="block__text">Непродуманная типографика в интерфейсе — серьёзный барьер для людей с пониженным или сниженным зрением, астигматизмом, хроническими мигренями, синдромом дефицита внимания и аутизмом, особенностями восприятия визуальной информации.<p class="block__text">Насколько внешний вид текста и содержание доступны, — объективная метрика. Эта метрика состоит из двух частей: разборчивости и читабельности.<p class="block__text">Проект включает два чеклиста для проверки главных параметров разборчивости и читабельности. Чеклисты помогут убедиться, что шрифт и сам текст сайта минимально доступны для большинства людей. Не забывайте сверяться с опытом и мнением пользователей. Доступность больше, чем выбор чекбоксов 🫰</div><section class="content__block"><h2 class="block__heading block__heading--secondary">Чеклисты</h2><div class="block__cards"><article class="card card--first"><h3 class="card__title"><a role="link"aria-disabled="true"class="title__link">Разборчивость (готовится)</a></h3></article><article class="card card--second"><h3 class="card__title"><a href="./readability.html"class="title__link">Читабельность</a></h3></article></div></section></main></div><footer class="footer"><div class="footer__container"><div class="footer__block"><span class="footer__text">2024, Татьяна Фокина </span><span class="footer__text">Нашли ошибку? Поделитесь ей на <a href="github/"class="footer__link">GitHub</a> 🐞</span></div><div class="footer__block"><ul class="footer__nav"><li class="footer__nav-item"><a href="https://a11y-blog.dev/ru/"class="footer__link">Мой блог</a><li class="footer__nav-item"><a href="https://www.linkedin.com/in/tatiana-fokina-frontend/"class="footer__link">LinkedIn</a></ul></div></div></footer>