"Better" dynamic css. No longer using any media queries. Boxes will take up 90% of the screen on mobile devices, then will max out at 700px.

Font in the header (Practice Projects), will scale from 2.5rem on mobile, to 3rem for larger screens.

Should work for 80-88% of web browsers according to caniuse.com. Should probably provide a fallback

Might in future also scale the body text size too.
This commit is contained in:
Robert McGovern 2020-09-24 10:45:56 +01:00
parent d12dd9fa0a
commit 7686db64a3
2 changed files with 14 additions and 31 deletions

View File

@ -50,5 +50,6 @@ Think of it as a combination of learning, and tips and tricks. They will start u
* https://matthewjamestaylor.com/responsive-banner-ads * https://matthewjamestaylor.com/responsive-banner-ads
* https://uxengineer.com/padding-vs-margin/ * https://uxengineer.com/padding-vs-margin/
* http://specificity.keegan.st/ * http://specificity.keegan.st/
* https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
src="blob:https://player.vimeo.com/ff6607bc-2a8d-45ce-9cea-b4a5ddc01ccb" * https://css-tricks.com/how-do-you-do-max-font-size-in-css/
* https://css-tricks.com/simplified-fluid-typography/

View File

@ -29,13 +29,16 @@ body {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
border: 5px solid; border: 5px solid;
margin: 0 auto; margin: 0 auto;
width: 50%; width: 90%;
max-width: 700px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 10px; border-radius: 10px;
} }
.blurb, .projectsDiv { .blurb, .projectsDiv {
padding: 10px 20px; padding: 10px 20px;
margin-top: 2rem;
font-family: 'Source Sans Pro', sans-serif;
} }
.header { .header {
@ -47,18 +50,15 @@ body {
.header > h1 { .header > h1 {
font-family: 'Black Ops One', cursive; font-family: 'Black Ops One', cursive;
font-size: 3rem; /* scale the font from size used on mobile to "desktop" */
font-size: min(max(2.5rem, 8vw), 3rem);
} }
.blurb { .blurb {
margin-top: 2rem;
border-color: rgba(216, 81, 201, 0.632); border-color: rgba(216, 81, 201, 0.632);
font-family: 'Source Sans Pro', sans-serif;
} }
.projectsDiv { .projectsDiv {
margin-top: 2rem;
font-family: 'Source Sans Pro', sans-serif;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
} }
@ -70,8 +70,7 @@ body {
font-weight: 400; font-weight: 400;
} }
.frontEndMentorChallenges { /* .frontEndMentorChallenges {} */
}
.frontEndMentorChallenges .newbieChallenges { .frontEndMentorChallenges .newbieChallenges {
margin-left: 1rem; margin-left: 1rem;
@ -81,12 +80,9 @@ body {
font-weight: 600; font-weight: 600;
} }
.freecodeCampProjects { /* .freecodeCampProjects {} */
} /* .completeWebDev2020Projects {} */
.completeWebDev2020Projects { /* .vanillaJSProjects {} */
}
.vanillaJSProjects {
}
footer { footer {
margin-top: 3rem; margin-top: 3rem;
@ -94,7 +90,7 @@ footer {
font-size: 16px; font-size: 16px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 85%;
} }
footer * { footer * {
@ -104,17 +100,3 @@ footer * {
footer > a { footer > a {
display: block; display: block;
} }
@media screen and (max-width: 500px) {
.header, .blurb, .projectsDiv {
width: 90%;
}
.header > h1 {
font-size: 2.5rem;
}
footer {
width: 85%;
}
}