Responsive design

_config.yml

@@ -161,4 +161,9 @@ feed:
   content_limit_delim: ' '
   order_by: -date
   icon: icon.png
-  autodiscovery: true
+  autodiscovery: true
+
+sitemap:
+    path: sitemap.xml
+    tag: false
+    category: false

package-lock.json

@@ -866,6 +866,41 @@
         "hexo-pagination": "1.0.0"
       }
     },
+    "hexo-generator-seo-friendly-sitemap": {
+      "version": "0.0.25",
+      "resolved": "https://registry.npmjs.org/hexo-generator-seo-friendly-sitemap/-/hexo-generator-seo-friendly-sitemap-0.0.25.tgz",
+      "integrity": "sha512-SjAOFJ80yynWWPx7WENWVXYDoMOEI/xETM/6YE36DQJEFMDfQDx0p8gpuMZR1XTcMaEu4WtWG16dk1vwtyW+DA==",
+      "requires": {
+        "bluebird": "3.5.4",
+        "ejs": "2.6.1",
+        "lodash": "4.17.11",
+        "moment": "2.24.0",
+        "pretty-data": "0.40.0",
+        "url-join": "4.0.0"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "3.5.4",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
+          "integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw=="
+        },
+        "ejs": {
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.6.1.tgz",
+          "integrity": "sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ=="
+        },
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+        },
+        "moment": {
+          "version": "2.24.0",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+          "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+        }
+      }
+    },
     "hexo-generator-tag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hexo-generator-tag/-/hexo-generator-tag-1.0.0.tgz",
@@ -1601,6 +1636,11 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
       "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
     },
+    "pretty-data": {
+      "version": "0.40.0",
+      "resolved": "https://registry.npmjs.org/pretty-data/-/pretty-data-0.40.0.tgz",
+      "integrity": "sha1-Vyqo6iNGdGerlLa1Jmpv2cj93XI="
+    },
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -2117,6 +2157,11 @@
         }
       }
     },
+    "url-join": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
+      "integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "hexo-generator-category": "^1.0.0",
     "hexo-generator-feed": "^2.2.0",
     "hexo-generator-index": "^1.0.0",
+    "hexo-generator-seo-friendly-sitemap": "0.0.25",
     "hexo-generator-tag": "^1.0.0",
     "hexo-renderer-ejs": "^1.0.0",
     "hexo-renderer-marked": "^2.0.0",

readme.md

@@ -56,7 +56,7 @@ Based on [Hexo](http://hexo.io) for building the static website.
   
   - [x] **video link test requirement**
   
-  - [ ] **SEO basics**
+  - [x] **SEO basics**
   
   - [ ] **Merge mixpanel analytics data** 
     *jamesperet-landing-page* and *j1x-blog* to *jamesperet-website*

themes/james-theme/layout/_partial/about-author.ejs

@@ -1,9 +1,9 @@
 <div class="container-fluid about-author bg-secondary">
     <div class="row justify-content-center bottom-spacer">
-      <div class="col-2 align-self-center text-center">
+      <div class="col-4 col-md-2 align-self-center text-center">
         <img class="img-fluid img-thumbnail rounded" src="/images/james-peret-drawing.png">
       </div>
-      <div class="col-6 jumbotron">
+      <div class="col-7 col-md-6 jumbotron">
         <p class="lead">Hello, I'm James Peret, a designer, programmer and filmmaker from Sao Paulo, Brazil.</p>
         <p class="hide-if-sm">My skills include developing games with unity and C#, coding web apps with node and javascript, designing user interfaces and 3d modeling for games and industrial design.</p>
         <p class="hide-if-sm">I'm available for work in the areas of programming, design and filmmaking assistance.</p>

themes/james-theme/layout/_partial/contact-form.ejs

@@ -25,10 +25,10 @@
                 <form @submit.prevent v-show="!contactMessageSuccess && !contactMessageError">
                     <div class="form-group">
                         <div class="row">
-                            <div class="col-4">
+                            <div class="col-12 col-md-4" style="padding-bottom: 10px;">
                               <input type="text" class="form-control" placeholder="Name" required v-model="contactMessage.name">
                             </div>
-                            <div class="col-4">
+                            <div class="col-12 col-md-4">
                               <input type="text" class="form-control" placeholder="Email" required v-model="contactMessage.email">
                             </div>
                         </div>

themes/james-theme/layout/_partial/content-card.ejs

@@ -1,4 +1,4 @@
-<div class="col-<%- size %>">           
+<div class="col-sm-<%- size %>">           
     <div class="card <%= post.layout %>">
         <a href="<%= url_for(post.path) %>" class="text-decoration-none">
             <img class="img-fluid" src="<%= image %>">

themes/james-theme/layout/_partial/content-thumbnail.ejs

@@ -3,7 +3,7 @@
 <% if(size == 6) thumbnail = post.cover_image %>
 <% if(size == 12) thumbnail = post.hero_image %>
 
-<div class="col-<%= size %>" style="margin-bottom: 30px;">
+<div class="col-6 col-md-<%= size %>" style="margin-bottom: 30px;">
     <a href="<%= url_for(post.path) %>" class="thumbnail-link">
         <img class="img-fluid thumbnail rounded" src="<%= thumbnail %>">
         <% if(show_title == true || show_title == undefined) { %>

themes/james-theme/layout/_partial/footer.ejs

@@ -1,9 +1,17 @@
 <footer class="footer mt-auto py-3">
     <div class="container">
       <div class="row justify-content-md-center">
-        <div class="col-6">
-          <a href="/">Home</a> | <a href="/projects">Projects</a> | <a href="/blog">Blog</a> | <a href="/about">About</a> – 
-           <span class="text-muted">Copyright <i class="far fa-copyright"></i> James Peret 2004-2020 </span>
+        <div class="col-12 col-md-6 hide-if-sm">
+          <p>
+            <a href="/">Home</a> | <a href="/projects">Projects</a> | <a href="/blog">Blog</a> | <a href="/about">About</a>  
+            <span class="text-muted"> – Copyright <i class="far fa-copyright"></i> James Peret 2004-2020 </span>
+        </p>
+        </div>
+        <div class="col-12 col-md-6 hide-if-lg">
+          <p><a href="/">Home</a> | <a href="/projects">Projects</a> | <a href="/blog">Blog</a> | <a href="/about">About</a></p>
+        </div>
+        <div class="col-12 col-md-6 hide-if-lg">
+          <p><span class="text-muted">Copyright <i class="far fa-copyright"></i> James Peret 2004-2020 </span></p>
         </div>
       </div>
       

themes/james-theme/layout/_partial/navbar.ejs

@@ -1,49 +1,49 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-md navbar-light bg-light">
     <a class="navbar-brand" href="/">
         <img class="invert" alt="James Peret" src="/images/jamesperet-logo-white.png">
     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
+        <span class="navbar-toggler-icon"></span>
     </button>
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
-    <ul class="navbar-nav mr-auto">
-        <% if(is_current('/projects')) { %>
-            <li class="nav-item active">
-        <% } else { %>
-            <li class="nav-item"></li>
-        <% } %>
-            <a class="nav-link" href="/projects">
-                Projects 
-                <% if(is_current('/projects')) { %>
-                    <span class="sr-only">(current)</span>
-                <% } %>
-            </a>
-        </li>
-        <% if(is_current('/blog')) { %>
-            <li class="nav-item active">
-        <% } else { %>
-            <li class="nav-item"></li>
-        <% } %>
-            <a class="nav-link" href="/blog" >
-                Blog 
-                <% if(is_current('/blog')) { %>
-                    <span class="sr-only">(current)</span>
-                <% } %>
-            </a>
-        </li>
-        <% if(is_current('/about')) { %>
-            <li class="nav-item active">
-        <% } else { %>
-            <li class="nav-item"></li>
-        <% } %>
-            <a class="nav-link" href="/about" >
-                About 
-                <% if(is_current('/about')) { %>
-                    <span class="sr-only">(current)</span>
-                <% } %>
-            </a>
-        </li>
-    </ul>
+        <ul class="navbar-nav mr-auto">
+            <% if(is_current('/projects')) { %>
+                <li class="nav-item active">
+            <% } else { %>
+                <li class="nav-item"></li>
+            <% } %>
+                <a class="nav-link" href="/projects">
+                    Projects 
+                    <% if(is_current('/projects')) { %>
+                        <span class="sr-only">(current)</span>
+                    <% } %>
+                </a>
+            </li>
+            <% if(is_current('/blog')) { %>
+                <li class="nav-item active">
+            <% } else { %>
+                <li class="nav-item"></li>
+            <% } %>
+                <a class="nav-link" href="/blog" >
+                    Blog 
+                    <% if(is_current('/blog')) { %>
+                        <span class="sr-only">(current)</span>
+                    <% } %>
+                </a>
+            </li>
+            <% if(is_current('/about')) { %>
+                <li class="nav-item active">
+            <% } else { %>
+                <li class="nav-item"></li>
+            <% } %>
+                <a class="nav-link" href="/about" >
+                    About 
+                    <% if(is_current('/about')) { %>
+                        <span class="sr-only">(current)</span>
+                    <% } %>
+                </a>
+            </li>
+        </ul>
     </div>
 </nav>

themes/james-theme/layout/_partial/next-post.ejs

@@ -1,9 +1,9 @@
-<div class="container-fluid next-post" >
-    <div class="row">
+<div class="container-fluid">
+    <div class="row-fluid next-post">
       <img class="img-fluid hero" src="<%= `/${post.slug}/hero.jpg` %>">
     </div>
     <div class="row justify-content-center next-post-link">
-        <div class="col-6">
+        <div class="col-12 col-6-md">
             <h4>Next Story</h4>
             <h2>
                 <a href="<%= url_for(post.path) %>">

themes/james-theme/layout/_partial/project-search-bar.ejs

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-secondary">
-    <div class="col-auto" style="padding-left: 0px;">
+    <div class="col-3 col-md-auto" style="padding-left: 0px;">
         <div class="btn-group align-items-center" role="group" aria-label="Basic example" style="margin-right: 10px;">
             <button type="button" class="btn btn-light noselect" v-on:click="view.type = 'thumbnails'"
                 v-bind:class= "view.type == 'thumbnails' ? 'active' : ''" >
@@ -14,9 +14,9 @@
             <!-- <button type="button" class="btn btn-light"><i class="fas fa-list"></i></button> -->
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-9 col-md-6" style="margin-right: 0px; padding-right: 0px; padding-left: 23px;">
         <form class="form-inline">
-            <div class="input-group col-12">
+            <div class="input-group col-12" style="padding-right: 0px;">
                 <div class="input-group-prepend">
                   <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
                 </div>
@@ -27,7 +27,7 @@
                     @tags-changed="newTags => search_tags = newTags"
                     v-on:change="filterProjects"
                     class="tags-input"
-                    style="max-width: none; width: 90%;"
+                    style="max-width: none; width: 73%;"
                 >
                     <div
                     slot="autocomplete-item"

themes/james-theme/layout/_partial/screenshots.ejs

@@ -7,9 +7,9 @@
             <% if(screenshots.length == 5 && i == 1) { size = 6 } %>
             <% if(screenshots.length == 4 && i >= 1) { size = 4 } %>
             <% if(screenshots.length == 5 && i >= 2) { size = 4 } %>
-            <div class="col-<%= size %>" style="margin-bottom: 20px;">
+            <div class="col-12 col-md-<%= size %>" style="margin-bottom: 20px;">
                 <a href="<%= url_for(screenshots[i].url) %>" class="">
-                    <img class="img-fluid thumbnail thumbnail-col<%= size %> figure-img rounded" src="<%= screenshots[i].url %>">
+                    <img class="img-fluid thumbnail  figure-img rounded" src="<%= screenshots[i].url %>">
                 </a>
             </div>
         <% } %>

themes/james-theme/layout/_partial/video-player.ejs

@@ -1,6 +1,8 @@
-<% var height = 600 %>
-<% if(is_hero) height = 650 %>
-<div class="video-frame container-fluid" style="background-color: black; height: <%= height %>px; padding: 0px;">
+
+
+<% var height_class = "video-height-content" %>
+<% if(is_hero) height_class = "video-height-hero" %>
+<div class="video-frame container-fluid <%= height_class %>">
     <% if(is_video_provider(url, 'youtube')) { %>
         <iframe class="video-player" src="<%- youtube_embed_link(url) %>" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     <% } else if(is_video_provider(url, 'vimeo')) { %>

themes/james-theme/layout/about.ejs

@@ -7,7 +7,7 @@
             </h1>
         </div>
     </div>
-    <div class="row">
+    <div class="row hide-if-sm">
         <div class="col-3">
             <img class="img-fluid rounded" src="/images/james-peret-drawing.png">
         </div>
@@ -26,6 +26,29 @@
             </p>
         </div>
     </div>
+    <div class="row hide-if-lg">
+        <div class="col-4">
+            <img class="img-fluid rounded" src="/images/james-peret-drawing.png">
+        </div>
+        <div class="col-8">
+            <p class="lead">
+                My name is James Peret, and I'm a designer, programmer and filmmaker from from São Paulo, Brazil.
+            </p>
+        </div>
+    </div>
+    <div class="row hide-if-lg">
+        <div class="col-12">
+            <p>
+                I live in a remote place near the big city and I like to spend my time creating things. In the past few years I have been working with programming systems using node.js and designing games with Unity3d.
+            </p>
+            <p>
+                During the last 20 years I have worked in many different types of projects. I have worked with video editing, filmaking, webdesign, software development, game design and industrial design.
+            </p>
+            <p>
+                When I'm not coding, I'm playing video games, watching movies and 3d printing stuff. I like to play strategy, survival and FPS games. I have watched thousands of movies. Before working with games I was working with video and I wanted to be a movie director. I have directed lots of short movies and wrote some movie scripts.
+            </p>
+        </div>
+    </div>
 </div>
 <%- partial('_partial/social-links') %>
 <%- partial('_partial/contact-form') %>

themes/james-theme/layout/index.ejs

@@ -12,8 +12,8 @@
                 </div>
             </div>
             <div class="row justify-content-md-center bottom-spacer-md">
-                <div class="col4">
-                    <ul class="nav">
+                <div class="col12 col-md-6 text-center">
+                    <ul class="nav justify-content-center">
                         <li class="nav-item"><a class="nav-link" href="/projects">Projects</a></li>
                         <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
                         <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
@@ -21,10 +21,10 @@
                 </div>
             </div>
             <div class="row bottom-spacer-md">
-                <div class="col-3">
+                <div class="col-5 col-md-3" >
                     <img class="img-fluid" src="images/james-peret-drawing.png">
                 </div>
-                <div class="col-9">
+                <div class="col-7 col-md-9">
                     <div class="about-text">
                         <p class="lead">Hello, I'm James Peret, a designer, programmer and filmmaker from Sao Paulo, Brazil.</p>
                         <p class="hide-if-sm">My skills include developing games with unity and C#, coding web apps with node and javascript, designing user interfaces and 3d modeling for games and industrial design.</p>
@@ -58,7 +58,7 @@
         <% }) %>
     </div>
     <div class="row justify-content-end" style="text-align: right;">
-        <div class="col-2">
+        <div class="col-4 col-md-3" style="text-align: right;">
             <a role="button" href="/projects" class="btn btn-sm btn-outline-secondary"><i class="fas fa-plus"></i> Projects</a>
         </div>
     </div>
@@ -85,7 +85,7 @@
         </div>
     <% } %>
     <div class="row justify-content-end" style="text-align: right;">
-        <div class="col-2">
+        <div class="col-4 col-md-3" style="text-align: right;">
             <a role="button" href="/projects" class="btn btn-sm btn-outline-secondary"><i class="fas fa-plus"></i> Projects</a>
         </div>
     </div>
@@ -101,8 +101,8 @@
             <%- partial('_partial/content-card', data) %>
         <% }) %>
     </div>
-    <div class="row justify-content-end bottom-spacer" style="text-align: right;">
-        <div class="col-2">
+    <div class="row justify-content-end bottom-spacer" >
+        <div class="col-4 col-md-3" style="text-align: right;">
             <a role="button" href="/blog" class="btn btn-sm btn-outline-secondary"><i class="fas fa-plus"></i> Posts</a>
         </div>
     </div>

themes/james-theme/layout/layout.ejs

@@ -2,10 +2,11 @@
 <html class="h-100">
   <%- partial('_partial/head', { data: page, page: page }) %>
   <body class="d-flex flex-column h-100">
-    <% if(!is_home()) { %>
-      <%- partial('_partial/navbar') %>
-    <% } %>
+    
     <main id="vue-app" role="main" class="flex-shrink-0">
+      <% if(!is_home()) { %>
+        <%- partial('_partial/navbar') %>
+      <% } %>
       <%- body %>
     </main>
     

themes/james-theme/layout/project.ejs

@@ -9,7 +9,7 @@
 <div id="cover"></div>
 <div class="project container up-spacer bottom-spacer">
   <div class="row">
-    <div class="col-9">
+    <div class="col-8 col-md-9">
       <% if (page.path){ %>
         <h1>
           <a href="<%- url_for(page.path) %>" itemprop="url"><%= page.title %></a>
@@ -18,7 +18,7 @@
         <h1><%= page.title %></h1>
       <% } %>
     </div>
-    <div class="col-3" style="text-align: right; margin-top: 5px;">
+    <div class="col-4 col-md-3 project-links" style="text-align: right; margin-top: 5px;">
       <%- partial('_partial/project-dropdown', { links : page.links, project: page }) %>
     </div>
   </div>

themes/james-theme/layout/projects.ejs

@@ -10,14 +10,14 @@
         </div>
     </div>
     <div class="row" v-if="view.type == 'thumbnails'">
-        <div class="col-3" v-for="project in filteredProjects" style="margin-bottom: 30px;">
+        <div class="col-6 col-md-3" v-for="project in filteredProjects" style="margin-bottom: 30px;">
             <a v-bind:href="`/projects/${project.folder}`" class="thumbnail-link">
-                <img class="img-fluid thumbnail thumbnail-col3 rounded" v-bind:src="project.thumbnail_image">
+                <img class="img-fluid thumbnail rounded" v-bind:src="project.thumbnail_image">
             </a>
         </div>
     </div>
     <div class="row projects" v-if="view.type == 'cards'">
-        <div class="col-4" v-for="project in filteredProjects" style="margin-bottom: 30px;">           
+        <div class="col-12 col-md-4" v-for="project in filteredProjects" style="margin-bottom: 30px;">           
             <a v-bind:href="`/projects/${project.folder}`" class="text-decoration-none">
                 <div class="card project">
                     <img class="img-fluid" v-bind:src="project.thumbnail_image">

themes/james-theme/source/css/style.styl

@@ -60,12 +60,6 @@ body {
   width: 100%;
 }
 
-.thumbnail-col2   { height: 100px; }
-.thumbnail-col3   { height: 160px; }
-.thumbnail-col4   { height: 200px; }
-.thumbnail-col6   { height: 300px; }
-.thumbnail-col12  { height: 450px; }
-
 .legend{
   text-align: center;
   font-size: 14px;
@@ -161,7 +155,7 @@ img.hero {
   object-fit: cover;
   width: 100%;
 }
-.next-post {margin: 0px; padding: 0px;}
+.next-post { margin-left: -15px; margin-right: -15px;}
 .next-post img {
   height: 400px;
   object-fit: cover;
@@ -263,6 +257,7 @@ img.hero {
 .card.project .card-body { height: 150px; padding-top: 10px; padding-bottom: 4px;}
 .card.project .card-title { margin-bottom: 8px;}
 .card.project p { color: #212529; }
+.col-sm-4 .card.project img { height: auto; }
 
 /* default styles for all the tags */
 .vue-tags-input .ti-tag {
@@ -291,6 +286,13 @@ img.hero {
 .social-link { color: #6c757d; }
 .social-link:hover { color: black; }
 
+.hide-if-lg {
+    display: none;
+}
+
+.video-height-hero { background-color: black; height: 650px; padding: 0px;}
+.video-height-content { background-color: black; height: 650px; padding: 0px;}
+
 @media (max-width: 992px) {
   .screenshot { height: 150px; }
 }
@@ -303,10 +305,10 @@ img.hero {
 	    padding-top: 35px;
 	    width: 600px;
 	}
-	.thumbnail {
-		 width: 130px;
-		 height: 80px;
-	}
+	// .thumbnail {
+	// 	 width: 130px;
+	// 	 height: 80px;
+	// }
   .screenshot { height: 140px; }
 	.avatar { width: 140px; }
 	.avatar > img { width: 140px; }
@@ -315,15 +317,13 @@ img.hero {
 }
 
 @media (max-width: 768px) {
-  .navbar {
-    padding-top: 15px;
-  }
+
   .screenshot { height: 130px; }
 }
 
 @media (max-width: 640px) {
   body {
-	  font-size: 12px;
+	  font-size: 16px;
 	  line-height: 1.1;
   }
   .center-div {
@@ -333,10 +333,15 @@ img.hero {
     padding-top: 35px;
     width: 300px;
   }
-  .thumbnail {
-	  width: 120px;
-	  height: 80px;
-  }
+  // .thumbnail {
+	//   width: 120px;
+	//   height: 80px;
+  // }
+  img.hero { height: 220px; }
+  .about-author img { max-width: 100px; }
+  .about-author .social-media-icon { width: 24px; height: 24px; margin: 4px;}
+  .about-author .social-media-icon > img { width: 24px; height: 24px;}
+  
   .screenshot { height: 110px; }
   .link-list {
     margin-top: 20px;
@@ -355,11 +360,31 @@ img.hero {
     font-size: 14px;
     width: 160px;
   }
+  .hide-if-lg {
+    display: flex;
+  }
+
   .hide-if-sm {
     display: none;
   }
   .social-media-list { margin-top: 20px;}
   
+  
+  .display-3 { font-size: 2.8rem; }
+  .display-4 { font-size: 2.5rem; }
+  .project h1 { margin-bottom: 10px; }
+
+  .next-post img { height: 160px; }
+  .next-post::after {
+    margin-top: -160px;
+    height: 160px;
+  }
+  .next-post-link { top: -135px; }
+  .next-post-link h4 { font-size: 20px; }
+  .next-post-link h2 { font-size: 26px; }
+  
+  .video-height-hero { height: 220px;}
+  .video-height-content { height: 220px;}
 }
 
 
@@ -440,12 +465,7 @@ img.hero {
   }
 }
 @media (max-width: 47.9em) {
-    html {
-        height: 130%;
-        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
-        overflow: visible;
-        margin-top: -10px;
-    }
+    
 }
 @media (max-width: 320px) {
     #stars {