form design

README.md

@@ -1,3 +1,3 @@
 # SI18.5 - Diffractive Coockbook
 
-Eheh
+Sharing recipes and methods to read in a diffractive way

client/components/CookbookForm.js

@@ -40,7 +40,7 @@ export default {
           </div>
         </section>
 
-    <dl>
+    <!-- <dl>
       <dt>Title</dt>
       <dd>{{title}}</dd>     
 
@@ -59,6 +59,6 @@ export default {
             
       <dt>Who</dt>
       <dd>{{who}}</dd>
-    </dl>
+    </dl> -->
   `,
 };

client/style.css

@@ -7,15 +7,19 @@ body {
 	font-size: 24px;
 	line-height: 1.6;
 	font-family: sans-serif;
+	background-color: #e6b0aa;
+}
+
+#app {
+	width: 100%;
 }
 
 section.recipe {
-	display: inline-block;
-	margin: 0 auto;
+	display: block;
+	margin: 48px auto;
 	padding: 32px;
 	width: 50ch;
 	border-radius: 0.5rem;
-	background: linear-gradient(300deg, rgba(242, 173, 131, 1) 0%, rgba(207, 143, 73, 1) 100%);
 	box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -39,11 +43,13 @@ button {
 }
 
 button.add {
-	display: inline-block;
+	display: block;
 	width: 48px;
 	height: 48px;
+	margin: 0 auto;
 	margin-top: 16px;
 	cursor: pointer;
+	border-radius: 50%;
 }
 
 textarea + textarea {