From d48cafebb277e4ad4b31e883cbe4f55eef9ea4a4 Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 29 May 2021 19:24:41 +0200 Subject: Rewrite in TypeScript --- public/index.html | 38 ++++++++++++++++++++++++++------------ public/main.css | 50 ++++++++++++++++++++++++++++++-------------------- 2 files changed, 56 insertions(+), 32 deletions(-) (limited to 'public') diff --git a/public/index.html b/public/index.html index 1639d26..27b8470 100644 --- a/public/index.html +++ b/public/index.html @@ -1,13 +1,27 @@ - - - Glycémie - - - - - - - - - + + + +Glycémie + + + + + + + + diff --git a/public/main.css b/public/main.css index 29f031c..2736a7f 100644 --- a/public/main.css +++ b/public/main.css @@ -1,42 +1,51 @@ +/* Box sizing */ + html { box-sizing: border-box; - overflow-y: scroll; } *, *:before, *:after { box-sizing: inherit; } +/* */ + +html { + overflow-y: scroll; +} + body { margin: 0; } @media screen and (min-width: 700px) { - .page { + .g-Page { width: 700px; margin: 0 auto; } } @media screen and (max-width: 700px) { - .page { width: 100%; } + .g-Page { width: 100%; } } -.header { +.g-Header { position: fixed; top: 0; width: inherit; } -.line { +.g-Aliments { margin-top: 110px; } + +.g-Line { height: 50px; display: flex; align-items: center; } -.line.title { +.g-Line.g-Title { height: 60px; } -.line.title > * { +.g-Line.g-Title > * { border: 0; background-color: #333333; color: white; @@ -48,11 +57,11 @@ body { margin: 0; } transition: background-color 0.2s ease-in-out; } -.line.title > *.sorted { +.g-Line.g-Title > .g-Header--Sorted { background-color: #505050; } -.line.search { +.g-Line.g-Search { width: 100%; padding: 0 15px; border: none; @@ -60,18 +69,19 @@ body { margin: 0; } font-size: 14px; } -.aliments { margin-top: 110px; } +.g-Line > * { padding: 15px; } -.line > * { padding: 15px; } +.g-Line > *:nth-child(1) { width: 40%; } +.g-Line > *:nth-child(2) { width: 20%; } +.g-Line > *:nth-child(3) { width: 20%; } +.g-Line > *:nth-child(4) { width: 20%; } -.line > *:nth-child(1) { width: 40%; } -.line > *:nth-child(2) { width: 20%; } -.line > *:nth-child(3) { width: 20%; } -.line > *:nth-child(4) { width: 20%; } +.g-Aliment:nth-child(2n+1) { background-color: #F6F6F6; } -.line > .good { color: green; } -.line > .medium { color: orange; } -.line > .bad { color: red; } -.line > .number { text-align: right; } +.g-Number { + text-align: right; +} -.aliment:nth-child(2n+1) { background-color: #F6F6F6; } +.g-Number--Low { color: green; } +.g-Number--Middle { color: orange; } +.g-Number--High { color: red; } -- cgit v1.2.3