From 07198e52257482e0b88c99bf6890fe8c4c2f9b62 Mon Sep 17 00:00:00 2001
From: Andreas Johansson <andreas.johansson@aalto.fi>
Date: Mon, 17 May 2021 03:21:36 +0300
Subject: [PATCH] GODSEND Agenda, sheet frame, rolls broken

---
 GODSEND-Agenda/Readme.md                   |   4 +
 GODSEND-Agenda/sheet.css                   | 519 +++++++++++++++++++
 GODSEND-Agenda/sheet.html                  | 289 +++++++++++
 GODSEND-Agenda/sheet.json                  |  40 ++
 GODSEND-Agenda/sheet.pug                   |  13 +
 GODSEND-Agenda/sheet.scss                  |   3 +
 GODSEND-Agenda/src/js/sheetworker.js       |  55 ++
 GODSEND-Agenda/src/pug/core.html           | 196 ++++++++
 GODSEND-Agenda/src/pug/data.pug            |  11 +
 GODSEND-Agenda/src/pug/rolltemplate.html   |  23 +
 GODSEND-Agenda/src/scss/_core.scss         | 552 +++++++++++++++++++++
 GODSEND-Agenda/src/scss/_rolltemplate.scss | 103 ++++
 12 files changed, 1808 insertions(+)
 create mode 100644 GODSEND-Agenda/Readme.md
 create mode 100644 GODSEND-Agenda/sheet.css
 create mode 100644 GODSEND-Agenda/sheet.html
 create mode 100644 GODSEND-Agenda/sheet.json
 create mode 100644 GODSEND-Agenda/sheet.pug
 create mode 100644 GODSEND-Agenda/sheet.scss
 create mode 100644 GODSEND-Agenda/src/js/sheetworker.js
 create mode 100644 GODSEND-Agenda/src/pug/core.html
 create mode 100644 GODSEND-Agenda/src/pug/data.pug
 create mode 100644 GODSEND-Agenda/src/pug/rolltemplate.html
 create mode 100644 GODSEND-Agenda/src/scss/_core.scss
 create mode 100644 GODSEND-Agenda/src/scss/_rolltemplate.scss

diff --git a/GODSEND-Agenda/Readme.md b/GODSEND-Agenda/Readme.md
new file mode 100644
index 0000000000..344cb8935f
--- /dev/null
+++ b/GODSEND-Agenda/Readme.md
@@ -0,0 +1,4 @@
+# About
+Character sheet for GODSEND Agenda, on behalf of the publisher Khepera Publishing.
+
+Created with PUGjs and SASS by [Andreas J.](https:wiki.roll20.net/Anduh).
diff --git a/GODSEND-Agenda/sheet.css b/GODSEND-Agenda/sheet.css
new file mode 100644
index 0000000000..90de22493e
--- /dev/null
+++ b/GODSEND-Agenda/sheet.css
@@ -0,0 +1,519 @@
+@import url("https://fonts.googleapis.com/css?family=Zilla+Slab|Anton|Noto+Sans+TC|Bebas+Neue&display=swap");
+.charsheet {
+  /* ---------- Colors ---------- */
+  /* --------- Text ------------- */
+  /* --------- Inputs ------------- */
+  /* -----Hides up/down buttons on numberfields that don't need them ---*/
+  /* highlights empty fields with Light grayish red */
+  /* higlight selected input */
+  /* ------- Buttons ---------- */
+  /* text buttons with dice icon removed */
+  /*------------------------------------*\
+    #SECTIONS
+  \*------------------------------------*/
+  /* --------------- Universal Section ------------------- */
+  /* Section specific */
+  /* Core layout of each page */
+  /* -------------------------- Pages Specific Layout--------------------- */
+  /* -------------------------- Page 2/Notes --------------------- */
+  /* -------------------------- Page 3/Settings ------------------ */
+  /* -------------------------- Page 4/NPC ------------------ */
+  /*------------------------------------*\
+    #PAGE LAYOUT/ PAGE BUTTONS
+  \*------------------------------------*/
+  /* -------------- page buttons ------------- */
+  /*
+    main.npc,
+    button[type="action"].npc,
+    button[type="action"].pc,
+    input.tabstoggle[value="npc"] ~ main.npc,
+    */
+  /* show the selected page */
+  /* shows/hides page buttons */
+  /*
+  input.npctoggle[value="0"] ~ button[type="action"].pc,
+  input.npctoggle[value="1"] ~ button[type="action"].npc{
+      display: flex;
+  } */
+}
+.charsheet * {
+  font-family: "Noto Sans TC";
+  --mythic-dark-red: #4a0004;
+  --mythic-light-red: #ac3f2b;
+  --mythic-red: #a83521;
+  overflow: clip;
+}
+.charsheet .version {
+  color: black;
+  font-weight: bold;
+  float: right;
+  margin: -16px 20px;
+}
+.charsheet .capital,
+.charsheet :not(textarea) {
+  font-family: "Bebas Neue";
+}
+.charsheet label,
+.charsheet .label,
+.charsheet span {
+  color: var(--mythic-dark-red);
+}
+.charsheet h1, .charsheet h2, .charsheet h3 {
+  text-align: center;
+}
+.charsheet span.bold {
+  font-weight: 800;
+  font-size: medium;
+}
+.charsheet div.border-label label {
+  border-style: solid;
+  max-width: 80%;
+  border-radius: 13px;
+}
+.charsheet .small-font {
+  font-size: xx-small;
+  height: 18px;
+}
+.charsheet input[type=text],
+.charsheet input[type=number] {
+  background-color: transparent;
+  border-style: none none solid none;
+  border-color: var(--mythic-light-red);
+  border-radius: 0px;
+}
+.charsheet input[type=number] {
+  border: 1px solid var(--mythic-light-red);
+  text-align: center;
+}
+.charsheet input[type=number].bubble {
+  border: 2px solid var(--mythic-light-red);
+  border-radius: 13px;
+}
+.charsheet input[type=checkbox].checkbox {
+  border: solid var(--mythic-light-red);
+  border-radius: 0px;
+}
+.charsheet input[type=number].ref {
+  border-style: none none solid none;
+  border-color: black;
+  border-radius: 0px;
+}
+.charsheet input[type=number].ref::-webkit-inner-spin-button,
+.charsheet input[type=number].ref::-webkit-outer-spin-button,
+.charsheet input[type=number].txtfield::-webkit-inner-spin-button,
+.charsheet input[type=number].txtfield::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.charsheet input[type=number].ref,
+.charsheet input[type=number].txtfield {
+  -moz-appearance: textfield;
+}
+.charsheet textarea {
+  width: 90%;
+  height: 85%;
+  background-color: transparent;
+}
+.charsheet textarea:placeholder-shown,
+.charsheet input[type=text]:placeholder-shown,
+.charsheet input[type=number]:placeholder-shown {
+  background-color: #EAC9D1;
+}
+.charsheet textarea:focus,
+.charsheet input[type=text]:focus,
+.charsheet input[type=number]:focus {
+  background-color: #ccc;
+}
+.charsheet button[type=roll].txt-btn:before,
+.charsheet button[type=roll].skills:before {
+  content: " ";
+}
+.charsheet button[type=roll].d6-dice::before {
+  /*new die changes die roller to d6*/
+  font-family: "dicefontd6", arial;
+  content: "F ";
+  color: white;
+}
+.charsheet button[type=roll].sendtext::before {
+  /*new die changes die roller to d6*/
+  font-family: "Pictos";
+  content: "w ";
+  color: black;
+}
+.charsheet button[type=roll].txt-btn {
+  height: 22px;
+  border: 2px solid black;
+  background-color: transparent;
+  margin-left: 5px;
+  font-weight: bold;
+  padding: 2px 5px 4px 5px;
+  text-shadow: none;
+}
+.charsheet button[type=roll].txt-btn:hover {
+  background-color: #d9d9d9;
+  border-radius: 10px;
+  text-shadow: none;
+}
+.charsheet button[type=roll].red {
+  background-color: #a83521;
+  background-position: 0 -30px;
+  color: white;
+}
+.charsheet button[type=roll].red:hover {
+  background-color: #a83521;
+  background-position: 0 -30px;
+  color: white;
+  font-size: 1.7em;
+}
+.charsheet .border {
+  border-style: solid;
+  border-radius: 13px;
+}
+.charsheet :is(div.section section) hr {
+  display: block;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+  border-style: solid;
+  border-width: 2px;
+  border-color: black;
+}
+.charsheet .section,
+.charsheet section {
+  display: flex;
+  padding: 5px;
+  border: none;
+  background: white;
+  opacity: 0.9;
+  min-height: 90%;
+  max-width: 800px;
+}
+.charsheet .flex-row {
+  display: flex;
+  flex-flow: row wrap;
+}
+.charsheet .flex-col {
+  display: flex;
+  flex-flow: column;
+}
+.charsheet .flex-center {
+  place-items: center;
+}
+.charsheet .gap {
+  gap: 10px;
+}
+.charsheet .columnflex {
+  display: flex;
+  flex-direction: column;
+}
+.charsheet .rowflex {
+  display: flex;
+  flex-direction: row;
+}
+.charsheet .wrap {
+  flex-wrap: wrap;
+}
+.charsheet .nowrap {
+  flex-wrap: nowrap;
+}
+.charsheet .center {
+  align-items: center;
+}
+.charsheet .middle {
+  justify-content: center;
+}
+.charsheet .spaced {
+  justify-content: space-evenly;
+}
+.charsheet label.title {
+  text-transform: capitalize;
+  max-width: 150px;
+  text-align: center;
+  font-size: 25px;
+}
+.charsheet div.halfsection {
+  max-width: 400px;
+}
+.charsheet section.common {
+  grid-area: common;
+}
+.charsheet section.points {
+  grid-area: points;
+}
+.charsheet section.disadv {
+  grid-area: disadv;
+}
+.charsheet section.skills {
+  grid-area: skills;
+}
+.charsheet section.notes {
+  grid-area: notes;
+}
+.charsheet section.notes input {
+  background-color: #ccc;
+}
+.charsheet main.character {
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: 3fr 1fr;
+  grid-template-rows: 70px 40px 100px auto;
+  grid-template-areas: "common   common" "points  points" "attrs   attrs" "skills  notes";
+  width: 800px;
+  height: 1300px;
+  position: relative;
+}
+.charsheet main.notes {
+  display: grid;
+  width: 750px;
+  position: relative;
+}
+.charsheet main.settings {
+  display: grid;
+  width: 750px;
+  position: relative;
+}
+.charsheet main.npc textarea {
+  height: 140px;
+}
+.charsheet main.settings input[type=number] {
+  height: 24px;
+}
+.charsheet main.settings span.dice {
+  margin-top: 5px;
+}
+.charsheet main.npc * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.charsheet main.npc h3 {
+  text-align: center;
+}
+.charsheet main.npc .mookgrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(4, 1fr) 3fr;
+  place-items: center;
+}
+.charsheet main.npc .mookgrid .orange {
+  background-color: orange;
+  font-size: 1.3em;
+  place-self: stretch;
+}
+.charsheet main.npc .mookgrid .name {
+  grid-column: span 5;
+}
+.charsheet main.npc .mookgrid .name label {
+  width: 40px;
+}
+.charsheet main.npc .mookgrid .name input {
+  font-size: 1.7em;
+  text-align: center;
+  margin-bottom: 5px;
+}
+.charsheet main.npc .mookgrid .al {
+  grid-column: span 2;
+}
+.charsheet main.npc .mookgrid .notes {
+  grid-column: span 5;
+  background-color: LemonChiffon;
+}
+.charsheet main.character,
+.charsheet main.notes,
+.charsheet main.settings {
+  display: none;
+}
+.charsheet input.tabstoggle[value=character] ~ main.character,
+.charsheet input.tabstoggle[value=notes] ~ main.notes,
+.charsheet input.tabstoggle[value=settings] ~ main.settings {
+  display: grid;
+}
+.charsheet div.tab-buttons {
+  display: flex;
+  gap: 10px;
+}
+.charsheet div.tab-buttons button {
+  font-size: 1.5em;
+}
+
+/* mobile styling */
+@media only screen and (max-width: 480px) {
+  .charsheet button[type=roll].d6-dice::before {
+    /*new die changes die roller to d6*/
+    content: "";
+  }
+  .charsheet main.character {
+    display: grid;
+    grid-gap: 4px;
+    grid-template-columns: 13fr 9fr;
+    grid-template-rows: 1fr minmax(0.3fr, 2.5fr) 1.5fr 8fr 3fr 2fr 2fr 2fr 2fr 1fr;
+    grid-template-areas: "common     common    " "archetype  archetype " "attributes attributes" "skills     skills    " "powers     powers    " "weapons    weapons   " "armor      armor    " "stress     stress    " "equipment  equipment " "rules      rules     ";
+    width: 480px;
+    height: 1800px;
+    position: relative;
+  }
+  .charsheet div.archetype {
+    width: 400px;
+  }
+  .charsheet div.archetype details div {
+    flex-direction: column;
+  }
+  .charsheet div.archetype textarea.featuredesc {
+    width: 90%;
+  }
+  .charsheet div.attributes {
+    flex-wrap: wrap;
+  }
+  .charsheet div.attributes label.title {
+    text-align: center;
+    min-width: 450px;
+    width: 450px;
+  }
+  .charsheet div.attributes div.rowflex.nowrap.middle {
+    flex-wrap: wrap;
+    width: 350px;
+  }
+  .charsheet div.skills div.rowflex {
+    flex-direction: column;
+  }
+  .charsheet div.skills div.skillgrid {
+    display: grid;
+    padding: 5px;
+    grid-template-rows: repeat(21, 1fr);
+    grid-template-columns: 3fr 2fr;
+    width: 400px;
+    height: 800px;
+  }
+  .charsheet div.skills button[type=roll].red {
+    width: 170px;
+  }
+  .charsheet button[type=roll].skills {
+    font-size: 14px;
+    padding: 0px;
+    margin: 0px;
+    width: 145px;
+    height: 25px;
+    border: 2px solid white;
+    color: var(--mythic-light-red);
+    text-shadow: none;
+  }
+  .charsheet button[type=roll].skills:hover {
+    font-size: 14px;
+    padding: 0px;
+    margin: 0px;
+    width: 145px;
+    height: 25px;
+    border: 2px solid black;
+    border-radius: 9px;
+    color: var(--mythic-light-red);
+    text-shadow: none;
+  }
+  .charsheet button[type=roll].skills:hover::after {
+    content: "";
+  }
+  .charsheet div.skills button[type=roll].special {
+    width: 25px;
+    color: var(--mythic-light-red);
+  }
+  .charsheet div.skills button[type=roll].special:hover {
+    width: 25px;
+    color: var(--mythic-light-red);
+  }
+  .charsheet div.skills button[type=roll].special::after {
+    content: "d6";
+  }
+}
+/*------------------------------------*\
+  #ROLL TEMPLATES
+\*------------------------------------*/
+/* Smaller margins - remove these if you want the huge default left margin */
+.withoutavatars .sheet-rolltemplate-rolls {
+  margin-left: -7px;
+}
+
+.sheet-rolltemplate-rolls {
+  margin-left: -37px;
+  font-family: "Yanone Kaffeesatz";
+  /* Header formatting - title and subtitle */
+  /* alt template colors */
+  /* Allprops part */
+  /* Make even-numbered rows grey */
+  /* Description field */
+}
+.sheet-rolltemplate-rolls .sheet-container {
+  border: 3px solid black;
+  border-radius: 3px;
+}
+.sheet-rolltemplate-rolls .sheet-header {
+  background-color: var(--header-bg-color, #a83521);
+  color: var(--header-text-color, #FFF);
+  text-align: left;
+  text-transform: capitalize;
+  padding: 5px;
+  border-bottom: 2px solid black;
+}
+.sheet-rolltemplate-rolls .sheet-title {
+  font-size: 1.4em;
+  font-weight: bold;
+}
+.sheet-rolltemplate-rolls .sheet-subtitle {
+  font-size: 1em;
+}
+.sheet-rolltemplate-rolls .sheet-container {
+  --header-bg-color: #a83521;
+  --header-text-color: #FFF;
+}
+.sheet-rolltemplate-rolls .sheet-container.sheet-color-green {
+  --header-bg-color: #008000;
+}
+.sheet-rolltemplate-rolls .sheet-container.sheet-color-blue {
+  --header-bg-color: #0000e0;
+}
+.sheet-rolltemplate-rolls .sheet-container.sheet-color-gold {
+  --header-bg-color: #ffdd1f;
+  --header-text-color: #000;
+}
+.sheet-rolltemplate-rolls .sheet-container.sheet-color-purple {
+  --header-bg-color: #c200c2;
+}
+.sheet-rolltemplate-rolls .sheet-container.sheet-color-black {
+  --header-bg-color: #000;
+}
+.sheet-rolltemplate-rolls .sheet-container.sheet-color-white {
+  --header-bg-color: #FFF;
+  --header-text-color: #000;
+}
+.sheet-rolltemplate-rolls .sheet-content {
+  display: grid;
+  background: #FFF;
+  grid-template-columns: auto auto;
+  line-height: 1.4em;
+}
+.sheet-rolltemplate-rolls .sheet-content > div {
+  padding: 5px;
+}
+.sheet-rolltemplate-rolls .sheet-content .sheet-key {
+  font-weight: bold;
+  padding-right: 10px;
+  text-align: right;
+}
+.sheet-rolltemplate-rolls .sheet-content :nth-child(4n+3),
+.sheet-rolltemplate-rolls .sheet-content :nth-child(4n) {
+  background: #EEE;
+}
+.sheet-rolltemplate-rolls .sheet-desc, .sheet-rolltemplate-rolls .sheet-crit, .sheet-rolltemplate-rolls .sheet-fail {
+  grid-column: span 2;
+  padding: 5px;
+  text-align: center;
+}
+.sheet-rolltemplate-rolls .sheet-crit, .sheet-rolltemplate-rolls .sheet-fail {
+  font-weight: bold;
+  font-size: 1.3em;
+}
+.sheet-rolltemplate-rolls .sheet-crit {
+  color: green;
+}
+.sheet-rolltemplate-rolls .sheet-fail {
+  color: red;
+}
diff --git a/GODSEND-Agenda/sheet.html b/GODSEND-Agenda/sheet.html
new file mode 100644
index 0000000000..27bc8d4941
--- /dev/null
+++ b/GODSEND-Agenda/sheet.html
@@ -0,0 +1,289 @@
+
+<!-- main sheet code-->
+<div class="tab-buttons middle center">
+  <!-- <input type="hidden" class="npctoggle" name="attr_npc"  value="0"> -->
+  <button type="action" name="act_character" >Character</button>
+  <!-- <button class="npc" type="action" name="act_npc" >NPC</button> -->
+  <button type="action" name="act_notes" >Notes</button>
+  <button type="action" name="act_settings" >Settings</button>
+</div>
+
+<span class="version">Sheet Version: <span name="attr_version"></span> </span>
+
+<input type="hidden" class="tabstoggle" name="attr_sheetTab"  value="character">
+
+<main class="character">
+
+    <section class="common">
+      <div class="columnflex nowrap">
+        <label>Name</label>
+        <input name="attr_character_name" title="@{character_name}" type="text">
+      </div>
+      <div class="columnflex nowrap">
+        <label>Species</label>
+        <input name="attr_species" title="@{species}" type="text">
+      </div>
+      <div class="columnflex nowrap">
+        <label>Archetype</label>
+        <input name="attr_archetype" title="@{archetype}" type="text">
+      </div>
+      <div class="columnflex nowrap">
+        <label>Renown</label>
+        <input name="attr_renown" title="@{renown}" type="text">
+      </div>
+    </section>
+
+    <section class="points rowflex nowrap spaced">
+      <div class="rowflex nowrap">
+        <span>Body Points</span><input name="attr_body_points" type="number" value="" class="txtfield">/<input name="attr_body_points_max" type="number" value="" class="txtfield">
+      </div>
+      <div class="rowflex nowrap">
+        <span>Mind Points</span><input name="attr_mind_points" type="number" value="" class="txtfield">/<input name="attr_mind_points_max" type="number" value="" class="txtfield">
+      </div>
+      <div class="rowflex nowrap">
+        <span>Hero Points</span><input name="attr_hero_points" title="@{hero_points}" type="number" value="" class="txtfield">/<input name="attr_hero_points_max" title="@{hero_points_max}" type="number" value="" class="txtfield">
+      </div>
+      <div class="rowflex nowrap">
+        <span>Wealth Rating</span><input name="attr_wealth" title="@{wealth}" type="text" value="" class="txtfield">
+      </div>
+    </section>
+
+    <section class="attrs columnflex nowrap">
+      <h2>Attributes</h2>
+      <div class="rowflex nowrap">
+         <div>  
+          <span>con</span>
+          <input name="attr_con" type="number" value="">
+          <button name="roll_con" value="" type="roll">con</button>
+        </div>
+
+        <div>  
+          <span>dex</span>
+          <input name="attr_dex" type="number" value="">
+          <button name="roll_dex" value="" type="roll">dex</button>
+        </div> 
+
+        <div>  
+          <span>spd</span>
+          <input name="attr_spd" type="number" value="">
+          <button name="roll_spd" value="" type="roll">spd</button>
+        </div> 
+
+        <div>  
+          <span>str</span>
+          <input name="attr_str" type="number" value="">
+          <button name="roll_str" value="" type="roll">str</button>
+        </div> 
+
+        <div>  
+          <span>cr</span>
+          <input name="attr_cr" type="number" value="">
+          <button name="roll_cr" value="" type="roll">cr</button>
+        </div> 
+      </div>
+
+      <div class="rowflex nowrap">
+         <div>  
+          <span>cha</span>
+          <input name="attr_cha" type="number" value="">
+          <button name="roll_cha" value="" type="roll">sha</button>
+        </div>
+
+        <div>  
+          <span>int</span>
+          <input name="attr_int" type="number" value="">
+          <button name="roll_int" value="" type="roll">int</button>
+        </div> 
+
+        <div>  
+          <span>per</span>
+          <input name="attr_per" type="number" value="">
+          <button name="roll_per" value="" type="roll">per</button>
+        </div> 
+
+        <div>  
+          <span>wil</span>
+          <input name="attr_wil" type="number" value="">
+          <button name="roll_wil" value="" type="roll">wil</button>
+        </div> 
+
+        <div>  
+          <span>mr</span>
+          <input name="attr_mr" type="number" value="">
+          <button name="roll_mr" value="" type="roll">mr</button>
+        </div> 
+      <div>
+
+    </section>
+<!--
+    <section class="disadv">
+
+    </section>
+-->
+    <section class="skills columnflex nowrap">
+      <h2>Skills</h2>
+      <fieldset class="repeating_skills">
+        <input name="attr_name" title="@{name}" type="text">
+        <input name="attr_rank" title="@{rank}" type="number">
+        <input name="attr_attribute" title="@{attribute}" type="number">
+        <button name="roll_roll" value="&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{rank}+@{attribute}[attribute]@{modquery}]]}}" type="roll" ></button>
+      </fieldset>
+    </section>
+
+
+    <section class="notes columnflex nowrap">
+      <h2>Disadvantages</h2>
+      <div>
+        <span>personal <input name="attr_personal" title="@{personal}" type="text"><input name="attr_personaldice" title="@{personaldice}" type="number" value=""></span>
+      </div>
+      <div>
+        <span>internal <input name="attr_internal" title="@{internal}" type="text"><input name="attr_internaldice" title="@{internaldice}" type="number" value=""></span>
+      </div>
+      <div>
+        <span>external <input name="attr_external" title="@{external}" type="text"><input name="attr_externaldice" title="@{externaldice}" type="number" value=""></span>
+      </div>
+      <h2>Notes</h2>
+      <textarea name="attr_notes"></textarea>
+    </section>
+
+</main>
+<!-- 
+<main class="npc gap">
+    <h1>NPC</h1>
+</main>
+-->
+
+<main class="notes">
+    <h1>Notes</h1>
+
+    <section>
+      <h3>powers</h3>
+      <textarea name="attr_powers"></textarea>
+    </section>
+
+    <section>
+      <h3>weapons</h3>
+      <textarea name="attr_weapons"></textarea>
+    </section>
+
+    <section>
+      <h3>equipment</h3>
+      <textarea name="attr_equipment"></textarea>
+    </section>
+
+</main>
+
+<main class="settings">
+    <h1>Settings</h1>
+
+    <div class="section columnflex nowrap">
+      <span title="@{show_name}">Ask for Roll Modifiers?</span>
+      <select name="attr_modquery" title="@{modquery}" title="@{modquery}">
+        <option value="+?{Roll Modifier|0}">Yes</option>
+        <option value=" ">No</option>
+      </select>
+    </div>
+
+    <div class="section rowflex nowrap gap">
+      <span title="@{whisper}">Whisper rolls to GM?</span>
+      <input name="attr_whisper" title="@{whisper}" type="checkbox" value="/w gm">
+    </div>
+
+    <div class="section rowflex nowrap gap">
+      <span>Dice type</span>
+      <input name="attr_dice" title="@{dice}" type="text" value="1d20">
+    </div>
+</main>
+
+
+<!--hidden inputs & datalists-->
+<!--sheet version-->
+<input type="hidden" name="attr_version" value="1.0.0"/>
+<input type="hidden" name="attr_" value="0"/>
+<datalist id="list">
+  <option value="human"></option>
+  <option value="elf"></option>
+  <option value="dwarf"></option>
+  <option value="halfling"></option>
+</datalist>
+<!--roll templates-->
+<rolltemplate class="sheet-rolltemplate-rolls">
+  <div class="sheet-container sheet-color-{{color}}">
+    <div class="sheet-header">
+      {{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
+      {{#name}}<div class="sheet-name">{{name}}</div>{{/name}}
+      {{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
+    </div>
+    <div class="sheet-content">
+      {{#allprops() title name subtitle desc color baseroll}}
+      <div class="sheet-key">{{key}}</div>
+      <div class="sheet-value">{{value}}</div>
+      {{/allprops() title subtitle desc color baseroll}}
+      {{#rollTotal() baseroll 2}}
+        <div class="sheet-fail">^{critical-fumble}</div>
+      {{/rollTotal() baseroll 2}}
+      {{#rollTotal() baseroll 12}}
+        <div class="sheet-crit">Critical Success!</div>
+      {{/rollTotal() baseroll 12}}
+      {{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
+    </div>
+  </div>
+</rolltemplate>
+
+<!--sheetworkers-->
+<script type="sheet/worker">
+
+const int = score => parseInt(score, 10) || 0;
+
+const list = ["str", "dex"];
+
+// tabs
+
+const buttonlist = ["notes","settings","character"];
+buttonlist.forEach(button => {
+    on(`clicked:${button}`, function() {
+
+        setAttrs({
+            sheetTab: button
+        });
+    });
+});
+
+/*
+on("sheet:opened", function() {
+
+  getAttrs(["npc", "sheetTab"], values => {
+
+    let npc = int(values["npc"]);
+    let sheetTab = values["sheetTab"];
+    console.log("sheetTab: ", sheetTab);
+    //let page = "character";
+
+    if (sheetTab === "character"){
+      npc = 0;
+      console.log("sheetTab was char, set NPC=0: ", npc);
+    }
+    else if (sheetTab === "npc"){
+      npc = 1;
+      console.log("sheetTab was npc, set NPC=1: ", npc);
+    }
+    else if (sheetTab === "notes"){
+      console.log("sheetTab was note");
+    }
+    else if (sheetTab === "settings"){
+      console.log("sheetTab was settings");
+    }
+    setAttrs({
+        npc: npc
+    });
+  });
+});
+
+on("sheet:opened", function(eventInfo){
+    setAttrs({
+        fumble_i18n: getTranslationByKey("critical-fumble"),
+        success_i18n: getTranslationByKey("critical-success")
+    });     
+});
+ */
+</script>
\ No newline at end of file
diff --git a/GODSEND-Agenda/sheet.json b/GODSEND-Agenda/sheet.json
new file mode 100644
index 0000000000..a30bc00618
--- /dev/null
+++ b/GODSEND-Agenda/sheet.json
@@ -0,0 +1,40 @@
+{
+    "html": "sheet.html",
+    "css": "sheet.css",
+    "authors": "Andreas J.",
+    "roll20userid": "1223200",
+    "preview": "sheet-preview.png",
+    "instructions": "This is the  character sheet for'GODSEND Agenda', by Khepera Publishing.\n\n* [GODSEND-Agenda-3-Beta-Test on DriveThuRPG](https://www.drivethrurpg.com/product/305357/GODSEND-Agenda-3-Beta-Test?affiliate_id=135577)",
+    "legacy": false,
+    "useroptions": [
+        {
+          "attribute": "whisper",
+          "displayname": "Whisper rolls to GM?",
+          "description": "When checked, the rolls made from the sheet are only visible to the player and the GM.",
+          "type": "checkbox",
+          "value": "/w gm"
+        },
+        {
+          "attribute": "modquery",
+          "displayname": "Ask for Roll Modifiers?",
+          "type": "select",
+          "options": [
+            "No| ",
+            "Yes|+?{Extra Dice?|0}d6>3cf0cs0[EXTRA DICE]"
+          ],
+          "default": "  ",
+          "description": "If active, sheet will as for dice modifiers before every roll."
+        },
+        {
+          "attribute": "skillcolor",
+          "displayname": "",
+          "type": "select",
+          "options": [
+            "No| ",
+            "Yes|"
+          ],
+          "default": "  ",
+          "description": ""
+        }
+    ]
+}
diff --git a/GODSEND-Agenda/sheet.pug b/GODSEND-Agenda/sheet.pug
new file mode 100644
index 0000000000..c5bd010396
--- /dev/null
+++ b/GODSEND-Agenda/sheet.pug
@@ -0,0 +1,13 @@
+
+// main sheet code
+include src/pug/core.html
+
+//hidden inputs & datalists
+include src/pug/data.pug
+
+//roll templates
+include src/pug/rolltemplate.html
+
+//sheetworkers
+script(type="sheet/worker")
+    include src/js/sheetworker.js
diff --git a/GODSEND-Agenda/sheet.scss b/GODSEND-Agenda/sheet.scss
new file mode 100644
index 0000000000..a0afc8c6c6
--- /dev/null
+++ b/GODSEND-Agenda/sheet.scss
@@ -0,0 +1,3 @@
+@use 'src/scss/_core.scss';
+
+@use 'src/scss/_rolltemplate.scss';
diff --git a/GODSEND-Agenda/src/js/sheetworker.js b/GODSEND-Agenda/src/js/sheetworker.js
new file mode 100644
index 0000000000..a4b37eb63d
--- /dev/null
+++ b/GODSEND-Agenda/src/js/sheetworker.js
@@ -0,0 +1,55 @@
+
+
+const int = score => parseInt(score, 10) || 0;
+
+const list = ["str", "dex"];
+
+// tabs
+
+const buttonlist = ["notes","settings","character"];
+buttonlist.forEach(button => {
+    on(`clicked:${button}`, function() {
+
+        setAttrs({
+            sheetTab: button
+        });
+    });
+});
+
+/*
+on("sheet:opened", function() {
+
+  getAttrs(["npc", "sheetTab"], values => {
+
+    let npc = int(values["npc"]);
+    let sheetTab = values["sheetTab"];
+    console.log("sheetTab: ", sheetTab);
+    //let page = "character";
+
+    if (sheetTab === "character"){
+      npc = 0;
+      console.log("sheetTab was char, set NPC=0: ", npc);
+    }
+    else if (sheetTab === "npc"){
+      npc = 1;
+      console.log("sheetTab was npc, set NPC=1: ", npc);
+    }
+    else if (sheetTab === "notes"){
+      console.log("sheetTab was note");
+    }
+    else if (sheetTab === "settings"){
+      console.log("sheetTab was settings");
+    }
+    setAttrs({
+        npc: npc
+    });
+  });
+});
+
+on("sheet:opened", function(eventInfo){
+    setAttrs({
+        fumble_i18n: getTranslationByKey("critical-fumble"),
+        success_i18n: getTranslationByKey("critical-success")
+    });     
+});
+ */
\ No newline at end of file
diff --git a/GODSEND-Agenda/src/pug/core.html b/GODSEND-Agenda/src/pug/core.html
new file mode 100644
index 0000000000..2afa3710b9
--- /dev/null
+++ b/GODSEND-Agenda/src/pug/core.html
@@ -0,0 +1,196 @@
+
+<div class="tab-buttons middle center">
+  <!-- <input type="hidden" class="npctoggle" name="attr_npc"  value="0"> -->
+  <button type="action" name="act_character" >Character</button>
+  <!-- <button class="npc" type="action" name="act_npc" >NPC</button> -->
+  <button type="action" name="act_notes" >Notes</button>
+  <button type="action" name="act_settings" >Settings</button>
+</div>
+
+<span class="version">Sheet Version: <span name="attr_version"></span> </span>
+
+<input type="hidden" class="tabstoggle" name="attr_sheetTab"  value="character">
+
+<main class="character">
+
+    <section class="common">
+      <div class="columnflex nowrap">
+        <label>Name</label>
+        <input name="attr_character_name" title="@{character_name}" type="text">
+      </div>
+      <div class="columnflex nowrap">
+        <label>Species</label>
+        <input name="attr_species" title="@{species}" type="text">
+      </div>
+      <div class="columnflex nowrap">
+        <label>Archetype</label>
+        <input name="attr_archetype" title="@{archetype}" type="text">
+      </div>
+      <div class="columnflex nowrap">
+        <label>Renown</label>
+        <input name="attr_renown" title="@{renown}" type="text">
+      </div>
+    </section>
+
+    <section class="points rowflex nowrap spaced">
+      <div class="rowflex nowrap">
+        <span>Body Points</span><input name="attr_body_points" type="number" value="" class="txtfield">/<input name="attr_body_points_max" type="number" value="" class="txtfield">
+      </div>
+      <div class="rowflex nowrap">
+        <span>Mind Points</span><input name="attr_mind_points" type="number" value="" class="txtfield">/<input name="attr_mind_points_max" type="number" value="" class="txtfield">
+      </div>
+      <div class="rowflex nowrap">
+        <span>Hero Points</span><input name="attr_hero_points" title="@{hero_points}" type="number" value="" class="txtfield">/<input name="attr_hero_points_max" title="@{hero_points_max}" type="number" value="" class="txtfield">
+      </div>
+      <div class="rowflex nowrap">
+        <span>Wealth Rating</span><input name="attr_wealth" title="@{wealth}" type="text" value="" class="txtfield">
+      </div>
+    </section>
+
+    <section class="attrs columnflex nowrap">
+      <h2>Attributes</h2>
+      <div class="rowflex nowrap">
+         <div>  
+          <span>con</span>
+          <input name="attr_con" type="number" value="">
+          <button name="roll_con" value="" type="roll">con</button>
+        </div>
+
+        <div>  
+          <span>dex</span>
+          <input name="attr_dex" type="number" value="">
+          <button name="roll_dex" value="" type="roll">dex</button>
+        </div> 
+
+        <div>  
+          <span>spd</span>
+          <input name="attr_spd" type="number" value="">
+          <button name="roll_spd" value="" type="roll">spd</button>
+        </div> 
+
+        <div>  
+          <span>str</span>
+          <input name="attr_str" type="number" value="">
+          <button name="roll_str" value="" type="roll">str</button>
+        </div> 
+
+        <div>  
+          <span>cr</span>
+          <input name="attr_cr" type="number" value="">
+          <button name="roll_cr" value="" type="roll">cr</button>
+        </div> 
+      </div>
+
+      <div class="rowflex nowrap">
+         <div>  
+          <span>cha</span>
+          <input name="attr_cha" type="number" value="">
+          <button name="roll_cha" value="" type="roll">sha</button>
+        </div>
+
+        <div>  
+          <span>int</span>
+          <input name="attr_int" type="number" value="">
+          <button name="roll_int" value="" type="roll">int</button>
+        </div> 
+
+        <div>  
+          <span>per</span>
+          <input name="attr_per" type="number" value="">
+          <button name="roll_per" value="" type="roll">per</button>
+        </div> 
+
+        <div>  
+          <span>wil</span>
+          <input name="attr_wil" type="number" value="">
+          <button name="roll_wil" value="" type="roll">wil</button>
+        </div> 
+
+        <div>  
+          <span>mr</span>
+          <input name="attr_mr" type="number" value="">
+          <button name="roll_mr" value="" type="roll">mr</button>
+        </div> 
+      <div>
+
+    </section>
+<!--
+    <section class="disadv">
+
+    </section>
+-->
+    <section class="skills columnflex nowrap">
+      <h2>Skills</h2>
+      <fieldset class="repeating_skills">
+        <input name="attr_name" title="@{name}" type="text">
+        <input name="attr_rank" title="@{rank}" type="number">
+        <input name="attr_attribute" title="@{attribute}" type="number">
+        <button name="roll_roll" value="&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{rank}+@{attribute}[attribute]@{modquery}]]}}" type="roll" ></button>
+      </fieldset>
+    </section>
+
+
+    <section class="notes columnflex nowrap">
+      <h2>Disadvantages</h2>
+      <div>
+        <span>personal <input name="attr_personal" title="@{personal}" type="text"><input name="attr_personaldice" title="@{personaldice}" type="number" value=""></span>
+      </div>
+      <div>
+        <span>internal <input name="attr_internal" title="@{internal}" type="text"><input name="attr_internaldice" title="@{internaldice}" type="number" value=""></span>
+      </div>
+      <div>
+        <span>external <input name="attr_external" title="@{external}" type="text"><input name="attr_externaldice" title="@{externaldice}" type="number" value=""></span>
+      </div>
+      <h2>Notes</h2>
+      <textarea name="attr_notes"></textarea>
+    </section>
+
+</main>
+<!-- 
+<main class="npc gap">
+    <h1>NPC</h1>
+</main>
+-->
+
+<main class="notes">
+    <h1>Notes</h1>
+
+    <section>
+      <h3>powers</h3>
+      <textarea name="attr_powers"></textarea>
+    </section>
+
+    <section>
+      <h3>weapons</h3>
+      <textarea name="attr_weapons"></textarea>
+    </section>
+
+    <section>
+      <h3>equipment</h3>
+      <textarea name="attr_equipment"></textarea>
+    </section>
+
+</main>
+
+<main class="settings">
+    <h1>Settings</h1>
+
+    <div class="section columnflex nowrap">
+      <span title="@{show_name}">Ask for Roll Modifiers?</span>
+      <select name="attr_modquery" title="@{modquery}" title="@{modquery}">
+        <option value="+?{Roll Modifier|0}">Yes</option>
+        <option value=" ">No</option>
+      </select>
+    </div>
+
+    <div class="section rowflex nowrap gap">
+      <span title="@{whisper}">Whisper rolls to GM?</span>
+      <input name="attr_whisper" title="@{whisper}" type="checkbox" value="/w gm">
+    </div>
+
+    <div class="section rowflex nowrap gap">
+      <span>Dice type</span>
+      <input name="attr_dice" title="@{dice}" type="text" value="1d20">
+    </div>
+</main>
+
diff --git a/GODSEND-Agenda/src/pug/data.pug b/GODSEND-Agenda/src/pug/data.pug
new file mode 100644
index 0000000000..1b2ff671be
--- /dev/null
+++ b/GODSEND-Agenda/src/pug/data.pug
@@ -0,0 +1,11 @@
+
+//sheet version
+input(type="hidden" name="attr_version" value="1.0.0")
+
+
+input(type="hidden" name="attr_" value="0")
+
+
+datalist#list
+  each item in ["human", "elf", "dwarf", "halfling"]
+        option(value=`${item}`)
diff --git a/GODSEND-Agenda/src/pug/rolltemplate.html b/GODSEND-Agenda/src/pug/rolltemplate.html
new file mode 100644
index 0000000000..ba1fd3afbc
--- /dev/null
+++ b/GODSEND-Agenda/src/pug/rolltemplate.html
@@ -0,0 +1,23 @@
+
+<rolltemplate class="sheet-rolltemplate-rolls">
+  <div class="sheet-container sheet-color-{{color}}">
+    <div class="sheet-header">
+      {{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
+      {{#name}}<div class="sheet-name">{{name}}</div>{{/name}}
+      {{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
+    </div>
+    <div class="sheet-content">
+      {{#allprops() title name subtitle desc color baseroll}}
+      <div class="sheet-key">{{key}}</div>
+      <div class="sheet-value">{{value}}</div>
+      {{/allprops() title subtitle desc color baseroll}}
+      {{#rollTotal() baseroll 2}}
+        <div class="sheet-fail">^{critical-fumble}</div>
+      {{/rollTotal() baseroll 2}}
+      {{#rollTotal() baseroll 12}}
+        <div class="sheet-crit">Critical Success!</div>
+      {{/rollTotal() baseroll 12}}
+      {{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
+    </div>
+  </div>
+</rolltemplate>
diff --git a/GODSEND-Agenda/src/scss/_core.scss b/GODSEND-Agenda/src/scss/_core.scss
new file mode 100644
index 0000000000..a74071eb66
--- /dev/null
+++ b/GODSEND-Agenda/src/scss/_core.scss
@@ -0,0 +1,552 @@
+@import url('https://fonts.googleapis.com/css?family=Zilla+Slab|Anton|Noto+Sans+TC|Bebas+Neue&display=swap');
+
+
+.charsheet {
+
+  * {
+    font-family: "Noto Sans TC";
+    --mythic-dark-red: #4a0004;
+    --mythic-light-red: #ac3f2b;
+    --mythic-red: #a83521;
+    overflow: clip;
+  }
+
+  .version{
+    color: black;
+    font-weight: bold;
+    float: right;
+    margin: -16px 20px;  
+  }
+
+  .capital,
+  :not(textarea){
+    font-family: "Bebas Neue";
+  }
+
+  /* ---------- Colors ---------- */
+
+  label,
+  .label,
+  span {
+    color: var(--mythic-dark-red);
+  }
+
+  /* --------- Text ------------- */
+
+  h1, h2, h3{
+    text-align: center;
+  }
+
+  span.bold{
+    font-weight: 800;
+    font-size: medium;
+  }
+
+  div.border-label label {
+      border-style: solid;
+      max-width: 80%;
+      border-radius: 13px;
+  }
+
+  .small-font{
+    font-size: xx-small;
+    height:18px;
+  }
+  /* --------- Inputs ------------- */
+
+  input[type="text"],
+  input[type="number"]{
+    background-color: transparent;
+    border-style: none none solid none;
+    border-color: var(--mythic-light-red);
+    border-radius: 0px;
+  }
+
+  input[type="number"]{
+    border: 1px solid var(--mythic-light-red);
+    text-align: center;
+  }
+
+
+  input[type="number"].bubble {
+    border: 2px solid var(--mythic-light-red);
+    border-radius: 13px;
+  }
+
+  input[type="checkbox"].checkbox {
+    border: solid var(--mythic-light-red);
+    border-radius: 0px;
+  }
+
+
+  /* -----Hides up/down buttons on numberfields that don't need them ---*/
+  input[type="number"].ref {
+    border-style: none none solid none;
+    border-color: black;
+    border-radius: 0px;
+  }
+
+  input[type=number].ref::-webkit-inner-spin-button,
+  input[type=number].ref::-webkit-outer-spin-button,
+  input[type=number].txtfield::-webkit-inner-spin-button,
+  input[type=number].txtfield::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type=number].ref,
+  input[type=number].txtfield {
+    -moz-appearance: textfield;
+  }
+
+  textarea {
+    width: 90%;
+    height: 85%;
+    background-color: transparent;
+  }
+
+  /* highlights empty fields with Light grayish red */
+  textarea:placeholder-shown,
+  input[type="text"]:placeholder-shown,
+  input[type="number"]:placeholder-shown{
+    background-color: #EAC9D1;
+  }
+
+  /* higlight selected input */
+  textarea:focus,
+  input[type="text"]:focus,
+  input[type="number"]:focus{
+    background-color: #ccc;
+  }
+
+
+
+
+
+  /* ------- Buttons ---------- */
+
+
+
+  /* text buttons with dice icon removed */
+
+  button[type="roll"].txt-btn:before,
+  button[type="roll"].skills:before{
+    content: ' ';
+  }
+
+  button[type=roll].d6-dice::before {  /*new die changes die roller to d6*/
+    font-family: 'dicefontd6',arial;
+    content: 'F ';
+    color: white;
+  }
+  button[type=roll].sendtext::before {  /*new die changes die roller to d6*/
+    font-family: 'Pictos';
+    content: 'w ';
+    color: black;
+  }
+
+  button[type="roll"].txt-btn{
+    height: 22px;
+    border: 2px solid black;
+    background-color: transparent;
+    margin-left: 5px;
+    font-weight: bold;
+    padding: 2px 5px 4px 5px;
+    text-shadow: none;
+  }
+  button[type="roll"].txt-btn:hover{
+    background-color: #d9d9d9;
+    border-radius: 10px;
+    text-shadow: none;
+  }
+
+  button[type="roll"].red{
+    background-color: #a83521;
+    background-position: 0 -30px;
+    color: white;
+  }
+  button[type="roll"].red:hover{
+    background-color: #a83521;
+    background-position: 0 -30px;
+    color: white;
+    font-size: 1.7em;
+  }
+
+
+
+
+  /*------------------------------------*\
+    #SECTIONS
+  \*------------------------------------*/
+
+  /* --------------- Universal Section ------------------- */
+
+  .border{
+    border-style: solid;
+    border-radius: 13px;
+  }
+
+  :is(div.section section) hr{
+    display: block;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    margin-left: auto;
+    margin-right: auto;
+    border-style: solid;
+    border-width: 2px;
+    border-color: black;
+  }
+
+  .section,
+  section {
+    display: flex;
+    padding: 5px;
+    border: none;
+    background: white;
+    opacity: 0.9;
+    min-height: 90%;
+    max-width: 800px;
+  }
+  .flex-row {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  .flex-col{
+    display: flex;
+    flex-flow: column;
+  }
+
+  .flex-center {
+    place-items: center;
+  }
+
+  .gap{
+    gap: 10px;
+  }
+
+  .columnflex {
+    display: flex;
+    flex-direction: column;
+  }
+  .rowflex {
+    display: flex;
+    flex-direction: row;
+  }
+  .wrap {
+    flex-wrap: wrap;
+  }
+  .nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .center {
+    align-items: center;
+  }
+
+  .middle {
+    justify-content: center;
+  }
+  .spaced {
+    justify-content: space-evenly;
+  }
+
+
+  label.title{
+    text-transform: capitalize;
+    max-width: 150px;
+    text-align: center;
+    font-size: 25px;
+  }
+
+  div.halfsection{
+    max-width: 400px;
+  }
+
+
+  /* Section specific */
+    section.common{
+      grid-area: common;
+    }
+    section.points{
+      grid-area: points;
+    }
+    section.disadv{
+      grid-area: disadv;
+    }
+    section.skills{
+      grid-area: skills;
+    }
+    section.notes{
+      grid-area: notes;
+
+      input {
+        background-color: #ccc;
+      }
+    }
+
+
+  /* Core layout of each page */
+
+  main.character {
+    display: grid;
+    grid-gap: 4px;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: 70px 40px 100px auto;
+    grid-template-areas:"common   common"
+                        "points  points"
+                        "attrs   attrs"
+                        "skills  notes";
+    width: 800px;
+    height: 1300px;
+    position: relative;
+  }
+
+  main.notes {
+    display: grid;
+    width: 750px;
+    position: relative;
+  }
+
+
+
+  main.settings {
+    display: grid;
+    width: 750px;
+    position: relative;
+  }
+
+
+  /* -------------------------- Pages Specific Layout--------------------- */
+
+  /* -------------------------- Page 2/Notes --------------------- */
+
+  main.npc {
+
+    textarea{
+      height: 140px;
+    }
+  }
+
+  /* -------------------------- Page 3/Settings ------------------ */
+
+  main.settings {
+    input[type="number"]{
+      height: 24px;
+    }
+
+    span.dice{
+      margin-top: 5px;
+    }
+  }
+
+
+  /* -------------------------- Page 4/NPC ------------------ */
+
+  main.npc{
+
+    * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+    }
+    h3{
+      text-align: center;
+    }
+    .mookgrid{
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-template-rows: repeat(4, 1fr) 3fr;
+      place-items: center;
+
+      .orange {
+        background-color: orange;
+        font-size: 1.3em;
+        place-self: stretch;
+      }
+
+      .name {
+        grid-column: span 5;
+
+        label{
+          width: 40px;
+        }
+        input{
+          font-size: 1.7em;
+          text-align: center;
+          margin-bottom: 5px;
+        }
+      }
+
+      .al{
+        grid-column: span 2;
+      }
+      .notes{
+        grid-column: span 5;
+        background-color: LemonChiffon;
+      }
+
+    }
+  }
+
+
+
+  /*------------------------------------*\
+    #PAGE LAYOUT/ PAGE BUTTONS
+  \*------------------------------------*/
+
+
+
+  /* -------------- page buttons ------------- */
+
+  main.character,
+  main.notes,
+  main.settings {
+      display: none;
+  }
+/*
+  main.npc,
+  button[type="action"].npc,
+  button[type="action"].pc,
+  input.tabstoggle[value="npc"] ~ main.npc,
+  */
+
+  /* show the selected page */
+  input.tabstoggle[value="character"] ~ main.character,
+  input.tabstoggle[value="notes"] ~ main.notes,
+
+  input.tabstoggle[value="settings"] ~ main.settings {
+      display: grid;
+  }
+
+  /* shows/hides page buttons */
+  /*
+  input.npctoggle[value="0"] ~ button[type="action"].pc,
+  input.npctoggle[value="1"] ~ button[type="action"].npc{
+      display: flex;
+  } */
+
+  div.tab-buttons{
+    display: flex;
+    gap: 10px;
+
+    button{
+      font-size: 1.5em;
+    }
+  }
+
+}
+/* mobile styling */
+
+@media only screen and (max-width: 480px) {
+
+  .charsheet{
+    button[type=roll].d6-dice::before {  /*new die changes die roller to d6*/
+      content: '';
+    }
+
+    main.character {
+      display: grid;
+      grid-gap: 4px;
+      grid-template-columns: 13fr 9fr;
+      grid-template-rows: 1fr minmax(0.3fr, 2.5fr) 1.5fr 8fr 3fr 2fr 2fr 2fr 2fr 1fr;
+      grid-template-areas:"common     common    "
+                          "archetype  archetype "
+                          "attributes attributes"
+                          "skills     skills    "
+                          "powers     powers    "
+                          "weapons    weapons   "
+                          "armor      armor    "
+                          "stress     stress    "
+                          "equipment  equipment "
+                          "rules      rules     ";
+      width: 480px;
+      height: 1800px;
+      position: relative;
+    }
+
+    div.archetype {
+      width: 400px;
+      
+      details div{
+        flex-direction: column;
+      }
+      textarea.featuredesc{
+        width: 90%;
+      }
+    }
+
+    div.attributes {
+      flex-wrap: wrap;
+
+      label.title{
+        text-align: center;
+        min-width: 450px;
+        width: 450px;
+      }
+
+      div.rowflex.nowrap.middle{
+        flex-wrap: wrap;
+        width: 350px;
+      }
+    }
+
+    div.skills {
+
+      div.rowflex{
+        flex-direction: column;
+      }
+
+      div.skillgrid{
+        display: grid;
+        padding: 5px;
+        grid-template-rows: repeat(21, 1fr);
+        grid-template-columns: 3fr 2fr;
+        width: 400px;
+        height: 800px;
+      }
+
+
+      button[type="roll"].red{
+        width: 170px;
+      }
+    }
+    button[type="roll"].skills{
+      font-size: 14px;
+      padding: 0px;
+      margin: 0px;
+      width: 145px;
+      height: 25px;
+      border: 2px solid white;
+      color: var(--mythic-light-red);
+      text-shadow: none;
+    }
+    button[type="roll"].skills:hover{
+      font-size: 14px;
+      padding: 0px;
+      margin: 0px;
+      width: 145px;
+      height: 25px;
+      border: 2px solid black;
+      border-radius: 9px;
+      color: var(--mythic-light-red);
+      text-shadow: none;
+    }
+    button[type="roll"].skills:hover::after{
+      content: '';
+    }
+
+    div.skills{
+      button[type="roll"].special{
+        width: 25px;
+        color: var(--mythic-light-red);
+      }
+      button[type="roll"].special:hover{
+        width: 25px;
+        color: var(--mythic-light-red);
+      }
+      button[type="roll"].special::after{
+        content: 'd6';
+      }
+    }
+  }
+}
diff --git a/GODSEND-Agenda/src/scss/_rolltemplate.scss b/GODSEND-Agenda/src/scss/_rolltemplate.scss
new file mode 100644
index 0000000000..b2b51c3f7c
--- /dev/null
+++ b/GODSEND-Agenda/src/scss/_rolltemplate.scss
@@ -0,0 +1,103 @@
+/*------------------------------------*\
+  #ROLL TEMPLATES
+\*------------------------------------*/
+
+/* Smaller margins - remove these if you want the huge default left margin */
+
+.withoutavatars .sheet-rolltemplate-rolls {
+  margin-left: -7px;
+}
+
+.sheet-rolltemplate-rolls {
+  margin-left: -37px;
+  font-family: "Yanone Kaffeesatz";
+
+    .sheet-container {
+      border: 3px solid black;
+      border-radius: 3px;
+    }
+
+    /* Header formatting - title and subtitle */
+    .sheet-header {
+      background-color: var(--header-bg-color, #a83521);
+      color: var(--header-text-color, #FFF);
+      text-align: left;
+      text-transform: capitalize;
+      padding: 5px;
+      border-bottom: 2px solid black;
+    }
+    .sheet-title {
+      font-size: 1.4em;
+      font-weight: bold;
+    }
+    .sheet-subtitle {
+      font-size: 1em;
+    }
+
+    .sheet-container {
+      --header-bg-color: #a83521;
+      --header-text-color: #FFF;
+    }
+
+    /* alt template colors */
+    .sheet-container.sheet-color-green {
+      --header-bg-color: #008000;
+    }
+    .sheet-container.sheet-color-blue {
+      --header-bg-color: #0000e0;
+    }
+    .sheet-container.sheet-color-gold {
+      --header-bg-color: #ffdd1f;
+      --header-text-color: #000;
+    }
+    .sheet-container.sheet-color-purple {
+      --header-bg-color: #c200c2;
+    }
+    .sheet-container.sheet-color-black {
+      --header-bg-color: #000;
+    }
+    .sheet-container.sheet-color-white {
+      --header-bg-color: #FFF;
+      --header-text-color: #000;
+    }
+
+    /* Allprops part */
+    .sheet-content {
+      display: grid;
+      background: #FFF;
+      grid-template-columns: auto auto;
+      line-height:1.4em;
+    }
+    .sheet-content > div {
+      padding: 5px;
+    }
+
+    .sheet-content .sheet-key {
+      font-weight: bold;
+      padding-right: 10px;
+      text-align: right;
+    }
+
+    /* Make even-numbered rows grey */
+    .sheet-content :nth-child(4n+3),
+    .sheet-content :nth-child(4n) {
+      background:#EEE;
+    }
+
+    /* Description field */
+    .sheet-desc, .sheet-crit, .sheet-fail {
+      grid-column: span 2;
+      padding: 5px;
+      text-align: center;
+    }
+    .sheet-crit, .sheet-fail{
+        font-weight: bold;
+        font-size: 1.3em;
+    }
+    .sheet-crit {
+        color: green;
+    }
+    .sheet-fail {
+        color: red;
+    }
+}
\ No newline at end of file