Feature tests; link decoration; set-up for AO3 draft.

feature-tests.css

@@ -0,0 +1,113 @@
+/* feature tests */
+
+.feature-tests {
+	font-size: 85%;
+	--test-border: blue;
+}
+
+.feature-tests span.test-colorfn-rgb {
+	border: 1px solid rgb(50,50,100,1.0);
+}
+
+.feature-tests span.test-colorfn-hsl {
+	border: 1px solid hsl(36deg 50% 60%);
+}
+
+.feature-tests span.test-colorfn-oklab {
+	border: 1px solid oklab(59% 0.1 0.1);
+}
+
+.feature-tests span.test-colorfn-button {
+	color: ButtonFace;
+	background-color: ButtonText;
+}
+
+.feature-tests span.test-colorfn-accent {
+	color: AccentColor;
+	background-color: AccentColorText;
+}
+
+.feature-tests span.tests-length {
+	display: inline-block;
+	height: 0.5lh;
+	border-top: 1px solid gray;
+}
+
+.feature-tests span.tests-length.cm {
+	width: 5cm;
+}
+
+.feature-tests span.tests-length.ch {
+	width: 4ch;
+}
+
+.feature-tests span.tests-length.vw {
+	width: 25vw;
+}
+
+.feature-tests span.test-colorscheme {
+	border: 1px solid blue;
+	min-width: 2ch;
+}
+
+.feature-tests span.test-orientation {
+	border: 1px solid blue;
+	min-width: 2ch;
+}
+
+@media (prefers-color-scheme: light) {
+	.feature-tests span.test-colorscheme:after {
+		content: "light";
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.feature-tests span.test-colorscheme:after {
+		content: "dark";
+	}
+}
+
+@media (orientation: landscape) {
+	.feature-tests span.test-orientation::after {
+		content: "landscape";
+	}
+}
+
+@media (orientation: portrait) {
+	.feature-tests span.test-orientation::after {
+		content: "portrait";
+	}
+}
+
+.feature-tests span.test-variable {
+	border: 1px solid var(--test-border, red);
+}
+
+.feature-tests [lang="es"] {
+	border: 1px solid yellow;
+}
+
+.feature-tests :lang(fr) {
+	border: 1px solid blue;
+}
+
+.feature-tests span.test-content::after {
+	content: attr(data-checkmark);
+}
+
+.feature-tests span.test-property[data-border] {
+	border: 1px solid transparent;
+	border-color: attr(data-border);
+}
+
+.feature-tests span[data-opacity] {
+	--tone: 50;
+	border: none;
+	border: 1px solid rgb(0, 0, calc(200 + var(--tone)));
+}
+
+.feature-tests span[data-blink="yes"] {
+	animation: blinker 2s step-start infinite;
+	border: 1px solid blue;
+}
+

styles/interwiki.css

@@ -0,0 +1,97 @@
+/* 
+ * begin interwiki.css
+ * */
+
+/* 
+ * Note: AO3 does not support CSS variables as of 2024-01-01.
+ * */
+/*
+#workskin a {
+	--ext-mark-1: '↦';
+	--ext-mark-2: '↪';
+	--ext-mark-vs: 'ṽ';
+}
+*/
+
+a.interwiki::before {
+	display: inline-block;
+	width: 2.2ex;
+	margin: 0 auto;
+	text-align: center;
+	vertical-align: middle;
+}
+
+a.interwiki::before {
+	content: '↪';
+}
+
+a[href^="#"]::before {
+	display: inline-block;
+	width: 1.0ch;
+	content: '§';
+}
+
+a[href*="wikipedia.org/"]:not(.no-interwiki) , 
+a[href*="wikifunctions.org/"] ,
+a[href*="wikiquote.org/"] , 
+a[href*="wikisource.org/"] , 
+a[href*="wiktionary.org/"] 
+{
+	text-decoration-style: double;
+	color: navy;
+}
+
+a[href*="wikipedia.org/"]:not(.no-interwiki)::before , 
+a[href*="wikifunctions.org/"]::before ,
+a[href*="wikiquote.org/"]::before , 
+a[href*="wikisource.org/"]::before , 
+a[href*="wiktionary.org/"]::before 
+{
+	display: inline-block;
+	width: 2ch;
+	color: #337;
+	background-color: #ccc;
+	font-size: 75%;
+	content: 'W';
+}
+
+a[href*="archiveofourown.org/"] {
+	text-decoration-style: double;
+	font-family: sans-serif;
+}
+
+a[href*="archiveofourown.org/"]::before {
+	display: inline-block;
+	width: 2ch;
+	color: #cc7;
+	background-color: #860303;
+	text-align: center;
+	font-size: 75%;
+	content: '~';
+}
+
+#workskin a[href*="veniasilente.user.tropi.us/"] {
+	color: darkgreen;
+}
+
+#workskin a[href*="veniasilente.user.tropi.us/"]::before {
+	content: 'ṽ';
+	color: yellow;
+	background-color: #37d818;
+	font-size: 75%;
+}
+
+#workskin a[href*="suoceverse.tropi.us/"] {
+	color: green;
+}
+
+#workskin a[href*="suoceverse.tropi.us/"]::before {
+	content: 'ṽ';
+	color: blue;
+	background-color: orchid;
+	font-size: 75%;
+}
+
+/* 
+ * end interwiki.css
+ * */