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

💄 Done!

Browse source
This commit is contained in:
marley 2023-05-24 09:15:15 -07:00
parent 242d1000c6
commit fe2c683f96
2 changed files with 76 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,13 +8,6 @@
<link href="./assets/images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"> <link href="./assets/images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<title>Frontend Mentor | Results summary component</title> <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> </head>
<body> <body>

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

@ -37,12 +37,32 @@
} }
body { body {
width: 100vw;
height: 100vh;
font-family: var(--f-family); font-family: var(--f-family);
font-size: var(--f-size); font-size: var(--f-size);
background-color: var(--c-n-pale-blue);
@include-media('>desktop') {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
} }
.ResultsCard { .ResultsCard {
height: 100vh; height: 100vh;
background-color: var(--c-n-white);
@include-media('>desktop') {
height: fit-content;
width: 50%;
display: grid;
grid-template: 1fr / 1fr 1fr;
box-shadow: 0 0 60px var(--c-n-lavender);
border-radius: 30px;
}
&__title { &__title {
font-size: calc(var(--f-size) + 2px); font-size: calc(var(--f-size) + 2px);
@ -52,6 +72,10 @@ body {
@extend .ResultsCard__title; @extend .ResultsCard__title;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: var(--c-n-white-t); color: var(--c-n-white-t);
@include-media('>desktop') {
margin-bottom: 2rem;
}
} }
&--detailed { &--detailed {
@ -61,6 +85,34 @@ body {
} }
} }
.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;
@include-media('>desktop') {
grid-column: 1 / 2;
grid-row: 1 / 2;
border-radius: 30px;
}
&__info {
color: var(--c-n-white-t);
@include-media('>desktop') {
margin-top: 3rem;
}
&--title {
margin-bottom: -.25rem;
font-size: calc(var(--f-size) + 8px);
color: var(--c-n-white);
}
}
}
.ScoreBubble { .ScoreBubble {
display: inline-block; display: inline-block;
padding: 2rem 2.6rem 1.6rem; padding: 2rem 2.6rem 1.6rem;
@ -70,6 +122,10 @@ body {
&__score { &__score {
font-size: 50px; font-size: 50px;
font-weight: var(--f-extra-bold); font-weight: var(--f-extra-bold);
@include-media('>desktop') {
font-size: 75px;
}
} }
&__max { &__max {
@ -79,31 +135,22 @@ body {
} }
} }
.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);
}
}
}
.ResultsDetailed { .ResultsDetailed {
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
color: var(--c-n-gray-blue); color: var(--c-n-gray-blue);
@include-media('>desktop') {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
&__category { &__category {
width: 100%; width: 100%;
margin: 1.3rem 0; margin: 1.3rem 0;
@include-media('>desktop') {
margin: 1rem 0;
}
} }
} }
@ -167,3 +214,14 @@ body {
background-image: linear-gradient(to bottom, var(--c-bg-main-start), var(--c-bg-main-end)); background-image: linear-gradient(to bottom, var(--c-bg-main-start), var(--c-bg-main-end));
} }
} }
.attribution {
font-size: 11px;
text-align: center;
@include-media('>desktop') {
margin-top: 3rem;
}
a { color: hsl(228, 45%, 44%); }
}