tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
projects/FrontendMentor/newbie/article-preview-component/css/style.css
View File

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

18
projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css
View File

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

6
projects/FrontendMentor/newbie/four-card-feature-section/css/style.css
View File

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

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

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

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