Update to use HOSR

src/assets/styles/styles.css

@@ -62,6 +62,12 @@ a[target="_blank"]::after {
 	font-weight: normal;
 }
 
+/* so active and hover can override */
+a:visited {
+	color: #cc45b6;
+}
+
+a:active,
 a:hover {
 	border: 1px solid #e94e5c;
 	background-color: #44fcfc;
@@ -71,14 +77,6 @@ a:hover {
 	text-shadow: 0px 1px 1px rgba(16, 16, 16, 0.6);
 }
 
-a:visited {
-	color: #cc45b6;
-}
-
-a:visited:hover {
-	color: #e94e5c;
-}
-
 article img {
 	max-width: 100%;
 }
@@ -174,7 +172,7 @@ h1 {
 	color: #e94e5c;
 	font-size: 1.5em;
 	line-height: 1.2em;
-	margin-top: 3rem;
+	margin-top: 4rem;
 }
 
 h1 svg {
@@ -305,8 +303,14 @@ table th {
 	display: none;
 }
 
+.nonHumanClassTableWrapper table thead tr:last-child {
+	display: none;
+}
+
 .dividedTableWrapper {
-	display: inline-block;
+	display: block;
+	margin: 1rem 0;
+	max-width: 100%;
 	overflow-x: auto;
 }
 
@@ -464,11 +468,13 @@ a.licenseLink:hover {
 #menu-toggle:checked ~ .navMenu {
 	left: 0;
 }
+
 #menu-toggle:checked + .menu-label .menu-text {
 	transform: rotate(90deg);
 	left: -1rem;
 	top: 4rem;
 }
+
 /* Prevents close toggle from scrolling offscreen */
 #menu-toggle:checked + .menu__btn {
 	position: fixed;
@@ -507,6 +513,7 @@ a.licenseLink:hover {
 	padding: 0.5rem;
 	width: 100%;
 }
+
 .navBar a:visited {
 	color: #44fcfc;
 }
@@ -544,6 +551,10 @@ a.licenseLink:hover {
 	color: #44fcfc;
 }
 
+.navMenu a:active {
+	color: #e94e5c;
+}
+
 .navMenu li {
 	margin-bottom: 0;
 	position: relative;
@@ -552,27 +563,41 @@ a.licenseLink:hover {
 	white-space: nowrap;
 }
 
+.navMenu > ul > li.hasSubMenu:hover > a {
+	border: 1px solid #e94e5c;
+}
+
+/*
 .navMenu > ul > li.hasSubMenu > a {
 	border: 1px solid #e94e5c;
 }
 
+/*
 .navMenu li.hasSubMenu:hover,
 .navMenu li.hasSubMenu:focus-within {
 	background-color: rgba(233, 78, 92, 0.5);
 }
+*/
 
+.navMenu li:hover,
+.navMenu li:focus-within {
+	background-color: rgba(233, 78, 92, 0.5);
+}
+
+/*
 .navMenu ul li ul li.hasSubMenu:hover,
 .navMenu ul li ul li.hasSubMenu:focus-within {
 	background-color: transparent;
 }
+*/
 
 .navMenu li.hasSubMenu:hover a,
 .navMenu li.hasSubMenu:hover a:visited {
 	color: #44fcfc;
 }
 
-.navMenu li.hasSubMenu:hover a:hover,
-.navMenu li.hasSubMenu:hover a:visited:hover {
+.navMenu li a:hover,
+.navMenu li a:visited:hover {
 	color: #e94e5c;
 }
 
@@ -616,14 +641,28 @@ a.licenseLink:hover {
 	width: 100%;
 }
 
-.navMenu ul li ul li.hasSubMenu a {
+/*
+.navMenu ul li a:hover {
+	color: #e94e5c;
+}
+*/
+
+.navMenu ul li.hasSubMenu a {
 	padding-left: 2rem;
 }
 
-.navMenu ul li ul li.hasSubMenu > a {
+.navMenu ul li.hasSubMenu > a {
 	padding-left: 1rem;
 }
 
+.navMenu ul li.hasSubMenu ul li.hasSubMenu a {
+	padding-left: 4rem;
+}
+
+.navMenu ul li.hasSubMenu ul li.hasSubMenu > a {
+	padding-left: 2rem;
+}
+
 .navMenu-list-link.isCurrentSection {
 	background-color: #44fcfc;
 	border: 1px solid #e94e5c;
@@ -687,7 +726,11 @@ a.licenseLink:hover {
 }
 
 .pageMain {
-	padding: 2em 1em 1em;
+	padding: 1em;
+}
+
+.pageTitle {
+	margin-top: 0;
 }
 
 a.pageTitle-link,
@@ -702,6 +745,74 @@ a.pageTitle-link:visited {
 	border: 1px solid #e94e5c;
 }
 
+a.pageTitle-sublink {
+	font-size: smaller;
+	margin-top: 0.5rem;
+}
+
+.rulesMenu {
+	/* border: 1px solid #fadbb0; */
+	align-items: center;
+	/* background-color: rgba(37, 40, 55, 0.6); */
+	display: flex;
+	flex-direction: column;
+}
+
+.rulesMenu ul {
+	display: flex;
+	flex-direction: row;
+	margin: 0;
+	padding: 0;
+}
+
+.rulesMenu ul li {
+	border-bottom: 4px solid rgba(37, 40, 55, 0.6);
+	border-left: 2px solid rgba(37, 40, 55, 0.6);
+	border-right: 2px solid rgba(37, 40, 55, 0.6);
+	list-style: none;
+	margin: 0;
+}
+
+.rulesMenu ul li:first-child {
+	border-left: 4px solid rgba(37, 40, 55, 0.6);
+	border-radius: 0rem 0rem 0rem 0.3rem;
+}
+
+.rulesMenu ul li:last-child {
+	border-right: 4px solid rgba(37, 40, 55, 0.6);
+	border-radius: 0rem 0rem 0.3rem 0rem;
+}
+
+.rulesMenu ul li a,
+.rulesMenu ul li a:visited {
+	border-bottom: none;
+	color: #e94e5c;
+	padding: 0.25rem;
+}
+
+.rulesMenu ul li a:active,
+.rulesMenu ul li a:hover {
+	border: 1px solid #e94e5c;
+}
+
+.rulesTitle {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	margin-top: 0;
+}
+
+.rulesVersion {
+	background-color: rgba(37, 40, 55, 0.6);
+	padding: 0.25rem;
+	text-align: center;
+	width: 100%;
+}
+
+.sectionBackLink-wrapper {
+	margin-top: 2rem;
+}
+
 .siteTitle-text {
 	max-width: 60%;
 }
@@ -715,8 +826,12 @@ a.pageTitle-link:visited {
 }
 
 .table-of-contents {
+	backdrop-filter: blur(2rem);
 	border: 1px dashed #f6bc43;
-	display: inline-block;
+	display: block;
+	float: right;
+	margin-left: 2rem;
+	margin-bottom: 1rem;
 }
 
 .table-of-contents ul {
@@ -812,6 +927,12 @@ a.pageTitle-link:visited {
 	position: relative;
 }
 
+.siteTitle-link:hover,
+.siteTitle-link:visited:hover {
+	color: #e94e5c;
+	fill: #e94e5c;
+}
+
 .siteTitle-shipIcon {
 	max-width: 10rem;
 	fill: #e94e5c;
@@ -860,8 +981,12 @@ a.pageTitle-link:visited {
 }
 
 @media all and (min-width: 600px) {
-	h1 {
-		margin-top: 2rem;
+	html {
+		font-size: 18px;
+	}
+
+	h2 {
+		background-color: transparent;
 	}
 
 	.imgWrapper {
@@ -876,16 +1001,16 @@ a.pageTitle-link:visited {
 		display: block;
 	}
 
+	.pageTitle {
+		margin-top: 2rem;
+	}
+
 	.siteTitle-text {
 		text-align: center;
 	}
 }
 
-@media all and (min-width: 960px) {
-	html {
-		font-size: 18px;
-	}
-
+@media all and (min-width: 900px) {
 	h1 {
 		color: #e94e5c;
 		font-size: 2em;
@@ -956,6 +1081,10 @@ a.pageTitle-link:visited {
 		max-width: 960px;
 	}
 
+	.pageMain {
+		padding: 2em 1em 1em;
+	}
+
 	.siteTitle {
 		margin-top: 3rem;
 	}
@@ -972,3 +1101,9 @@ a.pageTitle-link:visited {
 		top: 0.75rem;
 	}
 }
+
+@media (hover: none) {
+	a {
+		transition-duration: 0.1s;
+	}
+}