109 lines
1.6 KiB
CSS
109 lines
1.6 KiB
CSS
|
#ads {
|
||
|
|
columns: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1050px) {
|
||
|
|
#ads {
|
||
|
|
columns: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 650px) {
|
||
|
|
#ads {
|
||
|
|
columns: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* jump links */
|
||
|
|
#jump-links {
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
border-bottom: solid var(--color-purple);
|
||
|
|
}
|
||
|
|
|
||
|
|
#jump-links h2,
|
||
|
|
#category-list li {
|
||
|
|
font-family: "Bebas Neue";
|
||
|
|
font-size: 1.3rem;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
#jump-links * {
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
#category-list li {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#category-list li:not(:last-child)::after {
|
||
|
|
content: "..." / "";
|
||
|
|
}
|
||
|
|
|
||
|
|
/* categories */
|
||
|
|
|
||
|
|
.category {
|
||
|
|
break-inside: avoid;
|
||
|
|
border-bottom: solid var(--color-purple);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-title h2 {
|
||
|
|
scroll-margin-top: 4rem;
|
||
|
|
font-family: "Bebas Neue";
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-title p {
|
||
|
|
text-align: right;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* individual ads */
|
||
|
|
|
||
|
|
.ad {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
.ad:not(:last-child) {
|
||
|
|
border-bottom: thin solid var(--color-purple);
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blurb {
|
||
|
|
margin-bottom: .5rem;
|
||
|
|
}
|
||
|
|
.blurb a {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listed-on {
|
||
|
|
font-size: .85rem;
|
||
|
|
text-align: right;
|
||
|
|
}
|
