From 9fb5b6ae8acb3f62f20c45588f7b41862a18a52b Mon Sep 17 00:00:00 2001 From: tconey23 <145934889+tconey23@users.noreply.github.com> Date: Thu, 22 Feb 2024 13:14:37 -0700 Subject: [PATCH] Add HTML structure for new views --- dist/index.html | 15 +++-- src/css/styles.css | 145 +++++++++++++++++++++++++++------------------ 2 files changed, 96 insertions(+), 64 deletions(-) diff --git a/dist/index.html b/dist/index.html index b1cca6a3d..4586ff721 100644 --- a/dist/index.html +++ b/dist/index.html @@ -32,12 +32,14 @@ Sleep Account -
+

welcome back (person.name)

-
+
+
+

👣

@@ -47,7 +49,7 @@

Activity Data

-
+

💧

@@ -59,8 +61,8 @@

Hydration Data

-
-
+
+

🛏

Sleep Data

@@ -76,7 +78,7 @@

Sleep Data

-
diff --git a/src/css/styles.css b/src/css/styles.css index 9cef1b396..3655b9864 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -8,9 +8,54 @@ body, html { background-size: 100% 100%; } main { + .sortContainer{ + display: none; + } display: flex; flex-direction: column; align-items: center; + article { + display: flex; + flex-wrap: nowrap; + align-items: center; + flex-direction: column; + padding-top: 10em; + height: 100vh; + img { + z-index: 0; + position: fixed; + } + } + .sizeableContainer { + width: 90%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + } + .info-card { + border-radius: 5%; + width: 75%; + height: 75%; + display: flex; + box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px; + overflow: scroll; + flex-direction: column; + justify-content: flex-start; + max-width: 75%; + align-items: center; + padding: 10px; + background: transparent; + + .section-text { + width: 75%; + height: 100vh; + padding: 6%; + margin: 10px; + display: flex; + justify-content: center; + } + } } input { @@ -70,44 +115,6 @@ nav a:hover { text-shadow: 0px 0px 11px rgb(0, 0, 0); } -.info-card { - width: 75%; - height: 100vh; - padding: 6%; - margin: 10px; - display: flex; - justify-content: center; -} - -.info-card div { - border-radius: 5%; - width: 75%; - height: 75%; - display: flex; - box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px; - overflow: hidden; - flex-direction: column; - justify-content: space-around; - max-width: 75%; - align-items: center; - padding: 10px; - background: transparent; -} - -article { - display: flex; - flex-wrap: nowrap; - align-items: center; - flex-direction: column; - padding-top: 10em; - height: 100vh; -} - -img { - z-index: 0; - position: fixed; -} - .underline { text-decoration: underline; } @@ -202,19 +209,23 @@ canvas { } .condensed { - position: absolute; display: flex; flex-direction: row; - height: 78%; - width: 90%; - align-items: center; - left: 72px; - top: 157px; - padding: 30px; - border: black inset thin; - justify-content: center; - flex-wrap: wrap; - align-content: center; + justify-content: flex-end; + align-items: flex-start; + .sortContainer{ + display: flex; + width: 35%; + height: 100vh; + margin-top: 90px; + margin-right: 150px; + box-shadow: inset #0000008a -1px -2px 20px 14px; + border-radius: 25px; + } + .sizeableContainer { + width: 25%; + margin-top: 90px; + } article{ padding: 0px; position: fixed; @@ -229,23 +240,41 @@ canvas { } } .info-card{ - width: 40%; - height: 40%; - padding: 0; - margin: 0; - font-size: 12px; - overflow: scroll; - position: absolute; + border-radius: 5%; + width: 75%; + height: 250px; + display: flex; + box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px; + max-width: 75%; + align-items: center; + background: transparent; + flex-direction: column; + justify-content: flex-start; + margin: 10px; + padding: 0px; + .section-text{ + width: 75%; + height: 100%; + padding: 0px; + margin: 5px; + display: flex; + justify-content: center; + flex-wrap: wrap; + flex-direction: row; + align-content: flex-start; + font-size: 10px; + } .iconSection{ height: 28px; z-index: 10; + font-size: 10px; + margin-bottom: 5px; + justify-content: center; &:hover{ cursor: grab; } } canvas { - height: 170px !important; - width: 500px !important; } p{ font-size: 10px;