1405 lines
42 KiB
HTML
1405 lines
42 KiB
HTML
<html>
|
|
<head>
|
|
<title>Maxima 2025</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Lexend' rel='stylesheet'>
|
|
<style>
|
|
* {
|
|
box-sizing:border-box;
|
|
}
|
|
html {
|
|
font-family: lexend, roboto, sans serif;
|
|
color: white;
|
|
background-color: rgb(22,16,18);
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
#title {
|
|
font-size: 5em;
|
|
text-transform: uppercase;
|
|
}
|
|
#subtitle {
|
|
font-size:1.5em;
|
|
/* font-style: italic; */
|
|
}
|
|
#title-container {
|
|
letter-spacing: .35em;
|
|
text-align: center;
|
|
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; */
|
|
/* justify-content: center; */
|
|
/* border-bottom:3pt solid white; */
|
|
position:fixed;
|
|
width:100%;
|
|
/* 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 2s ease; */
|
|
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
|
|
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
|
|
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 25%, rgba(0,0,0,.75) 75%); */
|
|
/* background: rgba(0,0,0,.5); */
|
|
text-align: center;
|
|
height:100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: default;
|
|
/* transition: opacity .5s ease; */
|
|
}
|
|
#header-spacer {
|
|
height: var(--headheight);
|
|
/* background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); */
|
|
transition: height .5s ease;
|
|
}
|
|
#gradient {
|
|
position:fixed;
|
|
width:100%;
|
|
background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
|
|
height:100vh;
|
|
transition: opacity .5s ease;
|
|
opacity: calc(1 - (var(--scrollratioboundedslower) / 2));
|
|
}
|
|
#title-intro-container {
|
|
opacity: calc(1 - var(--scrollratioboundedslow));
|
|
/* transition: filter .5s ease; */
|
|
/* backdrop-filter: blur(5px); */
|
|
/* border-radius: 10pt; */
|
|
}
|
|
#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;
|
|
font-weight:bold;
|
|
}
|
|
#complexity-label {
|
|
display: block;
|
|
text-align: center;
|
|
height:100%;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#complexity-subtext {
|
|
font-size:.8em;
|
|
max-width: 15em;
|
|
}
|
|
.spacer {
|
|
flex-grow: 1;
|
|
}
|
|
#complexity {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
outline:none;
|
|
margin:.5em 0 .5em 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%;
|
|
}
|
|
|
|
#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;
|
|
}*/
|
|
/*.past-header #header {
|
|
opacity:0;
|
|
}*/
|
|
.bottom #gradient {
|
|
opacity: 0;
|
|
}
|
|
|
|
/*.scrolled #header {
|
|
min-height:0;
|
|
align-items: start;
|
|
}*/
|
|
|
|
#content {
|
|
/*padding-top:10pt;
|
|
padding-left:10pt;
|
|
padding-right:10pt;*/
|
|
/* 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; */
|
|
}
|
|
/*.section {
|
|
margin-bottom: 14pt;
|
|
padding-left: 14pt;
|
|
padding-top: 14pt;
|
|
border-image: linear-gradient(to right, white 25%, transparent 75%);
|
|
border-image-width: 3pt;
|
|
border-image-slice: 1 1 0 1;
|
|
}*/
|
|
.section {
|
|
margin-bottom: 20pt;
|
|
border-left: 3pt solid white;
|
|
background-color: rgba(255,255,255,0.03);
|
|
padding: 14pt 8pt 1pt 14pt;
|
|
border-top-right-radius: 16pt;
|
|
border-bottom-right-radius: 16pt;
|
|
}
|
|
/*.section p {
|
|
margin-left:8pt;
|
|
margin-right:8pt;
|
|
}*/
|
|
/*.section .section {
|
|
margin-left:8pt;
|
|
}*/
|
|
|
|
.aside {
|
|
/* background: rgba(255,255,255,0.1); */
|
|
background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.01));
|
|
border-radius: 8pt;
|
|
font-size: .9em;
|
|
padding: 10pt;
|
|
/* width: max(75%,400pt); */
|
|
}
|
|
.section.aside {
|
|
border-radius:unset;
|
|
}
|
|
|
|
.aside.caution {
|
|
background: rgba(255,160,0,0.1);
|
|
font-size: 1em;
|
|
}
|
|
.aside.caution::before {
|
|
content: 'Caution';
|
|
margin-left:8pt;
|
|
margin-right:8pt;
|
|
color: rgba(255,255,255,.35);
|
|
letter-spacing: .35em;
|
|
text-transform: uppercase;
|
|
font-size: .8em;
|
|
}
|
|
|
|
.aside.commentary {
|
|
background: rgba(0,192,96,0.1);
|
|
font-size: .8em;
|
|
}
|
|
.aside.commentary::before {
|
|
content: 'Commentary';
|
|
margin-left:8pt;
|
|
color: rgba(255,255,255,.35);
|
|
letter-spacing: .35em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.aside.notes {
|
|
background: rgba(128,64,255,0.1);
|
|
font-size: 1em;
|
|
}
|
|
.aside.notes::before {
|
|
content: 'Notes';
|
|
margin-left:8pt;
|
|
margin-right:8pt;
|
|
color: rgba(255,255,255,.35);
|
|
letter-spacing: .35em;
|
|
text-transform: uppercase;
|
|
font-size: .8em;
|
|
}
|
|
|
|
.aside.important {
|
|
/* background: rgba(255,255,0,0.1); */
|
|
background: linear-gradient(to bottom right, rgba(255,255,0,0.2), rgba(255,255,0,0.02) 50%);
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
.aside.important::before {
|
|
content: 'Important';
|
|
/* margin-left:8pt; */
|
|
/* margin-right:8pt; */
|
|
/* color: rgba(255,255,255,.35); */
|
|
color: rgba(255,255,128,.75);
|
|
letter-spacing: .35em;
|
|
text-transform: uppercase;
|
|
font-size: .75em;
|
|
margin-bottom:.25em;
|
|
display:block;
|
|
}
|
|
|
|
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;
|
|
}
|
|
h1 {
|
|
font-size:1.75em;
|
|
}
|
|
h2 {
|
|
font-size:1.7em;
|
|
}
|
|
h3 {
|
|
font-size:1.65em;
|
|
}
|
|
h4 {
|
|
font-size:1.6em;
|
|
}
|
|
h5 {
|
|
font-size:1.55em;
|
|
}
|
|
h6 {
|
|
font-size:1.5em;
|
|
}
|
|
/*h1::before {
|
|
content: "";
|
|
}
|
|
h2::before {
|
|
content: "-";
|
|
}
|
|
h3::before {
|
|
content: "--";
|
|
}
|
|
h4::before {
|
|
content: "---";
|
|
}
|
|
h5::before {
|
|
content: "----";
|
|
}
|
|
h6::before {
|
|
content: "-----";
|
|
}*/
|
|
|
|
.monospace,.mono {
|
|
font-family: roboto mono, monospace;
|
|
background: rgba(0,0,0,0.25);
|
|
color: rgba(255,255,255,0.75);
|
|
font-size: .9em;
|
|
border-radius:4pt;
|
|
padding:0 .5em 0 .5em;
|
|
}
|
|
|
|
p.monospace,p.mono,div.monospace,div.mono {
|
|
padding:.5em;
|
|
border-radius:8pt;
|
|
/* border: 1px solid rgba(0,0,0,.25); */
|
|
background: linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
|
|
}
|
|
|
|
#bg {
|
|
position:fixed;
|
|
width:100vw;
|
|
height:100vh;
|
|
/* background-image: url("images/bg/maxima_bg_7.png"); */
|
|
z-index:-1;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
/* transition:background-image 0.1s; */
|
|
transition:opacity 0.5s;
|
|
opacity:0;
|
|
background-position: center top;
|
|
}
|
|
|
|
#content table {
|
|
border-collapse: collapse;
|
|
border-style: hidden;
|
|
margin-top:1em;
|
|
margin-bottom:1em;
|
|
background: rgba(255,255,255,0.05);
|
|
padding: .5em;
|
|
border-radius:8pt;
|
|
overflow: hidden;
|
|
}
|
|
#content tr {
|
|
/* border-bottom: 1px solid rgba(255,255,255,0.25); */
|
|
}
|
|
#content td {
|
|
padding: .5em 1em .5em 1em;
|
|
border: 2pt solid rgba(255,255,255,0.1);
|
|
}
|
|
#content th {
|
|
padding: .5em 1em .5em 1em;
|
|
}
|
|
.dice-face {
|
|
font-size: 1.5em;
|
|
}
|
|
.ignore {
|
|
opacity: .25;
|
|
}
|
|
.minor {
|
|
font-size: .9em;
|
|
font-style: italic;
|
|
opacity: .75;
|
|
}
|
|
a {
|
|
/* 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);
|
|
}
|
|
#footer {
|
|
display:flex;
|
|
justify-content: center;
|
|
position:fixed;
|
|
bottom:0;
|
|
left:0;
|
|
padding:10pt;
|
|
width:100%;
|
|
background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
|
}
|
|
#logo {
|
|
transform: scale(.6);
|
|
}
|
|
/*#content [id]::before {
|
|
content: '';
|
|
display:block;
|
|
position:relative;
|
|
top: -250px;
|
|
visibility: hidden;
|
|
}*/
|
|
#content [id] {
|
|
/* scroll-margin-top: calc(var(--headheight) + 1em); */
|
|
scroll-margin-top: 1em;
|
|
}
|
|
#content table.side-by-side {
|
|
background: none;
|
|
/* border-radius: initial; */
|
|
}
|
|
#content table.side-by-side td {
|
|
border: none;
|
|
border-radius: initial!important;
|
|
}
|
|
#content table.side-by-side th {
|
|
background: rgba(255,255,255,0.05);
|
|
border-bottom: 2pt solid rgba(255,255,255,0.1);
|
|
}
|
|
#content table.side-by-side td.sbs-desc {
|
|
border-bottom: 1pt solid rgba(255,255,255,0.1);
|
|
/* transition: font-size 1s ease; */
|
|
}
|
|
/*#content table.side-by-side:not(:hover) td.sbs-desc {
|
|
display:none;
|
|
font-size:.25em;
|
|
}*/
|
|
/*#content table.side-by-side:hover td.sbs-desc {
|
|
display:unset;
|
|
}*/
|
|
|
|
.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;
|
|
}
|
|
|
|
.cle1,.cle2,.cle3,.cle4,.cle5,.cle6,.cle7,.cle8,.cle9,.cle10 {
|
|
display:none;
|
|
}
|
|
.show-cle1 .cle1,
|
|
.show-cle2 .cle2,
|
|
.show-cle3 .cle3,
|
|
.show-cle4 .cle4,
|
|
.show-cle5 .cle5,
|
|
.show-cle6 .cle6,
|
|
.show-cle7 .cle7,
|
|
.show-cle8 .cle8,
|
|
.show-cle9 .cle9,
|
|
.show-cle10 .cle10
|
|
{
|
|
display:revert;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body class="show-c1 show-c2 show-c3 show-c4">
|
|
<div id="bg"></div>
|
|
<div id="gradient"></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 id="intro">
|
|
<p>
|
|
A set of rules and guidance<br />
|
|
Which make it easier to create and run<br />
|
|
Challenging Narrative Role-Playing Games<br />
|
|
Conducted among friends<br />
|
|
<br />
|
|
Created by <a href="https://uzalu.net">uzalu</a>
|
|
</p>
|
|
<p>
|
|
<a href="https://git.uzalu.net/uzalu/Maxima_2025">Git</a> •
|
|
<a href="https://git.uzalu.net/uzalu/Maxima_2025/src/branch/master/LICENCE.md">License</a>
|
|
</p>
|
|
<p>
|
|
Maxima
|
|
<a href="https://maxima2024.uzalu.net">2024</a> •
|
|
<a href="https://maxima2023.uzalu.net">2023</a> •
|
|
<a href="https://maxima2022.uzalu.net">2022</a> •
|
|
<a href="https://maxima2021.uzalu.net">2021</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="header-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 id="footer">
|
|
<div id="logo">
|
|
<img src="images/uzalu.png"></img>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page">
|
|
|
|
<div id="content">
|
|
|
|
<div class="section">
|
|
<h1>Characters</h1>
|
|
<p class="c2">Characters are anything which might attempt and fail to do something.</p>
|
|
<p>To start playing a campaign, each Player only needs a rough concept of their Character.<span class="c3"><br />Further Character details can be added later, as needed.</span></p>
|
|
|
|
<div class="section">
|
|
<h2>Character Sheet</h2>
|
|
<p class="c10 aside notes">This section requires more work, particularly expanding the example table.</p>
|
|
<p class="c2 aside caution">Some of the contents of this section are in flux.</p>
|
|
<p class="c2">
|
|
Characters are recorded using only 2 types of information: Modifiers and Sources.
|
|
<br />
|
|
<span class="minor c4">
|
|
Notes can also be added to the sheet, but are optional.
|
|
</span>
|
|
</p>
|
|
<p class="ce1">Record your Character like this:</p>
|
|
<p class="c2">Your Character Sheet should look roughly like this:</p>
|
|
|
|
<div class="mono c2">
|
|
# Character: Roger <br />
|
|
Strength +4 <br />
|
|
<br />
|
|
# Ring of Perception x1 <br />
|
|
Perception +3 <br />
|
|
</div>
|
|
|
|
<p class="ce2">This example is explained below:</p>
|
|
<p class="c3">Below is a more detailed example:</p>
|
|
|
|
<table class="side-by-side">
|
|
|
|
<tr class="c2">
|
|
<th>Character Sheet Line</th>
|
|
<th>Character Sheet Line Meaning</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="mono">
|
|
# Character: Roger
|
|
</td>
|
|
<td class="sbs-desc">
|
|
The Character <a href="#sources">Source</a>, which includes the Character's name.<br/>
|
|
<span class="minor c2">The name could be left blank if the Player hasn't thought of one yet.</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="mono">
|
|
Strength +4
|
|
</td>
|
|
<td class="sbs-desc">
|
|
A <a href="#modifiers">Modifier</a> with scope "Strength", and a Bonus of +4. <br />
|
|
<span class="c2">This will improve the Character's performance in <a href="#checks">Checks</a> which benefit from "Strength" by 4 points.</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="c4">
|
|
<td class="mono">
|
|
Arthritis -1
|
|
</td>
|
|
<td class="sbs-desc">
|
|
A <a href="#modifiers">Modifier</a> with scope "Arthritis", and a Malus of -1. <br />
|
|
<span>This will reduce the Character's performance in <a href="#checks">Checks</a> which suffer from "Arthritis" by 1 point.</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="c4">
|
|
<td class="mono">
|
|
Fat +3 -3
|
|
</td>
|
|
<td class="sbs-desc">
|
|
A <a href="#modifiers">Modifier</a> with scope "Fat", a Bonus of +3, and a Malus of -3. <br />
|
|
<span>This will improve the Character's performance in <a href="#checks">Checks</a> which benefit from "Fat" by 3 points.</span>
|
|
<br />
|
|
<span>This will reduce the Character's performance in <a href="#checks">Checks</a> which suffer from "Fat" by 3 points.</span>
|
|
<br />
|
|
For example, if the Check relates to bodily insulation, the +3 applies, but if the check relates to mobility, the -3 applies.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="c4">
|
|
<td class="mono">
|
|
- Positive and Negative must be equal
|
|
</td>
|
|
<td class="sbs-desc">
|
|
An official clarification line, defining the bounds of the above line.
|
|
<br />
|
|
The Storyteller must approve all lines starting with a single dash.
|
|
<br />
|
|
For user-notes, which don't require approval, use two dashes.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="c2">
|
|
<td class="mono">
|
|
|
|
</td>
|
|
<td class="sbs-desc">
|
|
<span class="c3 minor">
|
|
Empty lines have no effect and can be used as convenient.
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="c3">
|
|
<td class="mono">
|
|
# Damage
|
|
</td>
|
|
<td class="sbs-desc">
|
|
A <a href="#sources">Source</a> to record all forms of <a href="#damage">Damage</a> on the Character.
|
|
<br />
|
|
<span class="minor c4">
|
|
For more detail, separate <a href="#sources">Sources</a> can be recorded for each instance of <a href="#damage">Damage</a>.
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="c3">
|
|
<td class="mono">
|
|
Vigour -1
|
|
</td>
|
|
<td class="sbs-desc">
|
|
A <a href="#modifiers">Modifier</a> indicating <a href="#damage">Damage</a> of the given type to the Character.
|
|
<br />
|
|
This reduces their effectiveness by 1 for relevant <a href="#checks">Checks</a>.
|
|
<br />
|
|
The special name <a href="#vigour">Vigour</a> applies to every <a href="#checks">Check</a>.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="c3">
|
|
<td class="mono">
|
|
|
|
</td>
|
|
<td class="sbs-desc minor">
|
|
Empty lines have no effect and can be used as convenient.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="mono">
|
|
# Ring of Perception x1
|
|
</td>
|
|
<td class="sbs-desc">
|
|
A <a href="#sources">Source</a> for a physical item in the Character's possession. <br />
|
|
<span class="c2">This Source has a Quantity (<span class="mono">x</span>) of 1, meaning the Character currently holds 1 of them.</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="mono">
|
|
Perception +3
|
|
</td>
|
|
<td class="sbs-desc">
|
|
A <a href="#modifiers">Modifier</a> provided by the <a href="#sources">Source</a> above ("Ring of Perception").
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
<div class="section">
|
|
<h3 id="modifiers">Modifiers</h3>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p>Modifiers are any attribute of a Character which increases or decreases their chance of passing a <a href="#checks">Check</a>.<span class="minor"><br />For example: skills, traits, damage, buff and debuff effects, etc.</span></p>
|
|
|
|
<p class="c3">
|
|
Modifier names define the 'scope' they are relevant in.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3 id="sources">Sources</h3>
|
|
<p>Sources are anything which can provide Modifiers to a Character.<span class="minor"><br />For example: items, buffs and debuffs, or the Character themselves.</span></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section c6">
|
|
<h2>Character Creation</h2>
|
|
<p class="c6 aside notes">This section requires more work.</p>
|
|
|
|
<div class="section c2">
|
|
<h2>Campaign Limits</h2>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p>
|
|
Each Campaign can impose limits on which Characters can participate.
|
|
<br />
|
|
The common means to do so are detailed below.
|
|
</p>
|
|
|
|
<div class="section c2">
|
|
<h2 id="balance">Balance</h2>
|
|
<p class="c7 aside caution">This implementation is somewhat inelegant and is likely to change.</p>
|
|
<p class="c10 aside notes">This section requires more work, specifically better detail levels, and some character-sheet examples.</p>
|
|
|
|
<p>
|
|
Balance is the current points spent improving a Character.
|
|
<br />
|
|
<span class="minor">
|
|
It starts at zero, and can go negative.
|
|
</span>
|
|
</p>
|
|
|
|
<p></p>
|
|
|
|
<p>
|
|
Any Modifier or Source which is intended as a permanent part of a Character counts towards Balance.
|
|
<br />
|
|
<span class="minor">
|
|
This includes everything the Player chooses.
|
|
</span>
|
|
</p>
|
|
|
|
<p>
|
|
Modifiers contribute their total value to Balance, meaning the sum of their <span class="mono">+</span> and <span class="mono">-</span> values.
|
|
</p>
|
|
|
|
<p>
|
|
Some Sources can also contribute to Balance, which are usually custom packages of Modifiers, such as racials. These are usually defined alongside a Balance-cost.
|
|
</p>
|
|
|
|
<div class="aside">
|
|
<p>
|
|
On the Character Sheet, a Modifier or Source which contributes towards Balance can be marked with a letter <span class="mono">b</span> at the end of the line to make this easier to track.
|
|
</p>
|
|
<p>
|
|
Sources with a custom Balance-contibution can be marked as, for example <span class="mono">b+4</span> or <span class="mono">b-2</span> for plus 4 and minus 2 Balance respectively.
|
|
</p>
|
|
</div>
|
|
|
|
<p>
|
|
The Storyteller should set a Balance limit for each campaign.
|
|
<br />
|
|
If a Character's Balance exceeds that limit, they are not allowed to participate in the Campaign.
|
|
</p>
|
|
|
|
<p>The recommended default limit is 25.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c3">
|
|
<h2>Cognia</h2>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
<p>
|
|
Cognia is a measure of the mental weight required to include this Character in a campaign accurately.
|
|
</p>
|
|
|
|
<p><a href="#balance">Balanced</a>-for Modifiers and Sources with <span class="mono">-</span> values increase Cognia (1 per Modifier/Source).</p>
|
|
|
|
<div class="c6 aside commentary">
|
|
<p>
|
|
Players are naturally motivated to remember Modifiers with <span class="mono">+</span> values, but not so for the <span class="mono">-</span> values. Given this, the Storyteller needs to always remember which Modifiers may apply, not just during Checks but during any interaction to which the Modifier might be relevant.
|
|
</p>
|
|
<p>
|
|
A Campaign with 5 Player-Characters, each of whom have 3 Negative Modifiers, would require the Storyteller to reliably remember 15 Modifiers at all times. This would be difficult, and thus this mechanism helps regulate this potential excess.
|
|
</p>
|
|
</div>
|
|
|
|
<p>
|
|
The Storyteller may set a Cognia limit for each campaign.
|
|
<br />
|
|
If a Character's Cognia exceeds that limit, they are not allowed to participate in the Campaign.
|
|
</p>
|
|
|
|
<p>It is recommended to start with a conservative Cognia limit of 2 per Character.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section c7">
|
|
<h1 id="tasks">Tasks</h1>
|
|
<p>
|
|
Anything a Character can attempt to do, but might not complete successfully is a Task.
|
|
<br />
|
|
Tasks are usually used with Checks, and don't need to be recorded otherwise.
|
|
</p>
|
|
|
|
<p class="aside">
|
|
Most Tasks are implicit, are communicated as part of a Check, are Ephemeral, and only have a Workload rating.
|
|
<br />
|
|
For more advanced Tasks, such as a long project, it may be worth communicating the Task explicitly.
|
|
</p>
|
|
|
|
<p>
|
|
Tasks are recorded as Sources, and defined by the following information:
|
|
<ul>
|
|
<li>Workload rating</li>
|
|
<li>Ephemeral or Persistent</li>
|
|
<li>Complexity rating (Defaults to 0)</li>
|
|
<li>Current Progress (Starts at 0)</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<div class="section">
|
|
<h2>Workload</h2>
|
|
<p>
|
|
The Workload of a task is the total Progress required to complete it.
|
|
</p>
|
|
<p>
|
|
The Storyteller may choose to tell Players the Workload, especially if the Character would be able to ascertain it.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Ephemeral or Persistent</h2>
|
|
<p>
|
|
Ephemeral Tasks either Succeed or Fail as soon as they are progressed.
|
|
<br />
|
|
Most Tasks are Ephemeral.
|
|
<br />
|
|
Ephemeral Tasks don't usually need to be recorded.
|
|
</p>
|
|
<p>
|
|
Persistent Tasks can exist in a partially-completed state, and can be progressed by multiple Checks over time.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Complexity Rating</h2>
|
|
<p>
|
|
A Task's Complexity Rating is the minimum Success Rating required to make any progress in it.
|
|
</p>
|
|
<p class="aside">
|
|
For example, for a Task with a Complexity of 6, if a Check to progress the Task has a Success Rating of 5, no progress is made.
|
|
<br />
|
|
If the Success Rating is 6, then 6 progress is made.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Progressing a Task</h2>
|
|
<p>
|
|
First, run a Check for the Character, to determine the Success Rating in this Task.
|
|
</p>
|
|
<p>
|
|
If the Success Rating is greater than or equal to the Task's Complexity, add the Success Rating to the Task's Progress.
|
|
</p>
|
|
<p>
|
|
If the Progress is greater than or equal to the Workload, the Task completes.
|
|
</p>
|
|
|
|
<div class="section">
|
|
<h3>Gradient Completion</h3>
|
|
<p>
|
|
As the Progress of a Task approaches the required amount, a less-than-total conclusion can be reached, ending the Task.
|
|
</p>
|
|
<p>
|
|
This is at the Storyteller's discretion, but should not be done if the Player wants to fully complete the Task.
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h1 id="checks">Checks</h1>
|
|
<p class="cl7">Whenever a Character may fail at something they are trying to do, run a Check.</p>
|
|
<p class="c7">Checks are usually run to determine the level of success a Character has at a <a href="#tasks">Task</a>.</p>
|
|
|
|
<div class="section cl7">
|
|
<h2>Difficulty</h2>
|
|
<p>
|
|
The Storyteller determines a Difficulty, usually between 1 and 10.
|
|
</p>
|
|
<p class="c4">
|
|
The Storyteller may choose to tell Players the difficulty<span class="c5">, especially if the Character would be able to ascertain it</span>.
|
|
</p>
|
|
<p class="c3">
|
|
The Storyteller may choose to use a range of values, allowing partial success.
|
|
<br />
|
|
This is called Gradient Difficulty.
|
|
<br />
|
|
<span class="minor">
|
|
For example, a Check might give a better result with a Success Rating of 3 than with 1, even though 6 is required for a complete success.
|
|
</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Performance</h2>
|
|
<p class="c10 aside notes">This section requires more work, particularly in presentation.</p>
|
|
<p class="c10 aside notes">This section, along with the term "Success Rating" may be renamed "Score" for conciseness, clarity, and simplicity.</p>
|
|
|
|
<p class="c1">
|
|
Find Modifiers which are relevant to this Check.
|
|
<br />
|
|
<span class="ce1 minor">
|
|
Use the highest Modifier per source, one each for positive, one each for negative.
|
|
<br />
|
|
</span>
|
|
<span class="c2">
|
|
The Storyteller determines whether Modifiers are relevant.
|
|
</span>
|
|
</p>
|
|
|
|
<p class="c2">
|
|
Find Modifiers with a relevant <span class="monospace">+</span> value.
|
|
<span class="c3 minor">
|
|
<br />
|
|
They are relevant if the upside of their scope (name) matches this Check.
|
|
</span>
|
|
<br />
|
|
<span class="cl3">The Player chooses one per Source<span class="c3">, or the highest per Source for NPCs</span>.</span>
|
|
<span class="c4">The highest one per Source is chosen, or if the Character is controlled by a Player, the Player may choose any one per Source.</span>
|
|
<p>
|
|
|
|
<div class="section c3">
|
|
<h3>Passing Modifier</h3>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p>
|
|
If the <span class="monospace">+</span> Modifiers are too vague for the Check, a specifically-matching Modifier with at least +3 may be required to continue.
|
|
<br />
|
|
The value of this Modifier is not factored into the Challenge.
|
|
</p>
|
|
</div>
|
|
|
|
<p class="c2">
|
|
Find Modifiers with a relevant <span class="monospace">-</span> value.
|
|
<span class="c3 minor">
|
|
<br />
|
|
They are relevant if the downside of their scope (name) matches this Check.
|
|
</span>
|
|
<br />
|
|
Use the largest one per Source.
|
|
<p>
|
|
|
|
<p class="c5 aside">
|
|
If a Modifier matches weakly, its value can be reduced towards zero, by up to 3 points.
|
|
</p>
|
|
|
|
<p>
|
|
Combine the relevant Modifiers' values to get your Success Rating.
|
|
<br />
|
|
<span class="c3">
|
|
<span class="monospace">+</span> values add to the total.
|
|
<br />
|
|
<span class="monospace">-</span> values make the total lower (subtract the absolute value from the total, ignoring the sign).
|
|
</span>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Roll</h3>
|
|
|
|
<p class="c2 aside">
|
|
The Storyteller may waive the Roll requirement if the Character's Success Rating is already enough to easily pass this Check.
|
|
</p>
|
|
|
|
<p>
|
|
Roll one-or-more 6-sided dice for the Character<span class="ce1"> if they might fail this Check</span>.
|
|
|
|
<span class="c4 minor">
|
|
<br />
|
|
If the Character is controlled by a Player, that Player should perform the dice-roll.
|
|
</span>
|
|
|
|
<span class="c4 minor">
|
|
<br />
|
|
If the Storyteller agrees, any RNG method the Storyteller can see can be used.
|
|
</span>
|
|
</p>
|
|
|
|
<p>
|
|
If two 1's are rolled in a single check, no further rolls are allowed, and the result is a Catastrophic Failure.
|
|
<br />
|
|
<span class="minor c3">
|
|
This incurs a major detrimental narrative side-effect<span class="c5">, unless none are applicable</span>.
|
|
</span>
|
|
</p>
|
|
|
|
<p>
|
|
Otherwise, using the most recent roll, apply the given effect:
|
|
<table>
|
|
<tr>
|
|
<td>6</td>
|
|
<td><span class="dice-face">⚅</span></td>
|
|
<td>Increase Success Rating by 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td><span class="dice-face">⚄</span></td>
|
|
<td>Increase Success Rating by 2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td><span class="dice-face">⚃</span></td>
|
|
<td>Increase Success Rating by 1</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>3</td>
|
|
<td><span class="dice-face">⚂</span></td>
|
|
<td class="ignore">No Effect</td>
|
|
</tr>
|
|
<tr class="c2">
|
|
<td>2</td>
|
|
<td><span class="dice-face">⚁</span></td>
|
|
<td class="ignore">No Effect</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1</td>
|
|
<td><span class="dice-face">⚀</span></td>
|
|
<td>Simple Failure</td>
|
|
</tr>
|
|
</table>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
<p class="cl3">
|
|
The Success Rating is compared to the Difficulty, and if it is greater or equal, the Challenge is successful, otherwise it fails.
|
|
</p>
|
|
<div class="section c3">
|
|
<h2 class="cl7">Completion</h2>
|
|
<p class="cl7">
|
|
The Storyteller determines the outcome by comparing the Success Rating to the Difficulty.
|
|
<br />
|
|
The result can be failure, partial success, or complete success.
|
|
</p>
|
|
<h2 class="c7">Success Rating</h2>
|
|
<p class="c7">
|
|
The Success Rating of this Check can now be used, including to progress a Task.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section c1">
|
|
<h1 id="vigour">Vigour</h1>
|
|
<p class="aside caution">The contents of this section are in flux.</p>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p class="c10 aside notes">Vigour may be renamed, likely to "Cohesion" or "Stability".</p>
|
|
<p class="ce1">Keep track of a Modifier called "Vigour", which starts at zero, and applies to all Checks.</p>
|
|
|
|
<div class="section">
|
|
<h1>Reprieve</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p class="">When a Character enters a comfortable situation, coming from a tense or hazardous one, they gain 1-3 Vigour depending on the level of comfort.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h1>Collapse</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p class="">When Vigour gets low enough, the Character collapses, and cannot take actions.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h1>Focus</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p class="">At any time, a Character can spend 1 Vigour, to "switch focus" to a new Modifier named at their choice, which has +2, removing the previous focus.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section c3">
|
|
<h1>Common Tasks</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
<p class="c10 aside notes">This section's title should be improved.</p>
|
|
|
|
<div class="section c10">
|
|
<h1>Combat</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c10">
|
|
<h1 id="damage">Damage</h1>
|
|
<p class="c10 aside notes">This section requires more work.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section c3">
|
|
<h1>Instant Reaction</h1>
|
|
|
|
<p class="c6 aside notes">
|
|
This is intended for Characters with human-like sensory systems, in Campaigns running at relevant timescales.
|
|
</p>
|
|
|
|
<p>
|
|
If a Character is confronted by a sudden change of circumstances for which they need to gather information using their senses in preparation for a potential reaction, the Storyteller can initiate an Instant Reaction.
|
|
</p>
|
|
|
|
<p class="aside">
|
|
An example of an Instant Reaction scenario is opening a door whilst expecting combat.
|
|
</p>
|
|
|
|
<p>
|
|
The Player is told what they can immediately sense.
|
|
<br />
|
|
<span class="minor">
|
|
This will usually be very vague and general information about shapes, layout, etc.
|
|
</span>
|
|
<br />
|
|
<span class="minor">
|
|
For Characters with human-like senses, "immediately" means within one tenth of a second.
|
|
</span>
|
|
</p>
|
|
<p>
|
|
The Player can either choose to act instantly on the limited information, or wait a tiny bit longer for much more detailed information.
|
|
<br />
|
|
<span class="minor">
|
|
For Characters with human-like senses, the delay should be half a second.
|
|
</span>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> <!--content-->
|
|
|
|
</div> <!--page-->
|
|
|
|
<script>
|
|
const display = document.querySelector("#complexity-display");
|
|
const input = document.querySelector("#complexity");
|
|
const body = document.querySelector("body");
|
|
const rt = document.querySelector(":root");
|
|
function updateDisplay(){
|
|
display.textContent = input.value;
|
|
}
|
|
function updateTexts(){
|
|
updateDisplay()
|
|
let classes = "";
|
|
let v = input.value;
|
|
for(let i = 1; i <= 10; i++) {
|
|
if(v >= 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;
|
|
body.classList.add("show-cl" + i);
|
|
} else {
|
|
body.classList.remove("show-cl" + i);
|
|
}
|
|
if(v <= i){
|
|
// classes += " show-cle" + i;
|
|
body.classList.add("show-cle" + i);
|
|
} else {
|
|
body.classList.remove("show-cle" + i);
|
|
}
|
|
body.classList.remove("show-ce" + i);
|
|
}
|
|
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();
|
|
setTimeout(updateTexts,100);
|
|
|
|
const bg = document.querySelector("#bg");
|
|
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;
|
|
}
|
|
|
|
let scrollEnd = body.scrollHeight - body.clientHeight;
|
|
let scrollTop = body.scrollTop;
|
|
let scrollEndBounded = scrollEnd - body.clientHeight;
|
|
let scrollStartBounded = body.clientHeight;
|
|
let scrollTopBounded = scrollTop - scrollStartBounded;
|
|
// rt.style.setProperty("--scrollpercent",(100 / scrollEnd) * scrollTop);
|
|
let scrollRatioBounded = Math.min(1,(1 / (scrollEndBounded - scrollStartBounded)) * scrollTopBounded);
|
|
rt.style.setProperty("--scrollratiobounded",scrollRatioBounded);
|
|
rt.style.setProperty("--scrollratioboundedslow",scrollRatioBounded.toFixed(2));
|
|
rt.style.setProperty("--scrollratioboundedslower",scrollRatioBounded.toFixed(1));
|
|
}
|
|
document.addEventListener("scroll", updateHeaderState);
|
|
setTimeout(updateHeaderState,50);
|
|
|
|
var currentHeaderSpace = 0;
|
|
function updateHeaderSpacer() {
|
|
let oh = header.offsetHeight;
|
|
if(oh != currentHeaderSpace) {
|
|
console.log("updating header space: " + oh);
|
|
currentHeaderSpace = oh;
|
|
rt.style.setProperty("--headheight", oh + "px");
|
|
}
|
|
}
|
|
updateHeaderSpacer();
|
|
document.addEventListener("scroll", updateHeaderSpacer);
|
|
setInterval(updateHeaderSpacer,1000);
|
|
|
|
let hasScrolled = 0;
|
|
document.addEventListener("scroll", () => {
|
|
hasScrolled = 1;
|
|
});
|
|
if(body.scrollTop < 1) {
|
|
setTimeout(() => {
|
|
if(body.scrollTop < 1 && !hasScrolled) {
|
|
body.scrollTop = 200;
|
|
}
|
|
},2000);
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|