Mutant Year Zero - Elysium

DST Source Code

HTML Template <div class="myz-sheet"> <div class="container"> <div class="myzrow"> <div class="col-4"> <table class="name"> <tr><td><strong>Name:</strong><span class="dsf dsf_name"></span></td></tr> <tr><td><strong>Profession:</strong><span class="dsf dsf_profession"></span></td></tr> </table> <table class="attributes"> <tr> <th colspan="2">ATTRIBUTES</th> </tr> <tr> <td>Strength</td> <td><span class="dsf dsf_strength"></span></td> </tr> <tr> <td>Agility</td> <td><span class="dsf dsf_agility"></span></td> </tr> <tr> <td>Wits</td> <td><span class="dsf dsf_wits"></span></td> </tr> <tr> <td>Empathy</td> <td><span class="dsf dsf_empathy"></span></td> </tr> </table> <table class="skills"> <tr> <th colspan="2">SKILLS</th> </tr> <tr> <td>Endure (Strength)</td> <td><span class="dsf dsf_endure"></span></td> </tr> <tr> <td>Force (Strength)</td> <td><span class="dsf dsf_force"></span></td> </tr> <tr> <td>Fight (Strength)</td> <td><span class="dsf dsf_fight"></span></td> </tr> <tr> <td>Sneak (Agility)</td> <td><span class="dsf dsf_sneak"></span></td> </tr> <tr> <td>Move (Agility)</td> <td><span class="dsf dsf_move"></span></td> </tr> <tr> <td>Shoot (Agility)</td> <td><span class="dsf dsf_shoot"></span></td> </tr> <tr> <td>Scout (Wits)</td> <td><span class="dsf dsf_scout"></span></td> </tr> <tr> <td>Comprehend (Wits)</td> <td><span class="dsf dsf_comprehend"></span></td> </tr> <tr> <td>Know the Zone (Wits)</td> <td><span class="dsf dsf_ktz"></span></td> </tr> <tr> <td>Sense Emotion (Empathy)</td> <td><span class="dsf dsf_emotion"></span></td> </tr> <tr> <td>Dominate (Empathy)</td> <td><span class="dsf dsf_manipulate"></span></td> </tr> <tr> <td>Heal (Empathy)</td> <td><span class="dsf dsf_heal"></span></td> </tr> <tr> <td><span class="dsf dsf_special_label"></span></td> <td><span class="dsf dsf_special"></span></td> </tr> </table> <table> <tr><td><strong>Conditions:</strong></td><td class="condit"><span class="dsf dsf_condition"></span></td></tr> <tr><td><strong>Critical Injuries:</strong></td><td class="condit"><span class="dsf dsf_injuries"></span></td></tr> <tr><td><strong>Rot Points</strong></td><td class="condit">permanent:<span class="dsf dsf_rot_permanent"></span><br /> normal:<span class="dsf dsf_rot_normal"></span></td></tr> <tr><td><strong>Experience Points</strong></td><td><span class="dsf dsf_xp"></span></td></tr> <tr><td><strong>Influence Points</strong></td><td><span class="dsf dsf_influence_points"></span></td></tr> <tr><td><strong>Encumberance </strong></td><td class="encumberance"></td></tr> </table> </div> <div class="col-8"> <div class="myzrow"> <div class="col-6"> <table class="name"> <tr><td><strong>House:</strong><span class="dsf dsf_house"></span></td></tr> </table> <table class="appearance"> <tr> <th>APPEARANCE</th> </tr> <tr> <td><strong>Face</strong><span class="dsf dsf_face"></span></td> </tr> <tr> <td><strong>Body</strong><span class="dsf dsf_body"></span></td> </tr> <tr> <td><strong>Clothing</strong><span class="dsf dsf_clothing"></span></td> </tr> </table> <table class="gear"> <tr> <th>GEAR</th> </tr> <tr> <td><span class="num">1</span> <span class="dsf dsf_gear1"></span> </td> </tr> <tr> <td><span class="num">2</span> <span class="dsf dsf_gear2"></span></td> </tr> <tr> <td><span class="num">3</span></span> <span class="dsf dsf_gear3"></span></td> </tr> <tr> <td><span class="num">4</span> <span class="dsf dsf_gear4"></span></td> </tr> <tr> <td><span class="num">5</span> <span class="dsf dsf_gear5"></span></td> </tr> <tr> <td><span class="num">6</span> <span class="dsf dsf_gear6"></span></td> </tr> <tr> <td><span class="num">7</span> <span class="dsf dsf_gear7"></span></td> </tr> <tr> <td><strong>Water</strong>: <span class="dsf dsf_water" style="margin-right:50px"></span> <strong>Grub</strong>: <span class="dsf dsf_grub"></span></td> </tr> <tr> <td><strong>Bullets</strong>: <span class="dsf dsf_bullets" style="margin-right:50px"></span> <strong>Booze</strong>: <span class="dsf dsf_booze"></span> </td> </tr> </table> </div> <div class="col-6"> <table class="role"> <tr><td><strong>Age:</strong><span class="dsf dsf_age"></span></td></tr> <tr><td><strong>Reputation:</strong> <span class="dsf dsf_reputation"></span></td></tr> </table> <table class="talents"> <tr> <th>TALENTS</th> </tr> <tr> <td><span class="dsf dsf_talent1"></span> </td> </tr> <tr> <td><span class="dsf dsf_talent2"></span> </td> </tr> <tr> <td><span class="dsf dsf_talent3"></span> </td> </tr> <tr> <td><span class="dsf dsf_talent4"></span> </td> </tr> <tr> <td><span class="dsf dsf_talent5"></span> </td> </tr> <tr> <td><span class="dsf dsf_talent6"></span> </td> </tr> </table> <table class="talents"> <tr> <th>Contacts</th> </tr> <tr> <td><span class="dsf dsf_contact1"></span> </td> </tr> <tr> <td><span class="dsf dsf_contact2"></span></td> </tr> <tr> <td><span class="dsf dsf_contact3"></span> </td> </tr> <tr> <td><span class="dsf dsf_contact4"></span> </td> </tr> </table> <table class="name"> <tr><td><strong>Armor:</strong> <span class="dsf dsf_armor"></span></td></tr> </table> </div> <div class="col-12"> <table> <tr> <th>WEAPONS</th> <th>Bonus</th> <th>Damage</th> <th>Range</th> <th>Special</th> </tr> <tr> <td><span class="dsf dsf_weapon1"></span></td> <td><span class="dsf dsf_bonus1"></span></td> <td><span class="dsf dsf_damage1"></span></td> <td><span class="dsf dsf_range1"></span></td> <td><span class="dsf dsf_special1"></span></td> </tr> <tr> <td><span class="dsf dsf_weapon2"></span></td> <td><span class="dsf dsf_bonus2"></span></td> <td><span class="dsf dsf_damage2"></span></td> <td><span class="dsf dsf_range2"></span></td> <td><span class="dsf dsf_special2"></span></td> </tr> <tr> <td><span class="dsf dsf_weapon3"></span></td> <td><span class="dsf dsf_bonus3"></span></td> <td><span class="dsf dsf_damage3"></span></td> <td><span class="dsf dsf_range3"></span></td> <td><span class="dsf dsf_special3"></span></td> </tr> </table> <table class="relationships"> <tr> <th>RELATIONSHIPS</th> </tr> <tr> <td><strong>PC1:</strong> <span class="dsf dsf_pc1"></span> </td> </tr> <tr> <td><strong>PC2:</strong> <span class="dsf dsf_pc2"></span> </td> </tr> <tr> <td><strong>PC3:</strong> <span class="dsf dsf_pc3"></span> </td> </tr> <tr> <td><strong>PC4:</strong> <span class="dsf dsf_pc4"></span> </td> </tr> <tr> <td><strong>PC5:</strong> <span class="dsf dsf_pc5"></span> </td> </tr> <tr> <td><strong>I hate:</strong> <span class="dsf dsf_npc1"></span> </td> </tr> <tr> <td><strong>I need to protect:</strong> <span class="dsf dsf_npc2"></span> </td> </tr> <tr> <td><strong>My big dream:</strong> <span class="dsf dsf_npc3"></span></td> </tr> </table> </div> </div> </div> </div> </div> </div> <div><span class="dsf dsf_bio"></span><span class="dsf dsf_avatar_image"></span></div> <div class="extrainfo"> <span class="dsf dsf_player"> <span class="dsf dsf_campaign"> <span class="dsf dsf_dst_author"> </div>

CSS .myz-sheet table {border: 2px solid black; width: 100%; margin-bottom: 15px;} .myz-sheet .attributes td:last-child, .myz-sheet .skills td:last-child {width:20%} .myz-sheet td, .myz-sheet th {padding: 7px; height: 30px; } .myz-sheet td {border-bottom: 1px dotted #AAA} .myz-sheet th {border-bottom: 1px solid black} .myz-sheet .condit {font-size: 10px} .myz-sheet .num, .myz-sheet .relationships strong {font-size:10px; margin-bottom: 5px; height: 20px; vertical-align: top;} .myz-sheet .extrainfo {font-size:10px; text-align:center} .dsf_avatar_image {display:block; float:right; max-width:25%;} .editable .dynamic_sheet_html_template .dsf {background-color:#FFFF66;} .myz-sheet .container { width: 100%; max-width: 1140px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .myz-sheet .myzrow { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .myz-sheet .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .myz-sheet .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .myz-sheet .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .myz-sheet { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; } .myz-sheet *, .myz-sheet ::after, .myz-sheet ::before { box-sizing: border-box; } @media only screen and (max-width: 600px) { .myz-sheet .col-8, .myz-sheet .col-4, .myz-sheet .col-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } }

JavaScript

Submit Notes Applied media query css for mobile phones

Back