Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

Runners in the Shadows-2

Slug: rits-2

System: Blades in the Dark

DST Source Code

Note: This is the latest, unapproved DST code. Only the DST author can use an unapproved DST, and even then only they can see it. If it's a new DST, then it's invisible to everyone else. If modifying a previously approved DST, then everyone else uses the most recent approved version.

HTML Template

<div class="desc p-4">
  <div class="flex">
    <label class="flex-2 pr-4">
      <span class="dsf dsf_alias text-lg"></span>
      <span class="sub-label">Alias(es)</span>
    </label>
    <label class="flex-1">
      <span class="dsf dsf_crew text-lg"></span>
      <span class="sub-label">Crew</span>
    </label>
  </div>
  <div class="flex">
    <label class="flex-2 pr-4">
      <span class="dsf dsf_name"></span>
      <span class="sub-label">Given Name</span>
    </label>
    <div class="flex-1">
      <span class="dsf dsf_sin_source"></span>
      <span class="sub-label">
        <label><span class="dsf dsf_sinner checkbox"></span> Sinner?</label>
        | Source
      </span>
    </div>
  </div>
  <div>
    <span class="dsf dsf_look"></span>
    <span class="sub-label flex">
      <div class="flex-1">
        Look | Metatype:
      </div>
      <div class="flex-none">
        <label class="text-check">
          <span class="dsf dsf_mt_dwarf checkbox"></span>
          Dwarf
        </label>
        <label class="text-check">
          <span class="dsf dsf_mt_elf checkbox"></span>
          Elf
        </label>
        <label class="text-check">
          <span class="dsf dsf_mt_human checkbox"></span>
          Human
        </label>
        <label class="text-check">
          <span class="dsf dsf_mt_ork checkbox"></span>
          Ork
        </label>
        <label class="text-check">
          <span class="dsf dsf_mt_troll checkbox"></span>
          Troll
        </label>
      </div>
    </span>
  </div>
  <div>
    <span class="dsf dsf_heritage"></span>
    <span class="sub-label">
      Heritage
      <div class="float-right">
        <label class="text-check">
          <span class="dsf dsf_h_africa checkbox"></span>
          Africa
        </label>
        <label class="text-check">
          <span class="dsf dsf_h_asia checkbox"></span>
          Asia
        </label>
        <label class="text-check">
          <span class="dsf dsf_h_americas checkbox"></span>
          Americas
        </label>
        <label class="text-check">
          <span class="dsf dsf_h_europe checkbox"></span>
          Europe
        </label>
        <label class="text-check">
          <span class="dsf dsf_h_oceania checkbox"></span>
          Oceania
        </label>
        <label class="text-check">
          <span class="dsf dsf_h_other checkbox"></span>
          Other
        </label>
      </div>
    </span>
  </div>
  <div>
    <span class="dsf dsf_vice"></span>
    <span class="sub-label">
      Vice | Source:
      <div class="float-right">
        <label class="text-check">
          <span class="dsf dsf_vice_deviant checkbox"></span>
          Deviant
        </label>
        <label class="text-check">
          <span class="dsf dsf_vice_faith checkbox"></span>
          Faith
        </label>
        <label class="text-check">
          <span class="dsf dsf_vice_gambling checkbox"></span>
          Gambling
        </label>
        <label class="text-check">
          <span class="dsf dsf_vice_luxory checkbox"></span>
          Luxury
        </label>
        <label class="text-check">
          <span class="dsf dsf_vice_obligation checkbox"></span>
          Obligation
        </label>
        <label class="text-check">
          <span class="dsf dsf_vice_pleasure checkbox"></span>
          Pleasure
        </label>
        <label class="text-check">
          <span class="dsf dsf_vice_stupor checkbox"></span>
          Stupor
        </label>
      </div>
    </span>
  </div>
</div>
<div class="trackers p-4">
  <div class="flex">
    <div class="flex-1">
      <h3 class="red-gradient">Edge</h3>
      <span class="edge-markers js-field-range" data-field='{ "field": "edge", "num": 12, "svg": "square" }'></span>
    </div>
    <div class="flex-none">
      <h3 class="red-gradient">Trauma</h3>
      <div class="flex">
        <div class="flex-none">
          <span class="trauma-markers js-field-range range-stagger" data-field='{ "field": "trauma", "num": 5, "svg": "diamond" }'></span>
        </div>
        <div class="trauma-effects flex-1">
          <p data-each='{ "cold": "Cold", "haunted": "Haunted", "obsessed": "Obsessed", "paranoid": "Paranoid" }'>
            <label class="text-check">
              <span class="dsf dsf_trauma_{{key}} checkbox"></span>
              {{value}}
            </label>
          </p>
          <p data-each='{ "reckless": "Reckless", "soft": "Soft", "unstable": "Unstable", "vicious": "Vicious" }'>
            <label class="text-check">
              <span class="dsf dsf_trauma_{{key}} checkbox"></span>
              {{value}}
            </label>
          </p>
        </div>
      </div>
    </div>
  </div>
  <h3 class="red-gradient">Harm</h3>
  <div class="harm flex">
    <div class="flex-1">
      <div class="flex">
        <h4 class="flex-none bg-gray-700">Need<br/>Help</h4>
        <div class="flex-1 p-2 border">
          <span class="dsf dsf_harm_help"></span>
        </div>
      </div>
      <div class="flex">
        <h4 class="flex-none lh-2 bg-gray-600">-1D</h4>
        <div class="flex-1 p-2 border">
          <span class="dsf dsf_harm_bad1"></span>
        </div>
        <div class="flex-1 p-2 border">
          <span class="dsf dsf_harm_bad2"></span>
        </div>
      </div>
      <div class="flex">
        <h4 class="flex-none bg-gray-500">Less<br/>Effect</h4>
        <div class="flex-1 p-2 border">
          <span class="dsf dsf_harm_less1"></span>
        </div>
        <div class="flex-1 p-2 border">
          <span class="dsf dsf_harm_less2"></span>
        </div>
      </div>
    </div>
    <div class="flex-none pl-4 pt-4">
      <div class="pie" data-pie='{ "slices": 12, "name": "healing", "width": 100 }'></div>
    </div>
  </div>
  <div class="flex">
    <div class="flex-none" style="order:2">
      <h4 class="red-gradient mb-2 text-base" style="margin-right:-1rem">Armor Uses</h4>
      <label class="svg-check block text-right">
        Armor <i class="check-icon svg-square"></i>
        <span class="dsf dsf_armor_armor checkbox"></span>
      </label>
      <label class="svg-check block text-right">
        Heavy <i class="check-icon svg-square"></i>
        <span class="dsf dsf_armor_heavy checkbox"></span>
      </label>
      <label class="svg-check block text-right">
        Special <i class="check-icon svg-square"></i>
        <span class="dsf dsf_armor_special checkbox"></span>
      </label>
    </div>
    <div class="flex-1 notes">
      <h3 class="text-center">Notes</h3>
      <span data-repeat="6">
        <span class="dsf dsf_notes_{{i}}"></span>
      </span>
    </div>
  </div>
</div>
<div class="flex">
  <div class="special-abilities flex-1 p-4">
    <h2><span class="dsf dsf_class_name"></span></h2>
    <div><span class="dsf dsf_class_description"></span></div>
    <div data-repeat="8">
      <div class="flex">
        <label class="svg-check flex-none">
          <i class="check-icon svg-circle"></i>
          <span class="dsf dsf_special_{{i}} checkbox"></span>
        </label>
        <div class="flex-1 px-2">
          <span class="dsf dsf_special_{{i}}_desc"></span>
        </div>
      </div>
    </div>
    <div class="flex pt-1">
      <div class="flex-none mr-2" data-repeat="3">
        <label class="svg-check">
          <i class="check-icon svg-circle"></i>
          <span class="dsf dsf_veteran_{{i}} checkbox"></span>
        </label>
      </div>
      <div class="flex-1">
        <b>Veteran:</b> Select a special ability from another source.
      </div>
    </div>
  </div>
  <div class="flex-none py-4 pr-4">
    <h3 class="serif text-center">Stash</h3>
    <div data-repeat="4">
      <span class="stash-markers js-field-range" data-field='{ "field": "stash_{{i}}", "num": 10, "svg": "square" }'></span>
    </div>
    <div>
      <b class="serif">Nuyen</b>
      <span class="nuyen-markers js-field-range" data-field='{ "field": "nuyen_{{i}}", "num": 4, "svg": "square" }'></span>
    </div>
    <div class="stat-block serif">
      <h3 class="text-base red-gradient">
        Intuition
        <div class="stat-pie pie" data-pie='{ "slices": 6, "name": "intuition_pie", "width": 32 }'></div>
      </h3>
      <div data-each='{ "seng": "Engineer", "sif": "Interface", "stalk": "Stalk", "survey": "Survey" }'>
        <span class="stat-block-markers js-field-range" data-field='{ "field": "{{{key}}", "num": 4, "svg": "circle" }'></span>
        {{value}}<br/>
      </div>
    </div>
    <div class="stat-block serif">
      <h3 class="text-base red-gradient">
        Body
        <div class="stat-pie pie" data-pie='{ "slices": 6, "name": "body_pie", "width": 32 }'></div>
      </h3>
      <div data-each='{ "seng": "Engineer", "sif": "Interface", "stalk": "Stalk", "survey": "Survey" }'>
        <span class="stat-block-markers js-field-range" data-field='{ "field": "{{{key}}", "num": 4, "svg": "circle" }'></span>
        {{value}}<br/>
      </div>
    </div>
    <div class="stat-block serif">
      <h3 class="text-base red-gradient">
        Willpower
        <div class="stat-pie pie" data-pie='{ "slices": 6, "name": "willpower_pie", "width": 32 }'></div>
      </h3>
      <div data-each='{ "seng": "Engineer", "sif": "Interface", "stalk": "Stalk", "survey": "Survey" }'>
        <span class="stat-block-markers js-field-range" data-field='{ "field": "{{{key}}", "num": 4, "svg": "circle" }'></span>
        {{value}}<br/>
      </div>
    </div>
  </div>
</div>
<div class="tools-table flex pl-4">
  <div class="flex-3">
    <div class="flex">
      <div class="flex-1">
        <h3 class="mb-2 -mx-4 px-4 serif text-base text-white bg-gray-700">Deadly Friends</h3>
        <div data-repeat="6">
          <div>
            <label class="svg-check" data-radio="friend-flex-{{i}}">
              <i class="check-icon svg-triangle-up"></i>
              <span class="dsf dsf_friend_up_{{i}} checkbox"></span>
            </label>
            <label class="svg-check" data-radio="friend-flex-{{i}}" style="margin-left:-0.25rem">
              <i class="check-icon svg-triangle-down"></i>
              <span class="dsf dsf_friend_down_{{i}} checkbox"></span>
            </label>
            <span class="dsf dsf_friend_label_{{i}} inline-block">
          </div>
        </div>
      </div>
      <div class="special-items flex-1">
        <h3 class="mb-2 serif text-base text-white bg-gray-700">Items</h3>
        <div data-repeat="5">
          <div>
            <label class="svg-check">
              <i class="check-icon svg-square"></i>
              <span class="dsf dsf_special_item_{{i}} checkbox"></span>
            </label>
            <span class="dsf dsf_special_item_{{i}}_label inline-block"></span>
          </div>
        </div>
        <div>
          <label class="svg-check">
            <i class="check-icon svg-square"></i>
            <span class="dsf dsf_special_item_x checkbox"></span>
          </label>
          <label class="svg-check">
            <i class="check-icon svg-square"></i>
            <span class="dsf dsf_special_item_x checkbox"></span>
          </label>
          <span class="dsf dsf_special_item_x_label inline-block"></span>
        </div>
      </div>
    </div>
    <div class="pr-4">
      <h3 class="mb-2 -mx-4 mr-0 px-4 serif text-base text-white bg-gray-700">Karma</h3>
      <ul>
        <li>
          <i>Everytime you roll a desperate action, mark karma in that action’s attribute.</i><br/>
          At the end of each session, for each item below, mark 1 karma (in your playbook or an attribute) or 2 karma if that item occurred multiple times.
        </li>
        <li>You addressed a challenge with <span class="dsf dsf_karma_1 inline-block"></span> or <span class="dsf dsf_karma_2 inline-block"></span>.</li>
        <li>You expressed your beliefs, drives, metahumanity, heritage, or background.</li>
        <li>You struggled with issues from dystopia, your vice, or trauma during the session.</li>
      </ul>
    </div>
    <div class="karma flex pr-4">
      <div class="flex-1">
        <h3 class="serif">Teamwork</h3>
        <p class="bg-gray-200"><b>Assist</b> a teammate</p>
        <p class="bg-gray-200"><b>Lead a group action</b></p>
        <p class="bg-gray-200"><b>Protect</b> a teammate</p>
        <p class="bg-gray-200"><b>Set up</b> a teammate</p>
      </div>
      <div class="flex-2">
        <h3 class="serif">Planning &amp; Load</h3>
        <p class="planning">Choose a <i>plan</i>, provide the <i>detail</i>. Choose your load limit for the run.</p>
        <div class="flex">
          <div class="flex-1">
            <p class="bg-gray-200"><b>Assault</b>: Point of attack</p>
            <p class="bg-gray-200"><b>Deception</b>: Method</p>
            <p class="bg-gray-200"><b>Supernatural</b>: Power</p>
          </div>
          <div class="flex-1">
            <p class="bg-gray-200"><b>Social</b>: Connection</p>
            <p class="bg-gray-200"><b>Stealth</b>: Entry point</p>
            <p class="bg-gray-200"><b>Transport</b>: Route</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex-1">
    <h3 class="mb-2 serif text-base text-white bg-gray-700">Load</h3>
    <label class="svg-check block" data-radio="load">
      <i class="check-icon svg-diamond"></i> Light (0-3)
      <span class="dsf dsf_load_list checkbox"></span>
    </label>
    <label class="svg-check block" data-radio="load">
      <i class="check-icon svg-diamond"></i> Normal (4-5)
      <span class="dsf dsf_load_list checkbox"></span>
    </label>
    <label class="svg-check block mb-4" data-radio="load">
      <i class="check-icon svg-diamond"></i> Heavy (6+)
      <span class="dsf dsf_load_list checkbox"></span>
    </label>
    <div data-each='["Armor", "+Heavy", "A large weapon", "Climbing Gear", "Mechanic tools"]'>
      <div>
        <label class="svg-check">
          <i class="check-icon svg-square"></i>
          <span class="dsf dsf_item_{{key}}a checkbox"></span>
        </label>
        <label class="svg-check">
          <i class="check-icon svg-square"></i>
          <span class="dsf dsf_item_{{key}}b checkbox"></span>
        </label>
        {{value}}
      </div>
    </div>
    <div data-each='["<i>A comm</i>", "A pistol", "A quiet weapon", "A medieval weapon", "An unusual weapon", "Burglary gear", "Documents", "Lighting gear", "Reagents", "Subterfuge supplies", "Techical tools"]'>
      <div>
        <label class="svg-check">
          <i class="check-icon svg-square"></i> {{value}}
          <span class="dsf dsf_item_{{key}} checkbox"></span>
        </label>
      </div>
    </div>
    <div>
      <span class="inline-block js-field-range" data-field='{ "field": "ammo", "num": 3, "svg": "square" }'></span> Ammo
    </div>
  </div>
</div>

CSS

@import "//fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap";
.ds_rits .special-items svg,
.ds_rits_editable .special-items svg, .ds_rits .stat-block-markers .svg-check:nth-child(4) svg,
.ds_rits_editable .stat-block-markers .svg-check:nth-child(4) svg, .ds_rits .stash-markers .svg-check:nth-child(-n+9) svg,
.ds_rits_editable .stash-markers .svg-check:nth-child(-n+9) svg, .ds_rits .edge-markers .svg-check:nth-child(n+10) svg,
.ds_rits_editable .edge-markers .svg-check:nth-child(n+10) svg {
  stroke: #6a737d;
  stroke-dasharray: 3, 1;
}

.ds_rits,
.ds_rits_editable {
  padding-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  background-color: #f6f8fa;
  box-shadow: inset 0 1px 15px rgba(27, 31, 35, 0.15);
  /* === UTILS === */
  /* Position */
  /* Box Model */
  /* Typography */
  /* Visuals */
  /* Screen readers */
}
.ds_rits label,
.ds_rits_editable label {
  display: inline-block;
  font-size: 1rem;
}
.ds_rits .sub-label,
.ds_rits .sub-label label,
.ds_rits_editable .sub-label,
.ds_rits_editable .sub-label label {
  font-size: 0.75rem;
  font-weight: bold;
  color: #444d56;
}
.ds_rits .dsf:hover,
.ds_rits_editable .dsf:hover {
  background-color: #d1d5da;
}
.ds_rits .dsf:not(.checkbox),
.ds_rits_editable .dsf:not(.checkbox) {
  display: block;
  min-height: 1.5rem;
  padding: 2px;
  font-size: inherit;
  font-weight: normal;
  cursor: pointer;
}
.ds_rits .desc .dsf:not(.checkbox),
.ds_rits .notes .dsf:not(.checkbox),
.ds_rits_editable .desc .dsf:not(.checkbox),
.ds_rits_editable .notes .dsf:not(.checkbox) {
  border-bottom: 2px dotted #444d56;
}
.ds_rits .svg-icon,
.ds_rits .check-icon,
.ds_rits_editable .svg-icon,
.ds_rits_editable .check-icon {
  line-height: 1;
  vertical-align: sub;
}
.ds_rits .check-icon svg,
.ds_rits_editable .check-icon svg {
  fill: #fff;
  stroke: #000;
}
.ds_rits label:hover .check-icon svg,
.ds_rits label.is-hover .check-icon svg,
.ds_rits_editable label:hover .check-icon svg,
.ds_rits_editable label.is-hover .check-icon svg {
  fill: #d1d5da;
  stroke: #000;
}
.ds_rits .check-icon svg,
.ds_rits .svg-lg svg,
.ds_rits_editable .check-icon svg,
.ds_rits_editable .svg-lg svg {
  width: 20px;
  height: 20px;
}
.ds_rits .svg-check input,
.ds_rits_editable .svg-check input {
  display: none;
}
.ds_rits label.is-checked .check-icon svg,
.ds_rits_editable label.is-checked .check-icon svg {
  fill: currentColor;
  stroke: currentColor;
}
.ds_rits .js-field-range,
.ds_rits_editable .js-field-range {
  display: block;
  margin: 0.5rem 0;
}
.ds_rits .range-stagger .check-icon,
.ds_rits .range-stagger .svg-icon,
.ds_rits_editable .range-stagger .check-icon,
.ds_rits_editable .range-stagger .svg-icon {
  margin-right: -4px;
  vertical-align: super;
}
.ds_rits .range-stagger .check-icon,
.ds_rits .range-stagger .svg-icon,
.ds_rits_editable .range-stagger .check-icon,
.ds_rits_editable .range-stagger .svg-icon {
  vertical-align: super;
}
.ds_rits .range-stagger :nth-child(even) .check-icon,
.ds_rits .range-stagger .svg-icon:nth-child(even),
.ds_rits_editable .range-stagger :nth-child(even) .check-icon,
.ds_rits_editable .range-stagger .svg-icon:nth-child(even) {
  vertical-align: sub;
}
.ds_rits .trackers h3,
.ds_rits_editable .trackers h3 {
  margin-left: -1rem;
  margin-top: 0.5rem;
  margin-right: -1rem;
  line-height: 1.2;
  letter-spacing: 1px;
}
.ds_rits .edge-markers .svg-check:nth-child(4n),
.ds_rits_editable .edge-markers .svg-check:nth-child(4n) {
  margin-right: 1rem;
}
.ds_rits .trackers .text-check,
.ds_rits_editable .trackers .text-check {
  margin: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: #444d56;
}
.ds_rits .trauma-effects,
.ds_rits_editable .trauma-effects {
  margin-top: 0.125rem;
}
.ds_rits .trauma-effects p,
.ds_rits_editable .trauma-effects p {
  margin: 0 0.5rem;
  line-height: 1;
}
.ds_rits .special-abilities .dsf:not(.dsf_class_name),
.ds_rits_editable .special-abilities .dsf:not(.dsf_class_name) {
  min-height: 4rem;
}
.ds_rits .stash-markers,
.ds_rits_editable .stash-markers {
  margin: 0;
}
.ds_rits .nuyen-markers,
.ds_rits_editable .nuyen-markers {
  display: inline-block;
  margin: 0;
}
.ds_rits .stat-block,
.ds_rits_editable .stat-block {
  margin-top: 0.5rem;
  color: #2f363d;
}
.ds_rits .stat-block h3,
.ds_rits_editable .stat-block h3 {
  padding: 0 0.5rem;
}
.ds_rits .stat-block-markers,
.ds_rits_editable .stat-block-markers {
  display: inline-block;
  margin: 0;
  margin-right: 1rem;
}
.ds_rits .stat-block-markers .svg-check,
.ds_rits_editable .stat-block-markers .svg-check {
  margin: 0;
  padding: 0 0.125rem;
}
.ds_rits .stat-block-markers .svg-check:first-child,
.ds_rits_editable .stat-block-markers .svg-check:first-child {
  margin-right: 0.25rem;
  padding: 0.25rem;
  border-left: 1px solid #6a737d;
  border-right: 1px solid #6a737d;
  background-color: #e1e4e8;
}
.ds_rits .stat-block-markers .svg-check:nth-child(4) svg,
.ds_rits_editable .stat-block-markers .svg-check:nth-child(4) svg {
  stroke-dasharray: 2, 2;
}
.ds_rits .tools-table,
.ds_rits_editable .tools-table {
  line-height: 1.15;
  color: #2f363d;
}
.ds_rits .text-check,
.ds_rits_editable .text-check {
  padding: 0.25rem 0.5rem;
}
.ds_rits .text-check:hover,
.ds_rits_editable .text-check:hover {
  background-color: #d1d5da;
}
.ds_rits .text-check.is-checked,
.ds_rits_editable .text-check.is-checked {
  color: #fff;
  background-color: #444d56;
}
.ds_rits .harm h4,
.ds_rits_editable .harm h4 {
  width: 5rem;
  height: 45px;
  padding-top: 6px;
  margin-left: -1rem;
  font-family: "Cinzel", Georgia, "Times New Roman", Times, serif;
  font-size: 0.875rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.15;
  text-align: center;
}
.ds_rits .harm .lh-2,
.ds_rits_editable .harm .lh-2 {
  line-height: 2.3;
}
.ds_rits .harm .border,
.ds_rits_editable .harm .border {
  border-right: 1px solid #444d56;
  border-bottom: 1px solid #444d56;
}
.ds_rits .pie .dsf,
.ds_rits_editable .pie .dsf {
  display: none;
}
.ds_rits .pie svg,
.ds_rits_editable .pie svg {
  stroke: #2f363d;
  stroke-width: 2px;
}
.ds_rits .pie line,
.ds_rits_editable .pie line {
  stroke: #6a737d;
  stroke-width: 1px;
}
.ds_rits .pie path,
.ds_rits_editable .pie path {
  fill: #2f363d;
}
.ds_rits .pie circle,
.ds_rits_editable .pie circle {
  fill: #fff;
  cursor: pointer;
}
.ds_rits .pie:hover circle,
.ds_rits_editable .pie:hover circle {
  fill: #d1d5da;
}
.ds_rits .pie circle.full,
.ds_rits_editable .pie circle.full {
  fill: #2f363d;
}
.ds_rits .stat-block h3,
.ds_rits_editable .stat-block h3 {
  position: relative;
}
.ds_rits .stat-pie,
.ds_rits_editable .stat-pie {
  position: absolute;
  top: -2px;
  right: 0.5rem;
}
.ds_rits .karma h3,
.ds_rits_editable .karma h3 {
  font-size: 1rem;
  color: #444d56;
}
.ds_rits .karma p.bg-gray-200,
.ds_rits_editable .karma p.bg-gray-200 {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 0 0.25rem;
}
.ds_rits .planning,
.ds_rits_editable .planning {
  margin: 0;
  padding: 0 0.25rem;
  line-height: 2.5;
}
.ds_rits .float-right,
.ds_rits_editable .float-right {
  float: right;
}
.ds_rits .block,
.ds_rits_editable .block {
  display: block;
}
.ds_rits .inline-block,
.ds_rits_editable .inline-block {
  display: inline-block !important;
  margin: auto;
}
@media (min-width: 768px) {
  .ds_rits .flex,
.ds_rits_editable .flex {
    display: flex;
    width: 100%;
  }
}
.ds_rits .flex-none,
.ds_rits_editable .flex-none {
  flex: none;
}
.ds_rits .flex-1,
.ds_rits_editable .flex-1 {
  flex: 1 1 0%;
}
.ds_rits .flex-2,
.ds_rits_editable .flex-2 {
  flex: 2 1 0%;
}
.ds_rits .flex-3,
.ds_rits_editable .flex-3 {
  flex: 3 1 0%;
}
.ds_rits .-mx-4,
.ds_rits_editable .-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.ds_rits .ml-0,
.ds_rits_editable .ml-0 {
  margin-left: 0rem;
}
.ds_rits .mt-0,
.ds_rits_editable .mt-0 {
  margin-top: 0rem;
}
.ds_rits .mr-0,
.ds_rits_editable .mr-0 {
  margin-right: 0rem;
}
.ds_rits .mb-0,
.ds_rits_editable .mb-0 {
  margin-bottom: 0rem;
}
.ds_rits .mx-0,
.ds_rits_editable .mx-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}
.ds_rits .my-0,
.ds_rits_editable .my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}
.ds_rits .m-0,
.ds_rits_editable .m-0 {
  margin: 0rem;
}
.ds_rits .ml-1,
.ds_rits_editable .ml-1 {
  margin-left: 0.25rem;
}
.ds_rits .mt-1,
.ds_rits_editable .mt-1 {
  margin-top: 0.25rem;
}
.ds_rits .mr-1,
.ds_rits_editable .mr-1 {
  margin-right: 0.25rem;
}
.ds_rits .mb-1,
.ds_rits_editable .mb-1 {
  margin-bottom: 0.25rem;
}
.ds_rits .mx-1,
.ds_rits_editable .mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.ds_rits .my-1,
.ds_rits_editable .my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.ds_rits .m-1,
.ds_rits_editable .m-1 {
  margin: 0.25rem;
}
.ds_rits .ml-2,
.ds_rits_editable .ml-2 {
  margin-left: 0.5rem;
}
.ds_rits .mt-2,
.ds_rits_editable .mt-2 {
  margin-top: 0.5rem;
}
.ds_rits .mr-2,
.ds_rits_editable .mr-2 {
  margin-right: 0.5rem;
}
.ds_rits .mb-2,
.ds_rits_editable .mb-2 {
  margin-bottom: 0.5rem;
}
.ds_rits .mx-2,
.ds_rits_editable .mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.ds_rits .my-2,
.ds_rits_editable .my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.ds_rits .m-2,
.ds_rits_editable .m-2 {
  margin: 0.5rem;
}
.ds_rits .ml-4,
.ds_rits_editable .ml-4 {
  margin-left: 1rem;
}
.ds_rits .mt-4,
.ds_rits_editable .mt-4 {
  margin-top: 1rem;
}
.ds_rits .mr-4,
.ds_rits_editable .mr-4 {
  margin-right: 1rem;
}
.ds_rits .mb-4,
.ds_rits_editable .mb-4 {
  margin-bottom: 1rem;
}
.ds_rits .mx-4,
.ds_rits_editable .mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.ds_rits .my-4,
.ds_rits_editable .my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.ds_rits .m-4,
.ds_rits_editable .m-4 {
  margin: 1rem;
}
.ds_rits .pl-0,
.ds_rits_editable .pl-0 {
  padding-left: 0rem;
}
.ds_rits .pt-0,
.ds_rits_editable .pt-0 {
  padding-top: 0rem;
}
.ds_rits .pr-0,
.ds_rits_editable .pr-0 {
  padding-right: 0rem;
}
.ds_rits .pb-0,
.ds_rits_editable .pb-0 {
  padding-bottom: 0rem;
}
.ds_rits .px-0,
.ds_rits_editable .px-0 {
  padding-left: 0rem;
  padding-right: 0rem;
}
.ds_rits .py-0,
.ds_rits_editable .py-0 {
  padding-top: 0rem;
  padding-bottom: 0rem;
}
.ds_rits .p-0,
.ds_rits_editable .p-0 {
  padding: 0rem;
}
.ds_rits .pl-1,
.ds_rits_editable .pl-1 {
  padding-left: 0.25rem;
}
.ds_rits .pt-1,
.ds_rits_editable .pt-1 {
  padding-top: 0.25rem;
}
.ds_rits .pr-1,
.ds_rits_editable .pr-1 {
  padding-right: 0.25rem;
}
.ds_rits .pb-1,
.ds_rits_editable .pb-1 {
  padding-bottom: 0.25rem;
}
.ds_rits .px-1,
.ds_rits_editable .px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.ds_rits .py-1,
.ds_rits_editable .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.ds_rits .p-1,
.ds_rits_editable .p-1 {
  padding: 0.25rem;
}
.ds_rits .pl-2,
.ds_rits_editable .pl-2 {
  padding-left: 0.5rem;
}
.ds_rits .pt-2,
.ds_rits_editable .pt-2 {
  padding-top: 0.5rem;
}
.ds_rits .pr-2,
.ds_rits_editable .pr-2 {
  padding-right: 0.5rem;
}
.ds_rits .pb-2,
.ds_rits_editable .pb-2 {
  padding-bottom: 0.5rem;
}
.ds_rits .px-2,
.ds_rits_editable .px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.ds_rits .py-2,
.ds_rits_editable .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.ds_rits .p-2,
.ds_rits_editable .p-2 {
  padding: 0.5rem;
}
.ds_rits .pl-4,
.ds_rits_editable .pl-4 {
  padding-left: 1rem;
}
.ds_rits .pt-4,
.ds_rits_editable .pt-4 {
  padding-top: 1rem;
}
.ds_rits .pr-4,
.ds_rits_editable .pr-4 {
  padding-right: 1rem;
}
.ds_rits .pb-4,
.ds_rits_editable .pb-4 {
  padding-bottom: 1rem;
}
.ds_rits .px-4,
.ds_rits_editable .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.ds_rits .py-4,
.ds_rits_editable .py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.ds_rits .p-4,
.ds_rits_editable .p-4 {
  padding: 1rem;
}
.ds_rits .serif, .ds_rits .planning,
.ds_rits .ds_rits_editable .planning,
.ds_rits_editable .ds_rits .planning,
.ds_rits_editable .serif,
.ds_rits_editable .ds_rits .planning,
.ds_rits .ds_rits_editable .planning,
.ds_rits_editable .planning {
  font-family: "Cinzel", Georgia, "Times New Roman", Times, serif;
}
.ds_rits .text-base,
.ds_rits_editable .text-base {
  font-size: 1rem !important;
}
.ds_rits .text-lg,
.ds_rits_editable .text-lg {
  font-size: 1.75em !important;
}
.ds_rits .text-sm, .ds_rits .planning,
.ds_rits .ds_rits_editable .planning,
.ds_rits_editable .ds_rits .planning,
.ds_rits_editable .text-sm,
.ds_rits_editable .ds_rits .planning,
.ds_rits .ds_rits_editable .planning,
.ds_rits_editable .planning {
  font-size: 0.75em;
}
.ds_rits .text-center,
.ds_rits_editable .text-center {
  text-align: center;
}
.ds_rits .text-bold,
.ds_rits_editable .text-bold {
  font-weight: bold;
}
.ds_rits .text-white,
.ds_rits_editable .text-white {
  color: #fff;
}
.ds_rits .bg-gray-100,
.ds_rits_editable .bg-gray-100 {
  background-color: #f6f8fa;
}
.ds_rits .bg-gray-200,
.ds_rits_editable .bg-gray-200 {
  background-color: #e1e4e8;
}
.ds_rits .bg-gray-300,
.ds_rits_editable .bg-gray-300 {
  background-color: #d1d5da;
}
.ds_rits .bg-gray-400,
.ds_rits_editable .bg-gray-400 {
  background-color: #959da5;
}
.ds_rits .bg-gray-500,
.ds_rits_editable .bg-gray-500 {
  background-color: #6a737d;
}
.ds_rits .bg-gray-600,
.ds_rits_editable .bg-gray-600 {
  background-color: #586069;
}
.ds_rits .bg-gray-700,
.ds_rits_editable .bg-gray-700 {
  background-color: #444d56;
}
.ds_rits .bg-gray-800,
.ds_rits_editable .bg-gray-800 {
  background-color: #2f363d;
}
.ds_rits .shadow,
.ds_rits_editable .shadow {
  box-shadow: 0 1px 5px rgba(35, 27, 27, 0.15);
}
.ds_rits .red-gradient,
.ds_rits_editable .red-gradient {
  padding-left: 1rem;
  padding-top: 2px;
  padding-right: 1rem;
  font-family: "Cinzel", Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  color: #fff !important;
  background-color: #7a1214;
  background: linear-gradient(180deg, #a71e23, #7a1214);
}
.ds_rits .sr-only, .ds_rits .text-check .dsf,
.ds_rits .ds_rits_editable .text-check .dsf,
.ds_rits_editable .text-check .ds_rits .dsf,
.ds_rits_editable .sr-only,
.ds_rits_editable .ds_rits .text-check .dsf,
.ds_rits .text-check .ds_rits_editable .dsf,
.ds_rits_editable .text-check .dsf {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.ds_rits .not-sr-only,
.ds_rits_editable .not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

Javascript

const RITS = (function rits() {
  const icons = {
    circle:
      '<svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7"/></svg>',
    diamond:
      '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 1L15 8L8 15L1 8z"/></svg>',
    square:
      '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 2h12v12h-12z"/></svg>',
    "triangle-up":
      '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 3L14 14L2 14z"/></svg>',
    "triangle-down":
      '<svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 14L14 3L2 3z"/></svg>',
  };
  function inlineSVGs() {
    document.querySelectorAll(".svg-icon,.check-icon").forEach((el) => {
      let classes = el.className.split(" ");
      let icon = null;
      for (let c of classes) {
        if (c.substr(0, 4) == "svg-") {
          icon = c.substr(4);
          break;
        }
        if (c.substr(0, 5) == "check-") {
          icon = c.substr(5);
          break;
        }
      }
      el.innerHTML = icons[icon] ?? icon;
    });
  }

  function doCheck(checkbox, on) {
    if (typeof on == "undefined") {
      on = checkbox.checked;
      if (typeof checkbox.parentLabel != "undefined") {
        checkbox.parentLabel.classList.toggle("is-checked", on);
      }
    } else {
      checkbox.checked = on;
      if (typeof checkbox.parentLabel != "undefined") {
        checkbox.parentLabel.classList.toggle("is-checked", on);
      }
    }
  }
  function bindFancyCheckboxes() {
    document
      .querySelectorAll(
        '.svg-check .dsf.checkbox [type="checkbox"],' +
          '.text-check .dsf.checkbox [type="checkbox"]'
      )
      .forEach(function svgCheckbox(checkbox) {
        checkbox.parentLabel = checkbox.closest(".svg-check,.text-check");
        doCheck(checkbox);
        checkbox.addEventListener("click", () => doCheck(checkbox), false);
      });
  }

  function drawPie({ svg: svgEl, slices, filled, width }) {
    let r = width / 2;
    let p = filled / slices;
    let svg = `<svg width="${width}" height="${width}" viewBox="0 0 ${width} ${width}">
        <circle cx="${r}" cy="${r}" r="${r - 2}" />`;
    let delta = (2 * Math.PI) / slices;
    for (let i = filled; i < slices; i++) {
      let dx = (r - width/8) * Math.sin(delta * i);
      let dy = (width/8 - r) * Math.cos(delta * i);
      svg += `<line x1="${r}" y1="${r}" x2="${r + dx}" y2="${r + dy}" />`;
    }
    if (filled === slices) {
      svg += `<circle class="full" cx="${r}" cy="${r}" r="${r - 6}" />`;
    } else if (filled > 0) {
      console.log(p);
      let rd = r - 6;
      let px = r;
      let py = r - rd;
      let nx = r + rd * Math.sin(delta * filled);
      let ny = r - rd * Math.cos(delta * filled);
      // prettier-ignore
      svg += `<path d="M${px} ${py}A ${rd} ${rd}, 0,${p < 0.5 ? 0 : 1},1, ${nx} ${ny}L${r} ${r}z"/>`;
    }
    svgEl.innerHTML = svg + "</svg>";
  }
  function bindPieCharts() {
    document.querySelectorAll("[data-pie]").forEach((el) => {
      let pie = Object.assign(
        {
          filled: 0,
          width: 32,
          el: document.createElement("span"),
          svg: document.createElement("svg"),
        },
        JSON.parse(el.dataset.pie)
      );
      pie.el.className = "dsf dsf_" + pie.name;
      pie.svg.className = "pie-svg";
      el.appendChild(pie.el);
      el.appendChild(pie.svg);
      drawPie(pie);
      pie.svg.addEventListener(
        "click",
        function bumpPie() {
          pie.filled = (pie.filled + 1) % (pie.slices + 1);
          console.log(pie.filled);
          drawPie(pie);
          pie.el.querySelector("input").value = pie.filled;
        },
        false
      );
    });
  }

  let ranges = {};
  function forgeCheckRanges() {
    document.querySelectorAll(".js-field-range").forEach((fieldEl) => {
      let { field, num, svg } = Object.assign(
        { svg: null },
        JSON.parse(fieldEl.dataset.field)
      );
      let html = "";
      for (let i = 0; i < num; i++) {
        let icon = `<span class="dsf dsf_${field}_r${i} checkbox"></span>`;
        if (svg) {
          icon = `<label class="svg-check"><i class="check-icon svg-${svg}"></i>${icon}</label>`;
        }
        html += icon;
      }
      fieldEl.innerHTML = html;
      ranges[field] = [fieldEl];
    });
  }

  function bindCheckRanges() {
    for (let field in ranges) {
      ranges[field] = [].slice.apply(
        ranges[field][0].querySelectorAll('.dsf [type="checkbox"]')
      );
      console.log(ranges[field]);
      for (let i = 0; i < ranges[field].length; i++) {
        ranges[field][i].addEventListener(
          "input",
          function toggleRange() {
            console.log(ranges[field][i]);
            let on = ranges[field][i].checked;
            if (!on) {
              // if just turned off and in the middle...
              let higherOn = false;
              for (let j = i + 1; j < ranges[field].length; j++) {
                if (ranges[field][j].checked) {
                  higherOn = true;
                  break;
                }
              }
              // ...only turn above off
              if (higherOn) {
                on = true;
                for (let j = i + 1; j < ranges[field].length; j++) {
                  doCheck(ranges[field][j], false);
                }
              }
            }
            for (let j = 0; j < i; j++) {
              doCheck(ranges[field][j], on);
            }
          },
          false
        );
      }
    }
  }

  function bindHoverRanges() {
    for (let field in ranges) {
      for (let i = 0; i < ranges[field].length; i++) {
        ranges[field][i].parentLabel.addEventListener(
          "mouseover",
          () => {
            for (let j = 0; j < i; j++) {
              ranges[field][j].parentLabel.classList.add("is-hover");
            }
          },
          false
        );
        ranges[field][i].parentLabel.addEventListener(
          "mouseout",
          () => {
            for (let j = 0; j < i; j++) {
              ranges[field][j].parentLabel.classList.remove("is-hover");
            }
          },
          false
        );
      }
    }
  }

  let radioMap = {};
  function bindRadio() {
    document.querySelectorAll("[data-radio]").forEach(el => {
      let id = el.dataset.radio;
      if (typeof radioMap[id] == "undefined") {
        radioMap[id] = [];
      }
      radioMap[id].push(el);
      el.addEventListener("click", function toggleRadios() {
        radioMap[id].forEach(radio => {
          if (radio != el) {
            radio.classList.remove("is-checked");
            radio.querySelector('[type="checkbox"]').checked = false;
          }
        });
      }, { passive: false });
    });
  }

  function repeatElements() {
    document.querySelectorAll("[data-repeat]").forEach((el) => {
      let num = parseInt(el.dataset.repeat);
      let template = el.innerHTML;
      let html = "";
      for (let i = 1; i <= num; i++) {
        html += template.replace(/{{i}}/g, i);
      }
      el.innerHTML = html;
    });
    document.querySelectorAll("[data-each]").forEach((el) => {
      let map = JSON.parse(el.dataset.each);
      let template = el.innerHTML;
      let html = "";
      for (let key in map) {
        html += template.replace(/{{key}}/g, key).replace(/{{value}}/g, map[key]);
      }
      el.innerHTML = html;
    });
  }

  function pre() {
    console.log("RITS.pre");
    repeatElements();
    forgeCheckRanges();
    bindPieCharts();
  }

  function post() {
    console.log("RITS.post");
    bindCheckRanges();
    bindFancyCheckboxes();
    bindHoverRanges();
    bindRadio();
    inlineSVGs();
  }
  return { pre, post };
})();

function rits_dataPreLoad() {
  RITS.pre();
}
function rits_dataPostLoad() {
  RITS.post();
}

Back

Runners in the Shadows-2

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account