some d&d stuff

dnd/index.css

@@ -0,0 +1,71 @@
+@import url(base.css);
+
+@layer {
+  header { row-gap: 0; }
+  header p {
+    grid-area: 2/1/2/4;
+    margin: 0;
+    text-align: center;
+
+    font-size: 1.5rem;
+    font-weight: 600;
+    font-stretch: 90%;
+  }
+}
+
+@layer {
+  .portrait {
+    margin: 0;
+    border: 4px solid currentcolor;
+    box-shadow: var(--shadow);
+    img {
+      display: block;
+      width: 200px;
+      height: 200px;
+    }
+  }
+
+  .char {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+
+    padding-left: 1em;
+    padding-right: 1em;
+
+    display: grid;
+    gap:     0.5em 2em;
+
+    &:nth-of-type(odd) {
+      grid-template:
+        "portrait name" auto
+        "portrait desc" 1fr / min-content auto;
+    }
+    &:nth-of-type(even) {
+      grid-template:
+        "name portrait" auto
+        "desc portrait" 1fr / auto min-content;
+    }
+
+    .portrait { grid-area: portrait; }
+    h2        { grid-area: name; margin: 0; }
+    > div, p  { grid-area: desc; align-self: start; }
+  }
+}
+
+@layer {
+  .char {
+    margin-top: 2em;
+    padding-top: 2em;
+    border-top: 3px double currentcolor;
+  }
+  .char:last-of-type {
+    padding-bottom: 2em;
+    border-bottom: 3px double currentcolor;
+  }
+
+  h2 small {
+    font-size: 70%;
+    font-weight: 700;
+  }
+}