fixed other uses of height=100vh rather than min-height - including any other issues revealed by doing that, also fixed grid naming issue with base appareal solution

This commit is contained in:
Robert McGovern 2022-10-24 23:25:30 +01:00
parent 67718cea21
commit 611c355399
6 changed files with 115 additions and 97 deletions

View File

@ -1,10 +1,10 @@
/*
/*
* Challenge resolutions:
* 375x667 & 1440x800
* 327x512 - 730x280
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap");
:root {
/* font stuff */
@ -18,16 +18,16 @@
--cornerRadius: 10px;
}
/* Base styling */
/* Base styling */
body {
font-family: 'Manrope', sans-serif;
font-family: "Manrope", sans-serif;
background-color: var(--lightGrayishBlue);
display: flex;
flex-direction: column;
font-size: 13px;
justify-content: center;
height: 100vh;
min-height: 100vh;
}
.articlePreview {
@ -50,7 +50,7 @@ body {
.previewImage > img {
width: 100%;
margin:-5% 0 -14.5% 0%;
margin: -5% 0 -14.5% 0%;
}
.previewBody {
@ -115,7 +115,7 @@ body {
.articleShareButton {
background-color: var(--lightGrayishBlue);
color: #6E8098;
color: #6e8098;
width: 30px;
height: 30px;
@ -152,7 +152,6 @@ body {
padding: 0.75rem 1rem;
top: -60px;
right: -47px;
}
.articleShareButtonTooltip::before {
@ -180,18 +179,18 @@ body {
background: var(--veryDarkGrayishBlue);
}
.articleShareButtonTooltip > p, .articleShareSection > p {
.articleShareButtonTooltip > p,
.articleShareSection > p {
letter-spacing: 5px;
color: var(--grayishBlue);
font-weight: 500;
font-size: 13px;
}
@media screen and (min-width: 650px) {
body {
align-content: center;
align-items: center;
align-items: center;
}
.articlePreview {
@ -199,7 +198,7 @@ body {
width: 50%;
min-width: 600px;
overflow: visible;
}
}
.previewImage {
width: 100%;
@ -207,7 +206,7 @@ body {
}
.previewImage > img {
margin:0;
margin: 0;
height: 105%;
object-fit: cover;
object-position: left;
@ -226,17 +225,22 @@ body {
font-size: 20px;
letter-spacing: 0.25px;
line-height: 28px;
}
.articleSell {
margin-top: 0.5rem;
}
.articleFooter {
padding: 0rem 1.75rem 1.5rem 1.5rem;
}
}
.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
.attribution {
position: absolute;
bottom: 0;
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}

View File

@ -71,7 +71,7 @@
body {
font-family: "Josefin Sans", sans-serif;
height: 100vh;
min-height: 100vh;
display: flex;
justify-content: center;
@ -80,15 +80,17 @@ body {
main {
max-width: 31.25rem;
overflow: hidden;
}
.header {
margin: 1.875rem 2rem 2rem 2rem;
grid-area: "logo";
grid-area: logo;
}
.body {
grid-area: "body";
grid-area: body;
margin: 4rem 2rem 5.75rem 2rem;
text-align: center;
@ -117,7 +119,7 @@ main {
}
.hero-picture {
grid-area: "hero-image";
grid-area: hero-image;
justify-self: end;
margin: 0 auto;
}
@ -221,6 +223,12 @@ main {
white-space: nowrap;
}
@media screen and (max-width: 23.375rem) {
.email-form {
width: unset;
}
}
@media screen and (min-width: 62.5rem) {
:root {
--fs-header: 4rem;
@ -241,7 +249,7 @@ main {
body {
background: var(--gradient-white);
margin: auto;
margin: 0 auto;
}
main {

View File

@ -36,7 +36,11 @@
body {
font-size: 15px;
background-color: var(--veryLightGray);
height: 100vh;
min-height: 100vh;
}
main {
margin-bottom: 5rem;
}
.flexContainer {

View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap");
:root {
font-size: 16px;
@ -10,16 +10,16 @@ body {
background-image: url("../images/bg-desktop.svg");
background-repeat: no-repeat;
/*background-size: contain; */
color: white;
margin: 0;
/* display: flex; */
font-family: 'Open Sans', sans-serif;
font-family: "Open Sans", sans-serif;
}
h1 {
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-weight: 400; /* 400 & 40 are very close*/
font-size: 40px;
}
@ -116,17 +116,22 @@ h1 {
background: rgb(174, 6, 208);
}
.attribution { margin-top: 1rem; font-size: 11px; text-align: center; }
.attribution a { color: hsl(63, 100%, 65%); }
.attribution {
margin-top: 1rem;
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(63, 100%, 65%);
}
/* Formating for Mobile devices. Sample to match is 375z800 */
@media screen and (max-width: 1100px) {
body {
background-image: url("../images/bg-mobile.svg");
background-repeat: no-repeat;
/* background-size: contain; */
color: white;
margin: 0;
padding: 0;
@ -146,41 +151,37 @@ h1 {
.illustration {
max-width: 100%;
max-height: 100vh;
height: auto;
max-height: 100%;
/* height: auto; */
}
.middleSection {
margin: 0;
display: flex;
flex-direction: column;
width: 100%
width: 100%;
}
.siteBlurb {
margin:0;
margin: 0;
margin-top: 0.5rem;
text-align: center;
width: 100%;
/* line-height: 2rem;
font-weight: 400; */
}
.siteBlurb h1 {
margin: 1.625rem 2rem 0rem 2rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.5;
}
.siteBlurb p {
margin:0.9rem 2.25rem;
margin: 0.9rem 2.25rem;
font-size: 1rem;
line-height: 1.5rem;
}
.registerButton {
margin-top: 0.875rem;
background-color: white;
@ -197,21 +198,21 @@ h1 {
border-radius: 32px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/
}
.socialButtonsSection {
/* display: block; */
text-align: center;
margin:0;
margin: 0;
margin-top: 3rem;
}
.socialButtonsSection i {
/* padding: 0.5rem; */
margin-left: 0.375rem;
margin-top: 0.9375rem;
margin-right: 0;
margin-right: 0;
}
.circleIcon {
margin: 0;
padding: 0;
@ -228,5 +229,7 @@ h1 {
font-size: 14px;
}
.attribution { margin: 10px 0;}
}
.attribution {
margin: 10px 0;
}
}

View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");
/* sizes: 1440x720 , 375×667 */
*,
@ -23,14 +23,13 @@
html {
font-size: var(--page-base-font-size);
height: 100%;
}
body {
background-color: var(--dark-cyan);
font-size: var(--default-font-size);
font-weight: 700;
font-family: 'Kumbh Sans', sans-serif;
font-family: "Kumbh Sans", sans-serif;
color: var(--very-dark-desaturated-blue);
display: flex;
@ -39,7 +38,9 @@ body {
align-items: center;
margin: 0 auto;
height: 100%;
min-height: 100vh;
overflow: hidden;
}
.card {
@ -48,7 +49,7 @@ body {
box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835);
border-radius: 15px;
text-align: center;
width: min(87vw, 350px);
}
@ -68,7 +69,7 @@ body {
height: 96px;
border-radius: 50%;
top: calc(100% - 96px/2);
top: calc(100% - 96px / 2);
}
.photo:after {
@ -76,12 +77,12 @@ body {
padding: 5px;
border: 5px solid white;
position: absolute;
content: '';
content: "";
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
}
.nameAndAge {
margin-top: 4.5rem;
@ -89,7 +90,8 @@ body {
padding-bottom: 0.25rem;
}
.name, .stat {
.name,
.stat {
font-weight: bold;
}
@ -129,10 +131,11 @@ body {
padding-bottom: 0.1875rem;
}
.topCircle, .bottomCircle {
.topCircle,
.bottomCircle {
position: absolute;
width: 100vw;
height: 100vh;
width: 100%;
min-height: 100%;
background-size: auto;
transform: translate(-50%, -50%);
z-index: -1;
@ -158,9 +161,11 @@ footer {
bottom: 1rem;
}
.attribution {
font-size: 11px;
text-align: center;
.attribution {
font-size: 11px;
text-align: center;
bottom: 1rem;
}
.attribution a { color: hsl(228, 45%, 44%); }
.attribution a {
color: hsl(228, 45%, 44%);
}

View File

@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
/* -- Basic Styling -- */
@ -15,7 +15,6 @@
--site-grayish-blue: hsl(218, 22%, 67%);
--box-border-radius: 8px;
font-weight: 400;
}
* {
@ -29,9 +28,9 @@
body {
/* per the style guide, the body copy is 16px */
font-size: 16px;
font-family: 'Karla', sans-serif;
font-family: "Karla", sans-serif;
width: 85vw;
height: 100vh;
min-height: 100vh;
margin: 0 auto;
display: flex;
@ -44,7 +43,7 @@ body {
}
.container {
box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5);
box-shadow: 2px 10px 25px -12px rgba(0, 0, 0, 0.5);
}
.box {
@ -59,7 +58,6 @@ body {
color: white;
font-size: 0.95rem;
/* font-weight: 700; */
}
/* Specific stylings */
@ -74,7 +72,7 @@ body {
.topRow .heading {
color: var(--site-cyan);
font-size: 1.20rem;
font-size: 1.2rem;
}
.quickSell {
@ -91,10 +89,9 @@ body {
.bottomRow {
display: flex;
flex-direction: column;
}
.pricingBox {
background-color: var(--site-cyan);
background-color: var(--site-cyan);
}
.priceRow {
display: flex;
@ -104,7 +101,6 @@ body {
.price {
color: white;
font-size: 1.5rem;
}
.pricePeriod {
color: var(--site-greener-cyan);
@ -123,21 +119,18 @@ body {
color: white;
/* width: 85%; */
/* height: 20%; */
padding: 13px 3.25rem;
padding: 13px 3.25rem;
/* margin-left: auto; */
/* margin-right: auto; */
/* align-self: center; */
justify-content: center;
border-radius: 5px;
font-weight: 700;
}
.whyUsBox {
background-color: var(--site-greener-cyan);
border-bottom-left-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
}
.blurb {
margin-top: 0.75rem;
@ -158,15 +151,19 @@ footer {
}
/* Feel free to remove these styles or customise in your own stylesheet 👍 */
.attribution { font-size: 11px; text-align: center;
/* visibility: hidden; */
}
.attribution a { color: hsl(228, 45%, 44%); }
.attribution {
font-size: 11px;
text-align: center;
/* visibility: hidden; */
}
.attribution a {
color: hsl(228, 45%, 44%);
}
/**
/**
* * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
* TODO: Tweak transition point later
*/
*/
@media screen and (max-width: 500px) {
.topRow {
}
@ -189,7 +186,7 @@ footer {
}
.quickSell {
margin-top: 1.20rem;
margin-top: 1.2rem;
font-size: 0.8rem;
}
@ -220,22 +217,20 @@ footer {
}
.signupButton {
margin-top: 1.5rem;
padding: 13px 3.25rem;
padding: 13px 3.25rem;
}
.whyUsBox {
}
.blurb {
margin-top: 0.75rem;
}
.blurb .unstyledList {
font-size: 14px;
}
footer {
}
}
@media screen and (min-width: 500px) and (max-width: 800px) {
@ -245,7 +240,7 @@ footer {
}
.signupButton {
font-size: 0.90rem;
font-size: 0.9rem;
}
}
@ -261,7 +256,6 @@ footer {
.pricingBox {
width: 50%;
border-bottom-left-radius: var(--box-border-radius);
}
.signupButton {
}
@ -269,4 +263,4 @@ footer {
width: 50%;
border-bottom-left-radius: 0px;
}
}
}