fix(styles): fix styling to be more responsive + viewport tag

This adds some more responsive @media's to the styling and also injects a viewport tag into all blog posts.
EmmaRamirez · Jan 2, 2018 · 10f3d20 · 10f3d20
1 parent db8cd00
commit 10f3d20
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 10 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,9 +5,19 @@
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
         <div id='app'></div>
         <script src='./bundle.js'></script>
+        <!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79007755-1"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'UA-79007755-1');
+        </script>
     </body>
 </html>
diff --git a/docs/posts/my-first-day-at-npm/index.html b/docs/posts/my-first-day-at-npm/index.html
@@ -6,6 +6,7 @@
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
         <link href="../../code-theme.css" rel="stylesheet">
     </head>
     <body class='markdown-body'>
@@ -25,6 +26,14 @@
 </div>
         <div id='app'></div>
         <script src='../../bundle.js'></script>
-        <script src="../../rainbow-custom.min.js"></script>
+        <script src="../../rainbow-custom.min.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79007755-1"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'UA-79007755-1');
+        </script>        
     </body>
 </html>
diff --git a/docs/posts/on-joining-and-leaving-a-techstars-company/index.html b/docs/posts/on-joining-and-leaving-a-techstars-company/index.html
@@ -6,6 +6,7 @@
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
         <link href="../../code-theme.css" rel="stylesheet">
     </head>
     <body class='markdown-body'>
@@ -42,6 +43,14 @@ <h2 id="a-space-of-one-s-own">A Space of One’s Own</h2>
 </div>
         <div id='app'></div>
         <script src='../../bundle.js'></script>
-        <script src="../../rainbow-custom.min.js"></script>
+        <script src="../../rainbow-custom.min.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79007755-1"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'UA-79007755-1');
+        </script>        
     </body>
 </html>
diff --git a/docs/posts/the-safe-navigation-operator/index.html b/docs/posts/the-safe-navigation-operator/index.html
@@ -6,6 +6,7 @@
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
         <link href="../../code-theme.css" rel="stylesheet">
     </head>
     <body class='markdown-body'>
@@ -41,6 +42,14 @@ <h2 id="using-it-today">Using it Today</h2>
 </div>
         <div id='app'></div>
         <script src='../../bundle.js'></script>
-        <script src="../../rainbow-custom.min.js"></script>
+        <script src="../../rainbow-custom.min.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79007755-1"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'UA-79007755-1');
+        </script>        
     </body>
 </html>
diff --git a/docs/posts/yet-another-blog-post/index.html b/docs/posts/yet-another-blog-post/index.html
@@ -6,6 +6,7 @@
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
         <link href="../../code-theme.css" rel="stylesheet">
     </head>
     <body class='markdown-body'>
@@ -22,6 +23,14 @@
 </div>
         <div id='app'></div>
         <script src='../../bundle.js'></script>
-        <script src="../../rainbow-custom.min.js"></script>
+        <script src="../../rainbow-custom.min.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79007755-1"></script>
+        <script>
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'UA-79007755-1');
+        </script>        
     </body>
 </html>
diff --git a/scripts/build.js b/scripts/build.js
@@ -63,6 +63,7 @@ const buildBlogPost = data => {
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
         <link href="../../code-theme.css" rel="stylesheet">
     </head>
     <body class='markdown-body'>

diff --git a/src/components/App/index.ts b/src/components/App/index.ts
@@ -43,14 +43,14 @@ export class App {
           ${new List(this.data.projects, {
             target: '_blank'
           }).render()}
-          <img style='display: block; margin: 3rem auto' src='./palms.webp' />
+          <img class='palm-trees' style='display: block; margin: 3rem auto' src='./palms.webp' />
           <br />
-          <h2>Elsewhere</h2>
+          <!-- <h2>Elsewhere</h2>
           ${new ElsewhereLinks(this.data.links, {
             target: '_blank'
           }).render()}
           <div class='monospace'>Bitcoin: 16mM8fFqLsAFZ9J6v1Efr3Ba8mT18RuZLW</div>
-          <div class='monospace'>Ethereum: 0x67cee0981f84Cc86A0eC7491e2d19cd8476d0A42</div>
+          <div class='monospace'>Ethereum: 0x67cee0981f84Cc86A0eC7491e2d19cd8476d0A42</div> -->
 
           <div class='stats'>
             <p><a href="https://travis-ci.org/EmmaRamirez/emmaramirez.me" rel="nofollow"><img src="https://camo.githubusercontent.com/b70123a10e32ce6a5fbc9095092238fee4e78e0f/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f456d6d6152616d6972657a2f656d6d6172616d6972657a2e6d652e7376673f7374796c653d666c61742d737175617265" alt="Build Status" data-canonical-src="https://img.shields.io/travis/EmmaRamirez/emmaramirez.me.svg?style=flat-square" style="max-width:100%;"></a>

diff --git a/src/components/List/List.styl b/src/components/List/List.styl
@@ -4,7 +4,7 @@
     margin 1rem
 
 .list-item
-    margin-bottom .5rem
+    margin-bottom .5em
     @media screen and (max-width: 640px)
         margin .5rem
     a

diff --git a/src/global.styl b/src/global.styl
@@ -14,6 +14,10 @@ a
     color #121212
     text-decoration none
 
+.palm-trees
+    @media screen and (max-width: 640px)
+        width 100%
+
 h2
     font-size 1.5rem
     font-weight lighter
@@ -84,7 +88,7 @@ h2
     background #efefef
     bottom 0
     left 0
-    position absolute
+    position fixed
     text-align center
     width 100%
 

diff --git a/src/index.html b/src/index.html
@@ -5,6 +5,7 @@
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
         <div id='app'></div>

diff --git a/src/reset.styl b/src/reset.styl
@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after
+  box-sizing border-box
+
 html, body, div, span, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 abbr, address, cite, code,