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

Legend of the Five Rings 5th Edition

Author: Nagisa

Slug: l5r5e

Type: GameCharacter

System: Legend of the Five Rings

DST Source Code

HTML Template

<div class="l5r5e_container">
  <section class="l5r5e_narrative_page l5r5e_section">
    <div class="l5r5e_narrative_top l5r5e_padding">
      <span class="dsf dsf_name"></span>
      <div class="l5r5e_avatar">
        <span class="dsf dsf_avatar_image"></span>
      </div>
      <div class="l5r5e_basic_info">
        <div class="l5r5e_padding">Player: <span class="dsf dsf_player"></span></div>
        <div class="l5r5e_padding">Campaign: <span class="dsf dsf_campaign"></span></div>
        <div class="l5r5e_padding">Clan: <span class="dsf dsf_clan"></span></div>
        <div class="l5r5e_padding">Family: <span class="dsf dsf_family"></span></div>
        <div class="l5r5e_padding">
          School:
          <span class="dsf dsf_school"></span> Rank <span class="dsf dsf_rank"></span>
        </div>
        <div class="l5r5e_padding">Roles: <span class="dsf dsf_roles"></span></div>
      </div>
      <p class="l5r5e_rings_title">Rings</p>
      <div class="l5r5e_rings">
        <div class="l5r5e_earth"><span class="dsf dsf_earth"></span> Earth</div>
        <div class="l5r5e_void"><span class="dsf dsf_void_ring"></span> Void</div>
        <div class="l5r5e_air"><span class="dsf dsf_air"></span> Air</div>
        <div class="l5r5e_water"><span class="dsf dsf_water"></span> Water</div>
        <div class="l5r5e_fire"><span class="dsf dsf_fire"></span> Fire</div>
      </div>
      <div class="l5r5e_society">
        <span class="l5r5e_section_title">Social Standing</span>
        <div class="l5r5e_society_stats">
          <p class="l5r5e_padding">Honor: <span class="dsf dsf_honor"></span></p>
          <p class="l5r5e_padding">Glory: <span class="dsf dsf_glory"></span></p>
          <p class="l5r5e_padding">Status: <span class="dsf dsf_status"></span></p>
        </div>
        <div class="l5r5e_society_box">
          <div class="l5r5e_ninjo l5r5e_padding">
            Ninjo:
            <span class="dsf dsf_ninjo"></span>
          </div>
          <div class="l5r5e_giri l5r5e_padding">
            Giri:
            <span class="dsf dsf_giri"></span>
          </div>
        </div>
        <div class="l5r5e_titles l5r5e_padding">
          Titles: <span class="dsf dsf_titles"></span>
        </div>
      </div>
    </div>
    <div class="l5r5e_skills">
      <div class="l5r5e_artisan">
        <p class="l5r5e_skill_title">Artisan Skills</p>
        <p>Aesthetics: <span class="dsf dsf_aesthetics"></span></p>
        <p>Composition: <span class="dsf dsf_composition"></span></p>
        <p>Design: <span class="dsf dsf_design"></span></p>
        <p>Smithing: <span class="dsf dsf_smithing"></span></p>
      </div>
      <div class="l5r5e_martial">
        <p class="l5r5e_skill_title">Martial Skills</p>
        <p>Fitness: <span class="dsf dsf_fitness"></span></p>
        <p>Martial Arts Melee: <span class="dsf dsf_melee"></span></p>
        <p>Martial Arts Ranged: <span class="dsf dsf_ranged"></span></p>
        <p>Martial Arts Unarmed: <span class="dsf dsf_unarmed"></span></p>
        <p>Meditation: <span class="dsf dsf_meditation"></span></p>
        <p>Tactics: <span class="dsf dsf_tactics"></span></p>
      </div>
      <div class="l5r5e_scholar">
        <p class="l5r5e_skill_title">Scholar Skills</p>
        <p>Culture: <span class="dsf dsf_culture"></span></p>
        <p>Government: <span class="dsf dsf_government"></span></p>
        <p>Medicine: <span class="dsf dsf_medicine"></span></p>
        <p>Sentiment: <span class="dsf dsf_sentiment"></span></p>
        <p>Theology: <span class="dsf dsf_theology"></span></p>
      </div>
      <div class="l5r5e_social">
        <p class="l5r5e_skill_title">Social Skills</p>
        <p>Command: <span class="dsf dsf_command"></span></p>
        <p>Courtesy: <span class="dsf dsf_courtesy"></span></p>
        <p>Games: <span class="dsf dsf_games"></span></p>
        <p>Performance: <span class="dsf dsf_performance"></span></p>
      </div>
      <div class="l5r5e_trade">
        <p class="l5r5e_skill_title">Trade Skills</p>
        <p>Commerce: <span class="dsf dsf_commerce"></span></p>
        <p>Labor: <span class="dsf dsf_labor"></span></p>
        <p>Seafaring: <span class="dsf dsf_seafaring"></span></p>
        <p>Skulduggery: <span class="dsf dsf_skulduggery"></span></p>
        <p>Survival: <span class="dsf dsf_survival"></span></p>
      </div>
    </div>
    <div class="l5r5e_advantages l5r5e_padding">
      <span class="l5r5e_section_title">Advantages</span>
      <p>Distinctions: <span class="dsf dsf_distinctions"></span></p>
      <p>Passions: <span class="dsf dsf_passions"></span></p>
    </div>
    <div class="l5r5e_disadvantages l5r5e_padding">
      <span class="l5r5e_section_title">Disadvantages</span>
      <p>Adversities: <span class="dsf dsf_adversities"></span></p>
      <p>Anxieties: <span class="dsf dsf_anxieties"></span></p>
    </div>
    <div class="l5r5e_personality l5r5e_padding">
      <span class="l5r5e_section_title">Roleplaying Notes</span>
      <p>Personality: <span class="dsf dsf_personality"></span></p>
      <p>Habits and Quirks: <span class="dsf dsf_habits"></span></p>
      <p>Stress Response: <span class="dsf dsf_stress"></span></p>
    </div>
    <div class="l5r5e_relationships l5r5e_padding">
      <span class="l5r5e_section_title"
        >Relationships with other characters</span
      >
      <p>
        <span class="dsf dsf_others"></span>
      </p>
    </div>
  </section>
  <section class="l5r5e_conflict_page l5r5e_section">
    <div class="l5r5e_stances l5r5e_padding">
      <span class="l5r5e_section_title">Stances</span>
      <div class="l5r5e_earth">
        <span class="dsf dsf_earth readonly"></span> Earth
        <p>
          Opportunity cannot be used to inflict critical strikes and conditions
          on you.
        </p>
      </div>
      <div class="l5r5e_water">
        <span class="dsf dsf_water readonly"></span> Water
        <p>
          You can perform a second action which doesn't share action types with
          the other action or require a check.
        </p>
      </div>
      <div class="l5r5e_air">
        <span class="dsf dsf_air readonly"></span> Air
        <p>
          +1 to TN of attack or scheme actions against you. <br />
          This increases to +2 if you have school rank 4 and above.
        </p>
      </div>
      <div class="l5r5e_fire">
        <span class="dsf dsf_fire readonly"></span> Fire
        <p>If you succeed on a check, gain a bonus success per strife kept.</p>
      </div>
      <div class="l5r5e_void">
        <span class="dsf dsf_void_ring readonly"></span> Void
        <p>You do not receive strife from dice kept on checks.</p>
      </div>
    </div>
    <div class="l5r5e_attributes l5r5e_padding">
      <span class="l5r5e_section_title ">Attributes</span>
      <p class="l5r5e_attribute">
        Endurance
        <span class="dsf dsf_endurance"></span> |
        <span class="dsf dsf_fatigue"></span> Fatigue
      </p>
      <p class="l5r5e_attribute_detail">(E+F) x 2 = Endurance</p>
      <p class="l5r5e_attribute">
        Composure
        <span class="dsf dsf_composure"></span> |
        <span class="dsf dsf_strife"></span> Strife
      </p>
      <p class="l5r5e_attribute_detail">(E+W) x 2 = Composure</p>
      <p class="l5r5e_attribute">Focus <span class="dsf dsf_focus"></span></p>
      <p class="l5r5e_attribute_detail">(A+F) = Focus</p>
      <p class="l5r5e_attribute">
        Vigilance
        <span class="dsf dsf_vigilance"></span>
      </p>
      <p class="l5r5e_attribute_detail">(A+W)/2 = Vigilance</p>
      <p class="l5r5e_attribute">
        Void Points
        <span class="dsf dsf_current_void"></span> |
        <span class="dsf dsf_void"></span> Current
      </p>
      <p class="l5r5e_attribute_detail">Max = Void, Start = Void/2</p>
    </div>
    <div class="l5r5e_conditions l5r5e_padding">
      <p>Conditions: <span class="dsf dsf_conditions"></span></p>
    </div>
    <div class="l5r5e_school_ability l5r5e_padding">
      <p>School Ability: <span class="dsf dsf_school_ability"></span></p>
    </div>
    <div class="l5r5e_weapons l5r5e_padding">
      <p>Weapons: <span class="dsf dsf_weapons"></span></p>
    </div>
    <div class="l5r5e_armor l5r5e_padding">
      <p>Armor: <span class="dsf dsf_armor"></span></p>
    </div>
    <div class="l5r5e_equipment l5r5e_padding">
      <p>Equipment: <span class="dsf dsf_equipment"></span></p>
      <p>Koku: <span class="dsf dsf_koku"></span> Bu: <span class="dsf dsf_bu"></span> Zeni: <span class="dsf dsf_zeni"></span></p>
    </div>
    <div class="l5r5e_technique_types l5r5e_padding">
      <span class="l5r5e_section_title">Available Techniques</span><br>
        <p>
        <span>Kata<span class="dsf dsf_kata checkbox"></span></span><br>
        <span>Kiho<span class="dsf dsf_kiho checkbox"></span></span><br>
        <span>Invocations<span class="dsf dsf_invocations checkbox"></span></span><br>
        <span>Rituals<span class="dsf dsf_rituals checkbox"></span></span><br>
        <span>Shuji<span class="dsf dsf_shuji checkbox"></span></span><br>
        <span>Ninjutsu<span class="dsf dsf_ninjutsu checkbox"></span></span><br>
        <span>Maho<span class="dsf dsf_maho checkbox"></span></span><br>
      </p>
    </div>
    <div class="l5r5e_technique_actions l5r5e_padding">
      <p>
        Techniques with Actions:
        <span class="dsf dsf_technique_actions"></span>
      </p>
    </div>
    <div class="l5r5e_techniques l5r5e_padding">
      <p>Techniques: <span class="dsf dsf_techniques"></span></p>
    </div>
    <div class="l5r5e_experience_container l5r5e_padding">
      <span class="l5r5e_section_title">Experience</span>
      <p>Total: <span class="dsf dsf_experience"></span></p>
      <p>Spent: <span class="dsf dsf_spent"></span></p>
      <p>Saved: <span class="dsf dsf_saved"></span></p>
    </div>
    <div class="l5r5e_bio l5r5e_padding">
      <p>Biography: <span class="dsf dsf_bio"></span></p>
    </div>
  </section>
  <section class="l5r5e_author l5r5e_section">
    <p class="l5r5e_padding">Sheet Template Author: <span class="dsf dsf_dst_author"></span></p>
  </section>
</div>

CSS

.ds_l5r5e p {
  display: block;
  margin-block-start: auto;
  margin-block-end: auto;
}

.ds_l5r5e div.l5r5e_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.l5r5e_padding,
.l5r5e_skills > * > * {
  margin: 15px;
  padding: 10px;
}

.ds_l5r5e .l5r5e_container > .l5r5e_section {
  display: flex;
  flex-direction: column;
  background-image: url("https://www.transparenttextures.com/patterns/purty-wood.png");
  background-color: rgb(25, 20, 28);
  border-radius: 3px;
  font-size: 1em;
  color: rgb(214, 214, 214);
  margin-bottom: 0;
  padding: 10px;
  width: 100dvw;
}

.ds_l5r5e div.l5r5e_container span.dsf {
  display: inline-flex;
  color: rgb(137, 172, 166);
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 1%;
  padding-right: 1%;
}

.ds_l5r5e div.l5r5e_container span.dsf:hover {
  color: rgb(90, 139, 131);
  transition: color 0.2s ease-in;
  cursor: pointer;
}

div.l5r5e_container .avatar_image,
div.l5r5e_container span.dsf_avatar_image {
  display: flex;
  margin: 0;
  padding: 0;
  border-radius: 3px;
}

.ds_l5r5e .avatar_image {
  width: 300px;
}

.l5r5e_container span.dsf_avatar_image:hover {
  cursor: default;
}

.l5r5e_avatar {
  display: flex;
  width: 300px;
  height: 350px;
  align-self: center;
  background-color: rgba(98, 105, 121, 0.2);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(195, 212, 246, 0.5);
  border-radius: 3px;
  margin: 10px;
}

.l5r5e_container a.dst_player_link,
.l5r5e_container a.dst_campaign_link {
  color: rgb(191, 128, 211);
  transition: color 2s ease-in-out;
}

.l5r5e_container a.dst_player_link:hover,
.l5r5e_container a.dst_campaign_link:hover {
  color: rgb(209, 0, 111);
  transition: color 1s ease-in-out;
}

.l5r5e_container .dsf_name {
  justify-content: center;
}

.l5r5e_container a.dst_character_name_link {
  display: inline-block;
  color: rgb(147, 128, 171);
  font-size: 2em;
  transition: color 1s ease-in-out;
}
.l5r5e_container a.dst_character_name_link:hover {
  color: rgb(209, 0, 111);
  transition: color 1s ease-in-out;
}

.l5r5e_rings > div {
  border-radius: 3px;
  border: 2px solid hsla(0, 0%, 0%, 0.674);
  background-color: hsla(0, 0%, 0%, 0.4);
  padding-left: 0.2em;
  padding-right: 0.2em;
}

.l5r5e_narrative_top {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}

.l5r5e_basic_info > div {
  background-color: hsla(0, 0%, 0%, 0.4);
  margin-top: 5px;
  margin-bottom: 10px;
  border: 2px solid hsla(0, 0%, 0%, 0.674);
  border-radius: 3px;
  padding: 10px;
}

.l5r5e_rings {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 15px;
}

.l5r5e_rings > * {
  width: 22%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 10px 15px;
}

.l5r5e_rings_title {
  text-align: center;
}

.l5r5e_rings > .l5r5e_earth {
  order: 1;
}
.l5r5e_rings > .l5r5e_water {
  order: 3;
}
.l5r5e_rings > .l5r5e_air {
  order: 2;
}
.l5r5e_rings > .l5r5e_fire {
  order: 4;
}
.l5r5e_rings > .l5r5e_void {
  order: 5;
}

.l5r5e_earth {
  color: rgb(182, 162, 155);
}

.l5r5e_air {
  color: rgb(166, 230, 235);
}

.l5r5e_water {
  color: rgb(166, 173, 232);
}

.l5r5e_fire {
  color: rgb(230, 189, 160);
}

.l5r5e_void {
  color: rgb(182, 161, 200);
}

.l5r5e_skills {
  display: flex;
  flex-flow: column;
}

.l5r5e_skills > * {
  margin: 15px;
}

.l5r5e_skills > div {
  width: 12em;
}

.l5r5e_skills > div > p:not(:first-child) {
  min-width: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l5r5e_society {
  display: flex;
  flex-flow: column;
}

.l5r5e_society_stats {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-bottom: 50px;
  margin-top: 20px;
}

.l5r5e_society_stats > p {
  border-radius: 3px;
  border: 2px solid hsla(0, 0%, 0%, 0.674);
  background-color: hsla(0, 0%, 0%, 0.4);
  flex-grow: 1;
  margin-right: 15px;
  padding: 5px;
}

.l5r5e_society_box {
  display: flex;
  flex-flow: column nowrap;
}

.l5r5e_titles {
  display: flex;
  justify-content: flex-start;
}

.l5r5e_titles > span.dsf_titles {
  border-radius: 3px;
  border: 2px solid hsla(0, 0%, 0%, 0.674);
  background-color: hsla(0, 0%, 0%, 0.4);
  padding-left: 5px;
  padding-right: 5px;
  flex-grow: 1;
  min-width: 50%;
  min-height: 38px;
  position: relative;
  top: 5px;
}

.l5r5e_ninjo,
.l5r5e_giri {
  min-height: 200px;
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.5em;
}

.l5r5e_ninjo > .dsf_ninjo,
.l5r5e_giri > .dsf_giri {
  flex-grow: 1;
  text-wrap: wrap;
  border-radius: 3px;
  border: 2px solid hsla(0, 0%, 0%, 0.674);
  background-color: hsla(0, 0%, 0%, 0.4);
  margin-right: 0.5em;
}

.l5r5e_skills > div > *:not(:first-child),
.l5r5e_advantages > p,
.l5r5e_disadvantages > p,
.l5r5e_personality > p,
.l5r5e_relationships > p,
.l5r5e_stances > div,
.l5r5e_attribute,
.l5r5e_experience_container > p {
  margin-top: 15px;
  margin-bottom: 5px;
  border-radius: 3px;
  border: 2px solid hsla(0, 0%, 0%, 0.674);
  background-color: hsla(0, 0%, 0%, 0.4);
  padding: 5px;
}

.l5r5e_conditions > p,
.l5r5e_school_ability > p,
.l5r5e_weapons > p,
.l5r5e_armor > p,
.l5r5e_equipment > p,
.l5r5e_technique_types > p,
.l5r5e_technique_actions > p,
.l5r5e_techniques > p,
.l5r5e_bio > p,
.l5r5e_author > p > span {
  border-radius: 3px;
  border: 2px solid hsla(0, 0%, 0%, 0.674);
  background-color: hsla(0, 0%, 0%, 0.4);
  padding: 10px;
}

.l5r5e_stances > div > p {
  font-size: 0.8em;
}

.l5r5e_stances {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}

.l5r5e_stances > div {
  margin: 10px;
}

.l5r5e_artisan,
.l5r5e_martial,
.l5r5e_scholar,
.l5r5e_social,
.l5r5e_trade,
.l5r5e_stances,
.l5r5e_narrative_top,
.l5r5e_advantages,
.l5r5e_disadvantages,
.l5r5e_personality,
.l5r5e_relationships,
.l5r5e_attributes,
.l5r5e_conditions,
.l5r5e_school_ability,
.l5r5e_combat_skills,
.l5r5e_weapons,
.l5r5e_armor,
.l5r5e_equipment,
.l5r5e_technique_types,
.l5r5e_technique_actions,
.l5r5e_techniques,
.l5r5e_bio,
.l5r5e_experience_container {
  background-color: rgba(98, 105, 121, 0.2);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(195, 212, 246, 0.5);
  border-radius: 3px;
}

.l5r5e_skill_title,
.l5r5e_section_title,
.ds_l5r5e .l5r5e_author,
.l5r5e_rings_title {
  color: rgb(189, 173, 248);
}

.l5r5e_technique_types input {
  margin: 3px;
}

.ds_l5r5e .l5r5e_author {
  font-size: 0.8em;
  flex-direction: row;
}

.l5r5e_author a.dst_dst_author_link {
  margin-left: 0.1em;
  color: rgb(181, 213, 249);
  cursor: pointer;
  transition: color 1s ease-in-out;
}
.l5r5e_author a.dst_dst_author_link:hover {
  color: rgb(190, 0, 98);
  text-decoration-line: underline;
  transition: color 1s ease-in-out;
}

.l5r5e_container p.l5r5e_attribute_detail {
  font-size: 0.6em;
  margin-top: 4px;
  margin-bottom: 1em;
}

@media screen and (min-width: 404px) {
  .l5r5e_rings > .l5r5e_earth {
    order: 1;
    margin-right: 22%;
  }
  .l5r5e_rings > .l5r5e_water {
    order: 3;
  }
  .l5r5e_rings > .l5r5e_air {
    order: 2;
    margin-left: 10%;
  }
  .l5r5e_rings > .l5r5e_fire {
    order: 5;
  }
  .l5r5e_rings > .l5r5e_void {
    order: 4;
  }
}

@media screen and (min-width: 769px) {
  .ds_l5r5e .l5r5e_container > .l5r5e_section {
    width: 99%;
  }

  .l5r5e_skills {
    flex-flow: row wrap;
  }
}

@media screen and (min-width: 1080px) {
  .l5r5e_ninjo,
  .l5r5e_giri {
    max-width: 50%;
    margin-right: 5px;
  }

  .l5r5e_giri {
    margin-left: 0;
  }

  .l5r5e_society_box {
    flex-flow: row nowrap;
  }
}

JavaScript

Back

Legend of the Five Rings 5th Edition

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account