diff options
| author | Joris | 2021-05-29 19:24:41 +0200 |
|---|---|---|
| committer | Joris | 2021-05-29 19:24:41 +0200 |
| commit | d48cafebb277e4ad4b31e883cbe4f55eef9ea4a4 (patch) | |
| tree | 7f04fb49defa5fbc7984b0eee60bb7ce16a37ae2 /public | |
| parent | 4e3cd92a8063a70dab9ae0ccafd0552c78c6e005 (diff) | |
Rewrite in TypeScript
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 38 | ||||
| -rw-r--r-- | public/main.css | 50 |
2 files changed, 56 insertions, 32 deletions
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 @@ <!doctype html> -<html> - <head> - <title>Glycémie</title> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> - <link rel="stylesheet" href="main.css"> - <link rel="icon" href="icon.png"> - </head> - <body> - <script src="main.js"></script> - </body> -</html> +<html lang="fr"> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width"> +<title>Glycémie</title> +<link rel="stylesheet" href="/main.css"> +<link rel="icon" href="/icon.png"> + +<body> + <script> + // https://github.com/al6x/stupid-simple-typescript-web-starter + window.define = function(name, required, moduleFn) { + var require = function() { throw new Error("AMD require not supported!")} + var exports = window.define.modules[name] = {} + var resolved = [require, exports] + for (var i = 2; i < required.length; i++) { + var m = window.define.modules[required[i]] + if (!m) throw new Error("AMD module `" + required[i] + "` not found!") + resolved.push(m) + } + moduleFn.apply(null, resolved) + } + window.define.modules = {} + </script> + + <script src="main.js"></script> +</body> 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; } |