diff --git a/maxima_2025.html b/maxima_2025.html index 4082405..371e05c 100644 --- a/maxima_2025.html +++ b/maxima_2025.html @@ -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 @@ +
@@ -221,57 +350,289 @@
-

Section First-level

-

test

+

Characters

+

Characters are anything which might attempt and fail to do something.

+

To start playing a campaign, each Player only needs a rough concept of their Character.
Further Character details can be added later, as needed.

-

Section Second-level

-

test

+

Character Sheet

+

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.

+

Characters are recorded using only 2 types of information: Modifiers and Sources.

+

Record your Character like this:

+
+ # Character: Roger
+ Strength +4
+
+ # Ring of Perception x1
+ Perception +3
+
+ +

+ # Character: Roger
+ The Character Source, which includes the Character's name.
+ The name could be left blank if the Player hasn't thought of one yet. +

+ +

+ Strength +4
+ A Modifier with scope "Strength", and a Bonus of +4.
+ This will improve the Character's performance in Checks which benefit from "Strength" by 4 points. +

+ +

+ # Ring of Perception x1
+ A physical item in the Character's possession.
+ This Source has a Quantity (x) of 1, meaning the Character currently holds 1 of them. +

+ +

+ Perception +3
+ A Modifier provided by the Source above ("Ring of Perception"). +

-

Section Second-level

-

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.

+

Modifiers

+

Modifiers are any attribute of a Character which increases or decreases their chance of passing a check.
For example: skills, damage, buffs and debuffs, etc.

-
-

Section Third-level

-

test abc test

- -
- -

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.

- -

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.

- -
-

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.

-
- -
-

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.

-
- -

test0

-

test1

-

test2

-

test3

- -

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.

- -
-

IMPORTANT 1

-
- -

test

- -
- -
-

IMPORTANT 2

+

+ Modifier names define the 'scope' they are relevant in. +

-

test

+
+

Sources

+

Sources are anything which can provide Modifiers to a Character.
For example: items, enchantments, or the Character themselves.

+
+ +
+ +
+

Checks

+

Whenever a Character may fail at something they are trying to do, run a Check.

+ +
+

Difficulty

+

+ The Storyteller determines a Difficulty, usually between 1 and 10. +

+

+ The Storyteller may choose to tell Players the difficulty, especially if the Character would be able to ascertain it. +

+ +
+ +
+

Performance

+

This section requires more work.

+ +

+ Find Modifiers which are relevant to this Check. +
+ + The Storyteller determines whether Modifiers are relevant. + +

+ +

+ Find Modifiers with a relevant + value. + +
+ They are relevant if the upside of their scope (name) matches this Check. +
+
+ The Player chooses one per Source, or the highest per Source for NPCs. + The highest one per Source is chosen, or if the Character is controlled by a Player, the Player may choose any one per Source. +

+ +

+

Passing Modifier

+

+ If the + Modifiers are too vague for the Check, a specifically-matching Modifier with at least +3 may be required to continue. +
+ The value of this Modifier is not factored into the Challenge. +

+
+ +

+ Find Modifiers with a relevant - value. + +
+ They are relevant if the downside of their scope (name) matches this Check. +
+
+ Use the largest one per Source. +

+ +

+ If a Modifier matches weakly, its value can be reduced towards zero, by up to 3 points. +

+ +

+ Combine the relevant Modifiers' values to get your Success Rating. +
+ + + values add to the total. +
+ - values make the total lower (subtract the absolute value from the total, ignoring the sign). +
+

+ +
+ +
+

Boost (Optional)

+

This section requires more work.

+ +

+ The Character may choose to improve their chances by rolling any number of 6-sided dice. +
+ If the Storyteller agrees, any RNG method the Storyteller can see can be used. +

+ +

+ Thematically, the number of rolls represents exertion, and the roll results represent luck. +

+ +

+ Any roll can be discarded at the cost of taking 1 Stress Damage. +

+ +

+ If any of the non-discarded rolls are 1, the Character Blunders this Check. +
+ Check the Blunder section below. +

+ +

+ Otherwise, the Character chooses one of their results: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
6Increase Success Rating by 3
5Increase Success Rating by 2
4Increase Success Rating by 1
3No Effect
2No Effect
1Blunder
+

+ +
+

Blunder

+

+ Roll a 6-sided di. +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
6Bypass this Blunder for free, as if you had taken 1 Stress Damage to discard it
5Simple failure
4Moderate undesired side-effect
3Severe undesired side-effect
2Very severe undesired side-effect
1 + Cosmic Blunder +
+ Roll another 6-sided di. +
+ Every roll produces undesired side-effects which can originate from or affect anything in the universe. +
+ The effect is worse the lower the roll result. +
+

+
+ +
+ +

+ The Success Rating is compared to the Difficulty, and if it is greater or equal, the Challenge is successful, otherwise it fails. +

+ +
+ +
+

Reprieve

+

This section requires more work.

+ +
+ +
+

Projects

+

This section requires more work.

+ +
+ +
+

Collapse

+

This section requires more work.

+ +
+ +
+

Instant Reaction

+

This section requires more work.

+ +
+ +
+

Common Tasks

+

This section requires more work.

+

This section's title should be improved.

+ +
+

Damage

+

This section requires more work.

+ +
@@ -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; +