More form styles

Author: theacodes

dist/winter.css

@@ -19,7 +19,7 @@ input[type="button"] {
     justify-content: center;
 
     min-width: 8ch;
-    min-height: 2.2rem;
+    /* min-height: 2.2rem; */
     text-align: center;
     line-height: inherit;
     vertical-align: middle;

dist/winter.css.map

@@ -94,6 +94,10 @@ main {
     &.hide-title h1 {
         display: none;
     }
+
+    section {
+        margin-block: var(--winter-block-spacing);
+    }
 }
 
 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

src/styles/buttons.css

@@ -14,6 +14,33 @@ textarea {
 /* Forms that appear within main should have some block spacing */
 main form {
     margin-block: var(--winter-block-spacing);
+
+    & section {
+        margin-block: var(--winter-block-spacing);
+
+        & h2 {
+            margin-block-end: var(--winter-spacing-l);
+        }
+
+        & aside {
+            margin-block: var(--winter-block-spacing);
+            font-family: var(--winter-form-aside-font);
+            font-size: var(--winter-form-aside-font-size);
+            color: var(--winter-form-aside-fg);
+            background: var(--winter-form-aside-bg);
+            border-inline-start: 0.15rem solid var(--winter-form-aside-accent);
+            padding: var(--winter-form-aside-padding);
+            box-shadow: var(--winter-shadow-xs);
+
+            & p:first-child {
+                margin-block-start: 0;
+            }
+        }
+
+        & .grid {
+            --gap: 1.5rem;
+        }
+    }
 }
 
 /* Elements that create a new "block" */

src/styles/content.css

@@ -29,6 +29,7 @@ body {
     grid-gap: var(--gap);
     /* min() with 100% prevents overflow in extra narrow spaces */
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
+    align-items: start;
 
     &.col-2 {
         grid-template-columns: 1fr 1fr;

src/styles/forms.css

@@ -330,6 +330,15 @@
     --winter-range-active-fg: var(--winter-purple-2);
     --winter-range-active-thumb-size: 1.4rem;
 
+    /* <aside> within form, styled similar to <blockquote> */
+    --winter-form-aside-padding: var(--winter-spacing-xs)
+        var(--winter-spacing-s);
+    --winter-form-aside-font: var(--winter-font-serif);
+    --winter-form-aside-font-size: var(--winter-font-size-s);
+    --winter-form-aside-fg: var(--winter-not-quite-black);
+    --winter-form-aside-bg: var(--color-white);
+    --winter-form-aside-accent: var(--winter-purple-4);
+
     /* Markdown extensions */
     /* .admonition */
     --winter-admonition-font: var(--winter-font-serif);