diff --git a/.idea/cssdialects.xml b/.idea/cssdialects.xml new file mode 100644 index 0000000..e6ae008 --- /dev/null +++ b/.idea/cssdialects.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/results-summary-component/index.html b/results-summary-component/index.html index 1ed5e58..3958437 100644 --- a/results-summary-component/index.html +++ b/results-summary-component/index.html @@ -3,15 +3,16 @@ - + - + Frontend Mentor | Results summary component @@ -28,7 +29,7 @@
-

Great

+

Great

You scored higher than 65% of the people who have taken these tests.

@@ -66,9 +67,10 @@
- Challenge by Frontend Mentor. - Coded by Your Name Here. + Challenge by Frontend + Mentor. + Coded by mar.
- + diff --git a/results-summary-component/package-lock.json b/results-summary-component/package-lock.json index 5afa5e8..676daa4 100644 --- a/results-summary-component/package-lock.json +++ b/results-summary-component/package-lock.json @@ -7,10 +7,13 @@ "": { "name": "results-summary-component", "version": "0.0.0", + "dependencies": { + "modern-normalize": "^2.0.0" + }, "devDependencies": { "postcss-extend-rule": "^4.0.0", "postcss-include-media": "^1.1.1", - "postcss-nesting": "^11.2.2", + "postcss-nested": "^6.0.1", "vite": "^4.3.2" } }, @@ -445,6 +448,17 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/modern-normalize": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-2.0.0.tgz", + "integrity": "sha512-CxBoEVKh5U4DH3XuNbc5ONLF6dQBc8dSc7pdZ1957FGbIO5JBqGqqchhET9dTexri8/pk9xBL6+5ceOtCIp1QA==", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", @@ -544,24 +558,23 @@ "postcss": "^8.2.8" } }, - "node_modules/postcss-nesting": { - "version": "11.2.2", - "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz", - "integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==", + "node_modules/postcss-nested": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", + "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", "dev": true, "dependencies": { - "@csstools/selector-specificity": "^2.0.0", - "postcss-selector-parser": "^6.0.10" + "postcss-selector-parser": "^6.0.11" }, "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=12.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/csstools" + "url": "https://opencollective.com/postcss/" }, "peerDependencies": { - "postcss": "^8.4" + "postcss": "^8.2.14" } }, "node_modules/postcss-selector-parser": { diff --git a/results-summary-component/package.json b/results-summary-component/package.json index e26caa1..b497c96 100644 --- a/results-summary-component/package.json +++ b/results-summary-component/package.json @@ -11,7 +11,7 @@ "postcss": { "plugins": { "postcss-extend-rule": {}, - "postcss-nesting": {}, + "postcss-nested": {}, "postcss-include-media": { "phone": "375px", "destop": "1440px" @@ -21,7 +21,10 @@ "devDependencies": { "postcss-extend-rule": "^4.0.0", "postcss-include-media": "^1.1.1", - "postcss-nesting": "^11.2.2", + "postcss-nested": "^6.0.1", "vite": "^4.3.2" + }, + "dependencies": { + "modern-normalize": "^2.0.0" } } diff --git a/results-summary-component/style.css b/results-summary-component/style.css index a10482f..1da5f5e 100644 --- a/results-summary-component/style.css +++ b/results-summary-component/style.css @@ -1,3 +1,5 @@ +@import 'modern-normalize'; + @font-face { font-family: 'Hanken Grotesk'; src: url('./assets/fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations'); @@ -16,14 +18,74 @@ --c-bg-bubble-end: hsla(241, 72%, 46%, 0); --c-n-white: hsl(0, 0%, 100%); + --c-n-white-t: hsl(0, 0%, 100%, 0.7); + --c-n-white-xt: hsl(0, 0%, 100%, 0.4); --c-n-pale-blue: hsl(221, 100%, 96%); --c-n-lavender: hsl(241, 100%, 89%); --c-n-gray-blue: hsl(224, 30%, 27%); - --f-size: 18px; + --f-size: 16px; --f-family: 'Hanken Grotesk', serif; --f-normal: 500; --f-bold: 700; --f-extra-bold: 800; } +body { + font-family: var(--f-family); + font-size: var(--f-size); +} + +.ResultsCard { + height: 100vh; + + &__title { + font-size: calc(var(--f-size) + 2px); + + &--summary { + @extend .ResultsCard__title; + margin-bottom: 1.5rem; + color: var(--c-n-white-t); + } + + &--detailed { + @extend .ResultsCard__title; + } + } +} + +.ScoreBubble { + display: inline-block; + padding: 2rem 2.6rem 1.6rem; + background-image: linear-gradient(to bottom, var(--c-bg-bubble-start), var(--c-bg-bubble-end)); + border-radius: 100%; + + &__score { + font-size: 50px; + font-weight: var(--f-extra-bold); + } + + &__max { + margin-top: .3rem; + font-weight: var(--f-bold); + color: var(--c-n-white-xt); + } +} + +.ResultsSummary { + padding: 0.5rem 2.5rem 1.25rem; + color: var(--c-n-white); + text-align: center; + background-image: linear-gradient(to bottom, var(--c-bg-main-start), var(--c-bg-main-end)); + border-radius: 0 0 30px 30px; + + &__info { + color: var(--c-n-white-t); + + &--title { + margin-bottom: -.25rem; + font-size: calc(var(--f-size) + 8px); + color: var(--c-n-white); + } + } +}