diff --git a/results-summary-component/index.html b/results-summary-component/index.html index 3958437..7a94142 100644 --- a/results-summary-component/index.html +++ b/results-summary-component/index.html @@ -37,25 +37,37 @@
Summary
-
+
+ lightning bolt icon Reaction 80 / 100
-
+
+ brain icon Memory 92 / 100
-
+
+ speech bubble icon Verbal 61 / 100
-
+
+ eye icon Visual 72 / 100 diff --git a/results-summary-component/package-lock.json b/results-summary-component/package-lock.json index 676daa4..16f6064 100644 --- a/results-summary-component/package-lock.json +++ b/results-summary-component/package-lock.json @@ -14,6 +14,7 @@ "postcss-extend-rule": "^4.0.0", "postcss-include-media": "^1.1.1", "postcss-nested": "^6.0.1", + "postcss-nested-ancestors": "^3.0.0", "vite": "^4.3.2" } }, @@ -434,6 +435,18 @@ "@esbuild/win32-x64": "0.17.19" } }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -577,6 +590,28 @@ "postcss": "^8.2.14" } }, + "node_modules/postcss-nested-ancestors": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-nested-ancestors/-/postcss-nested-ancestors-3.0.0.tgz", + "integrity": "sha512-6U/LLSSaEDWIaBfi7/1PZuRkGXXllndiit2BTFu6u5i3QxAzBjxMKbPDyLCg/DtzhON0rKnfvGQ+UEd7se2Pnw==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^4.0.0", + "postcss-resolve-nested-selector": "^0.1.1" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-resolve-nested-selector": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", + "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==", + "dev": true + }, "node_modules/postcss-selector-parser": { "version": "6.0.13", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", diff --git a/results-summary-component/package.json b/results-summary-component/package.json index b497c96..57e0166 100644 --- a/results-summary-component/package.json +++ b/results-summary-component/package.json @@ -11,6 +11,7 @@ "postcss": { "plugins": { "postcss-extend-rule": {}, + "postcss-nested-ancestors": {}, "postcss-nested": {}, "postcss-include-media": { "phone": "375px", @@ -22,6 +23,7 @@ "postcss-extend-rule": "^4.0.0", "postcss-include-media": "^1.1.1", "postcss-nested": "^6.0.1", + "postcss-nested-ancestors": "^3.0.0", "vite": "^4.3.2" }, "dependencies": { diff --git a/results-summary-component/style.css b/results-summary-component/style.css index 1da5f5e..1e2f304 100644 --- a/results-summary-component/style.css +++ b/results-summary-component/style.css @@ -8,9 +8,13 @@ :root { --c-red: hsl(0, 100%, 67%); + --c-red-t: hsl(0, 100%, 67%, 0.1); --c-yellow: hsl(39, 100%, 56%); + --c-yellow-t: hsl(39, 100%, 56%, 0.1); --c-green: hsl(166, 100%, 37%); + --c-green-t: hsl(166, 100%, 37%, 0.1); --c-blue: hsl(234, 85%, 45%); + --c-blue-t: hsl(234, 85%, 45%, 0.1); --c-bg-main-start: hsl(252, 100%, 67%); --c-bg-main-end: hsl(241, 81%, 54%); @@ -23,6 +27,7 @@ --c-n-pale-blue: hsl(221, 100%, 96%); --c-n-lavender: hsl(241, 100%, 89%); --c-n-gray-blue: hsl(224, 30%, 27%); + --c-n-gray-blue-t: hsl(224, 30%, 27%, 0.5); --f-size: 16px; --f-family: 'Hanken Grotesk', serif; @@ -41,6 +46,7 @@ body { &__title { font-size: calc(var(--f-size) + 2px); + font-weight: var(--f-bold); &--summary { @extend .ResultsCard__title; @@ -50,6 +56,7 @@ body { &--detailed { @extend .ResultsCard__title; + margin-bottom: 1.5rem; } } } @@ -89,3 +96,74 @@ body { } } } + +.ResultsDetailed { + padding: 1.5rem 2rem; + color: var(--c-n-gray-blue); + + &__category { + width: 100%; + margin: 1.3rem 0; + } +} + +.CategoryScore { + display: flex; + padding: 1.25rem 1rem; + border-radius: 10px; + + &__icon { + margin-right: .75rem; + } + + &__score { + margin-right: .5rem; + margin-left: auto; + font-weight: var(--f-bold); + color: var(--c-n-gray-blue); + } + + &__max { + font-weight: var(--f-bold); + color: var(--c-n-gray-blue-t); + } + + &--reaction { + @extend .CategoryScore; + color: var(--c-red); + background-color: var(--c-red-t); + } + + &--memory { + @extend .CategoryScore; + color: var(--c-yellow); + background-color: var(--c-yellow-t); + } + + &--verbal { + @extend .CategoryScore; + color: var(--c-green); + background-color: var(--c-green-t); + } + + &--visual { + @extend .CategoryScore; + color: var(--c-blue); + background-color: var(--c-blue-t); + } +} + +.Button { + width: 100%; + padding: 1rem; + font-size: calc(var(--f-size) + 2px); + font-weight: var(--f-bold); + color: var(--c-n-white); + background-color: var(--c-n-gray-blue); + border: none; + border-radius: 30px; + + &:hover { + background-image: linear-gradient(to bottom, var(--c-bg-main-start), var(--c-bg-main-end)); + } +}