V0.0.9 / Styling Done

public/styles/extralarge.css

@@ -0,0 +1,3 @@
+.input-popup.expanded {
+  height: 40vh;
+}

public/styles/extrasmall.css

@@ -2,6 +2,8 @@
   margin: 0;
   padding: 0;
   transition: all ease-in-out 0.2s;
+  color: var(--color-secondary);
+  user-select: none;
 }
 
 html {
@@ -9,9 +11,14 @@ html {
 }
 body {
   display: flex;
+  flex-direction: column;
   font-size: 10px;
   padding: 3.75rem;
-  height: calc(100vh - 7.5rem);
+  padding-bottom: 0 !important;
+  height: calc(100vh - 3.75rem);
+  overflow-x: hidden;
+  max-width: 100vw;
+  background: var(--color-primary);
 }
 
 #root {
@@ -19,18 +26,19 @@ body {
   display: flex;
 }
 
-#root > div {
+.app-container {
   flex: 1;
-  display: flex;
-  flex-direction: column;
 }
 
-#root > div > main {
-  flex: 1;
+header {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .logo-container {
   display: flex;
+  width: fit-content;
   align-items: center;
   justify-content: center;
 }
@@ -41,18 +49,16 @@ body {
   display: inline-block;
 }
 .logo-text-container {
-  display: inline-flex;
-  align-items: center;
+  display: none;
+  justify-content: center;
   vertical-align: middle;
+  flex-direction: column;
   flex: 1;
   margin-left: 1.5rem;
 }
 .logo-text-container p {
   font-size: 2.4rem;
 }
-.logo-text-container p:last-of-type {
-  margin-left: 0.75rem;
-}
 
 .subheader {
   font-size: 2.5rem;
@@ -65,8 +71,24 @@ body {
   margin: 0;
 }
 
+.overline[data-button] {
+  border-bottom: 1px solid;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.overline[data-button] a {
+  text-decoration: none;
+}
+
 .intro {
   margin: 4.5rem 0;
+  display: inline-block;
+  width: fit-content;
+}
+
+.question-container {
+  margin: 3.5rem 0;
 }
 
 .question {
@@ -93,11 +115,6 @@ body {
   cursor: pointer;
 }
 
-.answer:hover,
-.answer:focus {
-  background-color: var(--color-secondary-light);
-}
-
 .answer.selected {
   background-color: var(--color-bright);
 }
@@ -107,10 +124,15 @@ body {
 
 .symptom-container.subheader {
   margin-top: 5rem;
-  margin-bottom: 1rem;
+  margin-bottom: 2.5rem;
   display: block !important;
 }
-
+.symptom-container.subheader .overline {
+  margin: 1rem 0;
+}
+.symptom-container {
+  margin-bottom: 5rem;
+}
 .symptom {
   max-width: 100%;
   padding: 1.5rem;
@@ -151,14 +173,6 @@ body {
   text-align: center;
   display: block;
 }
-.symptom:hover {
-  box-shadow: 0px 0px 100px var(--color-dim);
-  background-color: var(--color-primary);
-}
-.symptom.at-site:hover {
-  background-color: var(--color-bright);
-  color: var(--color-primary);
-}
 .symptom-chance:before {
   content: "EXPERIENCED BY";
   font-size: 1rem;
@@ -176,5 +190,152 @@ body {
 
 footer {
   font-size: 1.2rem;
-  padding: 1.5rem;
+  padding: 5rem 3.75rem;
+  width: calc(100vw - 7.5rem);
+  margin-left: -3.75rem;
+  background-color: var(--color-secondary-light);
+  transition: none !important;
+  display: flex;
+  flex-direction: column;
+}
+
+footer > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  color: var(--color-primary);
+}
+
+footer > div > .overline {
+  color: var(--color-primary);
+}
+
+footer > div:not(:first-of-type) {
+  margin-top: 3rem;
+}
+
+a {
+  color: var(--color);
+  margin-top: 0.75rem;
+  max-width: fit-content;
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(300%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.input-popup {
+  position: sticky;
+  background-color: var(--color-secondary-light);
+  bottom: 1rem;
+  height: 13.5rem;
+  margin-bottom: 7.5rem;
+  transition: height ease-in-out 0.3s;
+  overflow: hidden;
+  border-radius: 2rem;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  animation: 0.5s ease-out 0s 1 slideUp;
+  animation-delay: 1s;
+  animation-fill-mode: forwards;
+  transform: translateY(300%);
+}
+.input-popup * {
+  color: var(--color-primary);
+}
+.input-popup.expanded {
+  height: 80vh;
+  overflow-y: auto;
+}
+.input-popup .input-popup-header-icon {
+  transform: rotate(180deg);
+}
+.input-popup.expanded .input-popup-header-icon {
+  transform: rotate(0deg);
+}
+.input-popup-header {
+  padding: 2.5rem;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-secondary-light);
+  border-bottom: 1px solid var(--color-tertiary);
+}
+.input-popup-header-text {
+  flex: 1;
+}
+.input-popup-header-icon {
+  cursor: pointer;
+  background-color: var(--color-secondary);
+  outline: none;
+  color: var(--color-primary);
+  border: 1px solid transparent;
+  border-radius: 10rem;
+  height: 5rem;
+  width: 5rem;
+}
+
+.input-popup-body {
+  padding: 2.5rem 2.5rem;
+  flex: 1;
+}
+
+.input-popup-body .question-container .answers-container .answer {
+  background-color: var(--color-tertiary);
+}
+.input-popup-body .question-container .answers-container .answer.selected {
+  background-color: var(--color-secondary);
+}
+
+.input-popup-submit {
+  padding: 2.5rem;
+  text-align: center;
+  font-size: 2rem;
+  letter-spacing: 0.3rem;
+  background-color: var(--color-secondary);
+  cursor: pointer;
+}
+.input-popup.expanded .input-popup-submit {
+  position: sticky;
+  bottom: 0;
+}
+.input-popup-submit.submitted {
+  background-color: #55c16c;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .answer:hover,
+  .answer.unselected:hover {
+    background-color: var(--color-secondary-light);
+  }
+  .symptom:hover {
+    box-shadow: 0px 0px 100px var(--color-tertiary);
+    background-color: var(--color-primary);
+  }
+  .symptom.at-site:hover {
+    box-shadow: 0px 0px 100px var(--color-dim);
+    background-color: var(--color-secondary-light);
+    color: var(--color-primary);
+  }
+  .symptom.at-site:hover p {
+    color: var(--color-primary);
+  }
+  .input-popup-header-icon:hover {
+    background-color: var(--color-tertiary);
+  }
+  .input-popup-body .question-container .answers-container .answer:hover {
+    background-color: var(--color-bright);
+  }
+  .input-popup-submit:hover {
+    background-color: var(--color-tertiary);
+  }
 }

public/styles/large.css

@@ -1,5 +1,26 @@
 body {
   padding: 15rem;
   padding-top: 10rem;
-  height: calc(100vh - 25rem);
+  height: calc(100vh - 10rem);
+}
+
+.logo {
+  width: 10rem;
+  height: 10rem;
+}
+.symptom {
+  max-width: 25rem;
+  height: 25rem;
+}
+
+footer {
+  padding: 5rem 15rem;
+  width: calc(100vw - 30rem);
+  margin-left: -15rem;
+}
+.input-popup {
+  height: 10rem;
+}
+.input-popup.expanded {
+  height: 50vh;
 }

public/styles/medium.css

@@ -1,26 +1,33 @@
 body {
   padding: 7.5rem;
   padding-top: 5rem;
-  height: calc(100vh - 12.5rem);
+  height: calc(100vh - 5rem);
 }
 
 .logo {
   width: 7.5rem;
   height: 7.5rem;
 }
-.logo-text-container {
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+
+.intro .overline {
+  font-size: 3rem;
 }
-.logo-text-container p:last-of-type {
-  margin-left: 0;
+.intro .subheader {
+  font-size: 4rem;
+}
+
+.overline[data-button] {
+  display: inline-block;
+}
+.overline[data-button]:not(:first-of-type) {
+  margin-left: 1.5rem;
 }
 
 .symptom {
   width: 100%;
   max-width: 20rem;
-  display: inline-block;
+  height: 20rem;
+  display: inline-flex;
   margin-bottom: 0.75rem;
 }
 .symptom-emoji {
@@ -51,7 +58,31 @@ body {
   border-top-right-radius: 1rem;
   border-bottom-right-radius: 1rem;
 }
+
 footer {
   font-size: 1.7rem;
-  padding: 1.5rem;
+  padding: 5rem 7.5rem;
+  width: calc(100vw - 15rem);
+  margin-left: -7.5rem;
+  flex-direction: row;
+}
+footer > div {
+  flex-direction: column;
+  flex: 1;
+}
+
+footer > div:not(:first-of-type) {
+  margin-left: 3rem;
+  margin-top: 0;
+}
+footer > div:last-of-type {
+  flex: 3;
+  align-items: flex-end;
+}
+.input-popup {
+  height: 10rem;
+}
+
+.input-popup.expanded {
+  height: 55vh;
 }

public/styles/small.css

@@ -0,0 +1,7 @@
+.input-popup {
+  height: 10rem;
+}
+
+.input-popup.expanded {
+  height: 85vh;
+}

public/styles/smallmedium.css

@@ -0,0 +1,7 @@
+.input-popup {
+  height: 10rem;
+}
+
+.input-popup.expanded {
+  height: 65vh;
+}

public/styles/variables-dark.css

@@ -0,0 +1,9 @@
+:root {
+  --color-primary: black;
+  --color-secondary: white;
+  --color-secondary-light: rgb(185, 185, 185);
+  --color-tertiary: rgb(105, 105, 105);
+  --color-bright: #636363;
+  --color-dim: #352f2f;
+  font-size: 10px;
+}

public/styles/variables.css

@@ -1,9 +1,9 @@
 :root {
   --color-primary: white;
   --color-secondary: black;
-  --color-secondary-light: rgb(87, 87, 87);
-  --color-tertiary: #f7f6f6;
-  --color-bright: rgb(25, 48, 122);
-  --color-dim: rgb(138, 154, 209);
+  --color-secondary-light: rgb(56, 56, 56);
+  --color-tertiary: rgba(185, 185, 185, 0.459);
+  --color-bright: #575757;
+  --color-dim: #aeadb0;
   font-size: 10px;
 }