Close as I'm going for mobile
This commit is contained in:
parent
c2a59f697f
commit
2cd47ac19a
|
|
@ -1,26 +1,36 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
|
||||
|
||||
/* -- Basic Styling -- */
|
||||
|
||||
:root {
|
||||
/* setting base to 20px to make my life nicer working with rem */
|
||||
font-size: 20px;
|
||||
/* primary site colours */
|
||||
--site-cyan: hsl(179, 62%, 43%);
|
||||
--site-bright-yellow: hsl(71, 73%, 54%);
|
||||
/* secondary colours, not defined in style guide */
|
||||
--site-greener-cyan: rgb(0, 195, 192);
|
||||
/* neutral site colours */
|
||||
--site-light-gray: hsl(204, 43%, 93%);
|
||||
--site-grayish-blue: hsl(218, 22%, 67%);
|
||||
--box-border-radius: 8px;
|
||||
font-weight: 400;
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* -- General Styling -- */
|
||||
|
||||
body {
|
||||
/* per the style guide, the body copy is 16px */
|
||||
font-size: 16px;
|
||||
font-family: 'Karla', sans-serif;
|
||||
width: 90vw;
|
||||
width: 85vw;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
|
||||
|
|
@ -33,72 +43,124 @@ body {
|
|||
background-color: var(--site-light-gray);
|
||||
}
|
||||
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.8rem;
|
||||
padding-right: 0.8rem;
|
||||
padding-top: 0.7rem;
|
||||
padding-bottom: 0.7rem;
|
||||
.container {
|
||||
box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.topRow {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
background-color: white;
|
||||
.box {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
/* margin-top: 1.5rem; */
|
||||
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 {
|
||||
color: var(--site-cyan);
|
||||
font-size: 1.20rem;
|
||||
}
|
||||
|
||||
.quickSell {
|
||||
margin-top: 0.7rem;
|
||||
color: var(--site-bright-yellow);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.sellBlurb {
|
||||
color: var(--site-light-gray);
|
||||
margin-top: 0.75rem;
|
||||
color: gray;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
.bottomRow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
.pricingBox {
|
||||
background-color: var(--site-cyan);
|
||||
}
|
||||
.priceRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.price {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
|
||||
}
|
||||
.pricePeriod {
|
||||
color: var(--site-cyan)
|
||||
color: var(--site-greener-cyan);
|
||||
font-size: 1rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.sell {
|
||||
margin-top: 0.5rem;
|
||||
color: white;
|
||||
}
|
||||
.signupButton {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 1.5rem;
|
||||
background-color: var(--site-bright-yellow);
|
||||
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 {
|
||||
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 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.blurb .unstyledList {
|
||||
list-style: none;
|
||||
font-size: 10px;
|
||||
color: var(--site-light-gray)
|
||||
font-size: 16px;
|
||||
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 👍 */
|
||||
.attribution { font-size: 11px; text-align: center; }
|
||||
.attribution { font-size: 11px; text-align: center;
|
||||
/* visibility: hidden; */
|
||||
}
|
||||
.attribution a { color: hsl(228, 45%, 44%); }
|
||||
|
||||
/**
|
||||
|
|
@ -106,13 +168,84 @@ body {
|
|||
* TODO: Tweak transition point later
|
||||
*/
|
||||
@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) {
|
||||
body {
|
||||
/* roughly half way, arbitrary for the moment */
|
||||
width: 78vw;
|
||||
width: 65vw;
|
||||
}
|
||||
|
||||
.signupButton {
|
||||
font-size: 0.90rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -121,34 +254,19 @@ body {
|
|||
width: 45vw;
|
||||
}
|
||||
|
||||
.topRow {
|
||||
}
|
||||
.heading {
|
||||
}
|
||||
.quickSell {
|
||||
}
|
||||
.sellBlurb {
|
||||
}
|
||||
.bottomRow {
|
||||
flex-direction: row;
|
||||
/* flex: 0 50%; */
|
||||
}
|
||||
.pricingBox {
|
||||
width: 50%;
|
||||
}
|
||||
.priceRow {
|
||||
}
|
||||
.price {
|
||||
}
|
||||
.pricePeriod {
|
||||
}
|
||||
.sell {
|
||||
border-bottom-left-radius: var(--box-border-radius);
|
||||
|
||||
}
|
||||
.signupButton {
|
||||
}
|
||||
.whyUsBox {
|
||||
width: 50%;
|
||||
}
|
||||
.blurb {
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<title>Frontend Mentor | Single Price Grid Component</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<main class="container">
|
||||
<div class="topRow box">
|
||||
<div class="heading">
|
||||
Join our community
|
||||
|
|
@ -60,11 +60,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<!-- <footer>
|
||||
<p class="attribution">
|
||||
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>.
|
||||
</p>
|
||||
</footer>
|
||||
</footer> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,5 +19,16 @@ Continued basic styling. Used a color picker to find (roughly) what the other to
|
|||
|
||||
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!
|
||||
|
||||
|
|
|
|||
7
notes.md
7
notes.md
|
|
@ -46,4 +46,9 @@ Think of it as a combination of learning, and tips and tricks. They will start u
|
|||
* https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/
|
||||
* https://thoughtbot.com/blog/transitions-and-transforms
|
||||
* 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"
|
||||
Loading…
Reference in New Issue