From 7686db64a310fbfc7286d24653f2db902d9f11d8 Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Thu, 24 Sep 2020 10:45:56 +0100
Subject: [PATCH] "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.
---
 notes.md  |  5 +++--
 style.css | 40 +++++++++++-----------------------------
 2 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/notes.md b/notes.md
index e6c472a..f169c36 100644
--- a/notes.md
+++ b/notes.md
@@ -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://uxengineer.com/padding-vs-margin/
 * http://specificity.keegan.st/
-
-src="blob:https://player.vimeo.com/ff6607bc-2a8d-45ce-9cea-b4a5ddc01ccb"
\ No newline at end of file
+* https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
+* https://css-tricks.com/how-do-you-do-max-font-size-in-css/
+* https://css-tricks.com/simplified-fluid-typography/
\ No newline at end of file
diff --git a/style.css b/style.css
index 71fb4de..9c1d2ad 100644
--- a/style.css
+++ b/style.css
@@ -29,13 +29,16 @@ body {
     background-color: rgba(0, 0, 0, 0.1);
     border: 5px solid;
     margin: 0 auto;
-    width: 50%;
+    width: 90%;
+    max-width: 700px;
     box-sizing: border-box;
     border-radius: 10px; 
 }
 
 .blurb, .projectsDiv {
     padding: 10px 20px;
+    margin-top: 2rem;
+    font-family: 'Source Sans Pro', sans-serif;
 }
 
 .header {
@@ -47,18 +50,15 @@ body {
 
 .header > h1 {
     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 {
-    margin-top: 2rem;
     border-color:  rgba(216, 81, 201, 0.632);
-    font-family: 'Source Sans Pro', sans-serif;
 }
 
 .projectsDiv {
-    margin-top: 2rem;
-    font-family: 'Source Sans Pro', sans-serif;
     border-color: rgba(0, 0, 0, 0.7);
 }
 
@@ -70,8 +70,7 @@ body {
     font-weight: 400;
 }
 
-.frontEndMentorChallenges {
-}
+/* .frontEndMentorChallenges {} */
 
 .frontEndMentorChallenges .newbieChallenges {
     margin-left: 1rem;
@@ -81,12 +80,9 @@ body {
     font-weight: 600;
 }
 
-.freecodeCampProjects {
-}
-.completeWebDev2020Projects {
-}
-.vanillaJSProjects {
-}
+/* .freecodeCampProjects {} */
+/* .completeWebDev2020Projects {} */
+/* .vanillaJSProjects {} */
 
 footer {
     margin-top: 3rem;
@@ -94,7 +90,7 @@ footer {
     font-size: 16px;
     margin-left: auto;
     margin-right: auto;
-
+    width: 85%;
 }
 
 footer * {
@@ -103,18 +99,4 @@ footer * {
 
 footer > a {
     display: block;
-}
-
-@media screen and (max-width: 500px) {
-    .header, .blurb, .projectsDiv {
-        width: 90%;
-    }
-
-    .header > h1 {
-        font-size: 2.5rem;
-    }
-    
-    footer {
-        width: 85%;
-    }
 }
\ No newline at end of file