From f5ef8b02806b7b5723092979ea379ca8fa6b9545 Mon Sep 17 00:00:00 2001 From: Alice Rhodes Date: Wed, 5 Mar 2025 10:36:51 -0500 Subject: [PATCH] Redesign more or less complete --- pages/accessibility/index.md | 79 +++++++++ pages/accessibility/translations.md | 29 +++ pages/accessibility/web-text.md | 70 ++++++++ pages/chat/index.md | 3 + pages/{contribute => }/code-of-conduct.md | 0 pages/community.md | 12 +- pages/contact-us.md | 3 - pages/contribute/index.md | 36 ++-- pages/contribute/repositories.md | 4 + pages/events.md | 3 - pages/faq.md | 3 - pages/how-it-works/cryptography.md | 167 ++++++++++++++++++ pages/how-it-works/deep-dive.md | 13 -- pages/how-it-works/index.md | 6 +- pages/how-it-works/networking.md | 63 +++++++ pages/how-it-works/private-routing.md | 84 +++++++++ pages/how-it-works/rpc.md | 85 +++++++++ pages/index.md | 19 +- ...who-built-veild.md => who-built-veilid.md} | 5 +- pages/why-use-veilid.md | 22 ++- static/img/Veilid-V-Outlined.svg | 11 ++ themes/veilid2025/assets/scss/style.scss | 80 +++++++-- .../layouts/_default/list.html.twig | 2 +- .../layouts/_default/page.html.twig | 62 +++++-- .../layouts/partials/navigation.html.twig | 2 +- 25 files changed, 769 insertions(+), 94 deletions(-) create mode 100644 pages/accessibility/index.md create mode 100644 pages/accessibility/translations.md create mode 100644 pages/accessibility/web-text.md rename pages/{contribute => }/code-of-conduct.md (100%) create mode 100644 pages/how-it-works/cryptography.md delete mode 100644 pages/how-it-works/deep-dive.md create mode 100644 pages/how-it-works/networking.md create mode 100644 pages/how-it-works/private-routing.md create mode 100644 pages/how-it-works/rpc.md rename pages/{who-built-veild.md => who-built-veilid.md} (92%) create mode 100644 static/img/Veilid-V-Outlined.svg diff --git a/pages/accessibility/index.md b/pages/accessibility/index.md new file mode 100644 index 0000000..6e0db02 --- /dev/null +++ b/pages/accessibility/index.md @@ -0,0 +1,79 @@ +--- +title: Accessibility +description: An introduction to accessibility concepts and resources +section: "" +menu: + main: + weight: 85 +--- + +General accessibility recommendations to keep in mind when designing user interfaces. + + + +[toc] + +### General Accessibility Concepts + +For the scope of this document, we are referring to the accessibility of websites, documents, and applications. + +### Types of Accessibility Challenges + +Here is a partial list of capabilities to keep in mind when designing: + +**Fine Motor Control** – The dexterity of one's eyes, hands, and fingers for the ability to examine and manipulate objects. In practical terms, is it easy for someone using a touch screen to easily click interactive elements and can folks with fine motor control issues manage to interact with those elements was well. + +**Sightedness** – Levels of blindness, near sightedness, and far sightedness. Low-vision users tend to need high color contrast and larger sized text and elements. + +**Color Vision** – Color blindness changes how people perceive colors which can reduce color contrast and make differentiating color coded items difficult. + +**Cognitive Capabilities** – Memory, train of thought, following instructions, and judgment are cognitive capabilities that most folks take for granted. Various disabilities can affect these as well as situational conditions such as being tired from working late. + +**Hearing** – Hearing difficulties can make audio cues or videos less effective. + +### Accessibility Guidelines + +Here is a partial list of general accessibility goals you should strive for: + +#### Structure + +- Headers are denoted as headers in the mark-up or code +- Sections of a page or screen are visually distinct and easy to identify + +#### Navigation + +- Easy to figure out current location +- Easy to figure out where you can go +- Consistent navigation structures and styling + +#### Interactions + +- Clickable items are styled consistently as clickable +- Clickable items have a generous hit-box size +- UI elements can be easily manipulated with assistive technology + +#### Typography + +- Adjustable text size +- Adjusting the text size does not breaking the layout or usability +- Text customization options such as changing fonts + +#### Colors + +- Good color contrast for text to be readable +- Use a secondary indicator (shape, size, pattern, etc) rather than color alone + +#### Video + +- For the audio in videos, provide subtitles of the dialog and sounds +- A transcript of all the content conveyed in the video helps a wide audiences + +### Additional Reading + +- [Mozilla's Accessibility Reference Pages](https://developer.mozilla.org/en-US/docs/Web/Accessibility) +- [Cognitive Accessibility at W3C ](https://www.w3.org/WAI/cognitive/) + +### Usability Tools + +- [Color Contrast Grid](https://contrastgrid.com/) +- [WebAIM WAVE](https://wave.webaim.org/) diff --git a/pages/accessibility/translations.md b/pages/accessibility/translations.md new file mode 100644 index 0000000..17eedb1 --- /dev/null +++ b/pages/accessibility/translations.md @@ -0,0 +1,29 @@ +--- +title: Translations +description: Help translate documentation and more for the Veilid project +section: "Accessibility" +--- + + +
+
+

+ We are very early on in this project and currently only have our text in English. +

+

+ We are seeking volunteers to help with this project's translations. +

+

+ Please join us on our server to talk about how we can expand our reach. +

+
+
+

Help Wanted

+

+ Veilid Discord +

+
+
+ + + diff --git a/pages/accessibility/web-text.md b/pages/accessibility/web-text.md new file mode 100644 index 0000000..d732a65 --- /dev/null +++ b/pages/accessibility/web-text.md @@ -0,0 +1,70 @@ +--- +title: Web Text +description: How to customize your browser text appearance; based on the WAI customize design document. +section: "Accessibility" +--- + +## Change Text Size with Zoom + +

Most web browsers let you increase and decrease the size of text, images, and other web page content with "zoom" features. Some browsers let you choose to zoom only the text size.

+

To change the zoom in most browsers, press the following two keys at the same time:

+ + +Browsers provide specific guidance on different ways to change the page zoom or text-only zoom: + +* [Google Chrome - Change text, image, and video sizes (zoom)](https://support.google.com/chrome/answer/96810) +* [Apple Safari - Zoom in on webpages](https://support.apple.com/guide/safari/zoom-in-on-webpages-ibrw1068/mac) +* [Mozilla Firefox - Font size and zoom](https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages) +* [Opera - Zoom](https://help.opera.com/en/latest/browser-window/#zoom) +* [Internet Explorer - Ease of access options](https://support.microsoft.com/en-us/help/17456/windows-internet-explorer-ease-of-access-options) +* [Microsoft Edge - Ease of Access in Microsoft Edge](https://support.microsoft.com/en-gb/help/4000734/windows-10-microsoft-edge-ease-of-access) +* [Vivaldi - Zooming options in Vivaldi](https://help.vivaldi.com/article/zooming-options-in-vivaldi/) + +## Other Text and Color Changes + +Some browsers provide functionality to set different aspects of font and color in the default view. + +* [Mozilla Firefox - Change the fonts and colors websites use](https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use) +* [Opera - Look and feel > Fonts](https://help.opera.com/en/presto/look-and-feel/#fonts) +* [Microsoft Internet Explorer - Ease of Access Options](https://support.microsoft.com/en-us/help/17456/windows-internet-explorer-ease-of-access-options) + +Other text and color settings are available in Reader View. + +## Reader View + +Most browsers offer a "Reader View" or "Reading View" that shows just the main content; it gets rid of navigation, ads, etc. Some browsers let you set the text font, text size, text color, background color, and line spacing in Reader View. + +* [Apple Safari - Hide ads when reading articles](https://support.apple.com/en-ca/guide/safari/hide-ads-when-reading-articles-sfri32632/mac) +* [Mozilla Firefox - Reader View for clutter-free web pages](https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages) +* [Microsoft Edge - Change font style and size for Reading view in Microsoft Edge](https://support.microsoft.com/en-us/help/4028023/microsoft-edge-change-font-style-and-size-for-reading-view) +* [Vivaldi - Reader View](https://help.vivaldi.com/article/reader-view/) + +## Advanced Options + +There are many browser extensions and add-ons that provide additional control over how the browser displays text and other content. + +While most browsers no long support user style sheets, extensions provide similar advanced user control. For example, the Stylus extension is available for several major browsers. + +### Note: No Endorsement + +We do not endorse specific web browsers or extensions and does not recommend one over another. +While some common browsers are included in this page, mention of a specific browser does not imply +endorsement or recommendation. + + +### About This Page + +This page is based off the [WAI customize design document](https://github.com/w3c/wai-customize-design/blob/master/index.md). \ No newline at end of file diff --git a/pages/chat/index.md b/pages/chat/index.md index c2345d2..0b7f235 100644 --- a/pages/chat/index.md +++ b/pages/chat/index.md @@ -2,6 +2,9 @@ title: VeilidChat description: VeilidChat is a proof of concept of the Veilid protocol and framework. section: "" +menu: + main: + weight: 40 --- VeilidChat is a demo of the Veilid framework and protocol working. diff --git a/pages/contribute/code-of-conduct.md b/pages/code-of-conduct.md similarity index 100% rename from pages/contribute/code-of-conduct.md rename to pages/code-of-conduct.md diff --git a/pages/community.md b/pages/community.md index 3d1d28a..25d466f 100644 --- a/pages/community.md +++ b/pages/community.md @@ -10,13 +10,15 @@ We want to build a community people who want a better way to connect and communi We want to bring together folks to help build great applications using the Veilid framework. -Join Us on Discord + +### Code of Conduct + +Please take a moment to review our [Code of Conduct](/code-of-conduct) + + +Join Us on Discord ### Why Discord? We're doing what we can with what we have. Since we're not trying to become a tech circlejerk, we have to meet people on their level. So come on in and help us build something better! - -### Code of Conduct - -Please take a moment to review our [Code of Conduct](/code-of-conduct) \ No newline at end of file diff --git a/pages/contact-us.md b/pages/contact-us.md index f4536ed..9cea8dc 100644 --- a/pages/contact-us.md +++ b/pages/contact-us.md @@ -1,9 +1,6 @@ --- title: Contact Us description: How to contact the Veilid project -menu: - main: - weight: 94 ---

For app support, please email support@veilid.com

diff --git a/pages/contribute/index.md b/pages/contribute/index.md index 9e27f1d..a4766c7 100644 --- a/pages/contribute/index.md +++ b/pages/contribute/index.md @@ -7,26 +7,28 @@ menu: weight: 80 --- -### Documentation +There are many ways anyone can help with Veilid. -We need people to help us write documentation for what is built so far. + -### Translation +
+
+

Documentation

+

We need people to help us write documentation for what is built so far.

+

Accessibility

+

Let's make it easy for anyone to use Veilid Framework or applications built with Veilid Framework.

+

Please help test and improve accessibility of Veilid.com, VeilidChat, or other developer's applications.

+
+
+

Translation

+

Let us go global. Volunteers can also help Veilid Framework and developers by providing translations for UI elements.

+

Code

+

We of course need help with coding.

+

Money

+

Learn how you can donate to support Veilid.

+
+
-Volunteers can also help Veilid Framework and developers by providing translations for UI elements. -Let's go global! -### Accessibility -Please help test and improve accessibility of Veilid.com, VeilidChat, or other developer's applications. - -Let's make it easy for anyone to use Veilid Framework or applications built with Veilid Framework. - -### Code - -Finally, we of course need help with coding. - -### Money - -Learn how you can [donate](/donate) diff --git a/pages/contribute/repositories.md b/pages/contribute/repositories.md index 3158dd8..737bf08 100644 --- a/pages/contribute/repositories.md +++ b/pages/contribute/repositories.md @@ -5,6 +5,10 @@ section: "Contribute" weight: 2 --- +### Code of Conduct + +Please take a moment to review our [Code of Conduct](/code-of-conduct) + ### Running a Node To install the Veilid node software, please follow the instructions available in the [repository](https://gitlab.com/veilid/veilid/-/blob/main/INSTALL.md). diff --git a/pages/events.md b/pages/events.md index bbeb47f..25e49ba 100644 --- a/pages/events.md +++ b/pages/events.md @@ -1,9 +1,6 @@ --- title: Events description: Events where you can meet-up with the Veilid Framework team -menu: - main: - weight: 60 --- diff --git a/pages/faq.md b/pages/faq.md index f6e3b67..d217418 100644 --- a/pages/faq.md +++ b/pages/faq.md @@ -1,9 +1,6 @@ --- title: F.A.Q. description: Frequently asked questions about Veilid -menu: - main: - weight: 50 ---