Merge pull request #10 from JackHowa/no-breakpoints-truly-responsive

No breakpoints truly responsive

Author: Jack Howard

.eleventyignore

@@ -1 +1,2 @@
 README.md
+docs

_includes/styles.css

@@ -1,9 +1,13 @@
+html {
+  /* weird issues with body not encompassing all */
+  background-color: #113134;
+}
+
 html,
 body {
   position: fixed;
   width: 100%;
   height: 100%;
-  background-color: #113134;
   margin: 0;
   padding: 0;
 }
@@ -14,7 +18,7 @@ main {
   /* https://caniuse.com/#feat=css-overscroll-behavior */
   overscroll-behavior: none;
   margin: 0;
-  padding: 0;
+  padding: 0 10vw 0 10vw;
   height: 90vh;
   display: flex;
   flex-direction: column;
@@ -26,20 +30,23 @@ main {
 }
 
 h1 {
-  font-size: 4vmax;
+  font-size: 5vmax;
   margin: 0;
 }
 
 h2 {
   padding-top: 0.5em;
-  font-size: 2vmax;
+  font-size: 3vmax;
   margin: 0;
 }
 
 a {
-  font-size: 2vmax;
+  padding: 10px;
+  font-size: 3vmax;
   color: #ffcfb8;
   text-decoration: none;
+  min-width: 300px;
+  text-align: center;
 }
 
 a:hover {
@@ -61,29 +68,5 @@ hr {
 footer {
   display: flex;
   justify-content: space-around;
-}
-
-@media (max-width: 800px) {
-  main {
-    padding: 0 10vw 0 10vw;
-  }
-  a {
-    padding: 10px;
-  }
-
-  footer {
-    flex-direction: column;
-    align-items: center;
-  }
-  h1 {
-    font-size: 6vmax;
-  }
-
-  h2 {
-    font-size: 3vmax;
-  }
-
-  a {
-    font-size: 3vmax;
-  }
+  flex-flow: row wrap;
 }

docs/index.html

@@ -10,7 +10,7 @@
     <meta name="google-site-verification" content="Ufu6ARR8Anx86xdNZ39V76Bnp0_zo5lwVgAWNTLlmbQ"/>
 
     <style>
-      body,html{position:fixed;width:100%;height:100%;background-color:#113134;margin:0;padding:0}main{color:#fff;overscroll-behavior:none;margin:0;padding:0;height:90vh;display:flex;flex-direction:column;justify-content:center;padding:0 20vw 0 20vw;font-family:-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif}h1{font-size:4vmax;margin:0}h2{padding-top:.5em;font-size:2vmax;margin:0}a{font-size:2vmax;color:#ffcfb8;text-decoration:none}a:hover{text-decoration:underline}#hr-container{padding:2em 0 2em 0;margin:0}hr{border:none;border-bottom:.5px dashed #4a5568;margin:0;padding:0}footer{display:flex;justify-content:space-around}@media (max-width:800px){main{padding:0 10vw 0 10vw}a{padding:10px}footer{flex-direction:column;align-items:center}h1{font-size:6vmax}h2{font-size:3vmax}a{font-size:3vmax}}
+      html{background-color:#113134}body,html{position:fixed;width:100%;height:100%;margin:0;padding:0}main{color:#fff;overscroll-behavior:none;margin:0;padding:0 10vw 0 10vw;height:90vh;display:flex;flex-direction:column;justify-content:center;padding:0 20vw 0 20vw;font-family:-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif}h1{font-size:5vmax;margin:0}h2{padding-top:.5em;font-size:3vmax;margin:0}a{padding:10px;font-size:3vmax;color:#ffcfb8;text-decoration:none;min-width:300px;text-align:center}a:hover{text-decoration:underline}#hr-container{padding:2em 0 2em 0;margin:0}hr{border:none;border-bottom:.5px dashed #4a5568;margin:0;padding:0}footer{display:flex;justify-content:space-around;flex-flow:row wrap}
     </style>
     <link rel="manifest" href="/manifest.json"/>
     <link rel="canonical" href="https://jackhowa.com"/>