punkfairie/frontend-mentor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 📱 Details done.

Browse source
This commit is contained in:
marley 2023-05-24 08:50:09 -07:00
parent d02beb715e
commit 242d1000c6
4 changed files with 131 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
results-summary-component/index.html
View file

@ -37,25 +37,37 @@
<div class="Results__section ResultsDetailed">
<div class="ResultsCard__title--detailed">Summary</div>
<div class="ResultsDetailed__category CategoryScore">
<div class="ResultsDetailed__category CategoryScore--reaction">
<img
alt="lightning bolt icon"
class="CategoryScore__icon"
src="./assets/images/icon-reaction.svg"
>
<span class="CategoryScore__title">Reaction</span>
<span class="CategoryScore__score">80</span>
<span class="CategoryScore__max">/ 100</span>
</div>
<div class="ResultsDetailed__category CategoryScore">
<div class="ResultsDetailed__category CategoryScore--memory">
<img alt="brain icon" class="CategoryScore__icon" src="./assets/images/icon-memory.svg">
<span class="CategoryScore__title">Memory</span>
<span class="CategoryScore__score">92</span>
<span class="CategoryScore__max">/ 100</span>
</div>
<div class="ResultsDetailed__category CategoryScore">
<div class="ResultsDetailed__category CategoryScore--verbal">
<img
alt="speech bubble icon"
class="CategoryScore__icon"
src="./assets/images/icon-verbal.svg"
>
<span class="CategoryScore__title">Verbal</span>
<span class="CategoryScore__score">61</span>
<span class="CategoryScore__max">/ 100</span>
</div>
<div class="ResultsDetailed__category CategoryScore">
<div class="ResultsDetailed__category CategoryScore--visual">
<img alt="eye icon" class="CategoryScore__icon" src="./assets/images/icon-visual.svg">
<span class="CategoryScore__title">Visual</span>
<span class="CategoryScore__score">72</span>
<span class="CategoryScore__max">/ 100</span>

35
results-summary-component/package-lock.json generated
View file

@ -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",

2
results-summary-component/package.json
View file

@ -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": {

78
results-summary-component/style.css
View file

@ -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));
}
}