diff --git a/designs/character-sheet-mvp.html b/designs/character-sheet-mvp.html new file mode 100644 index 0000000..b29ff17 --- /dev/null +++ b/designs/character-sheet-mvp.html @@ -0,0 +1,290 @@ + + + + + + Document + + + +
+

Stats

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ Respawns: + + + +
+
+
+

.dungeon

+
+
+

Skills

+
+

Build

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+

Meta

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+

Presence

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+

Hands

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

Inventory

+
+
+

Jobs

+
+ + \ No newline at end of file diff --git a/designs/style.mvp.css b/designs/style.mvp.css new file mode 100644 index 0000000..0529d90 --- /dev/null +++ b/designs/style.mvp.css @@ -0,0 +1,91 @@ +body { + display: grid; + grid-template-columns: 3fr 2fr; + grid-template-rows: min-content min-content min-content; + height: 100vh; + width: 100vw; + padding: 0; + margin: 0; +} + +h2 { + margin: 8px 0; +} +h3 { + margin: 4px 0; +} + +.header { + grid-column: 1 / span 2; +} + +#stats { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content 1fr 1fr 1fr 1fr; + column-gap: 16px; + padding: 16px; +} + +.stat { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom: 16px; +} + +.respawns { + grid-column: 1 / span 2; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; +} + +#profile { + background: blue; +} + +#skills { + border: 5px double gray; + border-left-width: 0; + border-radius: 4px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content 1fr 1fr; + padding: 16px; + column-gap: 16px; +} + +.skillgroup { + margin-bottom: 16px; +} + +.skillgroup h3 { + text-align: center; +} + +.skill { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + margin-bottom: 4px; +} + +.skill :first-child { + text-align: right; +} +.skill :last-child { + text-align: left; +} + +#inventory { + background: purple; + grid-row: 2 / span 2; + grid-column: 2; +} + +#jobs { + background: yellowgreen; +} \ No newline at end of file