314 lines
8.7 KiB
HTML
314 lines
8.7 KiB
HTML
<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>
|