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:
parent
67718cea21
commit
611c355399
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,11 @@
|
|||
body {
|
||||
font-size: 15px;
|
||||
background-color: var(--veryLightGray);
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.flexContainer {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue