💄 📱 Summary section done.
This commit is contained in:
marley
parent
acd47c5c15
commit
d02beb715e
5 changed files with 105 additions and 19 deletions
6
.idea/cssdialects.xml
Normal file
6
.idea/cssdialects.xml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="CssDialectMappings">
|
||||
<file url="file://$PROJECT_DIR$/results-summary-component/style.css" dialect="PostCSS" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -3,15 +3,16 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- displays site properly based on user's device -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
|
||||
<link href="./assets/images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
|
||||
|
||||
<title>Frontend Mentor | Results summary component</title>
|
||||
|
||||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||
<style>
|
||||
.attribution { font-size: 11px; text-align: center; }
|
||||
|
||||
.attribution a { color: hsl(228, 45%, 44%); }
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -28,7 +29,7 @@
|
|||
</div>
|
||||
|
||||
<div class="ResultsSummary__info">
|
||||
<h3 class="ResultsSummary__title--info">Great</h3>
|
||||
<h3 class="ResultsSummary__info--title">Great</h3>
|
||||
<p>You scored higher than 65% of the people who have taken these tests.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,9 +67,10 @@
|
|||
</div>
|
||||
|
||||
<div class="attribution">
|
||||
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
||||
Coded by <a href="#">Your Name Here</a>.
|
||||
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend
|
||||
Mentor</a>.
|
||||
Coded by <a href="https://punkfairie.net/">mar</a>.
|
||||
</div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
<script src="./main.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
33
results-summary-component/package-lock.json
generated
33
results-summary-component/package-lock.json
generated
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue