Finished.

This commit is contained in:
Robert McGovern 2020-09-27 23:36:12 +01:00
parent 853481f3b8
commit 9a350e45be
7 changed files with 82 additions and 5 deletions

View File

@ -45,15 +45,17 @@ body {
width: 83.5%; width: 83.5%;
/* height: 100vh; */ /* height: 100vh; */
margin: 0 auto; margin: 0 auto;
max-width: 400px;
} }
.topSection { .topSection {
margin-top: 3.8rem; /* think this change was brought about by browser differences. Was previously 3.8 */
margin-top: 3.65rem;
text-align: center; text-align: center;
} }
.topSection h1 { .topSection h1 {
font-size: 1.2rem; font-size: calc(24px + (35 - 24) * ((100vw - 375px) / (1440 - 375)));
} }
.topSection .title1 { .topSection .title1 {
@ -126,3 +128,59 @@ body {
} }
/* .attribution { /* .attribution {
} */ } */
/* arbitrary figure atm */
/* @media screen and (min-width: 600px) {
.flexContainer {
width: 78%;
}
} */
@media screen and (min-width: 1000px) {
.flexContainer {
max-width: 1440px;
}
.topSection {
margin-top: 3.45rem;
}
.topSection .blurb {
width: 45%;
margin-left: auto;
margin-right: auto;
font-size: 15px;
}
.flexContainer {
width: 78%;
}
.middleSection {
margin-top: 3.3rem;
display: flex;
}
.card {
margin-top: 0;
padding: 27px 30px 36px 25px;
}
.card-blurb {
margin-top: 0.5rem;
}
.card-image {
margin-top: 2rem;
}
.column {
display: flex;
flex-direction: column;
margin: auto;
max-width: calc((100% /3) - 1.5rem);
}
.karma {
margin-top: 1.3rem;
}
}

View File

@ -27,7 +27,7 @@
</div> </div>
<div class="middleSection"> <div class="middleSection">
<div class="column1"> <div class="column">
<div class="supervisor card"> <div class="supervisor card">
<h1 class="card-title"> <h1 class="card-title">
Supervisor Supervisor
@ -39,7 +39,7 @@
</div> </div>
</div> </div>
<div class="column2"> <div class="column">
<div class="teamBuilder card"> <div class="teamBuilder card">
<h1 class="card-title"> <h1 class="card-title">
Team Builder Team Builder
@ -59,7 +59,7 @@
<img class="card-image" src="images/icon-karma.svg" alt="Karma icon"> <img class="card-image" src="images/icon-karma.svg" alt="Karma icon">
</div> </div>
</div> </div>
<div class="column3"> <div class="column">
<div class="calculator card"> <div class="calculator card">
<h1 class="card-title"> <h1 class="card-title">
Calculator Calculator

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

View File

@ -57,3 +57,22 @@ So how to judge what the shadow should be? what is the trick to that? Basically
![mobile final side by side](mobile-final-diff.png) ![mobile final side by side](mobile-final-diff.png)
![mobile final diff'd](mobile-final-side-by-side.png) ![mobile final diff'd](mobile-final-side-by-side.png)
14 minute break ...
Have to work out how close the desktop is, once I put in columns. Right now, its not close :)
Forgot to note when I restarted work. Around 40 minutes ago. Didn't require too much tweaking to get in nearly in place.
Not going to spend too long trying to finese it.
![desktop final side by side](desktop-final-slider.png)
![desktop final diff'd](desktop-final-diff.png)
And these are the final images.
![Mobile Final](mobile-final.png)
![Desktop Final](desktop-final.png)
As per usual the in between state is not ideal, at the transition point the boxes are too big. It was wrong to use a % on the icon images. They become too big before the transition to the desktop form.
May have run into a browser difference. Previously I had thinks lined up in the mobile section, but when I was in a different browser, I had to nudge the top section up 3 pixels.