From 5ae6195aaad2832fb3c7b9191d3110db8af4b8eb Mon Sep 17 00:00:00 2001 From: James Beard Date: Sun, 8 Mar 2026 13:02:19 +1100 Subject: [PATCH 1/8] Utilising semantic tags (main, header, article, etc) and reordering content in HTML to header, "content", aside, footer to provide better structure for screen readers. Subset of intended changes seeking feedback on approach. --- src/_includes/page.webc | 16 +- src/areas/faq/examples/faq.html | 115 ++- .../find-shakes/examples/find-people.html | 188 ++--- .../find-shakes/examples/find-shakes.html | 188 ++--- src/areas/incoming/examples/incoming.html | 626 ++++++++-------- .../legal/examples/announcement-tou.html | 62 +- src/areas/legal/examples/code-of-conduct.html | 36 +- src/areas/legal/examples/terms-of-use.html | 49 +- src/areas/relationships/_relationships.scss | 14 +- .../relationships/examples/followers.html | 345 ++++----- .../examples/settings-connections.html | 12 +- .../settings/examples/settings-profile.html | 12 +- src/areas/settings/examples/settings.html | 12 +- src/areas/shake/examples/shake.html | 698 +++++++++--------- src/components/images/examples/comments.html | 334 +++++---- src/components/images/examples/lengthy.html | 470 ++++++------ src/components/images/examples/list.html | 330 +++++---- .../images/partials/_image-content.scss | 15 +- .../images/partials/_image-title.scss | 1 - src/components/pagination/_pagination.scss | 34 +- .../pagination/examples/default.html | 32 +- .../pagination/examples/linear.html | 24 +- src/layout/_page.scss | 18 +- src/layout/examples/sidebar-reversed.html | 12 +- src/layout/examples/sidebar.html | 10 +- 25 files changed, 1885 insertions(+), 1768 deletions(-) diff --git a/src/_includes/page.webc b/src/_includes/page.webc index c740326c..6c925d62 100644 --- a/src/_includes/page.webc +++ b/src/_includes/page.webc @@ -70,21 +70,19 @@ scripts: -
-
-
+
+

+
+
+
-
+
-
- -
-
+
diff --git a/src/areas/faq/examples/faq.html b/src/areas/faq/examples/faq.html index b0a269d5..5ed03627 100644 --- a/src/areas/faq/examples/faq.html +++ b/src/areas/faq/examples/faq.html @@ -5,66 +5,63 @@
-
-
-

Frequently Asked Questions

+
+

Frequently Asked Questions

-

What is going on here?

-

- MLTSHP is an approximate clone of the much-loved site MLKSHK created - by Andre and Amber which closed in April of 2017. We - are 100% community funded and member-run. The site is - subscription-based and is a registered corporation. - The code is on Github along with - a welcome module there which talks about what is going - on. There is also a Slack (email hello@mltshp.com for - an invite!) and a Facebook group. -

+

What is going on here?

+

+ MLTSHP is an approximate clone of the much-loved site MLKSHK created by + Andre and Amber which closed in April of 2017. We are + 100% community funded and member-run. The site is subscription-based and + is a registered corporation. The code is on Github along + with a welcome module there which talks about what is + going on. There is also a Slack (email + hello@mltshp.com for an invite!) and + a Facebook group. +

-

What do the membership levels mean?

-

- Membership is required to participate on MLTSHP, but it‘s a low bar! - We‘d love to have you aboard! These are the options: -

-
    -
  • Non-members can see the Popular page and individual posts.
    • -
  • - The Single Scoop level ($3 per year) is a great way to check out the - site. Members can: -
      -
    • - Post images and videos to their own shakes and to group shakes, - up to a monthly upload limit of 300MB for images and animated - GIFs. -
      • -
    • - Follow their friends‘ shakes, and follow and join group shakes. -
      • -
    • Save, like, and comment on any posts.
      • -
    -
    • -
  • - The Double Scoop level ($24 per year) can do all of the above, plus: -
      -
    • There are no fixed upload limits.
      • -
    • Make up to 100 of their own group shakes.
      • -
    • Get a little plus sign next to their name.
      • -
    • Have RSS feeds for their shakes.
      • -
    - Even at just $2 per month, Double Scoop members cover the primary - expenses of running MLTSHP and help make the Single Scoop level - possible. -
    • -
-

- We ran some numbers and determined that with our current membership, - we could run the site if most users contributed $2/month. This - includes things like paying for storage, hosting, bandwidth, a - business license, someone to do our taxes and answer the odd legal - question we may have to ask. We added a “bare bones” membership - because we don‘t want anyone to be excluded. -

-
-
+

What do the membership levels mean?

+

+ Membership is required to participate on MLTSHP, but it‘s a low bar! + We‘d love to have you aboard! These are the options: +

+
    +
  • Non-members can see the Popular page and individual posts.
    • +
  • + The Single Scoop level ($3 per year) is a great way to check out the + site. Members can: +
      +
    • + Post images and videos to their own shakes and to group shakes, up + to a monthly upload limit of 300MB for images and animated GIFs. +
      • +
    • + Follow their friends‘ shakes, and follow and join group shakes. +
      • +
    • Save, like, and comment on any posts.
      • +
    +
    • +
  • + The Double Scoop level ($24 per year) can do all of the above, plus: +
      +
    • There are no fixed upload limits.
      • +
    • Make up to 100 of their own group shakes.
      • +
    • Get a little plus sign next to their name.
      • +
    • Have RSS feeds for their shakes.
      • +
    + Even at just $2 per month, Double Scoop members cover the primary + expenses of running MLTSHP and help make the Single Scoop level + possible. +
    • +
+

+ We ran some numbers and determined that with our current membership, we + could run the site if most users contributed $2/month. This includes + things like paying for storage, hosting, bandwidth, a business license, + someone to do our taxes and answer the odd legal question we may have to + ask. We added a “bare bones” membership because we don‘t want anyone to + be excluded. +

+
diff --git a/src/areas/find-shakes/examples/find-people.html b/src/areas/find-shakes/examples/find-people.html index b6b88717..e42f7ec4 100644 --- a/src/areas/find-shakes/examples/find-people.html +++ b/src/areas/find-shakes/examples/find-people.html @@ -5,102 +5,12 @@
-
-
+

Find Shakes to Follow

-
-
-
-

Some Good Folks

-
-

People who posted files you’ve liked.

-
- - - - -
-
- - - - -
-
- - - - -
-
-
-
+
-
+ + diff --git a/src/areas/find-shakes/examples/find-shakes.html b/src/areas/find-shakes/examples/find-shakes.html index 5551a497..90181237 100644 --- a/src/areas/find-shakes/examples/find-shakes.html +++ b/src/areas/find-shakes/examples/find-shakes.html @@ -5,102 +5,12 @@
-
-
+

Find Shakes to Follow

-
-
-
-

Some Good Folks

-
-

People who posted files you’ve liked.

-
- - - - -
-
- - - - -
-
- - - - -
-
-
-
+
-
+ +
diff --git a/src/areas/incoming/examples/incoming.html b/src/areas/incoming/examples/incoming.html index 19ad69fe..b11526cc 100644 --- a/src/areas/incoming/examples/incoming.html +++ b/src/areas/incoming/examples/incoming.html @@ -5,12 +5,327 @@
-
-
+
+

Our most recent files

-
+ + +
+
    +
  • + +
    • +
  • +
    +
    +
    + + + +
    +

    + Star Wars Zoom Backgrounds +

    +
    +
    +
    + +
    +
    +
    +
    +
    + Star Wars Zoom Backgrounds +
    +
    +
    +
    + Star Wars is jumping on the Zoom background train. I’m + looking forward to showing how clean I’ve kept my office + with this one.

    You can find more at + https://www.starwars.com/news... +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + + + + + +
      +
    • 544 Views
      • +
    • + 3 +
      • + +
    • 1
      • +
    +
    + +
    +
    +
    +
    +
    • +
-
+ +
+
+ +
diff --git a/src/areas/legal/examples/announcement-tou.html b/src/areas/legal/examples/announcement-tou.html index acf470c5..1ce5df77 100644 --- a/src/areas/legal/examples/announcement-tou.html +++ b/src/areas/legal/examples/announcement-tou.html @@ -5,38 +5,36 @@
-
-
-

- Hi everyone and welcome to MLTSHP! We have an updated Terms of Use / - Privacy Policy document everyone today needs to agree to. Nothing that - different from before, but important because Legal Reasons. - We wanted to update it to be more up-front and open about the services - we utilize to make the magic that is MLTSHP. -

-

- By clicking this button, you agree to - the terms listed on this page - and our - Code of Conduct. -

-
- I Agree -
-

- We just wanted to make a great site and we know we wouldn‘t be doing - it without all of you showing up every day. So, thank you. - Be sure to check out our release notes! -

+
+

+ Hi everyone and welcome to MLTSHP! We have an updated Terms of Use / + Privacy Policy document everyone today needs to agree to. Nothing that + different from before, but important because Legal Reasons. We + wanted to update it to be more up-front and open about the services we + utilize to make the magic that is MLTSHP. +

+

+ By clicking this button, you agree to + the terms listed on this page + and our + Code of Conduct. +

+
+ I Agree
-
+

+ We just wanted to make a great site and we know we wouldn‘t be doing it + without all of you showing up every day. So, thank you. + Be sure to check out our release notes! +

+
diff --git a/src/areas/legal/examples/code-of-conduct.html b/src/areas/legal/examples/code-of-conduct.html index 3b7bd8c0..98adc374 100644 --- a/src/areas/legal/examples/code-of-conduct.html +++ b/src/areas/legal/examples/code-of-conduct.html @@ -5,27 +5,25 @@
-
-
-

MLTSHP Code of Conduct

+
+

MLTSHP Code of Conduct

-

TL;DR

-
    -
  • Be kind
    • -
  • Don‘t be a troll
    • -
  • Don’t harass the site or each other
    • -
  • Don’t dox the site or each other
    • -
  • Don‘t spam the site or each other
    • -
+

TL;DR

+
    +
  • Be kind
    • +
  • Don‘t be a troll
    • +
  • Don’t harass the site or each other
    • +
  • Don’t dox the site or each other
    • +
  • Don‘t spam the site or each other
    • +
-

Let’s keep MLTSHP a haven of awesomeness.

+

Let’s keep MLTSHP a haven of awesomeness.

-

Strive For More

-

- MLTSHP is special because we are honest, funny, and genuinely care - about each other. Here’s how you can be a part of this community: -

-
-
+

Strive For More

+

+ MLTSHP is special because we are honest, funny, and genuinely care about + each other. Here’s how you can be a part of this community: +

+
diff --git a/src/areas/legal/examples/terms-of-use.html b/src/areas/legal/examples/terms-of-use.html index 74fd5520..d2278adc 100644 --- a/src/areas/legal/examples/terms-of-use.html +++ b/src/areas/legal/examples/terms-of-use.html @@ -5,33 +5,30 @@
-
-
-

- We will not disclose, sell or exchange PI to or with anyone, without - your approval, unless we believe disclosure is reasonably necessary - to: -

+
+

+ We will not disclose, sell or exchange PI to or with anyone, without + your approval, unless we believe disclosure is reasonably necessary to: +

-
    -
  1. comply with the law or legal process;
    2. -
  2. - protect or defend our rights or property, or the rights or property - of others; -
    3. -
  3. enforce these Terms; or
    4. -
  4. - respond to claims that the content of any material on our system - violates the rights of others. -
    5. -
+
    +
  1. comply with the law or legal process;
    2. +
  2. + protect or defend our rights or property, or the rights or property of + others; +
    3. +
  3. enforce these Terms; or
    4. +
  4. + respond to claims that the content of any material on our system + violates the rights of others. +
    5. +
-

- We use your PI in various ways to provide access to our website and - service. We use PI to enhance your site experience in the following - ways: -

-
-
+

+ We use your PI in various ways to provide access to our website and + service. We use PI to enhance your site experience in the following + ways: +

+
diff --git a/src/areas/relationships/_relationships.scss b/src/areas/relationships/_relationships.scss index 99ee2662..df82c974 100644 --- a/src/areas/relationships/_relationships.scss +++ b/src/areas/relationships/_relationships.scss @@ -2,13 +2,19 @@ // Area: Account - Following/Followers // .content-relationships { - .body { - .friend, - .shake { - border-bottom: 1px dashed var(--color-border-default); + .followers-list { + list-style-type: none; + margin: 0; + padding: 0; + + > li { padding: 0 var(--size-spacing-quadruple); } + > li:not(:last-child) { + border-bottom: 1px dashed var(--color-border-default); + } + .user-follow-extended { .website a { color: var(--color-brand-secondary); diff --git a/src/areas/relationships/examples/followers.html b/src/areas/relationships/examples/followers.html index 38276190..4ae78d51 100644 --- a/src/areas/relationships/examples/followers.html +++ b/src/areas/relationships/examples/followers.html @@ -5,143 +5,193 @@
-
-
-