custom tag for choice subtitles

game/fogg.ink

@@ -1,5 +1,5 @@
-- I looked at Monsieur Fogg 
-*   ... and I could contain myself no longer.
+- I looked at Monsieur Fogg
+*   ... and I could contain myself no longer.<st>Continues the story.</st>
     'What is the purpose of our journey, Monsieur?'
     'A wager,' he replied.
     * *     'A wager!'[] I returned.
@@ -14,6 +14,6 @@
             * * *   I asked nothing further of him then[.], and after a final, polite cough, he offered nothing more to me. <>
     * *     'Ah[.'],' I replied, uncertain what I thought.
     - -     After that, <>
-*   ... but I said nothing[] and <> 
+*   ... but I said nothing<st>Ends the story</st>[] and <> 
 - we passed the day in silence.
 - -> END

js/script.js

@@ -23,6 +23,8 @@ displayText = function(s, interactive = true) {
       for (j = 0, len = paragraphs.length; j < len; j++) {
         i = paragraphs[j];
         if (i !== "") {
+          i = i.replace('<st>', '<span class="subtitle">');
+          i = i.replace('</st>', '</span>');
           html = jQuery.parseHTML(i);
           block = jQuery('<p>').html(html);
           if (interactive) {
@@ -54,9 +56,11 @@ continueToNextChoice = function(s) {
     ref = s.currentChoices;
     for (j = 0, len = ref.length; j < len; j++) {
       choice = ref[j];
-      jQuery("#options").append(`<li><a href='#' id='choice-${choice.index}' data-index=${choice.index}>${choice.text}</a></li>`);
+      let text = choice.text.replace('<st>', '<span class="subtitle">');
+      text = text.replace('</st>', '</span>')
+      jQuery("#options").append(`<li><a href='#' id='choice-${choice.index}' data-index=${choice.index}>${text}</a></li>`);
     }
-    jQuery("#options").fadeIn(800);
+    jQuery("#options").fadeIn(500);
   } else {
     jQuery("#content").append("<p>THE END</p>");
     jQuery("#options").html("");

scss/style.scss

@@ -1 +1,28 @@
-@import '~bootstrap'
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/images';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/transitions';
+@import '~bootstrap/scss/utilities';
+@import '~bootstrap/scss/print';
+
+#content {
+  .subtitle {
+    display: none;
+  }
+}
+#options {
+  a {
+    display: block;
+    padding: ($font-size-base * 0.5);
+  }
+  .subtitle {
+    display: block;
+    font-size: ($font-size-base * 0.5);
+  }
+}