End for now. Now mobile design

This commit is contained in:
Robert McGovern 2020-09-02 14:59:54 +01:00
parent 75b7605199
commit 8473aa35b8
4 changed files with 69 additions and 18 deletions

View File

@ -1,7 +1,12 @@
@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;
--site-color: hsl(257, 40%, 49%);
}
body { body {
background-color: hsl(257, 40%, 49%); background-color: var(--site-color);
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; */
@ -12,7 +17,8 @@ body {
h1 { h1 {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
font-weight: 400; font-weight: 400; /* 400 & 40 are very close*/
font-size: 40px;
} }
body { body {
@ -21,48 +27,74 @@ body {
.logo { .logo {
width: 215px; width: 215px;
margin: 3.3125rem 4.4rem 0rem; margin: 3.75% 4.86% 0rem; /* 3.75% 4.375rem 0rem*/
} }
.middleSection { .middleSection {
display: flex; display: flex;
margin: 5.0625rem 4.6rem 0rem 4.55rem; margin: 5.0625rem 0rem 0rem 4.55rem;
} }
.siteBlurb { .siteBlurb {
margin: 3rem; margin: 1.0625rem 4rem 2rem 3.325rem;
/* line-height: 2rem; /* line-height: 2rem;
font-weight: 400; */ font-weight: 400; */
} }
.siteBlurb h1 { .siteBlurb h1 {
margin-right: 2em; margin-right: 2em;
margin-bottom: 0;
} }
/* .siteBlurb p { .siteBlurb p {
line-height: 1.5rem; margin-right: 1.5rem;
} */ margin-bottom: 1.5625rem;
line-height: 1.7rem;
font-size: 18px;
font-weight: 400;
}
.registerButton {
background-color: white;
color: var(--site-color);
font-size: 19px;
border: none;
padding: 17px 64px;
text-align: center;
text-decoration: none;
display: inline-block;
/* margin: 4px 2px; */
cursor: pointer;
border-radius: 32px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/
}
.socialButtonsSection { .socialButtonsSection {
display: block; display: block;
text-align: right; text-align: right;
margin-right: 5.1875rem;
} }
.socialButtonsSection i { .socialButtonsSection i {
padding: 0.5em; padding: 0.5rem;
margin-left: 0.5em; margin-left: 0.5rem;
margin-top: 1em; margin-top: 0.9375rem;
margin-right: 0;
} }
.circleIcon { .circleIcon {
magin: 0;
color: white;
background: transparent; background: transparent;
border: 1px solid #fff; border: 1.75px solid #fff;
width: 16px; width: 20px;
height: 16px; height: 20px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
line-height: 16px; line-height: 20px;
vertical-align: middle; vertical-align: middle;
font-size: 19px;
/* padding: 5px; */ /* padding: 5px; */
/* border: 2px solid #fff; /* border: 2px solid #fff;
@ -74,6 +106,10 @@ body {
color: transparent; */ color: transparent; */
} }
.circleIcon:hover {
color: blue;
}
.attribution { font-size: 11px; text-align: center; } .attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); } .attribution a { color: hsl(228, 45%, 44%); }

View File

@ -34,9 +34,9 @@
</div> </div>
<div class="socialButtonsSection"> <div class="socialButtonsSection">
<i class="fab fa-facebook-f circleIcon"></i> <a href="#"><i class="fab fa-facebook-f fa-lg circleIcon"></i></a>
<i class="fab fa-twitter circleIcon"></i> <a href="#"><i class="fab fa-twitter fa-lg circleIcon"></i></a>
<i class="fab fa-instagram circleIcon"></i> <a href="#"><i class="fab fa-instagram fa-lg circleIcon"></i></a>
</div> </div>
<footer> <footer>
<p class="attribution"> <p class="attribution">

View File

@ -32,8 +32,23 @@ next day
download diffchecker trial rather than keep using website download diffchecker trial rather than keep using website
adjust size of logo svg adjust size of logo svg
play with positioning using margin and rem. Logo and mockup images are so close at this point (see image diff 1) play with positioning using margin and rem. Logo and mockup images are so close at this point (see image diff 1)
![alt](image-diff-1.png)
realise I probably should be using % rather than rem for margin positioning realise I probably should be using % rather than rem for margin positioning
also should probably be using 0 positioning in body and doing it in each element also should probably be using 0 positioning in body and doing it in each element
tweaked logo and mid section margins mixture rem & % for the moment
set body to have 0 margin
seemingly no changes are made with % unless they are to a pixel, so 4.86 is the same as 4.8611111, need to go to next px % which is 4.7916666667
then lots and lots of iterating. Making changes and comparing in diffchecker against the design doc.
Spent 2 hours+ on this. Too long.
Still haven't quite nailed the blurb section.
Basically the logo is slight off
the differences between the mockup and symbols are image quality between jpg and png
its like a pixel off with the social media buttons
img-diff-2-desktop-near-enough.png
![alt](img-diff-2-desktop-near-enough.png)
Still now on to the mobile variant. Can I nail it better?
Things I've not touched so far: Things I've not touched so far:
main section main section