From 51163b167cce01af6101438e5e61145ad798f213 Mon Sep 17 00:00:00 2001 From: Mitsuo Tokumori Date: Sat, 8 Mar 2025 16:03:30 +0900 Subject: Restructure python code to be modular The python code is now a package named app. app/models: db models app/routes: flask blueprints app/static: css, js app/templates: jinja html templates --- app/static/style.css | 100 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 app/static/style.css (limited to 'app/static/style.css') diff --git a/app/static/style.css b/app/static/style.css new file mode 100644 index 0000000..a186f24 --- /dev/null +++ b/app/static/style.css @@ -0,0 +1,100 @@ +/* MASU */ +body { + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; +} + +header { + width: 100%; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +header button, header label { + margin: 0 10px; +} + +#container { + width: 100%; + /* max-width: 1920px; */ + padding: 20px; + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} + +.block { + width: 420px; + height: 420px; + flex-shrink: 0; + + padding: 5px; + border: 1px solid black; +} + +@media (max-width: 440px) { + .grid { + padding: 20px 0; + } +} + +/* block_time */ +#time .block { + justify-content: center; +} + +#timeVisualizer .grid { + display: grid; + grid-template-columns: repeat(8, 42px); + grid-template-rows: repeat(3, 42px); + gap: 2px; + background: #f0f0f0; + padding: 5px; + width: fit-content; + margin: 0 auto; +} + +#timeVisualizer .cell { + width: 42px; + height: 42px; + background: #ffffff; + position: relative; + border: 1px solid #ddd; +} + +#timeVisualizer .sleep { + background: #e6f3ff; +} + +#timeVisualizer .past { + background: #cccccc; +} + +#timeVisualizer .current::after { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: var(--fill); + background: #cccccc; +} + +#timeVisualizer .timeline { + position: absolute; + width: 2px; + height: 100%; + background: #000000; + z-index: 1; +} + +/* block_weather */ -- cgit v1.2.3