Close as I'm going for mobile

This commit is contained in:
Robert McGovern 2020-09-23 14:59:24 +01:00
parent c2a59f697f
commit 2cd47ac19a
4 changed files with 175 additions and 41 deletions

View File

@ -1,26 +1,36 @@
@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 -- */
:root { :root {
/* setting base to 20px to make my life nicer working with rem */ /* setting base to 20px to make my life nicer working with rem */
font-size: 20px; font-size: 20px;
/* primary site colours */ /* primary site colours */
--site-cyan: hsl(179, 62%, 43%); --site-cyan: hsl(179, 62%, 43%);
--site-bright-yellow: hsl(71, 73%, 54%); --site-bright-yellow: hsl(71, 73%, 54%);
/* secondary colours, not defined in style guide */
--site-greener-cyan: rgb(0, 195, 192);
/* neutral site colours */ /* neutral site colours */
--site-light-gray: hsl(204, 43%, 93%); --site-light-gray: hsl(204, 43%, 93%);
--site-grayish-blue: hsl(218, 22%, 67%); --site-grayish-blue: hsl(218, 22%, 67%);
--box-border-radius: 8px;
font-weight: 400;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
} }
/* -- General Styling -- */
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: 90vw; width: 85vw;
height: 100vh; height: 100vh;
margin: 0 auto; margin: 0 auto;
@ -33,72 +43,124 @@ body {
background-color: var(--site-light-gray); background-color: var(--site-light-gray);
} }
.box { .container {
box-sizing: border-box; box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5);
padding-left: 0.8rem;
padding-right: 0.8rem;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
} }
.topRow { .box {
padding-top: 1rem; padding-left: 2rem;
padding-bottom: 1rem; padding-right: 2rem;
background-color: white; padding-top: 2rem;
padding-bottom: 2rem;
} }
.heading { .heading {
/* margin-top: 1.5rem; */ /* margin-top: 1.5rem; */
color: white; color: white;
font-size: 0.95rem;
/* font-weight: 700; */
}
/* Specific stylings */
.topRow {
padding-top: 1.75rem;
padding-bottom: 2.4rem;
background-color: white;
border-top-left-radius: var(--box-border-radius);
border-top-right-radius: var(--box-border-radius);
} }
.topRow .heading { .topRow .heading {
color: var(--site-cyan); color: var(--site-cyan);
font-size: 1.20rem;
} }
.quickSell { .quickSell {
margin-top: 0.7rem;
color: var(--site-bright-yellow); color: var(--site-bright-yellow);
font-size: 0.9rem;
} }
.sellBlurb { .sellBlurb {
color: var(--site-light-gray); margin-top: 0.75rem;
color: gray;
font-size: 0.75rem;
line-height: 1.2rem;
} }
.bottomRow { .bottomRow {
display: flex;
flex-direction: column; flex-direction: column;
display: flex;
} }
.pricingBox { .pricingBox {
background-color: var(--site-cyan); background-color: var(--site-cyan);
} }
.priceRow { .priceRow {
display: flex; display: flex;
align-items: center;
margin-top: 1rem;
} }
.price { .price {
color: white; color: white;
font-size: 1.5rem;
} }
.pricePeriod { .pricePeriod {
color: var(--site-cyan) color: var(--site-greener-cyan);
font-size: 1rem;
margin-left: 0.5rem;
} }
.sell { .sell {
margin-top: 0.5rem;
color: white; color: white;
} }
.signupButton { .signupButton {
text-align: center;
display: block;
margin-top: 1.5rem;
background-color: var(--site-bright-yellow); background-color: var(--site-bright-yellow);
color: white; color: white;
/* width: 85%; */
/* height: 20%; */
padding: 13px 3.25rem;
/* margin-left: auto; */
/* margin-right: auto; */
/* align-self: center; */
justify-content: center;
border-radius: 5px;
font-weight: 700;
} }
.whyUsBox { .whyUsBox {
background-color: rgb(0, 195, 192); background-color: var(--site-greener-cyan);
border-bottom-left-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
} }
.blurb { .blurb {
margin-top: 0.75rem;
} }
.blurb .unstyledList { .blurb .unstyledList {
list-style: none; list-style: none;
font-size: 10px; font-size: 16px;
color: var(--site-light-gray) color: var(--site-light-gray);
line-height: 1rem;
}
footer {
text-align: center;
position: fixed;
bottom: 0;
/* margin-top: auto; */
} }
/* 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 { font-size: 11px; text-align: center;
/* visibility: hidden; */
}
.attribution a { color: hsl(228, 45%, 44%); } .attribution a { color: hsl(228, 45%, 44%); }
/** /**
@ -106,13 +168,84 @@ body {
* TODO: Tweak transition point later * TODO: Tweak transition point later
*/ */
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.topRow {
}
.topRow .heading {
margin-top: 0.4rem;
font-size: 1.05rem;
}
.box {
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.topRow.box {
padding-top: 0.6rem;
padding-bottom: 1.95rem;
}
.quickSell {
margin-top: 1.20rem;
font-size: 0.8rem;
}
.sellBlurb {
margin-top: 0.9rem;
font-size: 0.65rem;
}
.pricingBox.box {
padding-bottom: 1.25rem;
}
.pricingBox .heading {
font-size: 0.9rem;
}
.priceRow {
display: flex;
align-items: center;
margin-top: 0.8rem;
}
.price {
}
.pricePeriod {
}
.sell {
margin-top: 0.35rem;
}
.signupButton {
margin-top: 1.5rem;
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) { @media screen and (min-width: 500px) and (max-width: 800px) {
body { body {
/* roughly half way, arbitrary for the moment */ /* roughly half way, arbitrary for the moment */
width: 78vw; width: 65vw;
}
.signupButton {
font-size: 0.90rem;
} }
} }
@ -121,34 +254,19 @@ body {
width: 45vw; width: 45vw;
} }
.topRow {
}
.heading {
}
.quickSell {
}
.sellBlurb {
}
.bottomRow { .bottomRow {
flex-direction: row; flex-direction: row;
/* flex: 0 50%; */ /* flex: 0 50%; */
} }
.pricingBox { .pricingBox {
width: 50%; width: 50%;
} border-bottom-left-radius: var(--box-border-radius);
.priceRow {
}
.price {
}
.pricePeriod {
}
.sell {
} }
.signupButton { .signupButton {
} }
.whyUsBox { .whyUsBox {
width: 50%; width: 50%;
} border-bottom-left-radius: 0px;
.blurb {
} }
} }

View File

@ -10,7 +10,7 @@
<title>Frontend Mentor | Single Price Grid Component</title> <title>Frontend Mentor | Single Price Grid Component</title>
</head> </head>
<body> <body>
<main> <main class="container">
<div class="topRow box"> <div class="topRow box">
<div class="heading"> <div class="heading">
Join our community Join our community
@ -60,11 +60,11 @@
</div> </div>
</div> </div>
</main> </main>
<footer> <!-- <footer>
<p class="attribution"> <p 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>.
Coded by <a href="emailto:rob@tarasis.net">Robert McGovern</a>. Coded by <a href="emailto:rob@tarasis.net">Robert McGovern</a>.
</p> </p>
</footer> </footer> -->
</body> </body>
</html> </html>

View File

@ -19,5 +19,16 @@ Continued basic styling. Used a color picker to find (roughly) what the other to
Stopped for lunch & roleplaying. Stopped for lunch & roleplaying.
... cue next day ....
read a little.
Question struck me, is it better to use `margin-top` or `bottom` when it comes to layout between elements. Lead me to this article which says `margin-top` https://matthewjamestaylor.com/css-margin-top-vs-bottom useful article but basically **"Always use top margin. The reason is related to the 'C' in CSS"**. Also in article **"Set default styles for webpage modules then override rules depending on proceeding context."** which seems logical to me and is what I'm trying to do. Set basic css first, See cominalities between the mobile and desktop designs. Then do mobile. Then make last adjustments for desktop.
2020-09-23
Many Days off - no drive, energy, or anything.
Went to start today but ended up phaffing with other things (like not finding the right VSCode theme to use, or the right Fish theme, or or or or or)
As it stands my attempt is roughly there. Desktop just needs some nudging for alignments to be good. Need to figure out the shadow used. The mobile version is a bit further away. Mine is probably 200 pixels taller.
Which is **hilarious** considering I started with mobile first and haven't done any tweaking for desktop yet!

View File

@ -47,3 +47,8 @@ Think of it as a combination of learning, and tips and tricks. They will start u
* https://thoughtbot.com/blog/transitions-and-transforms * https://thoughtbot.com/blog/transitions-and-transforms
* https://www.sitepoint.com/hide-elements-in-css/ * https://www.sitepoint.com/hide-elements-in-css/
* https://www.markheath.net/post/font-awesome-circle-background * https://www.markheath.net/post/font-awesome-circle-background
* https://matthewjamestaylor.com/responsive-banner-ads
* https://uxengineer.com/padding-vs-margin/
* http://specificity.keegan.st/
src="blob:https://player.vimeo.com/ff6607bc-2a8d-45ce-9cea-b4a5ddc01ccb"