visual overhaul, including tech tweaks
This commit is contained in:
290
maxima_2025.html
290
maxima_2025.html
@@ -1,6 +1,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Maxima 2025</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Lexend' rel='stylesheet'>
|
||||
<style>
|
||||
* {
|
||||
box-sizing:border-box;
|
||||
@@ -15,10 +16,11 @@
|
||||
margin: 0;
|
||||
}
|
||||
#title {
|
||||
font-size: 3em;
|
||||
font-size: 5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#subtitle {
|
||||
font-size:1.5em;
|
||||
font-style: italic;
|
||||
}
|
||||
#title-container {
|
||||
@@ -27,22 +29,53 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom:20pt;
|
||||
}
|
||||
#header {
|
||||
background: rgb(128,0,64);
|
||||
display:flex;
|
||||
padding:1em;
|
||||
flex-direction: row;
|
||||
border-bottom:3pt solid white;
|
||||
/* background: rgb(128,0,64); */
|
||||
/* display:flex; */
|
||||
/* padding:1em; */
|
||||
/* flex-direction: row; */
|
||||
/* justify-content: center; */
|
||||
/* border-bottom:3pt solid white; */
|
||||
position:fixed;
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
display: inline;
|
||||
@@ -55,6 +88,7 @@
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#complexity-subtext {
|
||||
font-size:.8em;
|
||||
@@ -84,18 +118,67 @@
|
||||
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 {
|
||||
/*padding-top:10pt;
|
||||
padding-left:10pt;
|
||||
padding-right:10pt;*/
|
||||
padding: 10pt;
|
||||
margin: 10pt;
|
||||
width:max(75%,400px);
|
||||
/* padding: 10pt; */
|
||||
width:max(75%,400pt);
|
||||
max-width:100%;
|
||||
background: rgba(20,20,20,0.9);
|
||||
backdrop-filter: blur(30px);
|
||||
border-radius: 16pt;
|
||||
margin-bottom:100vh;
|
||||
/* background: rgba(20,20,20,0.9); */
|
||||
/* backdrop-filter: blur(30px); */
|
||||
/* border-radius: 16pt; */
|
||||
/* margin-bottom:100vh; */
|
||||
}
|
||||
/*.section {
|
||||
margin-bottom: 14pt;
|
||||
@@ -280,13 +363,48 @@
|
||||
opacity: .75;
|
||||
}
|
||||
a {
|
||||
color: rgb(255,64,128);
|
||||
/* color: white; */
|
||||
/* color: rgb(255,80,160); */
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
/* border-radius:1em; */
|
||||
/* 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; */
|
||||
/* 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: '';
|
||||
@@ -296,7 +414,8 @@
|
||||
visibility: hidden;
|
||||
}*/
|
||||
#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 {
|
||||
background: none;
|
||||
@@ -396,27 +515,14 @@
|
||||
<body class="show-c1 show-c2 show-c3 show-c4">
|
||||
<div id="bg"></div>
|
||||
<div id="header">
|
||||
|
||||
<div id="title-intro-container">
|
||||
<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" />
|
||||
<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>
|
||||
|
||||
<div id="intro">
|
||||
<p>
|
||||
A set of rules and guidance<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>
|
||||
</p>
|
||||
</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">
|
||||
<h1>Characters</h1>
|
||||
@@ -1007,7 +1133,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> <!--content-->
|
||||
|
||||
</div> <!--page-->
|
||||
|
||||
<script>
|
||||
const display = document.querySelector("#complexity-display");
|
||||
@@ -1022,29 +1150,100 @@
|
||||
let v = input.value;
|
||||
for(let i = 1; i <= 10; 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){
|
||||
classes += " show-cl" + i;
|
||||
// classes += " show-cl" + i;
|
||||
body.classList.add("show-cl" + i);
|
||||
} else {
|
||||
body.classList.remove("show-cl" + 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.className = classes.trim();
|
||||
body.classList.add("show-ce" + input.value);
|
||||
// classes += " show-ce" + input.value;
|
||||
// body.className = classes.trim();
|
||||
// body.className += classes;
|
||||
}
|
||||
input.addEventListener("input", updateDisplay);
|
||||
input.addEventListener("change", updateTexts);
|
||||
updateTexts();
|
||||
|
||||
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(() => {
|
||||
bg.style.opacity = 1;
|
||||
},100);
|
||||
|
||||
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");
|
||||
|
||||
var currentHeaderSpace = 0;
|
||||
@@ -1057,8 +1256,17 @@
|
||||
}
|
||||
}
|
||||
updateHeaderSpacer();
|
||||
document.addEventListener("scroll", updateHeaderSpacer);
|
||||
setInterval(updateHeaderSpacer,1000);
|
||||
|
||||
if(body.scrollTop < 1) {
|
||||
setTimeout(() => {
|
||||
if(body.scrollTop < 1) {
|
||||
body.scrollTop = 200;
|
||||
}
|
||||
},2000);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user