uzalu/Maxima_2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

visual overhaul, including tech tweaks

Browse Source
This commit is contained in:
uzalu
2025-04-26 03:57:43 +01:00
parent 172334af56
commit 8cc6219bd2
1 changed files with 801 additions and 593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
maxima_2025.html
View File

@@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<title>Maxima 2025</title> <title>Maxima 2025</title>
<link href='https://fonts.googleapis.com/css?family=Lexend' rel='stylesheet'>
<style> <style>
* { * {
box-sizing:border-box; box-sizing:border-box;
@@ -15,10 +16,11 @@
margin: 0; margin: 0;
} }
#title { #title {
font-size: 3em; font-size: 5em;
text-transform: uppercase; text-transform: uppercase;
} }
#subtitle { #subtitle {
font-size:1.5em;
font-style: italic; font-style: italic;
} }
#title-container { #title-container {
@@ -27,22 +29,53 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
margin-bottom:20pt;
} }
#header { #header {
background: rgb(128,0,64); /* background: rgb(128,0,64); */
display:flex; /* display:flex; */
padding:1em; /* padding:1em; */
flex-direction: row; /* flex-direction: row; */
border-bottom:3pt solid white; /* justify-content: center; */
/* border-bottom:3pt solid white; */
position:fixed; position:fixed;
width:100%; width:100%;
z-index:1; /* z-index:1; */
/*margin-left: 10pt;
margin-right: 10pt;
margin-top: 10pt;*/
/* background: rgba(20,20,20,0.5); */
/* backdrop-filter: blur(30px); */
/* transition: transform .5s ease, backdrop-filter 2s ease; */
transition: all .5s ease;
background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
text-align: center;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
cursor: default;
} }
#header-spacer { #header-spacer {
height: var(--headheight); height: var(--headheight);
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
transition: height .5s ease;
} }
/*#title-intro-container {
transition: opacity .25s ease;
}*/
#controls { #controls {
text-align: right; text-align: right;
position:fixed;
top:0;
right:0;
z-index: 2;
padding:10pt;
opacity:0;
transition: transform .5s ease, opacity 2s ease;
border-bottom-left-radius: 20pt;
/* backdrop-filter: blur(30px); */
/* transform: translateY(-100%); */
} }
#complexity-display { #complexity-display {
display: inline; display: inline;
@@ -55,6 +88,7 @@
display:flex; display:flex;
flex-direction:column; flex-direction:column;
justify-content: center; justify-content: center;
align-items: center;
} }
#complexity-subtext { #complexity-subtext {
font-size:.8em; font-size:.8em;
@@ -84,18 +118,67 @@
height:100%; height:100%;
} }
#page {
/* display: flex; */
/* flex-direction: row-reverse; */
/* justify-content: space-between; */
/* align-items: flex-start; */
/* justify-content: center; */
/* justify-content: left; */
/* align-items: center; */
padding: 10pt;
margin-bottom:100vh;
}
#content {
background: rgba(20,20,20,0.9);
backdrop-filter: blur(30px);
border-radius: 16pt;
padding: 10pt;
}
/*#sidebar {
position:fixed;
right: 10pt;
transition: opacity .5s ease;
}*/
.bottom #controls, .top #controls {
/* opacity:0; */
transform: translateY(-100%);
transition: transform .5s ease, opacity .35s ease;
}
.scrolled:not(.bottom) #controls {
opacity: 1;
}
/* #controls.top { */
/* background: unset; */
/* backdrop-filter: unset; */
/* backdrop-filter: blur(15px); */
/* } */
/* #controls.scrolled { */
/* backdrop-filter: blur(30px); */
/* } */
.past-header #title-intro-container {
opacity:0;
}
.bottom #header {
/* background: unset; */
opacity: 0;
}
/*.scrolled #header {
min-height:0;
align-items: start;
}*/
#content { #content {
/*padding-top:10pt; /*padding-top:10pt;
padding-left:10pt; padding-left:10pt;
padding-right:10pt;*/ padding-right:10pt;*/
padding: 10pt; /* padding: 10pt; */
margin: 10pt; width:max(75%,400pt);
width:max(75%,400px);
max-width:100%; max-width:100%;
background: rgba(20,20,20,0.9); /* background: rgba(20,20,20,0.9); */
backdrop-filter: blur(30px); /* backdrop-filter: blur(30px); */
border-radius: 16pt; /* border-radius: 16pt; */
margin-bottom:100vh; /* margin-bottom:100vh; */
} }
/*.section { /*.section {
margin-bottom: 14pt; margin-bottom: 14pt;
@@ -280,13 +363,48 @@
opacity: .75; opacity: .75;
} }
a { a {
color: rgb(255,64,128); /* color: rgb(255,80,160); */
/* color: white; */ color: white;
text-decoration: none; text-decoration: none;
/* border-radius:1em; */ /* border-radius:1em; */
/* background-color: rgb(146,0,60); */ /* background-color: rgb(146,0,60); */
/* background-color: rgba(255,0,96,0.1); */
/* background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0)); */
background: rgba(255,255,255,0.05);
/* border: 2pt solid white; */ /* border: 2pt solid white; */
/* padding: 0 .5em 0 .5em; */ /* padding: 0 .5em 0 .5em; */
/* text-shadow: 0 0 2pt rgba(255,255,255,0.5); */
/* border-radius: 16pt; */
/* border-top-left-radius: 4pt; */
/* border-top-right-radius: 4pt; */
/* border-bottom-left-radius: 4pt; */
/* border-bottom-right-radius: 4pt; */
border-radius: 4pt;
padding: 0 4pt 0 4pt;
/* border-bottom: 1px solid rgba(255,255,255,.1); */
transition: background .5s ease;
}
/*.section:hover a {
border-bottom: 1px solid rgba(255,255,255,.5);
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
}*/
a:hover {
background: rgb(255,0,96)!important;
/* border-bottom: 1px solid rgb(255,255,255); */
transition: background .1s ease;
/* border-bottom-left-radius: unset; */
/* border-bottom-right-radius: unset; */
}
a:active {
background: rgb(128,0,48)!important;
/* border-bottom: 1px solid rgb(255,255,255); */
transition: background 0s ease;
/* border-bottom-left-radius: unset; */
/* border-bottom-right-radius: unset; */
}
#intro a {
background: rgba(128,128,128,0.5);
} }
/*#content [id]::before { /*#content [id]::before {
content: ''; content: '';
@@ -296,7 +414,8 @@
visibility: hidden; visibility: hidden;
}*/ }*/
#content [id] { #content [id] {
scroll-margin-top: calc(var(--headheight) + 1em); /* scroll-margin-top: calc(var(--headheight) + 1em); */
scroll-margin-top: 1em;
} }
#content table.side-by-side { #content table.side-by-side {
background: none; background: none;
@@ -396,27 +515,14 @@
<body class="show-c1 show-c2 show-c3 show-c4"> <body class="show-c1 show-c2 show-c3 show-c4">
<div id="bg"></div> <div id="bg"></div>
<div id="header"> <div id="header">
<div id="title-intro-container">
<div id="title-container"> <div id="title-container">
<div id="title">Maxima</div> <div id="title">Maxima</div>
<div id="subtitle">&#11835; 2025 Edition &#11835;</div> <div id="subtitle">&#11835; 2025 Edition &#11835;</div>
</div> </div>
<div class="spacer"></div>
<div id="controls"> <div id="intro">
<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" />
<div id="complexity-subtext">
Drag this slider to change the document's detail level
</div>
</label>
</div>
</div>
<div id="header-spacer"></div>
<div id="content">
<div class="section">
<h1>Maxima 2025</h1>
<p> <p>
A set of rules and guidance<br /> A set of rules and guidance<br />
Which make it easier to create and run<br /> Which make it easier to create and run<br />
@@ -430,6 +536,26 @@
<a href="https://git.uzalu.net/uzalu/Maxima_2025/src/branch/master/LICENCE.md">License</a> <a href="https://git.uzalu.net/uzalu/Maxima_2025/src/branch/master/LICENCE.md">License</a>
</p> </p>
</div> </div>
</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" />
<div id="complexity-subtext">
Drag this slider to change the document's detail level
</div>
</label>
</div>
</div>
<div id="header-spacer"></div>
<div id="page">
<div id="content">
<div class="section"> <div class="section">
<h1>Characters</h1> <h1>Characters</h1>
@@ -1007,7 +1133,9 @@
</div> </div>
</div> </div> <!--content-->
</div> <!--page-->
<script> <script>
const display = document.querySelector("#complexity-display"); const display = document.querySelector("#complexity-display");
@@ -1022,29 +1150,100 @@
let v = input.value; let v = input.value;
for(let i = 1; i <= 10; i++) { for(let i = 1; i <= 10; i++) {
if(v >= i){ if(v >= i){
classes += " show-c" + i; // classes += " show-c" + i;
body.classList.add("show-c" + i);
} else {
body.classList.remove("show-c" + i);
} }
if(v < i){ if(v < i){
classes += " show-cl" + i; // classes += " show-cl" + i;
body.classList.add("show-cl" + i);
} else {
body.classList.remove("show-cl" + i);
} }
if(v <= i){ if(v <= i){
classes += " show-cle" + i; // classes += " show-cle" + i;
body.classList.add("show-cle" + i);
} else {
body.classList.remove("show-cle" + i);
} }
body.classList.remove("show-ce" + i);
} }
classes += " show-ce" + input.value; body.classList.add("show-ce" + input.value);
body.className = classes.trim(); // classes += " show-ce" + input.value;
// body.className = classes.trim();
// body.className += classes;
} }
input.addEventListener("input", updateDisplay); input.addEventListener("input", updateDisplay);
input.addEventListener("change", updateTexts); input.addEventListener("change", updateTexts);
updateTexts(); updateTexts();
const bg = document.querySelector("#bg"); const bg = document.querySelector("#bg");
bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 21) + ".jpg\")"; bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 23) + ".jpg\")";
setTimeout(() => { setTimeout(() => {
bg.style.opacity = 1; bg.style.opacity = 1;
},100); },100);
const header = document.querySelector("#header"); const header = document.querySelector("#header");
// const controls = document.querySelector("#controls");
let atBottom = 0;
let atTop = 0;
let atScrolled = 0;
let pastHeaderSpace = 0;
function updateHeaderState() {
// partly from https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom-not-just-the-window-but-any-element
if (Math.abs(body.scrollHeight - body.clientHeight - body.scrollTop) < 1) {
if(!atBottom){
// body.className += " bottom";
body.classList.add("bottom");
atBottom = 1;
}
} else if(atBottom) {
// body.className = body.className.replaceAll("bottom","").trim();
body.classList.remove("bottom");
atBottom = 0;
}
if (body.scrollTop < 1) {
if(!atTop){
// body.className += " top";
body.classList.add("top");
atTop = 1;
}
} else if(atTop) {
// body.className = body.className.replaceAll("top","").trim();
body.classList.remove("top");
atTop = 0;
}
if (body.scrollTop >= 1) {
if(!atScrolled) {
// body.className += " scrolled";
body.classList.add("scrolled");
atScrolled = 1;
}
} else if(atScrolled) {
// body.className = body.className.replaceAll("scrolled","").trim();
body.classList.remove("scrolled");
atScrolled = 0;
}
if (body.scrollTop > currentHeaderSpace) {
if(!pastHeaderSpace) {
// body.className += " past-header";
body.classList.add("past-header");
pastHeaderSpace = 1;
}
} else if(pastHeaderSpace) {
// body.className = body.className.replaceAll("past-header","").trim();
body.classList.remove("past-header");
pastHeaderSpace = 0;
}
}
document.addEventListener("scroll", updateHeaderState);
setTimeout(updateHeaderState,50);
const rt = document.querySelector(":root"); const rt = document.querySelector(":root");
var currentHeaderSpace = 0; var currentHeaderSpace = 0;
@@ -1057,8 +1256,17 @@
} }
} }
updateHeaderSpacer(); updateHeaderSpacer();
document.addEventListener("scroll", updateHeaderSpacer);
setInterval(updateHeaderSpacer,1000); setInterval(updateHeaderSpacer,1000);
if(body.scrollTop < 1) {
setTimeout(() => {
if(body.scrollTop < 1) {
body.scrollTop = 200;
}
},2000);
}
</script> </script>
</body> </body>