finished, or near finished mobile version of FAQ challenge (yes wrong branch, oops)

This commit is contained in:
Robert McGovern 2022-09-15 01:36:33 +01:00
parent da6a2fd540
commit 5639e33439
2 changed files with 199 additions and 77 deletions

View File

@ -25,9 +25,16 @@ Info:
--clr-test: rgb(255, 111, 000); --clr-test: rgb(255, 111, 000);
/* Fonts */ /* Fonts */
--fs-12px: 0.75rem; --fs-header: 2rem;
--fs-question: 0.8125rem;
--fs-answer: 0.75rem;
--fw-400: 400; --fw-400: 400;
--fw-700: 700; --fw-700: 700;
--lh-header: 2.5rem;
--lh-question: 1rem;
--lh-answer: 1.125rem;
} }
*, *,
@ -37,12 +44,16 @@ Info:
} }
html, html,
body, body {
main { /* min-width: 320px; */
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;
} }
img {
width: 100%;
}
/* Base page styling */ /* Base page styling */
body { body {
@ -51,12 +62,9 @@ body {
var(--col-violet-soft) 0%, var(--col-violet-soft) 0%,
var(--col-blue-soft) 100% var(--col-blue-soft) 100%
); );
}
main {
display: grid; display: grid;
align-content: center; place-items: center;
justify-items: center;
} }
.card { .card {
@ -68,28 +76,77 @@ main {
width: 87%; width: 87%;
border-radius: 23px; border-radius: 23px;
background-image: var(--card-image); background-image: var(--card-image);
max-width: 920px;
} }
.card__header { .card__header {
text-align: center; text-align: center;
font-weight: var(--fw-700); font-weight: var(--fw-700);
font-size: 2rem; font-size: var(--fs-header);
line-height: 2.5rem; line-height: var(--lh-header);
margin-bottom: 2.375rem;
}
.card__header_thing {
/* position: relative; */
margin-bottom: 40px;
height: 90px;
} }
.card__header_image { .card__header_image {
position: absolute; position: relative;
background-size: contain; background-size: contain;
content: url(../images/illustration-woman-online-mobile.svg); /* background-image: url(../images/illustration-woman-online-mobile.svg),
url(../images/bg-pattern-mobile.svg);
background-position: center, bottom center;
background-repeat: no-repeat; */
/* margin: 0 auto; */ /* margin: 0 auto; */
width: 237px; /* width: 237px; */
width: 80%;
height: 180px; height: 180px;
left: calc(50% - calc(237px / 2) - 10px); /* left: calc(50% - calc(237px / 2) - 10px); */
top: -20px; /* left: calc(50% - calc(80% / 2) - 10px); */
/* top: calc(50% - calc(80% / 2) - 10px); */
/* : calc(100% - 237px/2); */ /* : calc(100% - 237px/2); */
/* left: 40px; */ /* left: 40px; */
} }
.card__header_image.desktop {
display: none;
}
.card__header_image.mobile {
display: contents;
margin: 0 auto;
}
.card__header_image.mobile > img {
/* width: 72.5%; */
}
.woman,
.box,
.background {
position: absolute;
}
.woman {
top: -95px;
left: calc((50% - 118.5px) - 10px);
width: 73%;
position: relative;
}
.background {
left: calc(50% - 118.5px + 15px);
width: 66%;
top: -170px;
position: relative;
}
.card__header_image_shadow { .card__header_image_shadow {
background-image: url(../images/bg-pattern-mobile.svg); background-image: url(../images/bg-pattern-mobile.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -97,41 +154,37 @@ main {
border: 1px solid red; border: 1px solid red;
} }
@media screen and (min-width: 376px) {
.card {
flex-direction: row;
}
.card__header {
text-align: start;
}
}
.faq { .faq {
margin-top: 6.125rem;
/* border: 1px red solid; */ /* border: 1px red solid; */
color: var(--col-red-soft); color: var(--col-red-soft);
/* margin: 6.125rem 1.5rem 3rem; */
margin: 0 1.5rem 3rem;
} }
/* FAQ Section */ /* FAQ Section */
details { details {
font-size: var(--fs-12px); font-size: var(--fs-answer);
line-height: 1.125rem; line-height: 1.125rem;
padding: 1rem 0 1rem 1.5rem; padding: 1rem 0;
color: var(--col-blue-dark-grayish); color: var(--col-blue-dark-grayish);
border-bottom: 1px solid var(--col-blue-light-grayish); border-bottom: 1px solid var(--col-blue-light-grayish);
border-width: 75%; border-width: 75%;
} }
h1 + details {
padding: 0 0 1rem 0;
}
summary { summary {
font-size: 0.8125rem; font-size: var(--fs-question);
font-weight: var(--fw-400); font-weight: var(--fw-400);
line-height: 1rem; line-height: var(--lh-question);
color: var(--col-blue-very-dark-grayish); color: var(--col-blue-very-dark-grayish);
/* padding: 1rem 1.5rem; */ /* padding: 1rem 1.5rem; */
margin-bottom: 1rem; /* margin-bottom: 1rem; */
outline: none; outline: none;
/* border-radius: 0.25rem; */ /* border-radius: 0.25rem; */
text-align: left; text-align: left;
@ -147,7 +200,7 @@ summary:hover {
details > summary::after { details > summary::after {
position: absolute; position: absolute;
content: url(../images/icon-arrow-down.svg); content: url(../images/icon-arrow-down.svg);
right: 20px; right: 0px;
} }
details[open] > summary { details[open] > summary {
font-weight: var(--fw-700); font-weight: var(--fw-700);
@ -161,6 +214,7 @@ details > summary::-webkit-details-marker {
display: none; display: none;
} }
/* ! add check for prefers motion */
details[open] summary ~ * { details[open] summary ~ * {
animation: sweep 0.5s ease-in-out; animation: sweep 0.5s ease-in-out;
} }
@ -174,3 +228,62 @@ details[open] summary ~ * {
margin-top: 0px; margin-top: 0px;
} }
} }
.faq__content {
width: 90%;
margin-top: 0.6875rem;
}
@media screen and (min-width: 600px) {
:root {
--fs-question: 0.875rem;
--lh-question: 1.0625rem;
}
.card {
flex-direction: row;
}
.card__header_thing {
display: grid;
align-content: center;
}
.card__header_image {
/* content: url(../images/illustration-woman-online-desktop.svg); */
top: unset;
position: unset;
width: 100%;
height: unset;
position: relative;
margin-bottom: unset;
}
.woman,
.box,
.background {
position: absolute;
}
.card__header_image.mobile {
display: none;
}
.card__header_image.desktop {
display: contents;
}
article {
width: 45%;
}
.faq {
margin-left: 5.4375rem;
}
.faq__content {
width: 95%;
}
}

View File

@ -25,17 +25,26 @@
</head> </head>
<body> <body>
<main> <!-- <main> -->
<div class="card"> <div class="card">
<!-- <header class="card__header"> --> <!-- <header class="card__header"> -->
<div class="card__header_thing"> <div class="card__header_thing">
<div class="card__header_image"></div> <div class="card__header_image desktop">
<div class="card__header_image_shadow"></div> <img class="woman" src="./images/illustration-woman-online-desktop.svg" alt="">
<img class="box" src="./images/bg-pattern-desktop.svg" alt="">
<img class="background" src="./images/illustration-box-desktop.svg" alt="">
</div>
<div class="card__header_image mobile">
<img class="woman" src="./images/illustration-woman-online-mobile.svg" alt="">
<img class="background" src="./images/bg-pattern-mobile.svg" alt="">
</div>
<!-- <div class="card__header_image_shadow"></div> -->
</div> </div>
<!-- </header> --> <!-- </header> -->
<article> <article>
<div class="faq"> <div class="faq">
<h2 class="card__header">FAQ</h2> <h1 class="card__header">FAQ</h1>
<details> <details>
<summary>How many team members can I invite?</summary> <summary>How many team members can I invite?</summary>
<div class="faq__content"> <div class="faq__content">
@ -70,7 +79,7 @@
</div> </div>
</article> </article>
</div> </div>
</main> <!-- </main> -->
<!-- <div class="attribution"> <!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.