From fe2c683f965c499087c2986d4749e2fd8ccd3b2d Mon Sep 17 00:00:00 2001 From: marley Date: Wed, 24 May 2023 09:15:15 -0700 Subject: [PATCH] :lipstick: Done! --- results-summary-component/index.html | 7 --- results-summary-component/style.css | 94 ++++++++++++++++++++++------ 2 files changed, 76 insertions(+), 25 deletions(-) diff --git a/results-summary-component/index.html b/results-summary-component/index.html index 7a94142..61611b6 100644 --- a/results-summary-component/index.html +++ b/results-summary-component/index.html @@ -8,13 +8,6 @@ Frontend Mentor | Results summary component - - - diff --git a/results-summary-component/style.css b/results-summary-component/style.css index 1e2f304..9585675 100644 --- a/results-summary-component/style.css +++ b/results-summary-component/style.css @@ -37,12 +37,32 @@ } body { + width: 100vw; + height: 100vh; font-family: var(--f-family); 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 { 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 { font-size: calc(var(--f-size) + 2px); @@ -52,6 +72,10 @@ body { @extend .ResultsCard__title; margin-bottom: 1.5rem; color: var(--c-n-white-t); + + @include-media('>desktop') { + margin-bottom: 2rem; + } } &--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 { display: inline-block; padding: 2rem 2.6rem 1.6rem; @@ -70,6 +122,10 @@ body { &__score { font-size: 50px; font-weight: var(--f-extra-bold); + + @include-media('>desktop') { + font-size: 75px; + } } &__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 { padding: 1.5rem 2rem; color: var(--c-n-gray-blue); + @include-media('>desktop') { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + &__category { width: 100%; 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)); } } + +.attribution { + font-size: 11px; + text-align: center; + + @include-media('>desktop') { + margin-top: 3rem; + } + + a { color: hsl(228, 45%, 44%); } +}