diff --git a/public_html/index.html b/public_html/index.html
index 5fea4b0..aa5013b 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -1,9 +1,10 @@
-
-
+
+
+
diff --git a/public_html/package.json b/public_html/package.json
index b26759d..6e26828 100644
--- a/public_html/package.json
+++ b/public_html/package.json
@@ -9,7 +9,8 @@
"author": "",
"license": "ISC",
"dependencies": {
- "markdown": "^0.5.0",
+ "markdown-it": "^8.3.1",
+ "markdown-it-container": "^2.0.0",
"markdown-toc": "^1.1.0"
}
}
diff --git a/public_html/rules.md b/public_html/rules.md
index 72acdd4..0e4c747 100644
--- a/public_html/rules.md
+++ b/public_html/rules.md
@@ -1,5 +1,7 @@
Fight your way across vast expanses, conquer enemy batallions, and survive in this world of immense mechas - wild combat machines commanded by the best pilots this side of the catastrophe.
+::: mobileOnly
+
- [Basic Rules](#basic-rules)
* [Phases of a Turn](#phases-of-a-turn)
- [Types of Cards](#types-of-cards)
@@ -25,6 +27,8 @@ Fight your way across vast expanses, conquer enemy batallions, and survive in th
* [Maximum Hand Size](#maximum-hand-size)
* [Pilot Idiocy](#pilot-idiocy)
+:::
+
Basic Rules
===
diff --git a/public_html/styles/shared.css b/public_html/styles/shared.css
index 19e72cc..69861f2 100644
--- a/public_html/styles/shared.css
+++ b/public_html/styles/shared.css
@@ -58,3 +58,10 @@ footer {
.ascend:after{
content: "\25BC";
}
+
+/* device only features */
+@media screen and (min-width: 480px) {
+ .mobileOnly {
+ display: none;
+ }
+}
diff --git a/public_html/utilities.js b/public_html/utilities.js
index 8e63351..3be2807 100644
--- a/public_html/utilities.js
+++ b/public_html/utilities.js
@@ -1,4 +1,22 @@
-//PARAM: fname = file to load with an ajax request
+//global markdown object and configuration
+var markdown = window.markdownit()
+ //configure for semantic-style visibility controls
+ .use(window.markdownitContainer, 'mobileOnly', {
+ validate: function(params) {
+ return params.trim().match(/^mobileOnly$/);
+ },
+ render: function (tokens, idx) {
+ if (tokens[idx].nesting === 1) {
+ //opening tag
+ return '
';
+ } else {
+ // closing tag
+ return '
';
+ }
+ }
+ });
+
+//PARAM: fname = file to load with an ajax requesti
//PARAM: node = DOM node to store the resulting data
function printHTML(fname, node) {
var request = new XMLHttpRequest();
@@ -30,7 +48,7 @@ function printMarkdown(fname, node) {
}
if (request.status === 200) {
- node.innerHTML = markdown.toHTML(request.responseText);
+ node.innerHTML = markdown.render(request.responseText);
}
else {
console.log("printMarkdown status:", request.status);