From e6c5cb8ee156b5d5c447d574f0b2342799420b9f Mon Sep 17 00:00:00 2001
From: uzalu <uzalune@gmail.com>
Date: Tue, 25 Feb 2025 18:44:35 +0000
Subject: [PATCH] initial

---
 maxima_2025.html | 313 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 313 insertions(+)
 create mode 100644 maxima_2025.html
diff --git a/maxima_2025.html b/maxima_2025.html
new file mode 100644
index 0000000..4082405
--- /dev/null
+++ b/maxima_2025.html
@@ -0,0 +1,313 @@
+<html>
+	<head>
+		<title>Maxima 2025</title>
+		<style>
+			* {
+				box-sizing:border-box;
+			}
+			html {
+				font-family: lexend, roboto, sans serif;
+				color: white;
+				background-color: rgb(22,16,18);
+			}
+			body {
+				margin: 0;
+			}
+			#title {
+				font-size: 3em;
+				text-transform: uppercase;
+			}
+			#subtitle {
+				font-style: italic;
+			}
+			#title-container {
+				letter-spacing: .35em;
+				text-align: center;
+			}
+			#header {
+				background: rgb(128,0,64);
+				display:flex;
+				padding:1em;
+				flex-direction: row;
+				border-bottom:3pt solid white;
+				position:fixed;
+				width:100%;
+			}
+			#controls {
+				text-align: right;
+			}
+			#complexity-display {
+				display: inline;
+				font-weight:bold;
+			}
+			#complexity-label {
+				display: block;
+				text-align: center;
+				height:100%;
+				display:flex;
+				flex-direction:column;
+				justify-content: center;
+			}
+			.spacer {
+				flex-grow: 1;
+			}
+			#complexity {
+				-webkit-appearance: none;
+				appearance: none;
+				outline:none;
+				margin:.5em 0 0 0;
+				border-radius:8pt;
+				border:3pt solid white;
+/* 				flex-grow:1; */
+				background-color: rgba(0,0,0,0.5);
+				height:2.5em;
+			}
+			#complexity::-webkit-slider-thumb,#complexity::-moz-range-thumb {
+				-webkit-appearance: none;
+				appearance: none;
+				outline:none;
+				margin:0;
+				border-radius:0;
+				border:none;
+				height:100%;
+			}
+			
+			#content {
+				padding-top:8pt;
+				padding-left:8pt;
+				padding-right:8pt;
+				width:max(75%,400px);
+				max-width:100%;
+			}
+			.section {
+				border-left:3pt solid white;
+/* 				padding:0 8pt 8pt 8pt; */
+/* 				border-radius:8pt; */
+/* 				border-top-left-radius: 4pt; */
+/* 				border-bottom-left-radius: 4pt; */
+				margin-bottom:8pt;
+			}
+			.section p {
+				margin-left:8pt;
+				margin-right:8pt;
+			}
+			.section .section {
+				margin-left:8pt;
+			}
+			
+			.section.aside {
+				background: rgba(255,255,255,0.1);
+				padding:1px;
+				border-radius:8pt;
+				margin-left:24pt;
+				margin-right:36pt;
+				font-size: .9em;
+			}
+			
+			.section.aside.caution {
+				background: rgba(255,192,0,0.1);
+				font-size: 1em;
+			}
+			.section.aside.caution::before {
+				content: 'Caution';
+				margin-left:8pt;
+				color: rgba(255,255,255,.35);
+				letter-spacing: .35em;
+				text-transform: uppercase;
+				font-size: .8em;
+			}
+			
+			.section.aside.commentary {
+				background: rgba(0,192,96,0.1);
+				font-size: .8em;
+			}
+			.section.aside.commentary::before {
+				content: 'Commentary';
+				margin-left:8pt;
+				color: rgba(255,255,255,.35);
+				letter-spacing: .35em;
+				text-transform: uppercase;
+			}
+			
+			h1,h2,h3,h4,h5,h6 {
+				margin-top:0;
+				margin-bottom:0;
+				font-weight: unset;
+				border-left:8pt solid white;
+				padding-left:8pt;
+				font-size:1.75em;
+			}
+			
+			.monospace {
+				font-family: roboto mono, monospace;
+				background: rgba(0,0,0,0.25);
+				color: rgba(255,255,255,0.75);
+				font-size: .9em;
+				border-radius:8pt;
+				padding:4pt;
+			}
+			
+			.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10 {
+				display:none;
+			}
+			.show-c1 .c1,
+			.show-c2 .c2,
+			.show-c3 .c3,
+			.show-c4 .c4,
+			.show-c5 .c5,
+			.show-c6 .c6,
+			.show-c7 .c7,
+			.show-c8 .c8,
+			.show-c9 .c9,
+			.show-c10 .c10
+			{
+				display:revert;
+			}
+			
+			.ce1,.ce2,.ce3,.ce4,.ce5,.ce6,.ce7,.ce8,.ce9,.ce10 {
+				display:none;
+			}
+			.show-ce1 .ce1,
+			.show-ce2 .ce2,
+			.show-ce3 .ce3,
+			.show-ce4 .ce4,
+			.show-ce5 .ce5,
+			.show-ce6 .ce6,
+			.show-ce7 .ce7,
+			.show-ce8 .ce8,
+			.show-ce9 .ce9,
+			.show-ce10 .ce10
+			{
+				display:revert;
+			}
+			
+			.cl1,.cl2,.cl3,.cl4,.cl5,.cl6,.cl7,.cl8,.cl9,.cl10 {
+				display:none;
+			}
+			.show-cl1 .cl1,
+			.show-cl2 .cl2,
+			.show-cl3 .cl3,
+			.show-cl4 .cl4,
+			.show-cl5 .cl5,
+			.show-cl6 .cl6,
+			.show-cl7 .cl7,
+			.show-cl8 .cl8,
+			.show-cl9 .cl9,
+			.show-cl10 .cl10
+			{
+				display:revert;
+			}
+			
+			
+		</style>
+	</head>
+	<body class="show-c1 show-c2 show-c3 show-c4">
+		<div id="header">
+			<div id="title-container">
+				<div id="title">Maxima</div>
+				<div id="subtitle">⸻ 2025 Edition ⸻</div>
+			</div>
+			<div class="spacer"></div>
+			<div id="controls">
+				<label id="complexity-label">
+					<div class="complexity-text">
+						Detail: <div id="complexity-display"></div>/10
+					</div>
+					<input type="range" id="complexity" value="5" min="1" max="10" />
+				</label>
+			</div>
+		</div>
+		<div id="header-spacer"></div>
+		<div id="content">
+			
+			<div class="section">
+				<h1>Section First-level</h1>
+				<p>test</p>
+				
+				<div class="section">
+					<h2>Section Second-level</h2>
+					<p>test</p>
+					
+				</div>
+				
+				<div class="section c2">
+					<h2>Section Second-level</h2>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					
+					<div class="section c4">
+						<h3>Section Third-level</h3>
+						<p>test <span class="c10">abc </span>test</p>
+						
+					</div>
+					
+					<p class="c5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					
+					<p class="c3 monospace">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					
+					<div class="section aside c7">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					</div>
+					
+					<div class="section aside commentary c10">
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+					</div>
+					
+					<p class="cl6">test0</p>
+					<p class="ce7">test1</p>
+					<p class="ce8">test2</p>
+					<p class="c9">test3</p>
+					
+					<p class="c9">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					
+					<div class="section aside caution c1">
+						<p>IMPORTANT 1</p>
+					</div>
+					
+					<p>test</p>
+					
+				</div>
+					
+				<div class="section aside caution c1">
+					<p>IMPORTANT 2</p>
+				</div>
+				
+				<p>test</p>
+				
+			</div>
+			
+		</div>
+		
+		<script>
+			const display = document.querySelector("#complexity-display");
+			const input = document.querySelector("#complexity");
+			const body = document.querySelector("body");
+			function updateDisplay(){
+				display.textContent = input.value;
+			}
+			function updateTexts(){
+				updateDisplay()
+				let classes = "";
+				for(let i = 1; i <= input.value; i++) {
+					classes += " show-c" + i;
+				}
+				for(let i = input.value; i <= 10; i++) {
+					classes += " show-cl" + i;
+				}
+				classes += " show-ce" + input.value;
+				body.className = classes.trim();
+			}
+			input.addEventListener("input", updateDisplay);
+			input.addEventListener("change", updateTexts);
+			updateTexts();
+			
+			const header = document.querySelector("#header");
+			const headerSpacer = document.querySelector("#header-spacer");
+			headerSpacer.style.height = header.offsetHeight;
+			setInterval(() => {
+				headerSpacer.style.height = header.offsetHeight;
+			},1000);
+			
+		</script>
+		
+	</body>
+</html>
