borgmatic/docs/_includes/components/lists.css

/* Buzzwords */
@keyframes rainbow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.buzzword-list,
.inlinelist {
	padding: 0;
}
.inlinelist:first-child:last-child {
	margin: 0;
}
.buzzword,
.buzzword-list li,
.inlinelist .inlinelist-item {
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	font-family: Georgia, serif;
	font-size: 116%;
	white-space: normal;
	line-height: 1.85;
	padding: .2em .5em;
	margin: 4px 4px 4px 0;
	transition: .15s linear outline;
}
.inlinelist .inlinelist-item.active {
	background-color: #222;
	color: #fff;
	font-weight: inherit;
}
.inlinelist .inlinelist-item.active :link,
.inlinelist .inlinelist-item.active :visited {
	color: #fff;
}
.inlinelist .inlinelist-item code {
	background-color: transparent;
}
a.buzzword {
	text-decoration: underline;
}
.buzzword-list a,
.inlinelist a {
	text-decoration: none;
}
.inlinelist .inlinelist-item {
	font-size: 100%;
	line-height: 2;
}
@supports not(-webkit-box-decoration-break: clone) {
	.buzzword,
	.buzzword-list li,
	.inlinelist .inlinelist-item {
		display: inline-block;
	}
}
.buzzword-list li,
.buzzword {
	background-color: #f7f7f7;
}
.inlinelist .inlinelist-item {
	background-color: #e9e9e9;
}
.inlinelist .inlinelist-item:hover,
.inlinelist .inlinelist-item:focus,
.buzzword-list li:hover,
.buzzword-list li:focus,
.buzzword:hover,
.buzzword:focus {
	position: relative;
	background-image: linear-gradient(238deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff0080);
	background-size: 1200% 1200%;
	color: #fff;
	text-shadow: 0 0 2px rgba(0,0,0,.9);
	animation: rainbow 1.6s infinite;
}
.inlinelist .inlinelist-item:hover a,
.inlinelist .inlinelist-item:focus a,
.buzzword-list li:hover a,
.buzzword-list li:focus a,
a.buzzword:hover,
a.buzzword:focus {
	color: #fff;
	text-decoration: none;
}
/*
I wish there were a PE friendly way to do this but media queries don’t work work with @supports
@media (prefers-reduced-motion: no-preference) {
	.buzzword:hover,
	.buzzword:focus {
		animation: rainbow 1s infinite;
	}
}*/
.buzzword-list li:hover:after,
.buzzword-list li:focus:after,
.buzzword:hover:after,
.buzzword:focus:after {
	font-family: system-ui, sans-serif;
	content: "Buzzword alert!!!";
	position: absolute;
	left: 0;
	top: 0;
	max-width: 8em;
	color: #f00;
	font-weight: 700;
	text-transform: uppercase;
	transform: rotate(-10deg) translate(-25%, -125%);
	text-shadow: 1px 1px 5px rgba(0,0,0,.6);
	line-height: 1.2;
	pointer-events: none;
}
main h2 .buzzword,
main h3 .buzzword,
main p .buzzword {
	padding: 0px 7px;
	font-size: 1em; /* 18px /18 */
	margin: 0;
	line-height: 1.444444444444; /* 26px /18 */
	font-family: inherit;
}
main h2 a.buzzword,
main h3 a.buzzword,
main p a.buzzword {
	text-decoration: underline;
}