paritybit.ca

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

commit 43c193a79b786e7ea1a6c031e7be8fec3760935e
parent f293666c1caa8342ab580c2f30c1b191a9dfcefb
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Thu, 28 Mar 2019 01:34:27 -0400

Integrate roll.css into base.css

Because I haven't yet found a way to dynamically add css links to only
certain html pages using the compilation script, temporarily (or
possibly permanently, depending) merge these two files so that the CSS
gets added with no extra effort.

Diffstat:
Mbuild/base.css | 53+++++++++++++++++++++++++++++++++++++++++++++++++++++
Dbuild/roll.css | 44--------------------------------------------
Mcreatepages.sh | 2--
Mpages/projects/dnd/roll.md | 86++++++++++++++++++++++++++++++++++++++++---------------------------------------
4 files changed, 97 insertions(+), 88 deletions(-)

diff --git a/build/base.css b/build/base.css @@ -42,6 +42,10 @@ pre { word-wrap: break-word; } +button { + background-color: #bababa; +} + ul.inline { padding: .1em 0 .5em 0; margin: 0; @@ -105,6 +109,55 @@ ul.inline { font-size: 1em; } +/* roll.html specific css */ + +#dice-table { + float: left; + width: 15%; +} + +.dice-td { + width: 100%; + line-height: 0px; + text-align: center; +} + +.dice-td>button { + width: 100%; +} + +.dice-td>input { + width: 50px; +} + +.field { + margin-left: -10px; +} + +#history { + display: inline-block; + position: relative; +} + +#history-text { + display: inline-block; + margin: 1em; + float: left; + width: 100%; + background-color: #eaeaea; +} + +#clear-history { + position: absolute; + margin-left: 1em; + margin-bottom: 1em; + bottom: 1px; + left: 0px; + width: 7em; +} + +/* Ensure proper scaling with differently-sized displays */ + @media all and (max-width: 600px) { #side-bar { float: left; diff --git a/build/roll.css b/build/roll.css @@ -1,44 +0,0 @@ -table { - float: left; - width: 15%; -} - -td { - width: 100%; - text-align: center; -} - -button { - width: 100%; - background-color: #bababa; -} - -.field { - margin-left: -10px; -} - -textarea { - display: inline-block; - margin: 1em; - float: left; - width: 100%; - background-color: #eaeaea; -} - -input { - width: 50px; -} - -#history { - display: inline-block; - position: relative; -} - -#clear-history { - position: absolute; - margin-left: 1em; - margin-bottom: 1em; - bottom: 1px; - left: 0px; - width: 100px; -} diff --git a/createpages.sh b/createpages.sh @@ -30,8 +30,6 @@ if [[ $1 == '-c' || $1 == '--css' ]]; then echo "Minifying CSS..." curl --data "input=`cat build/base.css`" https://cssminifier.com/raw > \ public/css/base.min.css - curl --data "input=`cat build/roll.css`" https://cssminifier.com/raw > \ - public/css/roll.min.css exit 0 fi diff --git a/pages/projects/dnd/roll.md b/pages/projects/dnd/roll.md @@ -1,52 +1,54 @@ +<script type="text/javascript" src=/js/math.js></script> +<script type="text/javascript" src=/js/roll.js></script> ##D&D Simple Dice Roller <table id="dice-table"> - <tr> + <tr class="dnd-roll"> <th>Die</th> <th>Num</th> <th>Mod</th> <th>Result</th> </tr> - <tr> - <td><button id="4" onClick="roll(this)">d4</button></td> - <td><input type="number" min=1 value=1 id="num4"></td> - <td><input type="number" value=0 id="mod4"></td> - <td><p class="field" id="4result">0</p> - </tr> - <tr> - <td><button id="6" onClick="roll(this)">d6</button></td> - <td><input type="number" min=1 value=1 id="num6"></td> - <td><input type="number" value=0 id="mod6"></td> - <td><p class="field" id="6result">0</p> - </tr> - <tr> - <td><button id="8" onClick="roll(this)">d8</button></td> - <td><input type="number" min=1 value=1 id="num8"></td> - <td><input type="number" value=0 id="mod8"></td> - <td><p class="field" id="8result">0</p> - </tr> - <tr> - <td><button id="10" onClick="roll(this)">d10</button></td> - <td><input type="number" min=1 value=1 id="num10"></td> - <td><input type="number" value=0 id="mod10"></td> - <td><p class="field" id="10result">0</p> - </tr> - <tr> - <td><button id="12" onClick="roll(this)">d12</button></td> - <td><input type="number" min=1 value=1 id="num12"></td> - <td><input type="number" value=0 id="mod12"></td> - <td><p class="field" id="12result">0</p> - </tr> - <tr> - <td><button id="20" onClick="roll(this)">d20</button></td> - <td><input type="number" min=1 value=1 id="num20"></td> - <td><input type="number" value=0 id="mod20"></td> - <td><p class="field" id="20result">0</p> - </tr> - <tr> - <td><button id="100" onClick="roll(this)">d100</button></td> - <td><input type="number" min=1 value=1 id="num100"></td> - <td><input type="number" value=0 id="mod100"></td> - <td><p class="field" id="100result">0</p> + <tr class="dnd-roll"> + <td class="dice-td"><button id="4" onClick="roll(this)">d4</button></td> + <td class="dice-td"><input type="number" min=1 value=1 id="num4"></td> + <td class="dice-td"><input type="number" value=0 id="mod4"></td> + <td class="dice-td"><p class="field" id="4result">0</p> + </tr> + <tr class="dnd-roll"> + <td class="dice-td"><button id="6" onClick="roll(this)">d6</button></td> + <td class="dice-td"><input type="number" min=1 value=1 id="num6"></td> + <td class="dice-td"><input type="number" value=0 id="mod6"></td> + <td class="dice-td"><p class="field" id="6result">0</p> + </tr> + <tr class="dnd-roll"> + <td class="dice-td"><button id="8" onClick="roll(this)">d8</button></td> + <td class="dice-td"><input type="number" min=1 value=1 id="num8"></td> + <td class="dice-td"><input type="number" value=0 id="mod8"></td> + <td class="dice-td"><p class="field" id="8result">0</p> + </tr> + <tr class="dnd-roll"> + <td class="dice-td"><button id="10" onClick="roll(this)">d10</button></td> + <td class="dice-td"><input type="number" min=1 value=1 id="num10"></td> + <td class="dice-td"><input type="number" value=0 id="mod10"></td> + <td class="dice-td"><p class="field" id="10result">0</p> + </tr> + <tr class="dnd-roll"> + <td class="dice-td"><button id="12" onClick="roll(this)">d12</button></td> + <td class="dice-td"><input type="number" min=1 value=1 id="num12"></td> + <td class="dice-td"><input type="number" value=0 id="mod12"></td> + <td class="dice-td"><p class="field" id="12result">0</p> + </tr> + <tr class="dnd-roll"> + <td class="dice-td"><button id="20" onClick="roll(this)">d20</button></td> + <td class="dice-td"><input type="number" min=1 value=1 id="num20"></td> + <td class="dice-td"><input type="number" value=0 id="mod20"></td> + <td class="dice-td"><p class="field" id="20result">0</p> + </tr> + <tr class="dnd-roll"> + <td class="dice-td"><button id="100" onClick="roll(this)">d100</button></td> + <td class="dice-td"><input type="number" min=1 value=1 id="num100"></td> + <td class="dice-td"><input type="number" value=0 id="mod100"></td> + <td class="dice-td"><p class="field" id="100result">0</p> </tr> </table> <div id="history">