forms styling WIP

CSS/Element/form.css

@@ -0,0 +1,54 @@
+.form-flex {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    align-items: center;
+    width: 100%;
+}
+
+form label {
+    width: fit-content;
+}
+
+form input {
+    border: var(--border-primary);
+    height: var(--h-md);
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.input {
+    display: flex;
+    flex-direction: column;
+    row-gap: 2px;
+    align-items: start;
+}
+
+.input-short {
+    max-width: 240px;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    max-width: 600px;
+}
+
+.form-grid label {
+    display: flex;
+    flex-direction: column;
+    font-weight: bold;
+}
+
+.form-grid textarea {
+    grid-column: span 2;
+    resize: vertical;
+    min-height: 100px;
+}
+
+input, textarea {
+    padding: 8px;
+    font-size: 1rem;
+    margin-top: 5px;
+}

CSS/style.css

@@ -2,6 +2,7 @@
 @import url(Block/header.css);
 @import url(Block/footer.css);
 @import url(Element/logo.css);
+@import url(Element/form.css);
 @import url(Element/button.css);
 
 *, *:before, *:after {
@@ -11,8 +12,6 @@
   font-family: var(--font-family-main);
 }
 
-
-
 body {
     background-color: var(--brand-background);
     color: #666;
@@ -31,8 +30,6 @@ h1 span {
     font-size: 40px;
 }
 
-
-
 h2 {
     color: orange;
 }
@@ -80,48 +77,6 @@ main {
     font-weight: bold;
 }
 
-/*** Formulare ***/
-
-form {
-    width: 440px;
-    margin: auto;
-}
-
-label {
-    width: 120px;
-    display: inline-block;
-    margin: 5px 15px 10px 0;
-    vertical-align: top;
-    text-align: right;
-}
-
-label.errorMsg {
-    width: 420px;
-    display: inline-block;
-    margin: 0 5px 15px 0;
-    vertical-align: top;
-    text-align: right;
-    color: orange;
-}
-
-input {
-    width: 300px;
-}
-
-input[type="submit"] {
-    width: 100px;
-    margin-left: 330px;
-}
-
-form textarea {
-    width: 300px;
-    height: 150px;
-    margin-bottom: 10px;
-}
-
-form select {
-    width: 300px;
-}
 /*** Loesung Workshop-Seite ***/
 
 .textContent {
@@ -156,4 +111,5 @@ form select {
 .hover:hover{
     opacity: .75;
     text-decoration: none;
-}
+}
+

CSS/variables.css

@@ -2,10 +2,12 @@
     /* Colors*/
     --brand-primary: #EB8202;
     --brand-background: #201911;
+    --bg-muted: #5B5B5B;
     --brand-white: #ffffff;
     --fullblock: darkblue;
     --input-placeholder: #998E82;
 
+
     /*Fonts*/
     --font-family-main: "Inter", sans-serif;
     --font-family-headline: "Source Serif 4", serif;
@@ -19,4 +21,6 @@
     /*Font-Weight*/
     --font-weight-semibold: 600;
 
+    --h-md: 48px;
+    --border-primary: 1px solid #998E82;
 }