Add styling for new recipe page

src/routes/recipe/new/+page.svelte

@@ -90,5 +90,227 @@
         </div>
 
         <textarea bind:value={notes} rows="4"></textarea>
+
+        <button>Create Recipe</button>
     </form>
 </div>
+
+<style>
+    .container{
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        width: 100%;
+        max-width: 100%;
+        min-height: calc(100% - 75px);
+        min-height: calc(100dvh - 75px);
+        padding: 1rem max(0.75rem, env(safe-area-inset-right, 0px)) max(1.5rem, env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
+        color: var(--color-text);
+        overflow-x: clip;
+        box-sizing: border-box;
+    }
+
+    .standardForm{
+        width: min(640px, 100%);
+        max-width: 100%;
+        min-width: 0;
+        padding: 1.15rem 0.9rem;
+        container-type: inline-size;
+        container-name: recipe-form;
+    }
+
+    h1{
+        font-size: clamp(1.25rem, 1rem + 2vw, 1.5rem);
+    }
+
+    h2{
+        color: var(--color-text);
+        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1rem);
+        font-weight: 700;
+        letter-spacing: 0.01em;
+    }
+
+    input,
+    textarea{
+        width: 100%;
+        min-width: 0;
+        max-width: 100%;
+        font-size: 1rem;
+    }
+
+    .ingredients,
+    .steps{
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 0.75rem;
+        min-width: 0;
+        max-width: 100%;
+        background: var(--color-surface-alt);
+        border: 1px solid var(--color-border);
+        border-radius: 8px;
+    }
+
+    ul,
+    ol{
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.45rem;
+        list-style: none;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    ul:not(:has(li)),
+    ol:not(:has(li)){
+        display: none;
+    }
+
+    li{
+        padding: 0.55rem 0.7rem;
+        background: var(--color-surface);
+        border: 1px solid var(--color-border);
+        border-left: 3px solid var(--color-primary);
+        border-radius: 6px;
+        font-size: 0.95rem;
+        line-height: 1.4;
+        color: var(--color-text);
+        overflow-wrap: anywhere;
+        word-break: break-word;
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    ol{
+        counter-reset: step;
+    }
+
+    ol li{
+        display: grid;
+        grid-template-columns: 1.5rem minmax(0, 1fr);
+        align-items: start;
+        gap: 0.7rem;
+        counter-increment: step;
+    }
+
+    ol li::before{
+        content: counter(step);
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: 50%;
+        background: var(--color-primary);
+        color: var(--color-text-on-primary);
+        font-size: 0.75rem;
+        font-weight: 700;
+        line-height: 1;
+    }
+
+    .ingredients{
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        align-items: stretch;
+        gap: 0.75rem;
+    }
+
+    .ingredients > *{
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .button{
+        margin: 0;
+        width: 100%;
+        height: auto;
+        min-height: 2.5rem;
+        white-space: nowrap;
+    }
+
+    textarea{
+        resize: vertical;
+        min-height: 3.5rem;
+    }
+
+    .standardForm > textarea{
+        min-height: 5rem;
+    }
+
+    @container recipe-form (min-width: 260px){
+        .ingredients{
+            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+            align-items: end;
+        }
+
+        .ingredients h2,
+        .ingredients ul,
+        .ingredients label:last-of-type,
+        .ingredients .button{
+            grid-column: 1 / -1;
+        }
+    }
+
+    @container recipe-form (min-width: 480px){
+        .ingredients,
+        .steps{
+            padding: 1rem;
+        }
+
+        .ingredients{
+            grid-template-columns: minmax(0, 5.5rem) minmax(0, 6.5rem) minmax(0, 1fr) auto;
+            align-items: end;
+        }
+
+        .ingredients h2,
+        .ingredients ul{
+            grid-column: 1 / -1;
+        }
+
+        .ingredients label:last-of-type,
+        .ingredients .button{
+            grid-column: auto;
+        }
+
+        .ingredients .button{
+            width: auto;
+            min-height: 0;
+            height: fit-content;
+        }
+    }
+
+    @media (min-width: 640px){
+        .container{
+            padding: 2rem 1rem 3rem;
+        }
+
+        .standardForm{
+            padding: 2rem;
+        }
+
+        .standardForm > textarea{
+            min-height: 6rem;
+        }
+    }
+
+    @media (max-height: 500px){
+        .container{
+            padding-top: 0.75rem;
+            padding-bottom: 1rem;
+        }
+
+        .standardForm > textarea{
+            min-height: 3.5rem;
+        }
+    }
+
+    @media (pointer: coarse){
+        .button,
+        .standardForm button{
+            min-height: 44px;
+        }
+    }
+</style>