diff --git a/index.html b/index.html index 160cd73..cccccf4 100644 --- a/index.html +++ b/index.html @@ -91,7 +91,6 @@ - diff --git a/js/utils.js b/js/utils.js index ad7e64b..5929000 100644 --- a/js/utils.js +++ b/js/utils.js @@ -122,6 +122,7 @@ function getStartPlayer() { for (item in layers[layer].microtabs) playerdata.subtabs[layer][item] = Object.keys(layers[layer].microtabs[item])[0] } + playerdata[layer].loreHidden = false } return playerdata } diff --git a/js/v.js b/js/v.js index 75c5b23..07888b4 100644 --- a/js/v.js +++ b/js/v.js @@ -72,9 +72,15 @@ function loadVue() { Vue.component('lore', { props: ['layer', 'data'], template: ` -
+
+ +
+ +
` }) diff --git a/style.css b/style.css index 44a2b36..0f710dd 100644 --- a/style.css +++ b/style.css @@ -599,8 +599,33 @@ button > * { } .story { - max-width: 600px; - border: solid 5px; - padding: 8px; + width: 600px; + max-width: 95%; + border: solid 4px; + border-radius: 8px; margin-bottom: 8px; } + +.story-title { + text-align: left; + font-size: 24px; + color: black; + cursor: pointer; + border: none; + width: 100%; + padding: 2px; +} + +.story-toggle { + border: none; + background: black; + color: white; + font-size: 20px; + pointer-events: none; + width: 1em; + display: inline-block; +} + +.story-text { + padding: 2px; +}