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

adapted the most important sections from 2024

Browse Source
This commit is contained in:
uzalu
2025-03-18 05:02:34 +00:00
parent e6c5cb8ee1
commit 70fded1fc6
1 changed files with 436 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

493
maxima_2025.html
View File

@@ -23,6 +23,9 @@
#title-container {
letter-spacing: .35em;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#header {
background: rgb(128,0,64);
@@ -32,6 +35,7 @@
border-bottom:3pt solid white;
position:fixed;
width:100%;
z-index:1;
}
#controls {
text-align: right;
@@ -48,6 +52,10 @@
flex-direction:column;
justify-content: center;
}
#complexity-subtext {
font-size:.8em;
max-width: 15em;
}
.spacer {
flex-grow: 1;
}
@@ -55,7 +63,7 @@
-webkit-appearance: none;
appearance: none;
outline:none;
margin:.5em 0 0 0;
margin:.5em 0 .5em 0;
border-radius:8pt;
border:3pt solid white;
/* flex-grow:1; */
@@ -73,55 +81,73 @@
}
#content {
padding-top:8pt;
padding-left:8pt;
padding-right:8pt;
/*padding-top:10pt;
padding-left:10pt;
padding-right:10pt;*/
padding: 10pt;
margin: 10pt;
width:max(75%,400px);
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 {
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;
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 {
/*.section p {
margin-left:8pt;
margin-right:8pt;
}
.section .section {
}*/
/*.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;
.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;
}
.section.aside.caution {
.aside.caution {
background: rgba(255,192,0,0.1);
font-size: 1em;
}
.section.aside.caution::before {
.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;
}
.section.aside.commentary {
.aside.commentary {
background: rgba(0,192,96,0.1);
font-size: .8em;
}
.section.aside.commentary::before {
.aside.commentary::before {
content: 'Commentary';
margin-left:8pt;
color: rgba(255,255,255,.35);
@@ -129,22 +155,121 @@
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;
}
h1,h2,h3,h4,h5,h6 {
margin-top:0;
margin-bottom:0;
font-weight: unset;
border-left:8pt solid white;
padding-left:8pt;
/* 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 {
.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;
padding:4pt;
/* 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 1s; */
transition:opacity 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;
}
#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);
}
.dice-face {
font-size: 1.5em;
}
.ignore {
opacity: .25;
}
.minor {
font-size: .9em;
font-style: italic;
opacity: .75;
}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10 {
@@ -202,10 +327,11 @@
</style>
</head>
<body class="show-c1 show-c2 show-c3 show-c4">
<div id="bg"></div>
<div id="header">
<div id="title-container">
<div id="title">Maxima</div>
<div id="subtitle">⸻ 2025 Edition ⸻</div>
<div id="subtitle">&#11835; 2025 Edition &#11835;</div>
</div>
<div class="spacer"></div>
<div id="controls">
@@ -214,6 +340,9 @@
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>
@@ -221,57 +350,289 @@
<div id="content">
<div class="section">
<h1>Section First-level</h1>
<p>test</p>
<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>Section Second-level</h2>
<p>test</p>
<h2>Character Sheet</h2>
<p class="c10 aside notes">This section requires more work, specifically more complexity rating separation in both the descriptions and the example itself. Consider using a table to show the example and the explanation line-per-line next to each other.</p>
<p class="c2">Characters are recorded using only 2 types of information: Modifiers and Sources.</p>
<p>Record your Character like this:</p>
<div class="mono">
# Character: Roger <br />
Strength +4 <br />
<br />
# Ring of Perception x1 <br />
Perception +3 <br />
</div>
<p>
<span class="mono"># Character: Roger</span> <br />
The Character Source, which includes the Character's name. <br />
<span class="c2">The name could be left blank if the Player hasn't thought of one yet.</span>
</p>
<p>
<span class="mono">Strength +4</span> <br />
A Modifier with scope "Strength", and a Bonus of +4. <br />
<span class="c2">This will improve the Character's performance in Checks which benefit from "Strength" by 4 points.</span>
</p>
<p>
<span class="mono"># Ring of Perception x1</span> <br />
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>
</p>
<p>
<span class="mono">Perception +3</span> <br />
A Modifier provided by the Source above ("Ring of Perception").
</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>
<h2>Modifiers</h2>
<p>Modifiers are any attribute of a Character which increases or decreases their chance of passing a check.<span class="c3"><br />For example: skills, damage, buffs and debuffs, etc.</span></p>
<div class="section c4">
<h3>Section Third-level</h3>
<p>test <span class="c10">abc </span>test</p>
<p class="c3">
Modifier names define the 'scope' they are relevant in.
</p>
</div>
</div>
<div class="section c2">
<h2>Sources</h2>
<p>Sources are anything which can provide Modifiers to a Character.<span class="c3"><br />For example: items, enchantments, or the Character themselves.</span></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>
</div>
<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">
<h1>Checks</h1>
<p>Whenever a Character may fail at something they are trying to do, run a Check.</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 class="section">
<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>
</div>
<div class="section aside caution c1">
<p>IMPORTANT 2</p>
<div class="section">
<h2>Performance</h2>
<p class="c10 aside notes">This section requires more work.</p>
<p class="c1">
Find Modifiers which are relevant to this Check.
<br />
<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>
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>
<p>test</p>
<div class="section">
<h3>Boost (Optional)</h3>
<p class="c10 aside notes">This section requires more work.</p>
<p>
The Character may choose to improve their chances by rolling any number of 6-sided dice.
<br />
<span class="c4 minor"> If the Storyteller agrees, any RNG method the Storyteller can see can be used.</span>
</p>
<p class="aside c7">
Thematically, the number of rolls represents exertion, and the roll results represent luck.
</p>
<p>
Any roll can be discarded at the cost of taking 1 Stress Damage.
</p>
<p>
If any of the non-discarded rolls are 1, the Character Blunders this Check.
<br />
<span class="minor c2">Check the Blunder section below.</span>
</p>
<p>
Otherwise, the Character chooses one of their results:
<table>
<tr>
<td>6</td>
<td><span class="dice-face">&#9861;</span></td>
<td>Increase Success Rating by 3</td>
</tr>
<tr>
<td>5</td>
<td><span class="dice-face">&#9860;</span></td>
<td>Increase Success Rating by 2</td>
</tr>
<tr>
<td>4</td>
<td><span class="dice-face">&#9859;</span></td>
<td>Increase Success Rating by 1</td>
</tr>
<tr class="c2">
<td>3</td>
<td><span class="dice-face">&#9858;</span></td>
<td class="ignore">No Effect</td>
</tr>
<tr class="c2">
<td>2</td>
<td><span class="dice-face">&#9857;</span></td>
<td class="ignore">No Effect</td>
</tr>
<tr class="c2">
<td>1</td>
<td><span class="dice-face">&#9856;</span></td>
<td>Blunder</td>
</tr>
</table>
</p>
<div class="section c2">
<h4>Blunder</h4>
<p>
Roll a 6-sided di.
</p>
<p>
<table>
<tr>
<td>6</td>
<td><span class="dice-face">&#9861;</span></td>
<td>Bypass this Blunder for free, as if you had taken 1 Stress Damage to discard it</td>
</tr>
<tr>
<td>5</td>
<td><span class="dice-face">&#9860;</span></td>
<td>Simple failure</td>
</tr>
<tr>
<td>4</td>
<td><span class="dice-face">&#9859;</span></td>
<td>Moderate undesired side-effect</td>
</tr>
<tr class="c2">
<td>3</td>
<td><span class="dice-face">&#9858;</span></td>
<td>Severe undesired side-effect</td>
</tr>
<tr class="c2">
<td>2</td>
<td><span class="dice-face">&#9857;</span></td>
<td>Very severe undesired side-effect</td>
</tr>
<tr class="c2">
<td>1</td>
<td><span class="dice-face">&#9856;</span></td>
<td>
Cosmic Blunder
<br/>
Roll another 6-sided di.
<br />
Every roll produces undesired side-effects which can originate from or affect anything in the universe.
<br />
The effect is worse the lower the roll result.
</td>
</tr>
</table>
</p>
</div>
</div>
<p>
The Success Rating is compared to the Difficulty, and if it is greater or equal, the Challenge is successful, otherwise it fails.
</p>
</div>
<div class="section c10">
<h1>Reprieve</h1>
<p class="c10 aside notes">This section requires more work.</p>
</div>
<div class="section c10">
<h1>Projects</h1>
<p class="c10 aside notes">This section requires more work.</p>
</div>
<div class="section c10">
<h1>Collapse</h1>
<p class="c10 aside notes">This section requires more work.</p>
</div>
<div class="section c10">
<h1>Instant Reaction</h1>
<p class="c10 aside notes">This section requires more work.</p>
</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>Damage</h1>
<p class="c10 aside notes">This section requires more work.</p>
</div>
</div>
@@ -307,6 +668,10 @@
headerSpacer.style.height = header.offsetHeight;
},1000);
const bg = document.querySelector("#bg");
bg.style.backgroundImage = "url(\"images/bg/maxima_bg_" + Math.floor(Math.random() * 15) + ".jpg\")";
bg.style.opacity = 1;
</script>
</body>