From 951c80eafca88e01c30d4e990ba43c0821b7ec4d Mon Sep 17 00:00:00 2001
From: Andreas Johansson <andreas.johansson@aalto.fi>
Date: Mon, 21 Jun 2021 20:07:23 +0300
Subject: [PATCH] Godsend Agenda, visual fixes, datalists

---
 GODSEND-Agenda/Readme.md             |   9 +-
 GODSEND-Agenda/sheet.css             | 142 +++++++++-----
 GODSEND-Agenda/sheet.html            | 139 ++++++++------
 GODSEND-Agenda/sheet.pug             |   5 +-
 GODSEND-Agenda/src/pug/core.pug      |  73 ++++---
 GODSEND-Agenda/src/pug/data.pug      |  13 +-
 GODSEND-Agenda/src/pug/mixins.pug    |  10 +
 GODSEND-Agenda/src/pug/variables.pug |   9 +
 GODSEND-Agenda/src/scss/_core.scss   | 273 +++++++++++++++++----------
 9 files changed, 423 insertions(+), 250 deletions(-)
 create mode 100644 GODSEND-Agenda/src/pug/mixins.pug
 create mode 100644 GODSEND-Agenda/src/pug/variables.pug

diff --git a/GODSEND-Agenda/Readme.md b/GODSEND-Agenda/Readme.md
index 3e8447c22e..8d0d89401b 100644
--- a/GODSEND-Agenda/Readme.md
+++ b/GODSEND-Agenda/Readme.md
@@ -5,8 +5,15 @@ Created with PUGjs and SASS by [Andreas J.](https:wiki.roll20.net/Anduh).
 
 ## Changelog
 
+### v.1.3.1
+- several visual fixes
+- 
+
 ### v.1.2.0
 - repeating weapons, powers, armor
 - add/remove some secondary attributes
 - update looks
-- rolltemplate shows degree of success
\ No newline at end of file
+- rolltemplate shows degree of success
+
+### v.1.0.0
+- barebones initial sheet
\ No newline at end of file
diff --git a/GODSEND-Agenda/sheet.css b/GODSEND-Agenda/sheet.css
index 5a4a262b06..f67b720f4f 100644
--- a/GODSEND-Agenda/sheet.css
+++ b/GODSEND-Agenda/sheet.css
@@ -1,13 +1,11 @@
-@import url("https://fonts.googleapis.com/css?family=Caesar+Dressing|Noto+Sans+TC|Bebas+Neue&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Bebas+Neue|Lexend|Caesar+Dressing|Noto+Sans+TC&display=swap");
 .charsheet * {
-  font-family: "Bebas Neue";
-  --mythic-dark-red: #4a0004;
-  --mythic-light-red: #ac3f2b;
-  --mythic-red: #a83521;
+  font-family: "Bebas Neue", "Arial";
   --godsend: #c87d00;
+  --sheetwidth: 800px;
 }
 .charsheet input[value=hellas].gamesys ~ * {
-  font-family: "Caesar Dressing";
+  font-family: "Caesar Dressing", Arial;
   --godsend: #a83521;
 }
 .charsheet .version {
@@ -27,7 +25,12 @@
 .charsheet h2 {
   background-color: var(--godsend);
   width: calc(100% - 40px);
-  margin: 0.5em 0 0.5em 15px;
+  margin: 0.4em 0 0.4em 15px;
+}
+.charsheet h3 {
+  background-color: var(--godsend);
+  width: calc(100% - 40px);
+  margin: 0.2em 0 0.2em 5px;
 }
 .charsheet .cap {
   text-transform: capitalize;
@@ -46,6 +49,12 @@
   height: 18px;
 }
 .charsheet input[type=text],
+.charsheet input[type=number],
+.charsheet textarea,
+.charsheet select, .charsheet option {
+  font-family: "Lexend", Arial;
+}
+.charsheet input[type=text],
 .charsheet input[type=number] {
   background-color: transparent;
   border-style: none none solid none;
@@ -64,6 +73,10 @@
   border: solid var(--godsend);
   border-radius: 0px;
 }
+.charsheet select {
+  border-color: var(--godsend);
+  padding-top: 1px;
+}
 .charsheet input[type=number].ref {
   border-style: none none solid none;
   border-color: black;
@@ -95,6 +108,10 @@
 .charsheet input[type=number]:focus {
   background-color: #ccc;
 }
+.charsheet button[type=roll]::before {
+  position: relative;
+  top: 2px;
+}
 .charsheet button[type=roll].txt-btn:before,
 .charsheet button[type=roll].skills:before {
   content: " ";
@@ -139,6 +156,7 @@
   gap: 30px;
   border: 2px black;
   border-style: none none solid none;
+  width: var(--sheetwidth);
 }
 .charsheet div.tab-buttons button {
   font-size: 1.5em;
@@ -215,121 +233,157 @@
   display: grid;
   grid-gap: 4px;
   grid-template-columns: 5fr 4fr;
-  grid-template-rows: 70px 40px 162px auto;
+  grid-template-rows: 65px 40px 162px auto;
   grid-template-areas: "common   common" "points  points" "attrs   notes" "skills  notes";
-  width: 800px;
+  width: var(--sheetwidth);
   height: 1300px;
   position: relative;
 }
-.charsheet main.character section.common {
+.charsheet section.common {
   grid-area: common;
 }
-.charsheet main.character section.common input[type=text] {
+.charsheet section.common input[type=text] {
   width: 170px;
   text-align: center;
 }
-.charsheet main.character section.common input[type=text].name {
-  font-size: 1.5em;
+.charsheet section.common input[type=text].name {
+  font-size: 1.4em;
   color: var(--godsend);
 }
-.charsheet main.character section.common label {
+.charsheet section.common label {
   margin-bottom: 2px;
   text-align: center;
 }
-.charsheet main.character section.points {
+.charsheet section.points {
   grid-area: points;
 }
-.charsheet main.character section.points span {
+.charsheet section.points span {
   padding: 0em 0.5em;
   font-size: 1em;
   display: flex;
   align-items: center;
   text-align: center;
 }
-.charsheet main.character section.points input[type=number] {
+.charsheet section.points input[type=number] {
   font-size: 1.4em;
   width: 40px;
 }
-.charsheet main.character section.attrs {
+.charsheet section.attrs {
   grid-area: attrs;
+  row-gap: 3px;
 }
-.charsheet main.character section.attrs button {
+.charsheet section.attrs button[type=roll] {
   font-size: 1.8em;
+  width: 47px;
 }
-.charsheet main.character section.attrs input[type=number] {
+.charsheet section.attrs input[type=number] {
   font-size: 1.5em;
   width: 2em;
 }
-.charsheet main.character section.skills {
+.charsheet section.skills {
   grid-area: skills;
   padding-top: 0px;
   margin-top: -28px;
 }
-.charsheet main.character section.skills .desc-row {
+.charsheet section.skills .desc-row {
   display: flex;
   justify-content: center;
   gap: 5px;
 }
-.charsheet main.character section.skills .desc-row span {
+.charsheet section.skills .desc-row span {
   display: flex;
   align-items: center;
   width: 40px;
 }
-.charsheet main.character section.skills .desc-row span.powers {
+.charsheet section.skills .desc-row span.attr {
+  width: 50px;
+}
+.charsheet section.skills .desc-row span.desc {
+  width: 68px;
+  justify-content: center;
+}
+.charsheet section.skills .desc-row span.powers {
   width: 81px;
 }
-.charsheet main.character section.skills .desc-row span.weapons {
-  width: 104px;
+.charsheet section.skills .desc-row span.weapons {
+  width: 188px;
+  justify-content: center;
 }
-.charsheet main.character section.skills .desc-row span.armor {
-  width: 120px;
-  text-align: center;
+.charsheet section.skills .desc-row span.armor {
+  width: 164px;
+  justify-content: center;
 }
-.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem {
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) {
+  display: flex;
+  flex-flow: nowrap column;
+  row-gap: 3px;
+}
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem {
   display: flex;
   justify-content: center;
   gap: 3px;
+  height: 29px;
 }
-.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem input[type=text] {
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=text] {
   width: 40px;
-  font-size: 1.8em;
+  font-size: 1.3em;
   border-style: solid solid solid solid;
+  height: 28px;
 }
-.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem input[type=text].name {
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=text].name {
   width: 140px;
 }
-.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem input[type=number] {
-  font-size: 1.7em;
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=text].desc {
+  width: auto;
+}
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=number] {
+  font-size: 1.5em;
   width: 40px;
 }
-.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem select {
-  width: 55px;
-  font-size: 1.4em;
-  margin-top: 5px;
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem select {
+  width: 52px;
+  font-size: 1.5em;
   margin-bottom: 0px;
   text-align: center;
+  padding-top: 2px;
+  font-family: "Bebas Neue", Arial;
 }
-.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem button:not(.power) {
-  width: 90px;
+.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem button {
+  margin: 1px 3px;
 }
-.charsheet main.character section.notes {
+.charsheet section.notes {
   grid-area: notes;
 }
-.charsheet main.character section.notes input[type=text] {
+.charsheet section.notes input[type=text] {
   width: 110px;
 }
-.charsheet main.character section.notes textarea {
+.charsheet section.notes textarea {
   height: 90px;
 }
 .charsheet main.notes {
   display: grid;
   width: 750px;
   position: relative;
+  grid-template-columns: 1fr 1fr;
+}
+.charsheet main.notes h2 {
+  grid-column: span 2;
 }
 .charsheet main.settings {
   display: grid;
   width: 750px;
   position: relative;
+  grid-template-columns: 1fr 1fr;
+}
+.charsheet main.settings h2 {
+  grid-column: span 2;
+}
+.charsheet main.settings select.short {
+  width: 70px;
+}
+.charsheet main.settings span {
+  color: black;
+  margin-right: 5px;
 }
 .charsheet main.settings .section * {
   font-size: 1.3em;
diff --git a/GODSEND-Agenda/sheet.html b/GODSEND-Agenda/sheet.html
index b12125aa4e..5b8a026f98 100644
--- a/GODSEND-Agenda/sheet.html
+++ b/GODSEND-Agenda/sheet.html
@@ -26,11 +26,11 @@
     </div>
     <div class="columnflex nowrap">
       <label>Species</label>
-      <input name="attr_species" title="@{species}" type="text"/>
+      <input name="attr_species" title="@{species}" list="speciesgodsend" type="text"/>
     </div>
     <div class="columnflex nowrap">
       <label>Archetype</label>
-      <input name="attr_archetype_name" title="@{archetype_name}" type="text"/>
+      <input name="attr_archetype_name" title="@{archetype_name}" list="archetypesgodsend" type="text"/>
     </div>
     <div class="columnflex nowrap">
       <label>Renown</label>
@@ -53,62 +53,64 @@
     <div class="rowflex nowrap"><span>Wealth Rating</span>
       <input class="txtfield" name="attr_wealth" title="@{wealth}" type="number" value=""/>
     </div>
-    <div class="rowflex nowrap"><span>AL</span>
-      <input class="txtfield" name="attr_al" title="Ability Level @{al}" type="number" value=""/><span>PD</span>
-      <input class="txtfield" name="attr_xp_pd" title="Physical Defence @{pd}" type="number" value=""/><span>MD</span>
-      <input class="txtfield" name="attr_xp_md" title="Mental Defence @{md}" type="number" value=""/>
+    <div class="rowflex nowrap"><span title="Ability Level @{al}">AL</span>
+      <input class="txtfield" name="attr_al" title="Ability Level @{xp_al}" type="number" value=""/><span title="Physical Defence @{xp_pd}">PD</span>
+      <input class="txtfield" name="attr_xp_pd" title="Physical Defence @{xp_pd}" type="number" value=""/><span title="Mental Defence @{md}">MD</span>
+      <input class="txtfield" name="attr_xp_md" title="Mental Defence @{xp_md}" type="number" value=""/>
     </div>
   </section>
   <section class="attrs columnflex nowrap">
     <h2>Attributes</h2>
     <div class="rowflex nowrap middle spaced">
       <div class="rowflex nowrap">
-        <button name="roll_con" value="@{whisper}&{template:rolls} {{title=con }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{con}[con]@{modquery}]]}}" type="roll">con</button>
+        <button name="roll_con" value="@{whisper}&{template:rolls} {{title=con }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{con}[con] @{modquery}]]}}" type="roll">con</button>
         <input name="attr_con" type="number" title="@{con}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_dex" value="@{whisper}&{template:rolls} {{title=dex }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{dex}[dex]@{modquery}]]}}" type="roll">dex</button>
+        <button name="roll_dex" value="@{whisper}&{template:rolls} {{title=dex }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{dex}[dex] @{modquery}]]}}" type="roll">dex</button>
         <input name="attr_dex" type="number" title="@{dex}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_spd" value="@{whisper}&{template:rolls} {{title=spd }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{spd}[spd]@{modquery}]]}}" type="roll">spd</button>
+        <button name="roll_spd" value="@{whisper}&{template:rolls} {{title=spd }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{spd}[spd] @{modquery}]]}}" type="roll">spd</button>
         <input name="attr_spd" type="number" title="@{spd}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_str" value="@{whisper}&{template:rolls} {{title=str }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{str}[str]@{modquery}]]}}" type="roll">str</button>
+        <button name="roll_str" value="@{whisper}&{template:rolls} {{title=str }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{str}[str] @{modquery}]]}}" type="roll">str</button>
         <input name="attr_str" type="number" title="@{str}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_cr" value="@{whisper}&{template:rolls} {{title=cr }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{cr}[cr]@{modquery}]]}}" type="roll">cr</button>
+        <button name="roll_cr" value="@{whisper}&{template:rolls} {{title=cr }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{cr}[cr] @{modquery}]]}}" type="roll">cr</button>
         <input name="attr_cr" type="number" title="@{cr}" value=""/>
       </div>
     </div>
     <div class="rowflex nowrap middle spaced">
       <div class="rowflex nowrap">
-        <button name="roll_cha" value="@{whisper}&{template:rolls} {{title=cha }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{cha}[cha]@{modquery}]]}}" type="roll">cha</button>
+        <button name="roll_cha" value="@{whisper}&{template:rolls} {{title=cha }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{cha}[cha] @{modquery}]]}}" type="roll">cha</button>
         <input name="attr_cha" type="number" title="@{cha}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_int" value="@{whisper}&{template:rolls} {{title=int }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{int}[int]@{modquery}]]}}" type="roll">int</button>
+        <button name="roll_int" value="@{whisper}&{template:rolls} {{title=int }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{int}[int] @{modquery}]]}}" type="roll">int</button>
         <input name="attr_int" type="number" title="@{int}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_per" value="@{whisper}&{template:rolls} {{title=per }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{per}[per]@{modquery}]]}}" type="roll">per</button>
+        <button name="roll_per" value="@{whisper}&{template:rolls} {{title=per }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{per}[per] @{modquery}]]}}" type="roll">per</button>
         <input name="attr_per" type="number" title="@{per}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_wil" value="@{whisper}&{template:rolls} {{title=wil }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{wil}[wil]@{modquery}]]}}" type="roll">wil</button>
+        <button name="roll_wil" value="@{whisper}&{template:rolls} {{title=wil }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{wil}[wil] @{modquery}]]}}" type="roll">wil</button>
         <input name="attr_wil" type="number" title="@{wil}" value=""/>
       </div>
       <div class="rowflex nowrap">
-        <button name="roll_mr" value="@{whisper}&{template:rolls} {{title=mr }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{mr}[mr]@{modquery}]]}}" type="roll">mr</button>
+        <button name="roll_mr" value="@{whisper}&{template:rolls} {{title=mr }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{mr}[mr] @{modquery}]]}}" type="roll">mr</button>
         <input name="attr_mr" type="number" title="@{mr}" value=""/>
       </div>
     </div>
   </section>
   <section class="skills columnflex nowrap">
     <h2>Skills</h2>
+    <div class="desc-row"><span>name</span><span>level</span><span class="attr">attr</span><span class="desc">notes</span></div>
     <fieldset class="repeating_skills">
+      <button name="roll_skill" value="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{level}[skill level]+@{attribute}[attribute]@{modquery}]]}}" type="roll"></button>
       <input class="name" name="attr_name" title="@{name}" list="skillsgodsend" type="text"/>
       <input name="attr_level" title="@{level}" type="number"/>
       <select name="attr_attribute">
@@ -124,12 +126,12 @@
         <option class="cap" value="[[@{mr}]]">mr</option>
         <option class="cap" value="[[@{none}]]">none</option>
       </select>
-      <button name="roll_roll" value="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{level}[skill level]+@{attribute}[attribute]@{modquery}]]}}" type="roll"><span name="attr_name"></span></button>
+      <input class="desc" name="attr_notes" title="@{notes}" type="text"/>
     </fieldset>
     <h2>powers</h2>
-    <div class="desc-row"><span class="powers">name</span><span>rank</span><span>base cost</span><span>rank cost</span><span>cost tot</span><span>desc</span></div>
+    <div class="desc-row"><span class="powers">name</span><span>rank</span><span>base cost</span><span>rank cost</span><span>cost total</span><span>desc</span></div>
     <fieldset class="repeating_powers">
-      <button class="sendtext power" name="roll_roll" value="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{rank= [[@{rank}]] }} {{desc=@{desc} }}" type="roll"></button>
+      <button class="sendtext" name="roll_power" value="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{rank= [[@{rank}]] }} {{desc=@{desc} }}" type="roll"></button>
       <input class="name" name="attr_name" title="@{name}" type="text"/>
       <input class="txtfield" name="attr_rank" title="@{rank}" type="number"/>
       <input class="txtfield" name="attr_cost_base" type="number"/>
@@ -138,8 +140,9 @@
       <input class="name" name="attr_desc" title="@{desc}" type="text"/>
     </fieldset>
     <h2>Weapons</h2>
-    <div class="desc-row"><span class="weapons">name</span><span>acc</span><span>dr</span><span>RoF</span><span>Ammo</span><span>rng</span><span>R#</span><span>attr</span><span>skill</span></div>
+    <div class="desc-row"><span class="weapons">name</span><span>acc</span><span>dr</span><span>RoF</span><span>Ammo</span><span>rng</span><span>R#</span><span>attr</span><span>skill lvl</span></div>
     <fieldset class="repeating_weapons">
+      <button name="roll_weapon" value="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{acc}[accuracy]+@{skill}[skill level]+@{attribute}[attribute]@{modquery}]]}} {{Damage= [[@{dr}]]}}" type="roll"></button>
       <input class="name" name="attr_name" title="@{name}" type="text"/>
       <input class="txtfield" name="attr_acc" type="number"/>
       <input class="txtfield" name="attr_dr" type="number"/>
@@ -161,7 +164,6 @@
         <option class="cap" value="[[@{none}]]">none</option>
       </select>
       <input name="attr_skill" type="text"/>
-      <button class="power" name="roll_roll" value="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{acc}[accuracy]+@{skill}[skill level]+@{attribute}[attribute]@{modquery}]]}}" type="roll"></button>
     </fieldset>
     <h2>Armor</h2>
     <div class="desc-row"><span class="armor">name</span><span>acc</span><span>pr</span><span>enc</span><span>R#</span></div>
@@ -190,32 +192,32 @@
   </section>
 </main>
 <main class="notes">
-  <h1>Notes</h1>
-  <section>
+  <h2>Notes</h2>
+  <section class="columnflex">
     <h3>archetype</h3>
     <textarea name="attr_archetype"></textarea>
   </section>
-  <section>
+  <section class="columnflex">
     <h3>weapons</h3>
     <textarea name="attr_weapons"></textarea>
   </section>
-  <section>
+  <section class="columnflex">
     <h3>powers</h3>
     <textarea name="attr_powers"></textarea>
   </section>
-  <section>
+  <section class="columnflex">
     <h3>equipment</h3>
     <textarea name="attr_equipment"></textarea>
   </section>
-  <section>
+  <section class="columnflex">
     <h3>notes</h3>
     <textarea name="attr_notes"></textarea>
   </section>
 </main>
 <main class="settings">
-  <h1>Settings</h1>
-  <div class="section columnflex nowrap"><span>Ask for Roll Modifiers?</span>
-    <select name="attr_modquery" title="@{modquery}">
+  <h2>Settings</h2>
+  <div class="section rowflex nowrap"><span>Ask for Roll Modifiers?</span>
+    <select class="short" name="attr_modquery" title="@{modquery}">
       <option value="+(?{Roll Modifier|0}[Modifiers])">Yes</option>
       <option value=" ">No</option>
     </select>
@@ -229,7 +231,7 @@
       <option value="1d20">d20 (Talislanta, Hellas, Atlantis)</option>
     </select>
   </div>
-  <div class="section rowflex nowrap gap"><span>Game System(Header &amp; layout)</span>
+  <div class="section rowflex nowrap gap"><span>Game System (Header &amp; layout)</span>
     <select name="attr_gametype">
       <option value="godsend" selected="selected">GODSEND Agenda</option>
       <option value="talislanta">Talislanta</option>
@@ -240,9 +242,32 @@
 </main>
 <!--hidden inputs & datalists-->
 <!--sheet version-->
-<input type="hidden" name="attr_version" value="1.2.0"/>
+<input type="hidden" name="attr_version" value="1.3.0"/>
 <input type="hidden" name="attr_dice" value="2d10cf0cs0"/>
 <input type="hidden" name="attr_none" value="0"/>
+<datalist id="archetypesgodsend">
+  <option value="Adventurer"></option>
+  <option value="Anarchist"></option>
+  <option value="Avenger"></option>
+  <option value="Bravo"></option>
+  <option value="Icon"></option>
+  <option value="Outsider"></option>
+  <option value="Protector"></option>
+  <option value="Rogue"></option>
+  <option value="Scholar"></option>
+  <option value="Warrior"></option>
+  <option value="Crony"></option>
+  <option value="Megalomaniac"></option>
+  <option value="Nihilist"></option>
+</datalist>
+<datalist id="speciesgodsend">
+  <option value="Angelos"></option>
+  <option value="Atlantean"></option>
+  <option value="Black October"></option>
+  <option value="Chimerans"></option>
+  <option value="Elohim"></option>
+  <option value="U.S.E.R. Agent"></option>
+</datalist>
 <datalist id="skillsgodsend">
   <option value="Athletics"></option>
   <option value="Evade"></option>
@@ -263,40 +288,34 @@
 <!--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 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 subtitle name desc color}}
+    <div class="sheet-content">{{#allprops() title subtitle name desc color}}
       <div class="sheet-key">{{key}}</div>
-      <div class="sheet-value">{{value}}</div>
-      {{/allprops() title subtitle name desc color}}
-      {{#roll}}
+      <div class="sheet-value">{{value}}</div>      {{/allprops() title subtitle name desc color}}
+            {{#roll}}
       <div class="sheet-key">{{key}}</div>
-      <div class="sheet-value">{{value}}</div>
-      {{/roll}}
-      {{#rollLess() roll 0}}
-        <div class="sheet-fail">Critical Fumble!</div>
-      {{/rollLess() roll 0}}
-      {{#rollBetween() roll 1 5}}
-        <div class="sheet-fail">Failure</div>
-      {{/rollBetween() roll 1 5}}
-      {{#rollBetween() roll 6 10}}
-        <div class="sheet-crit">Partial Success</div>
-      {{/rollBetween() roll 6 10}}
-      {{#rollBetween() roll 11 19}}
-        <div class="sheet-crit">Success</div>
-      {{/rollBetween() roll 11 19}}
-      {{#rollGreater() roll 19}}
-        <div class="sheet-crit">Critical Success!</div>
-      {{/rollGreater() roll 19}}
-      {{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
+      <div class="sheet-value">{{value}}</div>      {{/roll}}
+            {{#rollLess() roll 0}}
+      <div class="sheet-fail">Critical Fumble!</div>      {{/rollLess() roll 0}}
+            {{#rollBetween() roll 1 5}}
+      <div class="sheet-fail">Failure</div>      {{/rollBetween() roll 1 5}}
+            {{#rollBetween() roll 6 10}}
+      <div class="sheet-crit">Partial Success</div>      {{/rollBetween() roll 6 10}}
+            {{#rollBetween() roll 11 19}}
+      <div class="sheet-crit">Success</div>      {{/rollBetween() roll 11 19}}
+            {{#rollGreater() roll 19}}
+      <div class="sheet-crit">Critical Success!</div>      {{/rollGreater() roll 19}}
+            {{#desc}}
+      <div class="sheet-desc">{{desc}}</div>{{/desc}}
     </div>
   </div>
 </rolltemplate>
-
 <!--sheetworkers-->
 <script type="sheet/worker">
 
diff --git a/GODSEND-Agenda/sheet.pug b/GODSEND-Agenda/sheet.pug
index 0e437910a7..9973b0fad2 100644
--- a/GODSEND-Agenda/sheet.pug
+++ b/GODSEND-Agenda/sheet.pug
@@ -1,4 +1,7 @@
 
+include src/pug/variables.pug
+include src/pug/mixins.pug
+
 // main sheet code
 include src/pug/core.pug
 
@@ -6,7 +9,7 @@ include src/pug/core.pug
 include src/pug/data.pug
 
 //roll templates
-include src/pug/rolltemplate.html
+include src/pug/rolltemplate.pug
 
 //sheetworkers
 script(type="sheet/worker")
diff --git a/GODSEND-Agenda/src/pug/core.pug b/GODSEND-Agenda/src/pug/core.pug
index d9e2219e3c..10b4ce6ee7 100644
--- a/GODSEND-Agenda/src/pug/core.pug
+++ b/GODSEND-Agenda/src/pug/core.pug
@@ -1,25 +1,5 @@
-//- PUG variables/lists
-- var pages = ["character", "notes", "settings"];
-- var attrs1 = ["con", "dex", "spd", "str", "cr"];
-- var attrs2 = ["cha", "int", "per", "wil", "mr"];
-- var attrsall = ["con", "dex", "spd", "str", "cr", "cha", "int", "per", "wil", "mr", "none"];
-- var points = ["body", "mind", "hero"];
-- var disadv = ["personal", "internal", "external"];
-- var notes = ["archetype", "weapons", "powers", "equipment", "notes"];
-- var notes1 = ["archetype", "equipment", "notes"];
-//- Mixins
-mixin attrsrolls(name)
-  div.rowflex.nowrap
-    button(name=`roll_${name}` value!=`@{whisper}&{template:rolls} {{title=${name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{${name}}[${name}]@{modquery}]]}}` type="roll")= name
-    input(name=`attr_${name}` type="number" title=`@{${name}}` value="")
 
-mixin attrselect
-  select(name="attr_attribute")
-    each name in attrsall
-      option.cap(value=`[[@{${name}}]]`)= name
-//- end of mixins
 
-//- SHEET CODE START
 input.gamesys(type="hidden" name="attr_gametype" value="")
 .tab-buttons.spaced.center
   //- <input type="hidden" class="npctoggle" name="attr_npc"  value="0">
@@ -48,10 +28,10 @@ main.character
       input(name="attr_character_name" title="@{character_name}" type="text" class="name")
     .columnflex.nowrap
       label Species
-      input(name="attr_species" title="@{species}" type="text")
+      input(name="attr_species" title="@{species}" list="speciesgodsend" type="text")
     .columnflex.nowrap
       label Archetype
-      input(name="attr_archetype_name" title="@{archetype_name}" type="text")
+      input(name="attr_archetype_name" title="@{archetype_name}" list="archetypesgodsend" type="text")
     .columnflex.nowrap
       label Renown
       input(name="attr_renown" title="@{renown}" type="number")
@@ -62,16 +42,18 @@ main.character
         input.txtfield(name=`attr_${type}_points` type="number" value="")
         span /
         input.txtfield(name=`attr_${type}_points_max` type="number" value="")
+
     .rowflex.nowrap
       span Wealth Rating
       input.txtfield(name="attr_wealth" title="@{wealth}" type="number" value="")
     .rowflex.nowrap
-      span AL
-      input.txtfield(name="attr_al" title="Ability Level @{al}" type="number" value="")
-      span PD
-      input.txtfield(name="attr_xp_pd" title="Physical Defence @{pd}" type="number" value="")
-      span MD
-      input.txtfield(name="attr_xp_md" title="Mental Defence @{md}" type="number" value="")
+      span(title="Ability Level @{al}") AL
+      input.txtfield(name="attr_al" title="Ability Level @{xp_al}" type="number" value="")
+      span(title="Physical Defence @{xp_pd}") PD
+      input.txtfield(name="attr_xp_pd" title="Physical Defence @{xp_pd}" type="number" value="")
+      span(title="Mental Defence @{md}") MD
+      input.txtfield(name="attr_xp_md" title="Mental Defence @{xp_md}" type="number" value="")
+
   section.attrs.columnflex.nowrap
     h2 Attributes
     .rowflex.nowrap.middle.spaced
@@ -80,30 +62,39 @@ main.character
     .rowflex.nowrap.middle.spaced
       each name in attrs2
         +attrsrolls(name)
+  //- Skills, Powers, weapons, armor
   section.skills.columnflex.nowrap
+
     h2 Skills
+    .desc-row
+      span name
+      span level
+      span.attr attr
+      span.desc notes
     fieldset.repeating_skills
+      button(name="roll_skill" value!="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{level}[skill level]+@{attribute}[attribute]@{modquery}]]}}" type="roll")
       input.name(name="attr_name" title="@{name}" list="skillsgodsend" type="text")
       input(name="attr_level" title="@{level}" type="number")
       +attrselect
-      button(name="roll_roll" value!="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{level}[skill level]+@{attribute}[attribute]@{modquery}]]}}" type="roll")
-        span(name="attr_name")
+      input.desc(name="attr_notes" title="@{notes}" type="text")
+
     h2 powers
     .desc-row
       span.powers name
       span rank
       span base cost
       span rank cost
-      span cost tot
+      span cost total
       span desc
     fieldset.repeating_powers
-      button.sendtext.power(name="roll_roll" value!="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{rank= [[@{rank}]] }} {{desc=@{desc} }}" type="roll")
+      button.sendtext(name="roll_power" value!="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{rank= [[@{rank}]] }} {{desc=@{desc} }}" type="roll")
       input.name(name="attr_name" title="@{name}" type="text")
       input.txtfield(name="attr_rank" title="@{rank}" type="number")
       input.txtfield(name="attr_cost_base" type="number")
       input.txtfield(name="attr_cost_rank" type="number")
       input.txtfield(name="attr_cost_total" type="number")
       input.name(name="attr_desc" title="@{desc}" type="text")
+
     h2 Weapons
     .desc-row
       span.weapons name
@@ -114,8 +105,9 @@ main.character
       span rng
       span='R#'
       span attr
-      span skill
+      span skill lvl
     fieldset.repeating_weapons
+      button(name="roll_weapon" value!="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{acc}[accuracy]+@{skill}[skill level]+@{attribute}[attribute]@{modquery}]]}} {{Damage= [[@{dr}]]}}" type="roll")
       input.name(name="attr_name" title="@{name}"  type="text")
       input.txtfield(name="attr_acc" type="number")
       input.txtfield(name="attr_dr" type="number")
@@ -125,7 +117,7 @@ main.character
       input(name="attr_rsharp" type="text")
       +attrselect
       input(name="attr_skill" type="text")
-      button.power(name="roll_roll" value!="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{roll= [[@{dice}+@{acc}[accuracy]+@{skill}[skill level]+@{attribute}[attribute]@{modquery}]]}}" type="roll")
+
     h2 Armor
     .desc-row
       span.armor name
@@ -139,6 +131,7 @@ main.character
       input.txtfield(name="attr_pr" type="number")
       input.txtfield(name="attr_enc" type="number")
       input(name="attr_rsharp" type="text")
+
   section.notes.columnflex.nowrap
     h2 Disadvantages
     for item in disadv
@@ -150,16 +143,16 @@ main.character
       h2= option
       textarea(name=`attr_${option}`)
 main.notes
-  h1 Notes
+  h2 Notes
   each option in notes
-    section
+    section.columnflex
       h3= option
       textarea(name=`attr_${option}`)
 main.settings
-  h1 Settings
-  .section.columnflex.nowrap
+  h2 Settings
+  .section.rowflex.nowrap
     span='Ask for Roll Modifiers?'
-    select(name="attr_modquery" title="@{modquery}")
+    select.short(name="attr_modquery" title="@{modquery}")
       option(value="+(?{Roll Modifier|0}[Modifiers])") Yes
       option(value=" ") No
   .section.rowflex.nowrap.gap
@@ -171,7 +164,7 @@ main.settings
       option(value="2d10cf0cs0" selected)= '2d10 (GODSEND Agenda)'
       option(value="1d20")= 'd20 (Talislanta, Hellas, Atlantis)'
   .section.rowflex.nowrap.gap
-    span= 'Game System(Header & layout)'
+    span= 'Game System (Header & layout)'
     select(name="attr_gametype" )
       option(value="godsend" selected)= 'GODSEND Agenda'
       option(value="talislanta")= 'Talislanta'
diff --git a/GODSEND-Agenda/src/pug/data.pug b/GODSEND-Agenda/src/pug/data.pug
index 9fddacfed2..9ec92c39de 100644
--- a/GODSEND-Agenda/src/pug/data.pug
+++ b/GODSEND-Agenda/src/pug/data.pug
@@ -1,11 +1,22 @@
 
 //sheet version
-input(type="hidden" name="attr_version" value="1.2.0")
+input(type="hidden" name="attr_version" value="1.3.0")
 input(type="hidden" name="attr_dice" value="2d10cf0cs0")
 input(type="hidden" name="attr_none" value="0")
 
+- var archetypesgodsend = ["Adventurer", "Anarchist","Avenger", "Bravo", "Icon", "Outsider", "Protector", "Rogue", "Scholar", "Warrior", "Crony", "Megalomaniac", "Nihilist"];
+- var speciesgodsend = ["Angelos", "Atlantean", "Black October", "Chimerans", "Elohim", "U.S.E.R. Agent"];
 - var skillsgodsend = ["Athletics", "Evade", "Fighting", "Influence", "Intuition", "Investigation", "Movement", "Perform", "Piloting", "Ranged Fighting", "Resistance", "Scholar", "Stealth", "Technical", "Thievery"];
 
+datalist#archetypesgodsend
+   each item in archetypesgodsend
+         option(value=`${item}`)
+
+datalist#speciesgodsend
+   each item in speciesgodsend
+         option(value=`${item}`)
+
 datalist#skillsgodsend
    each item in skillsgodsend
          option(value=`${item}`)
+
diff --git a/GODSEND-Agenda/src/pug/mixins.pug b/GODSEND-Agenda/src/pug/mixins.pug
new file mode 100644
index 0000000000..f41f2e82e8
--- /dev/null
+++ b/GODSEND-Agenda/src/pug/mixins.pug
@@ -0,0 +1,10 @@
+//- Mixins
+mixin attrsrolls(name)
+  div.rowflex.nowrap
+    button(name=`roll_${name}` value!=`@{whisper}&{template:rolls} {{title=${name} }} {{subtitle=@{character_name} }}  {{roll= [[@{dice}[dice]+@{${name}}[${name}] @{modquery}]]}}` type="roll")= name
+    input(name=`attr_${name}` type="number" title=`@{${name}}` value="")
+
+mixin attrselect
+  select(name="attr_attribute")
+    each name in attrsall
+      option.cap(value=`[[@{${name}}]]`)= name
diff --git a/GODSEND-Agenda/src/pug/variables.pug b/GODSEND-Agenda/src/pug/variables.pug
new file mode 100644
index 0000000000..8b21af9490
--- /dev/null
+++ b/GODSEND-Agenda/src/pug/variables.pug
@@ -0,0 +1,9 @@
+//- PUG variables/lists
+- var pages = ["character", "notes", "settings"];
+- var attrs1 = ["con", "dex", "spd", "str", "cr"];
+- var attrs2 = ["cha", "int", "per", "wil", "mr"];
+- var attrsall = ["con", "dex", "spd", "str", "cr", "cha", "int", "per", "wil", "mr", "none"];
+- var points = ["body", "mind", "hero"];
+- var disadv = ["personal", "internal", "external"];
+- var notes = ["archetype", "weapons", "powers", "equipment", "notes"];
+- var notes1 = ["archetype", "equipment", "notes"];
\ No newline at end of file
diff --git a/GODSEND-Agenda/src/scss/_core.scss b/GODSEND-Agenda/src/scss/_core.scss
index 016511ba0b..66fe24a9c6 100644
--- a/GODSEND-Agenda/src/scss/_core.scss
+++ b/GODSEND-Agenda/src/scss/_core.scss
@@ -1,22 +1,22 @@
-@import url('https://fonts.googleapis.com/css?family=Caesar+Dressing|Noto+Sans+TC|Bebas+Neue&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Lexend|Caesar+Dressing|Noto+Sans+TC&display=swap');
 
 
 .charsheet {
 
   * {
-    font-family: "Bebas Neue";
-    --mythic-dark-red: #4a0004;
-    --mythic-light-red: #ac3f2b;
-    --mythic-red: #a83521;
+    font-family: "Bebas Neue", "Arial";
     --godsend: #c87d00;
+    --sheetwidth: 800px;
+    //--mythic-dark-red: #4a0004;
+    //--mythic-light-red: #ac3f2b;
+    //--mythic-red: #a83521;
   }
 
   input[value="hellas"].gamesys ~ * {
-    font-family: "Caesar Dressing";
+    font-family: "Caesar Dressing", Arial;
     --godsend: #a83521;
   }
 
-
   .version{
     color: black;
     font-weight: bold;
@@ -42,7 +42,12 @@
   h2{
     background-color: var(--godsend);
     width: calc(100% - 40px);
-    margin: 0.5em 0 0.5em 15px;
+    margin: 0.4em 0 0.4em 15px;
+  }
+  h3{
+    background-color: var(--godsend);
+    width: calc(100% - 40px);
+    margin: 0.2em 0 0.2em 5px;
   }
 
   .cap{
@@ -64,8 +69,16 @@
     font-size: xx-small;
     height:18px;
   }
+
 // --------- Inputs -------------
 
+  input[type="text"],
+  input[type="number"],
+  textarea,
+  select,option{
+    font-family: "Lexend", Arial;
+  }
+
   input[type="text"],
   input[type="number"]{
     background-color: transparent;
@@ -90,6 +103,10 @@
     border-radius: 0px;
   }
 
+  select{
+    border-color: var(--godsend);
+    padding-top: 1px;
+  }
 
   // -----Hides up/down buttons on numberfields that don't need them ---
   input[type="number"].ref {
@@ -133,21 +150,24 @@
 
 
 // ------- Buttons ----------
-
+  button[type="roll"]::before{
+    position: relative;
+    top: 2px;
+  }
 
   // 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
+ // new die changes die roller to d6
+  button[type=roll].d6-dice::before { 
     font-family: 'dicefontd6',arial;
     content: 'F ';
     color: white;
   }
-  button[type=roll].sendtext::before {  // sets icon to speech bubble
+  // sets icon to speech bubble
+  button[type=roll].sendtext::before {  
     font-family: 'Pictos';
     content: 'w ';
     color: black;
@@ -194,6 +214,7 @@
     gap: 30px;
     border: 2px black;
     border-style: none none solid none;
+    width: var(--sheetwidth);
 
     button{
       font-size: 1.5em;
@@ -285,139 +306,174 @@
     display: grid;
     grid-gap: 4px;
     grid-template-columns: 5fr 4fr;
-    grid-template-rows: 70px 40px 162px auto;
+    grid-template-rows: 65px 40px 162px auto;
     grid-template-areas:"common   common"
                         "points  points"
                         "attrs   notes"
                         "skills  notes";
-    width: 800px;
+    width: var(--sheetwidth);
     height: 1300px;
     position: relative;
-  // Section specific
-    section.common{
-      grid-area: common;
+  }
+  // Character page - Section specific
+  section.common{
+    grid-area: common;
 
-      input[type="text"]{
-        width: 170px;
-        text-align: center;
+    input[type="text"]{
+      width: 170px;
+      text-align: center;
 
-        &.name{
-          font-size: 1.5em;
-          color: var(--godsend);
-        }
+      &.name{
+        font-size: 1.4em;
+        color: var(--godsend);
       }
-      label{
-        margin-bottom: 2px;
-        text-align: center;
-      } 
     }
-    section.points{
-      grid-area: points;
+    label{
+      margin-bottom: 2px;
+      text-align: center;
+    } 
+  }
+  section.points{
+    grid-area: points;
 
-      span {
-        padding: 0em 0.5em;
-        font-size: 1em;
+    span {
+      padding: 0em 0.5em;
+      font-size: 1em;
+      display: flex;
+      align-items: center;
+      text-align: center;
+    }
+    input[type="number"]{
+      font-size: 1.4em;
+      width: 40px;
+    }
+  }
+  section.attrs{
+    grid-area: attrs;
+    row-gap: 3px;
+
+    button[type=roll] {
+      font-size: 1.8em;
+      width: 47px;
+    }
+    input{
+      &[type="number"]{
+        font-size: 1.5em;
+        width: 2em;
+      }          
+    }
+  }
+  // Skills, Powers, weapons, armor
+  section.skills{
+    grid-area: skills;
+    padding-top: 0px;
+    margin-top: -28px;
+
+    .desc-row{
+      display: flex;
+      justify-content:center;
+      gap:5px;
+
+      span{
         display: flex;
         align-items: center;
-        text-align: center;
-      }
-      input[type="number"]{
-        font-size: 1.4em;
         width: 40px;
-      }
-    }
-    section.attrs{
-      grid-area: attrs;
 
-      button {
-        font-size: 1.8em;
-      }
-      input{
-        &[type="number"]{
-          font-size: 1.5em;
-          width: 2em;
-        }          
-      }
-    }
-    section.skills{
-      grid-area: skills;
-      padding-top: 0px;
-      margin-top: -28px;
-
-
-      .desc-row{
-        display: flex;
-        justify-content:center;
-        gap:5px;
-
-        span{
-          display: flex;
-          align-items: center;
-          width: 40px;
-          &.powers{
-            width: 81px;
-          }
-          &.weapons{
-            width: 104px;
-          }
-          &.armor{
-            width: 120px;
-            text-align: center;
-          }
+        &.attr{
+          width: 50px;
+        }
+        &.desc {
+          width: 68px;
+          justify-content: center;
+        }
+        &.powers{
+          width: 81px;
+        }
+        &.weapons{
+          width: 188px;
+          justify-content: center;
+        }
+        &.armor{
+          width: 164px;
+          justify-content: center;
         }
       }
+    }
 
-      :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem{
+    :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]){
+      display: flex;
+      flex-flow: nowrap column;
+      row-gap:3px;
+      
+      > .repitem{
         display: flex;
         justify-content:center;
-        gap:3px;
-
+        gap: 3px;
+        height: 29px;
+  
         input{
           &[type="text"]{
             width: 40px;
-            font-size: 1.8em;
-            border-style: solid solid solid solid; 
-          }
-          &[type="text"].name{
-            width: 140px;
+            font-size: 1.3em;
+            border-style: solid solid solid solid;
+            height: 28px;
+            
+            &.name{
+              width: 140px;
+            }
+            &.desc{
+              width: auto;
+            }
           }
+  
           &[type="number"]{
-            font-size: 1.7em;
-            width: 40px; 
+            font-size: 1.5em;
+            width: 40px;
+            //height: 28px; 
           }          
         }
         select{
-          width: 55px;
-          font-size: 1.4em;
-          margin-top: 5px;
+          width: 52px;
+          font-size: 1.5em;
           margin-bottom: 0px;
           text-align: center;
+          padding-top: 2px;
+          font-family: "Bebas Neue", Arial;
         }
-        button:not(.power){
-          width: 90px;
+        button{
+          margin: 1px 3px;
         }
       } 
     }
-    section.notes{
-      grid-area: notes;
+    
 
-      input {
-        // background-color: #ccc;
-        
-        &[type="text"]{
-          width: 110px;
-        }
-      }
-      textarea{
-        height: 90px;
+  }
+
+  section.notes{
+    grid-area: notes;
+
+    input {
+      // background-color: #ccc;
+      
+      &[type="text"]{
+        width: 110px;
       }
     }
+    textarea{
+      height: 90px;
+    }
   }
 
+
   main.notes {
     display: grid;
     width: 750px;
     position: relative;
+    grid-template-columns: 1fr 1fr;
+
+    h2{
+      grid-column: span 2;
+    }
   }
 
 
@@ -426,7 +482,18 @@
     display: grid;
     width: 750px;
     position: relative;
+    grid-template-columns: 1fr 1fr;
 
+    h2{
+      grid-column: span 2;
+    }
+    select.short{
+      width: 70px;
+    }
+    span{
+      color: black;
+      margin-right: 5px;
+    }
     .section * {
       font-size: 1.3em;
     }