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

Cortex+ Firefly RPG bare-bones

Author: MrTact

Slug: mrtact_fireflyrpg

System: Cortex System

DST Source Code

HTML Template

<!--
    Barebones Obsidian Portal DST for the Cortex Plus Firefly RPG
    Based on original work by ramblurr https://www.obsidianportal.com/dynamic_sheet_templates/193,
        but using simpler, cleaner layout, more modern CSS, no images, fonts restricted to those that 
        can be directly embedded from Google, and little to no JavaScript.
    Source code can be found embedded in a clone of the OP DST devkit at 
        https://github.com/MrTact/dynamic_sheet_templates. 
    Got changes? Send me a pull request!
-->

    <div class="section fullwidth">
        <h3>Attributes</h3>
        <div class="three_col firefly_attributes">
            <div class="attribute">
                <span class="stat_name">Mental</span>
                <span class="dsf dsf_mental dice_value">8</span>
            </div>
            <div class="attribute">
                <span class="stat_name">Physical</span>
                <span class="dsf dsf_physical dice_value">8</span>
            </div>
            <div class="attribute">
                <span class="stat_name">Social</span>
                <span class="dsf dsf_social dice_value">8</span>
            </div>
        </div>
    </div>

    <div class="section fullwidth">
        <h3>Skills</h3>
        <div class="group firefly_skills three_col">
            <div>
                <span class="stat_name">Craft</span> 
                <span class="dsf dsf_craft dice_value dice_small">4</span>
                <span class="dsf dsf_craft_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Drive</span> 
                <span class="dsf dsf_drive dice_value dice_small">4</span>
                <span class="dsf dsf_drive_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Fight</span>
                <span class="dsf dsf_fight dice_value dice_small">4</span>
                <span class="dsf dsf_fight_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Fix</span> 
                <span class="dsf dsf_fix dice_value dice_small">4</span>
                <span class="dsf dsf_fix_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Fly</span> 
                <span class="dsf dsf_fly dice_value dice_small">4</span>
                <span class="dsf dsf_fly_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Focus</span> 
                <span class="dsf dsf_focus dice_value dice_small">4</span>
                <span class="dsf dsf_focus_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Influence</span> 
                <span class="dsf dsf_influence dice_value dice_small">4</span>
                <span class="dsf dsf_influence_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Know</span> 
                <span class="dsf dsf_know dice_value dice_small">4</span>
                <span class="dsf dsf_know_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Labor</span> 
                <span class="dsf dsf_labor dice_value dice_small">4</span>
                <span class="dsf dsf_labor_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Move</span> 
                <span class="dsf dsf_move dice_value dice_small">4</span>
                <span class="dsf dsf_move_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Notice</span> 
                <span class="dsf dsf_notice dice_value dice_small">4</span>
                <span class="dsf dsf_notice_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Operate</span> 
                <span class="dsf dsf_operate dice_value dice_small">4</span>
                <span class="dsf dsf_operate_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Perform</span> 
                <span class="dsf dsf_perform dice_value dice_small">4</span>
                <span class="dsf dsf_perform_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Shoot</span> 
                <span class="dsf dsf_shoot dice_value dice_small">4</span>
                <span class="dsf dsf_shoot_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Sneak</span> 
                <span class="dsf dsf_sneak dice_value dice_small">4</span>
                <span class="dsf dsf_sneak_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Survive</span> 
                <span class="dsf dsf_survive dice_value dice_small">4</span>
                <span class="dsf dsf_survive_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Throw</span> 
                <span class="dsf dsf_throw dice_value dice_small">4</span>
                <span class="dsf dsf_throw_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Treat</span> 
                <span class="dsf dsf_treat dice_value dice_small">4</span>
                <span class="dsf dsf_treat_speciality skill_specialty"></span>
            </div>

            <div>
                <span class="stat_name">Trick</span> 
                <span class="dsf dsf_trick dice_value dice_small">4</span>
                <span class="dsf dsf_trick_speciality skill_specialty"></span>
            </div>
        </div>
    </div>

    <div class="section firefly_distinctions fullwidth">
        <h3>Distinctions</h3>

        <div class="firefly_distinction firefly_distinct1">
            <div>
                <span class="dsf dsf_distinction1_title distinction_title">Distinction 1 Title</span>
                <span class="dice_value">8</span>
            </div>
            <p class="dsf dsf_distinction1_lore firefly_distinction_lore">Distinction 1 Lore</p>
            <ul>
                <li>
                    <span class="dsf dsf_distinction1_trigger1_enabled checkbox"></span>
                    <span>Gain 1 Plot Point when you roll a D4 instead of a D8.</span>
                </li>
                <li>
                    <span class="dsf dsf_distinction1_trigger2_enabled checkbox"></span>
                    <span class="dsf dsf_distinction1_trigger2_title distinction_trigger_title">Trigger 2 title</span><em>:</em> 
                    <span class="dsf dsf_distinction1_trigger2_desc">Trigger 2 description</span>
                </li>
                <li>
                    <span class="dsf dsf_distinction1_trigger3_enabled checkbox"></span>
                    <span class="dsf dsf_distinction1_trigger3_title distinction_trigger_title">Trigger 3 title</span><em>:</em> 
                    <span class="dsf dsf_distinction1_trigger3_desc">Trigger 2 description</span>
                </li>
            </ul>
            <p class="firefly_distinction_skills">Highlighted Skills: <span class="dsf dsf_distinction1_skills">Skill1, Skill2, Skill3</span></p>
        </div>

        <div class="firefly_distinction firefly_distinct2">
            <div>
                <span class="dsf dsf_distinction2_title distinction_title">Distinction 2 Title</span>
                <span class="dice_value">8</span>
            </div>
            <p class="dsf dsf_distinction2_lore firefly_distinction_lore">Distinction 2 Lore</p>
            <ul>
                <li>
                    <span class="dsf dsf_distinction2_trigger1_enabled checkbox"></span>
                    <span>Gain 1 Plot Point when you roll a D4 instead of a D8.</span>
                </li>
                <li>
                    <span class="dsf dsf_distinction2_trigger2_enabled checkbox"></span>
                    <span class="dsf dsf_distinction2_trigger2_title distinction_trigger_title">Trigger 2 title</span><em>:</em> 
                    <span class="dsf dsf_distinction2_trigger2_desc">Trigger 2 description</span>
                </li>
                <li>
                    <span class="dsf dsf_distinction2_trigger3_enabled checkbox"></span>
                    <span class="dsf dsf_distinction2_trigger3_title distinction_trigger_title">Trigger 3 title</span><em>:</em> 
                    <span class="dsf dsf_distinction2_trigger3_desc">Trigger 2 description</span>
                </li>
            </ul>
            <p class="firefly_distinction_skills">Highlighted Skills: <span class="dsf dsf_distinction2_skills">Skill1, Skill2, Skill3</span></p>
        </div>

        <div class="firefly_distinction firefly_distinct3">
            <div>
                <span class="dsf dsf_distinction3_title distinction_title">Distinction 3 Title</span>
                <span class="dice_value">8</span>
            </div>
            <p class="dsf dsf_distinction3_lore firefly_distinction_lore">Distinction 3 Lore</p>
            <ul>
                <li>
                    <span class="dsf dsf_distinction3_trigger1_enabled checkbox"></span>
                    <span>Gain 1 Plot Point when you roll a D4 instead of a D8.</span>
                </li>
                <li>
                    <span class="dsf dsf_distinction3_trigger2_enabled checkbox"></span>
                    <span class="dsf dsf_distinction3_trigger2_title distinction_trigger_title">Trigger 2 title</span><em>:</em> 
                    <span class="dsf dsf_distinction3_trigger2_desc">Trigger 2 description</span>
                </li>
                <li>
                    <span class="dsf dsf_distinction3_trigger3_enabled checkbox"></span>
                    <span class="dsf dsf_distinction3_trigger3_title distinction_trigger_title">Trigger 3 title</span><em>:</em> 
                    <span class="dsf dsf_distinction3_trigger3_desc">Trigger 2 description</span>
                </li>
            </ul>
            <p class="firefly_distinction_skills">Highlighted Skills: <span class="dsf dsf_distinction3_skills">Skill1, Skill2, Skill3</span></p>
        </div>
    </div>

    <div class="section firefly_sigassets fullwidth">
        <h3>Signature Assets</h3>
        <div>
            <span class="dsf dsf_sigasset1_title sigasset_title">Asset 1 Title</span>
            <span class="dsf dsf_sigasset1 dice_value">6</span>:
            <span class="dsf dsf_sigasset1_desc">Asset 1 description</span>
        </div>

        <div>
            <span class="dsf dsf_sigasset2_title sigasset_title">Asset 2 Title</span>
            <span class="dsf dsf_sigasset2 dice_value">6</span>:
            <span class="dsf dsf_sigasset2_desc">Asset 2 description</span>
        </div>
    </div>

CSS

/*========================================
    CSS for the Firefly RPG barebones DST.
  ========================================*/

/*
    Font imports
*/
@import url(https://fonts.googleapis.com/css?family=Krona+One);
@import url(https://fonts.googleapis.com/css?family=Armata);

/*
    Structural elements
*/

.ds_mrtact_fireflyrpg {
    font-family: 'Armata', sans-serif;
    font-weight: 400;
    margin-right: 8px;
}

.ds_mrtact_fireflyrpg h3 {
    font-family: 'Krona One', sans-serif;
    font-weight: bold;
    color: white !important;
    background-color: darkslategray;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 0px 2px 8px;
    margin-bottom: 0.5em;
}

.ds_mrtact_fireflyrpg .section {
    clear: left;
}

.stat_name {
    width: 5.5em;
}

.three_col {
    display: flex;
    display: -webkit-flex;
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    padding: 0 8px;
}

.three_col > div {
    width: 32.3%;
    border-bottom: 1px solid black;
    padding-top: 1em;
    margin-right: 8px;
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

input[type="checkbox"] {
    margin: 0 !important;
}

/*
    Attributes
*/

.firefly_attributes {
    height: 3em;
    width: 100%;
}

.ds_mrtact_fireflyrpg .attribute {
    padding-top: .5em;
    margin-bottom: 1em;
}

.dice_value {
    font-family: 'Krona One', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    color: navy;
    width: 3em;
    text-align: center;
    padding-right: .3em;
    margin-top: -6px;
}

.dice_value:before {
    content: 'D';
}

/*
    Skills
*/

.firefly_skills {
    height: 21em;
    width: 100%;
}

.firefly_skills > div {
    align-items: baseline;
    -webkit-align-items: baseline;
}

.skill_specialty {
    font-size: 0.6em;
    font-style: italic;
    color: maroon;
}

/*
    Distinctions
*/

.firefly_distinctions > div {
    padding-left: 8px;
}

.distinction_title {
    font-family: 'Krona One', sans-serif;
    font-size: larger;
    font-weight: bold;
    font-style: none;
    font-variant: small-caps;
    margin-bottom: 2px;
    padding-right: 0.5em;
}

.firefly_distinction_lore {
    margin-top: 2px;
    margin-bottom: 0.5em;
    font-style: italic;
}

.distinction_trigger_title {
    font-style: italic;
}

.firefly_distinction ul {
    list-style-type: none;
}

.firefly_distinction li {
    margin-top: 8px;
    margin-left: 20px;
    text-indent: -20px;
}

.firefly_distinction_skills {
    font-variant: small-caps;
}

/*
    Signature Assets
*/

.firefly_sigassets div {
    margin-bottom: 1em;
    margin-left: 40px;
    text-indent: -30px;
}

.sigasset_title {
    font-size: larger;
    font-weight: bold;
    font-style: none;
    margin-bottom: 2px;
    padding-right: 0.5em;
}

Javascript

Back

Cortex+ Firefly RPG bare-bones

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account