hover and focus, sample data handling, skip to content link, more
This commit is contained in:
@ -7,12 +7,5 @@
|
||||
<a href="https://heckin.technology/inherentlee/fedi-classifieds"
|
||||
target="_blank">source code</a>
|
||||
</li>
|
||||
<li>
|
||||
{% if page.url == "/" %}
|
||||
<a href="/submit/">submit your own</a>
|
||||
{% elif page.url == "/submit/" %}
|
||||
<a href="/">return home</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
<header>
|
||||
<nav>
|
||||
{% if page.url == "/submit/" %}
|
||||
<a href="/">Return Home</a>
|
||||
{% elif page.url == "/" %}
|
||||
<a href="/submit/">Submit Your Own</a>
|
||||
{% endif %}
|
||||
<ul>
|
||||
<li> <a id="skip" href="#main">skip to content</a></li>
|
||||
<li><a href="/" {% if page.url === "/" %}aria-current="page"{% endif %}>home page</a></li>
|
||||
<li><a href="/about/" {% if page.url === "/about/" %}aria-current="page"{% endif %}>about this site</a></li>
|
||||
<li><a href="/submit/" {% if page.url === "/submit/" %}aria-current="page"{% endif %}>submit a listing</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="wip">
|
||||
<p>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.)</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
15
css/home.css
15
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;
|
||||
}
|
||||
|
||||
18
css/main.css
18
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;
|
||||
|
||||
54
css/nav.css
54
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;
|
||||
}
|
||||
|
||||
48
src/about.njk
Normal file
48
src/about.njk
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: About the Classifieds
|
||||
---
|
||||
|
||||
<p>
|
||||
We all have something to share. So let's help others learn.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="/submit/">Post a listing</a> for your skill and someone might reach
|
||||
out for help! <a href="/">Read the listings</a> and see if there's things you
|
||||
want to know.
|
||||
</p>
|
||||
|
||||
<h2>Why not a hashtag?</h2>
|
||||
|
||||
<p>
|
||||
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
|
||||
<a href="https://flipping.rocks/tags/knowItTeachIt" target="_blank">#knowItTeachIt</a>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>Is this paid?</h2>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h2>How do I let you know?</h2>
|
||||
|
||||
<p>
|
||||
You can find all my contact methods on the site linked in the footer, or just
|
||||
<a href="https://flipping.rocks/@inherentlee" target="_blank">send me a message
|
||||
on fedi</a>.
|
||||
|
||||
<h2>When does all the Lorem Ipsum go away?</h2>
|
||||
|
||||
<p>
|
||||
After you add your listing.
|
||||
</p>
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -4,6 +4,14 @@ title: Fediverse Skillshare Classifieds
|
||||
---
|
||||
{% css %}{% include "css/home.css" %}{% endcss %}
|
||||
|
||||
<div class="wip">
|
||||
<p>
|
||||
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!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="jump-links">
|
||||
<h2>jump to...</h2>
|
||||
<ul>
|
||||
@ -23,7 +31,7 @@ title: Fediverse Skillshare Classifieds
|
||||
<p>{{ tag | getTagline }}</p>
|
||||
</div>
|
||||
{% for listing in collections[tag] %}
|
||||
<div class="listing">
|
||||
<div class="listing{% if listing.data.draft %} draft{% endif %}">
|
||||
<h3>{{ listing.data.title }}</h3>
|
||||
<p class="blurb">
|
||||
<strong>
|
||||
|
||||
Reference in New Issue
Block a user
