app/assets/stylesheets/layout.css

@@ -8,23 +8,16 @@ body {
   font-size: 1.1em;
   background-color: var(--background-color);
   min-width: 30em;
-  padding: 0;
-  margin: 0;
 }
 
 main {
   background: linear-gradient(180deg, rgba(227,220,190,1) 0%, rgba(255,248,238,1) 100%);
+  max-width: 80vw;
   display: flex;
   flex-direction: column;
   padding: 1em 1em 4em 1em;
-  min-height: calc(100vh - var(--header-height));
-}
-
-@media(min-width: 800px) {
-  main, footer, header {
   margin: 0 auto;
-    max-width: 80vw;
-  }
+  min-height: calc(100vh - var(--header-height));
 }
 
 aside.flash {
@@ -53,11 +46,26 @@ h1, h2 {
 
 header {
   background: linear-gradient(180deg, rgba(34,45,113,1) 0%, rgba(22,90,157,1) 100%);
+  position: relative;
+  padding: 0 50px;
+  margin-right: 2em;
   height: var(--header-height);
 }
+
+/* Angled banner end */
+header:before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: calc(var(--header-height) / 2) solid transparent;
+  border-bottom: calc(var(--header-height) / 2) solid transparent;
+  border-right: calc(var(--header-height) / 2) solid var(--background-color);
+  position: absolute;
+  right:0;
+}
+
 header h1 {
-  margin: 0;
-  padding: 1em;
+  padding: 1em 0;
 }
 
 header h1 a:link, header h1 a:visited {
@@ -69,8 +77,6 @@ header nav {
   ul {
     display: flex;
     justify-content: center;
-    margin: 0;
-    padding: 0;
   }
   li {
     list-style-type: none;
@@ -166,6 +172,7 @@ footer {
   padding: 1em;
   margin: 0 auto;
   font-size: .8em;
+  max-width: 80vw;
   a:link, a:visited {
     color: var(--header-text-color);
     text-decoration: none;

todo.md

@@ -3,6 +3,7 @@
 - Weapons/spells: skills?
   - Do this have_many :stats?
   - Lists
+- make dice rolls own model so stats can have multiple rolls (e.g. advantage)
 - improve dice roll parsing to allow e.g. choose highest
 - Easy add amount to stat
 - icons on features