diff --git a/css/general/formatting.css b/css/general/formatting.css index 57384d6b541048ab30577a90dca538ea7dfb2db4..9f08b1b2ffd3bd6c211342c7320664f6af2d9c9f 100644 --- a/css/general/formatting.css +++ b/css/general/formatting.css @@ -82,3 +82,16 @@ input:out-of-range { .uppercase { text-transform: uppercase; } + + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1em; +} + +dt::after { + content: ":"; +} diff --git a/src/gui/Encyclopedia/encyclopediaSlaves.js b/src/gui/Encyclopedia/encyclopediaSlaves.js index f89fc40d2548f78725d57762233d7761349fd14e..af9b6947ea96b509b5936190e368824c8826fdf5 100644 --- a/src/gui/Encyclopedia/encyclopediaSlaves.js +++ b/src/gui/Encyclopedia/encyclopediaSlaves.js @@ -27,11 +27,11 @@ App.Encyclopedia.addArticle("Living Conditions", function() { App.Events.addParagraph(f, ["Slaves can be assigned different living conditions which affect their mental state and well being. Some Facilities may overwrite manually set living conditions."]); - const ul = document.createElement("ul"); - App.Events.addNode(ul, ["<span class='encyclopedia topic'>Spare</span>: The cheapest and the default but may cause some issues."], "li"); - App.Events.addNode(ul, ["<span class='encyclopedia topic'>Normal</span>: Is more expensive but doesn't provide anything."], "li"); - App.Events.addNode(ul, ["<span class='encyclopedia topic'>Luxurious</span>: As the name implies, it is the most expensive however it may provide devotion and trust bonuses. A recruiter benefits from this."], "li"); - f.append(ul); + const dl = document.createElement("dl"); + App.Events.addNode(dl, ["<dt>Spare</dt><dd>The cheapest and the default but may cause some issues.</dd>"], ); + App.Events.addNode(dl, ["<dt>Normal</dt><dd>Is more expensive but doesn't provide anything.</dd>"], ); + App.Events.addNode(dl, ["<dt>Luxurious</dt><dd>As the name implies, it is the most expensive however it may provide devotion and trust bonuses. A recruiter benefits from this.</dd>"], ); + f.append(dl); return f; }, "slaves");