From 4f16c28bcac5054a248315ef951ab2195e98be7a Mon Sep 17 00:00:00 2001 From: Lee Cattarin Date: Fri, 1 May 2026 11:12:51 -0700 Subject: [PATCH] hover and focus, sample data handling, skip to content link, more --- _includes/footer.njk | 7 ------ _includes/header.njk | 17 +++++-------- css/home.css | 15 ++++++++++++ css/main.css | 18 +++++++++++++- css/nav.css | 54 ++++++++++++++++++++++------------------- src/about.njk | 48 ++++++++++++++++++++++++++++++++++++ src/ads/00-test-test.md | 1 + src/ads/01-test-test.md | 1 + src/ads/02-test-test.md | 1 + src/ads/03-test-test.md | 1 + src/ads/04-test-test.md | 1 + src/ads/05-test-test.md | 1 + src/ads/06-test-test.md | 1 + src/ads/07-test-test.md | 1 + src/ads/08-test-test.md | 1 + src/index.njk | 10 +++++++- 16 files changed, 133 insertions(+), 45 deletions(-) create mode 100644 src/about.njk diff --git a/_includes/footer.njk b/_includes/footer.njk index d4639ca..fb15e4b 100644 --- a/_includes/footer.njk +++ b/_includes/footer.njk @@ -7,12 +7,5 @@ source code -
  • - {% if page.url == "/" %} - submit your own - {% elif page.url == "/submit/" %} - return home - {% endif %} -
    • diff --git a/_includes/header.njk b/_includes/header.njk index 948bea8..086d7c5 100644 --- a/_includes/header.njk +++ b/_includes/header.njk @@ -1,15 +1,10 @@
    - -
    -

    This site is still a bit of a proof-of-concept. I don't know yet if it'll - go anywhere! Feel free to sign up regardless and I'll put ya in. (Note: all - handles that are @test.test are, I hope obviously, fake data.)

    -
    diff --git a/css/home.css b/css/home.css index 7044bbd..4f21830 100644 --- a/css/home.css +++ b/css/home.css @@ -107,3 +107,18 @@ font-size: .85rem; text-align: right; } + +/* Handling for sample data and wip stuff */ +.draft h3, +.draft p { + opacity: .6; +} + +.wip { + border-top: solid var(--color-pink); + border-bottom: solid var(--color-pink); + border-left: .5rem solid var(--color-cyan); + border-right: .5rem solid var(--color-cyan); + padding: 1rem 1rem 0; + margin: 1rem 0 2rem; +} diff --git a/css/main.css b/css/main.css index 7c56c1e..8e8c05e 100644 --- a/css/main.css +++ b/css/main.css @@ -36,7 +36,6 @@ body { main { padding-bottom: 2rem; - border-bottom: solid var(--color-pink); } @media (max-width: 1050px) { @@ -83,12 +82,29 @@ p { a { color: var(--color-cyan); + text-decoration-thickness: .1rem; + transition: text-decoration-thickness .5s; + border-radius: .05rem; } a:visited { color: var(--color-pink); } +@media (any-hover: hover) { + a:hover { + text-decoration-thickness: .2rem; + } +} + +a:focus-visible { + outline: solid var(--color-pink); +} + +a:visited:focus-visible { + outline-color: var(--color-cyan); +} + main ul { margin-left: 1rem; margin-bottom: 1rem; diff --git a/css/nav.css b/css/nav.css index 959a297..dc2c8af 100644 --- a/css/nav.css +++ b/css/nav.css @@ -1,40 +1,44 @@ -nav { - margin: 1rem 25%; - text-align: center; - border-bottom: solid var(--color-pink); +nav, +footer { + padding: 1rem 0; } -nav a, +nav ul, +footer ul { + list-style: none; + display: flex; + flex-flow: column; + text-align: center; + gap: .2rem; +} + +header, +nav li, footer li { font-family: "Bebas Neue"; font-size: 1.3rem; } -nav a { - text-decoration: none; -} - -.wip { - margin: 1rem 0; - border: solid var(--color-cyan); - border-radius: .1rem; - padding: 1rem; -} - -.wip p { - margin: 0; +header { + border-bottom: solid var(--color-pink); } footer { - padding: 1rem 0; + border-top: solid var(--color-pink); } -footer ul { - list-style: none; - display: flex; - justify-content: space-around; +a[aria-current="page"] { + text-decoration: line-through; + color: rgb(from var(--color-pink) r g b / 65%); } -footer li { - display: inline; +/* Skip link */ +#skip { + -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); + clip-path: polygon(0 0, 0 0, 0 0, 0 0); +} + +#skip:focus-visible { + -webkit-clip-path: none; + clip-path: none; } diff --git a/src/about.njk b/src/about.njk new file mode 100644 index 0000000..dcaccef --- /dev/null +++ b/src/about.njk @@ -0,0 +1,48 @@ +--- +layout: base.njk +title: About the Classifieds +--- + +

    + We all have something to share. So let's help others learn. +

    + +

    + Post a listing for your skill and someone might reach + out for help! Read the listings and see if there's things you + want to know. +

    + +

    Why not a hashtag?

    + +

    + I... I love fedi, I really do, but we all know that federation has its flaws. + One such flaw is that discovery can be limited, and looking up a hashtag is + not really a guarantee that you'll see all the posts under that hashtag. While + I was looking at this concept, someone told me about the hashtag + #knowItTeachIt + and of course, I promptly went to check it out. And saw a single post + from 2023. Apparently there's more in that tag, but my server doesn't + know that. So yeah. Maybe more than a hashtag, then. +

    + +

    Is this paid?

    + +

    + At current, the assumption is that these are free skillshares. If there's demand + for listings for paid skillshares, I can add that field to this listings and + let folks specify rate/pro bono. Pretty up to y'all. Let me know. +

    + +

    How do I let you know?

    + +

    + You can find all my contact methods on the site linked in the footer, or just + send me a message + on fedi. + +

    When does all the Lorem Ipsum go away?

    + +

    + After you add your listing. +

    diff --git a/src/ads/00-test-test.md b/src/ads/00-test-test.md index 56e153d..2fc2769 100644 --- a/src/ads/00-test-test.md +++ b/src/ads/00-test-test.md @@ -2,6 +2,7 @@ title: film photography handle: 00 server: test.test +draft: true tags: art and crafts blurb: Lorem ipsum dolor sit amet, consectetur adipiscing elit. date: 2026-04-21 diff --git a/src/ads/01-test-test.md b/src/ads/01-test-test.md index bd25c4c..e3e87b0 100644 --- a/src/ads/01-test-test.md +++ b/src/ads/01-test-test.md @@ -2,6 +2,7 @@ title: let's talk about the roman empire handle: 01 server: test.test +draft: true tags: history and science blurb: Quisque mauris erat, tempor non egestas sollicitudin, feugiat id risus. Duis eget ornare nunc. Cras sodales, eros quis finibus luctus, enim sem dictum ante, sed sodales ipsum ante a metus. date: 2026-04-22 diff --git a/src/ads/02-test-test.md b/src/ads/02-test-test.md index 41cdd68..43dfa6b 100644 --- a/src/ads/02-test-test.md +++ b/src/ads/02-test-test.md @@ -2,6 +2,7 @@ title: neurodivergent coping strats handle: 02 server: test.test +draft: true tags: interpersonal and life blurb: Fusce faucibus mauris ut metus molestie viverra. In varius erat in lectus scelerisque, vitae ornare sapien euismod. Pellentesque ornare aliquam erat, pellentesque eleifend tellus consequat ut. Donec mollis, lacus vitae bibendum hendrerit, nisi metus dignissim lacus, nec tincidunt nisl ligula vel metus. date: 2026-04-23 diff --git a/src/ads/03-test-test.md b/src/ads/03-test-test.md index d23f316..3b5cb0a 100644 --- a/src/ads/03-test-test.md +++ b/src/ads/03-test-test.md @@ -2,6 +2,7 @@ title: editing 102 handle: 03 server: test.test +draft: true tags: writing editing and literature blurb: Sed a commodo lectus. Curabitur tincidunt, eros vel mollis dapibus, mauris dui pharetra mauris, et dapibus leo nisi vitae eros. date: 2026-04-24 diff --git a/src/ads/04-test-test.md b/src/ads/04-test-test.md index 8e3442a..55a8f98 100644 --- a/src/ads/04-test-test.md +++ b/src/ads/04-test-test.md @@ -2,6 +2,7 @@ title: sourdough starting! handle: 04 server: test.test +draft: true tags: food and drink blurb: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae augue ac neque congue pellentesque vitae a enim. Donec euismod dolor sit amet dui dapibus posuere. Donec eget blandit ligula, ac tempor nunc. date: 2026-04-25 diff --git a/src/ads/05-test-test.md b/src/ads/05-test-test.md index 673b81c..d99cc0f 100644 --- a/src/ads/05-test-test.md +++ b/src/ads/05-test-test.md @@ -2,6 +2,7 @@ title: bug identification for beginners handle: 05 server: test.test +draft: true tags: animals and the outdoors blurb: Duis interdum purus non iaculis convallis. Nunc mi lorem, consequat sed luctus vitae, lobortis in arcu. date: 2026-04-26 diff --git a/src/ads/06-test-test.md b/src/ads/06-test-test.md index d884d0f..45046b4 100644 --- a/src/ads/06-test-test.md +++ b/src/ads/06-test-test.md @@ -2,6 +2,7 @@ title: fix your sink or toilet handle: 06 server: test.test +draft: true tags: repair and diy blurb: Aliquam justo justo, scelerisque a ligula sed, elementum pharetra quam. Ut augue nibh, finibus vel dui nec, sagittis bibendum leo. Quisque libero diam, maximus in dui ac, sollicitudin congue enim. date: 2026-04-27 diff --git a/src/ads/07-test-test.md b/src/ads/07-test-test.md index 1c3feea..2b8c1b3 100644 --- a/src/ads/07-test-test.md +++ b/src/ads/07-test-test.md @@ -2,6 +2,7 @@ title: Navigating Workplace Transition handle: 07 server: test.test +draft: true tags: interpersonal and life blurb: Donec nisl ligula, mollis sit amet gravida eget, aliquam vitae nibh. Fusce diam nulla, interdum a ex a, semper lacinia elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia fermentum arcu, molestie ornare purus lobortis eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc convallis turpis nisi, nec volutpat dui semper at. date: 2026-04-28 diff --git a/src/ads/08-test-test.md b/src/ads/08-test-test.md index dc84c1e..2f89d76 100644 --- a/src/ads/08-test-test.md +++ b/src/ads/08-test-test.md @@ -2,6 +2,7 @@ title: Picking the right haircut handle: 08 server: test.test +draft: true tags: beauty and health blurb: Duis nec varius dui. In mauris neque, scelerisque sed commodo accumsan, sodales vitae tortor. date: 2026-04-30 diff --git a/src/index.njk b/src/index.njk index f570377..c0c95a9 100644 --- a/src/index.njk +++ b/src/index.njk @@ -4,6 +4,14 @@ title: Fediverse Skillshare Classifieds --- {% css %}{% include "css/home.css" %}{% endcss %} +
    +

    + Hey! This is in early days, so please forgive the lack of real data. Any listing + that is greyed out is sample data, and should be ignored. As I get real listings, + I'll replace the samples! +

    +
    + {% for listing in collections[tag] %} -
    +

    {{ listing.data.title }}