fedi-classifieds/css/home.css

#listings {
	columns: 3;
}

@media (max-width: 1050px) {
	#listings {
		columns: 2;
	}
}

@media (max-width: 650px) {
	#listings {
		columns: 1;
	}
}

/* jump links */
#jump-links {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: solid var(--color-pink);
}

#jump-links h2,
#jump-links li {
	font-family: "Bebas Neue";
	font-size: 1.3rem;
	font-weight: normal;
}

#jump-links * {
	display: inline;
}

#jump-links a {
	text-decoration: none;
}

#jump-links li {
	list-style: none;
  margin: 0;
}

#jump-links li:not(:last-child)::after {
	content: "..." / "";
}

/* categories */

.category {
	break-inside: avoid;
}

.category-title {
	background-color: var(--color-gray);
	padding: .25rem;
	margin-bottom: .5rem;
}

/* references highlighting */
/* drawn from https://aarontgrogg.com/blog/2012/05/18/pure-css-highlight-for-link-target/ */
.category-title:has(h2:target) {
  animation: hilite 2.5s;
}

@keyframes hilite {
	0% {background-color: var(--color-gray);}
	10% {background-color: var(--color-cyan-flipped);}
	100% {background-color: var(--color-gray);}
}

/* remove animation for reduced motion viewers */
@media (prefers-reduced-motion: reduce) {
	.category-title:has(h2:target) {
		animation: none;
		color: var(--color-cyan);
	}
}

.category-title h2 {
	scroll-margin-top: 4rem;
	font-family: "Bebas Neue";
	margin: 0;
}

.category-title p {
	text-align: right;
	font-weight: bold;
	margin: 0;
}

/* individual listings */

.listing {
	margin-bottom: 1rem;
}

.blurb {
	margin-bottom: .5rem;
}

.blurb strong {
	font-weight: bold;
}

.listed-on {
	font-size: .85rem;
	text-align: right;
}

/* Handling for sample data and wip stuff */
.draft h3,
.draft p {
	opacity: .5;
}

.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;
}