updates

src/assets/scripts/scripts.js

@@ -28,7 +28,8 @@ export default (() => {
     */
 
     document.addEventListener('DOMContentLoaded', () => {
-        setTimeout(() => {
+        let to = null;
+        to = setTimeout(() => {
             // Lazy-Load Media
             if (typeof loadMedia === 'function') {
                 loadMedia('.js-lazyLoader', null, true);
@@ -65,6 +66,25 @@ export default (() => {
                         ' site:' + window.location.hostname;
                 });
 
+            // Make table captions into collapsable toggles
+            document
+                .querySelectorAll('.dividedTableWrapper > table > caption')
+                .forEach((caption) => {
+                    const theClass = 'js-hideContent',
+                        wrapper = caption.closest('.dividedTableWrapper');
+
+                    // removes inline-styled override from markdown-it-multimd-table
+                    caption.removeAttribute('style');
+
+                    if (!wrapper) return;
+
+                    wrapper.classList.add('js-toggleable');
+
+                    caption.addEventListener('click', (e) => {
+                        wrapper.classList.toggle(theClass);
+                    });
+                });
+
             // Add shadow to toolDetails that have extra content
             // I know - ALL OF THIS CODE just for that little effect
             const details = document.querySelectorAll('.toolDetails'),
@@ -118,6 +138,8 @@ export default (() => {
             });
 
             details.forEach((detail) => setBottomShadow(detail));
+
+            clearTimeout(to);
         }, 1);
     });
 })();

src/assets/styles/styles.css

@@ -28,7 +28,7 @@ html {
 body {
 	background: #2c0f2a;
 	/* Old browsers */
-	background: url("/images/site-bg.jpg") bottom fixed;
+	background: url("/images/site-bg.jpg") top fixed;
 	background-size: cover;
 	color: #fadbb0;
 	font-family: sans-serif;
@@ -228,13 +228,6 @@ li {
 	margin-bottom: 0.6em;
 }
 
-/* turn on for that authentic OSE feel! */
-/*
-ul li::marker {
-	content: "▶ ";
-}
-*/
-
 li ul {
 	margin-top: 0.6em;
 }
@@ -344,21 +337,34 @@ table th {
 	background: rgba(37, 40, 55, 0.6);
 }
 
+.clearBoth {
+	clear: both;
+}
+
 .contentWarning {
 	font-style: italic;
 }
 
 .dividedTableWrapper {
 	display: block;
+	box-shadow: none;
 	margin: 1rem 0;
+	max-height: 5000px;
 	max-width: 100%;
 	overflow-x: auto;
+	transition: box-shadow 0.3s ease-out, max-height 0.3s ease-out;
 }
 
 .dividedTableWrapper h4 {
 	text-align: center;
 }
 
+
+.dividedTableWrapper table caption {
+	padding: .5rem 1.5rem;
+	position: relative;
+}
+
 .dividedTableWrapper table td {
 	border: 1px dashed #f6bc43;
 }
@@ -440,26 +446,34 @@ a.hiddenLink:hover {
 }
 
 .imgWrapper {
-	float: right;
-	margin: 0 -0.5rem 0 1rem;
-	max-width: 50%;
+	align-items: center;
+	clear: both;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	max-width: 100%;
 	position: relative;
 	text-align: center;
 	z-index: 0;
 }
 
-.imgWrapper figure>a {
+.imgWrapper figure {
+	margin: 0;
+	max-width: 50%;
+}
+
+.imgWrapper figure > a {
 	border-color: transparent;
 	display: inline-block;
 	padding: 0.5rem 0.5rem 0.25rem;
 }
 
-.imgWrapper figure>a:hover {
+.imgWrapper figure > a:hover {
 	border-color: #e94e5c;
 }
 
-.levelTable table thead tr:first-child th {
-	border-bottom-style: dashed;
+.imgWrapper figure > figcaption {
+	backdrop-filter: blur(1rem);
 }
 
 .licenseLink {
@@ -596,53 +610,6 @@ a.licenseLink:hover {
 	top: 1rem;
 }
 
-/**
- * Scrolling shadows by https://kizu.dev/ and https://lea.verou.me/
- * Only works in browsers supporting background-attachment: local; & CSS gradients
- * Degrades gracefully
- */
-
-.menubar {
-   html {
-	   background: white;
-	   font: 120% sans-serif;
-   }
-   
-   .scrollbox {
-	   overflow: auto;
-	   width: 200px;
-	   max-height: 200px;
-	   margin: 50px auto;
-   
-	   background:
-		   /* Shadow covers */
-		   linear-gradient(white 30%, rgba(255,255,255,0)),
-		   linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-		   
-		   /* Shadows */
-		   radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
-		   radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
-	   background:
-		   /* Shadow covers */
-		   linear-gradient(white 30%, rgba(255,255,255,0)),
-		   linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-		   
-		   /* Shadows */
-		   radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
-		   radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
-	   background-repeat: no-repeat;
-	   background-color: white;
-	   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-	   
-	   /* Opera doesn't support this in the shorthand */
-	   background-attachment: local, local, scroll, scroll;
-   }
-   
-	background: #282c32;
-	display: static;
-	max-height: 1px;
-}
-
 .navBar {
 	background: #282c32;
 	display: none;
@@ -894,7 +861,7 @@ a.licenseLink:hover {
 }
 
 .pageMain {
-	padding: 1em;
+	padding: 0 1em 1em;
 }
 
 .pageTitle {
@@ -1063,6 +1030,7 @@ a.pageTitle-sublink {
 }
 
 .sectionBackLink-wrapper {
+	clear: both;
 	margin-top: 2rem;
 }
 
@@ -1239,6 +1207,33 @@ a.pageTitle-sublink {
  * JS Overrides
  ****************************************************************************/
 
+.js .dividedTableWrapper.js-toggleable {
+	display: inline-block;
+}
+
+.js .dividedTableWrapper.js-hideContent {
+	box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
+	max-height: 6rem;
+}
+
+
+.js .dividedTableWrapper.js-toggleable table caption::before {
+	content: "\25BC";
+	left: .5rem;
+	position: absolute;
+	transform: rotate(0deg);
+	transition: transform 0.5s ease-out;
+}
+
+.js .dividedTableWrapper.js-toggleable table caption {
+	cursor: pointer;
+	pointer-events: all;
+}
+
+.js .dividedTableWrapper.js-toggleable.js-hideContent table caption::before {
+	transform: rotate(-90deg);
+}
+
 .js .pubDate.isDone {
 	-webkit-transition: 0.3s visibility;
 	transition: 0.3s visibility;
@@ -1253,7 +1248,6 @@ a.pageTitle-sublink {
 	visibility: visible;
 }
 
-
 /****************************************************************************
  * Media Queries
  ****************************************************************************/
@@ -1269,32 +1263,20 @@ a.pageTitle-sublink {
 		font-size: 18px;
 	}
 
-	/*
-	h2 {
-		background-color: transparent;
-	}
-	*/
-
 	.imgWrapper {
-		max-width: 33%;
-	}
+		float: right;
+		margin: 0 -0.5rem 0 1rem;
+		max-width: 30%;
+	}	
 
+	.imgWrapper figure {
+		max-width: 100%;
+	}
+	
 	.menubar {
 		height: auto;
 	}
 
-	/*
-	.navBar {
-		display: block;
-	}
-	*/
-
-	/*
-	.pageTitle {
-		margin-top: 2rem;
-	}
-	*/
-
 	.siteTitle-text {
 		text-align: center;
 	}
@@ -1375,10 +1357,6 @@ a.pageTitle-sublink {
 		max-width: 960px;
 	}
 
-	.pageMain {
-		padding: 2em 1em 1em;
-	}
-
 	.pageTitle {
 		margin-top: 2rem;
 	}