Add search input

1 files changed, 44 insertions, 29 deletions

diff --git a/public/main.css b/public/main.css
index 0f092cf..fc0850a 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,44 +1,59 @@
-h1 {
-  text-align: center;
-  margin-bottom: 1em;
-  font-size: 46px;
-  color: #33AA00;
-}
+body { margin: 0; }
 
-ul.aliments {
-  display: table;
-  margin: 0 auto;
-}
+/* Box sizing */
+html { box-sizing: border-box; }
+*, *:before, *:after { box-sizing: inherit; }
 
-ul.aliments > li {
-  display: table-row;
+@media screen and (min-width: 700px) {
+  .page {
+    width: 700px;
+    margin: 0 auto;
+  }
 }
 
-ul.aliments > li.title {
-  font-weight: bold;
+@media screen and (max-width: 700px) {
+  .page { width: 100%; }
 }
 
-ul.aliments > li > div {
-  display: table-cell;
-  padding: 15px;
+.header {
+  position: fixed;
+  top: 0;
+  width: inherit;
 }
 
-ul.aliments > li > .Good {
-  color: green;
+.line {
+  height: 50px;
+  display: flex;
+  align-items: center;
 }
 
-ul.aliments > li > .Medium {
-  color: orange;
+.line.title {
+  background-color: #333333;
+  color: white;
+  font-size: 18px;
+  height: 60px;
 }
 
-ul.aliments > li > .Bad {
-  color: red;
+.line.search {
+  width: 100%;
+  padding: 0 15px;
+  border: none;
+  box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.2);
+  font-size: 14px;
 }
 
-ul.aliments > li > .number {
-  text-align: right;
-}
+.aliments { margin-top: 110px; }
 
-ul.aliments > li:nth-child(2n+3) {
-  background-color: #EEEEEE;
-}
+.line > * { padding: 15px; }
+
+.line > *:nth-child(1) { width: 40%; }
+.line > *:nth-child(2) { width: 20%; }
+.line > *:nth-child(3) { width: 20%; }
+.line > *:nth-child(4) { width: 20%; }
+
+.line > .good { color: green; }
+.line > .medium { color: orange; }
+.line > .bad { color: red; }
+.line > .number { text-align: right; }
+
+.aliment:nth-child(2n+1) { background-color: #F6F6F6; }