Skip to content

Commit

Permalink
doc: Add Rhinar's updated lore
Browse files Browse the repository at this point in the history
  • Loading branch information
@nathaneastwood
nathaneastwood committed Jan 5, 2024
1 parent 623da99 commit 42ff16b
Show file tree
Hide file tree
Showing 6 changed files with 194 additions and 69 deletions.
8 changes: 6 additions & 2 deletions book.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@ multilingual = false
src = "src"
title = "Flesh and Blood Lore"

[languages]
en = "./en"
es = "./es"

[output.html]
additional-css = ["style.css", "hero.css", "image.css"]
additional-js = ["sidebar.js"]
additional-css = ["sidebar.css", "hero.css", "image.css", "tab.css"]
additional-js = ["sidebar.js", "tab.js"]
default-theme = "light"
preferred-dark-theme = "navy"
git-repository-url = "https://github.com/nathaneastwood/fablore"
Expand Down
61 changes: 61 additions & 0 deletions sidebar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
@media only screen and (max-width:1439px) {
.sidetoc {
display: none;
}
}

@media only screen and (min-width:1440px) {
main {
position: relative;
}
.sidetoc {
margin-left: auto;
margin-right: auto;
left: calc(100% + (var(--content-max-width))/4 - 140px);
position: absolute;
}
.pagetoc {
position: fixed;
width: 200px;
height: calc(100vh - var(--menu-bar-height) - 0.67em * 4);
overflow: auto;
}
.pagetoc a {
border-left: 1px solid var(--sidebar-bg);
color: var(--fg) !important;
display: block;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
text-align: left;
text-decoration: none;
}
.pagetoc a:hover,
.pagetoc a.active {
background: var(--sidebar-bg);
color: var(--sidebar-fg) !important;
}
.pagetoc .active {
background: var(--sidebar-bg);
color: var(--sidebar-fg);
}
.pagetoc .pagetoc-H2 {
padding-left: 20px;
}
.pagetoc .pagetoc-H3 {
padding-left: 40px;
}
.pagetoc .pagetoc-H4 {
padding-left: 60px;
}
.pagetoc .pagetoc-H5 {
display: none;
}
.pagetoc .pagetoc-H6 {
display: none;
}
}

a[class^='pagetoc-H']:only-child {
display: none;
}
83 changes: 33 additions & 50 deletions sidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,46 @@
// Un-active everything when you click it
Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
el.addEventHandler("click", function() {
Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
el.classList.remove("active");
});
el.classList.add("active");
});
el.addEventHandler("click", function() {
Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
el.classList.remove("active");
});
el.classList.add("active");
});
});

var updateFunction = function() {

var id;
var elements = document.getElementsByClassName("header");
Array.prototype.forEach.call(elements, function(el) {
if (window.pageYOffset >= el.offsetTop) {
id = el;
}
});

Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
el.classList.remove("active");
});

Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
if (id.href.localeCompare(el.href) == 0) {
el.classList.add("active");
}
});
var id;
var elements = document.getElementsByClassName("header");
Array.prototype.forEach.call(elements, function(el) {
if (window.pageYOffset >= el.offsetTop) {
id = el;
}
});

Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
el.classList.remove("active");
});
if (!id) return;
Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
if (id.href.localeCompare(el.href) == 0) {
el.classList.add("active");
}
});
};

// Populate sidebar on load
window.addEventListener('load', function() {
var pagetoc = document.getElementsByClassName("pagetoc")[0];
var elements = document.getElementsByClassName("header");
Array.prototype.forEach.call(elements, function(el) {
var link = document.createElement("a");

// Indent shows hierarchy
var indent = "";
switch (el.parentElement.tagName) {
case "H2":
indent = "20px";
break;
case "H3":
indent = "40px";
break;
case "H4":
indent = "60px";
break;
default:
break;
}

link.appendChild(document.createTextNode(el.text));
link.style.paddingLeft = indent;
link.href = el.href;
pagetoc.appendChild(link);
});
updateFunction.call();
var pagetoc = document.getElementsByClassName("pagetoc")[0];
var elements = document.getElementsByClassName("header");
Array.prototype.forEach.call(elements, function (el) {
var link = document.createElement("a");
link.appendChild(document.createTextNode(el.text));
link.href = el.href;
link.classList.add("pagetoc-" + el.parentElement.tagName);
pagetoc.appendChild(link);
});
updateFunction.call();
});


Expand Down
67 changes: 50 additions & 17 deletions src/heroes-of-rathe/rhinar-about.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,53 @@
<source src="https://d2hl7maqck52px.cloudfront.net/heroes-of-rathe/rhinar.mp4" type="video/mp4">
</video>

In the depths of the [Savage Lands](../world-of-rathe/savage-lands/savage-lands.md), a lone brute has carved out his territory in blood and bone. Abandoned to the mercy of the jungle as a cub, he fought to survive, fending off vicious beasts and scavengers. Yet this struggle has forged an alpha predator, relentless and unflinching, tearing through anything that gets in his way.

Reckless, savage and uncontrollable, Rhinar is driven by his bloodlust and base instincts. When he fights, he enters a bloody frenzy. Everything around him becomes a threat, the ground turning slick with blood as he blindly butchers everything in his path.

## Hero Highlights

#### Intimidate

Fear. A weapon more powerful than tooth, claw, or club. Rhinar showcases his status as an apex predator with his ability to intimidate the enemy, immobilizing their defenses with his terrifying bellows.

#### Roll the Dice

Recklessly unpredictable. When a brute succumbs to instinct, anything can happen. To be an alpha brute, you'll have to throw caution to wind and roll the dice!

#### Strong Survive

The rule of the Savage Lands is simple; The Strong Survive. "Strength matters" is shown by the many brute cards and effects that are turned on by attacks with 6 or more power.
<div class="tab-container">
<div class="tab active-tab" onclick="openTab('wtr')">Welcome to Rathe</div>
<div class="tab" onclick="openTab('hvy')">Heavy Hitters</div>
</div>

<div id="wtr" class="tab-content active-content">
<p>In the depths of the <a href="https://legendarystories.net/world-of-rathe/savage-lands/savage-lands.html">Savage Lands</a>, a lone brute has carved out his territory in blood and bone. Abandoned to the mercy of the jungle as a cub, he fought to survive, fending off vicious beasts and scavengers. Yet this struggle has forged an alpha predator, relentless and unflinching, tearing through anything that gets in his way.</p>
<p>Reckless, savage and uncontrollable, Rhinar is driven by his bloodlust and base instincts. When he fights, he enters a bloody frenzy. Everything around him becomes a threat, the ground turning slick with blood as he blindly butchers everything in his path.</p>
<div class="hero-container">
<img src="https://d2hl7maqck52px.cloudfront.net/heroes-of-rathe/intimidate.webp" class="hero-icon" />
<div class="hero-content">
<b>Intimidate</b><br>
Fear. A weapon more powerful than tooth, claw, or club. Rhinar showcases his status as an apex predator with his ability to intimidate the enemy, immobilizing their defenses with his terrifying bellows.
</div>
</div>
<div class="hero-container">
<img src="https://d2hl7maqck52px.cloudfront.net/heroes-of-rathe/roll-the-dice.webp" class="hero-icon" />
<div class="hero-content">
<b>Roll the Dice</b><br>
Recklessly unpredictable. When a brute succumbs to instinct, anything can happen. To be an alpha brute, you'll have to throw caution to wind and roll the dice!
</div>
</div>
<div class="hero-container">
<img src="https://d2hl7maqck52px.cloudfront.net/heroes-of-rathe/strong-survive.webp" class="hero-icon" />
<div class="hero-content">
<b>Strong Survive</b><br>
The rule of the Savage Lands is simple; The Strong Survive. "Strength matters" is shown by the many brute cards and effects that are turned on by attacks with 6 or more power.
</div>
</div>
</div>

<div id="hvy" class="tab-content">
<p>From the heart of the <a href="https://legendarystories.net/world-of-rathe/savage-lands/savage-lands.html">Savage Lands</a>, Rhinar hungers for the savage thrill of the hunt. Fueled by a relentless bloodrage, he has wandered the untamed wilderness, seeking something mighty enough to quench his primal thirst. However, his instincts have pulled him North-guiding him to a new battleground, the Deathmatch Arena.</p>
<p>To Rhinar, the arena is an extension of his savage dominion. Here, he confronts Rathe's mightiest creatures, tearing them apart with a lethal blend of raw power and cunning. The arena-masters, stunned by his ferocity, have thrust him into the limelight as their spectacle of unbridled brutality. Yet, fame means nothing to Rhinar; he craves only the satisfaction of sating his insatiable bloodlust and solidifying his reign as Rathe's apex predator.</p>
<p>Feared by foes and celebrated by crowds, Rhinar pays no mind to the adoration or disdain swirling around him. Indifferent to the roars of spectators, he heeds only his primal instincts. With reckless abandon, he unleashes his reckless rampage on any fool who crosses his path, etching his name as an unstoppable force in the Deathmatch Arena.</p>
<div class="hero-container">
<img src="https://d2hl7maqck52px.cloudfront.net/heroes-of-rathe/an-intimidating-display.webp" class="hero-icon" />
<div class="hero-content">
<b>An Intimidating Display</b><br>
Already capable of reducing the bravest warriors to quivering mush, Rhinar has become even more terrifying in his displays of ferocity. By brazenly and boldly beating his chest, Rhinar is now able to empower actions throughout his turn.
</div>
</div>
<div class="hero-container">
<img src="https://d2hl7maqck52px.cloudfront.net/heroes-of-rathe/seize-on-the-fear.webp" class="hero-icon" />
<div class="hero-content">
<b>Seize on the Fear</b><br>
More than ever, Rhinar is ready to capitalise on the terror he sows, with a host of new effects designed to increase the pain and punishment for an opponent that succumbs to his intimidation.
</div>
</div>
</div>
29 changes: 29 additions & 0 deletions tab.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
body {
margin: 0;
padding: 0;
}

.tab-container {
display: flex;
justify-content: left;
margin-top: 20px;
}

.tab {
padding: 10px 20px;
cursor: pointer;
border-bottom: 1px solid currentColor;
}

.tab-content {
display: none;
}

.active-tab {
border: 1px solid currentColor;
}

.active-content {
display: block;
}

15 changes: 15 additions & 0 deletions tab.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
function openTab(tabId) {
// Hide all tab contents
var tabContents = document.getElementsByClassName('tab-content');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
// Remove 'active-tab' class from all tabs
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active-tab');
}
// Show the selected tab content and mark it as active
document.getElementById(tabId).style.display = 'block';
document.querySelector('[onclick="openTab(\'' + tabId + '\')"]').classList.add('active-tab');
}

0 comments on commit 42ff16b

Please sign in to comment.