tarasis
/
old_tarasis.net
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

"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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
notes.md
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/

40
style.css
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%;
}
}