fix nav-short option to have short avatar and to not have top whitespace

skulshreshtha · Aug 31, 2020 · 86b9f82 · 86b9f82
1 parent 5068c2d
commit 86b9f82
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@ One of the major changes in this version is that a lot of time was spent on reth
 - Added `head-extra` YAML option which i s similar to `footer-extra` but is used to include custom HTML code in a page's `<head>` tag
 - Added `full-width` YAML option to allow having full-width pages
 - Added `feed_show_excerpt` config option to show/hide the post excerpts on the feed page
+- When `nav-short` is turned on, the avatar will also be shorter
+- Fixed rendering issues with `nav-short` option that caused the body of the page to start too low
 - Improved the `footer-extra` YAML option to support multiple files instead of only a single file
 - Upgraded jQuery to version 3.5.1 to fix a couple security vulnerabilities with the previous version
 - Added automatic navbar color detection (#702)

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-md navbar-light fixed-top navbar-custom {% if page.nav-short %}top-nav-short-permanent{% endif %}">
+<nav class="navbar navbar-expand-md navbar-light fixed-top navbar-custom {% if page.nav-short %}top-nav-short-permanent{% else %}top-nav-regular{% endif %}">
 
   {%- if site.title-img -%}
     <a class="navbar-brand navbar-brand-logo" href="{{ '' | absolute_url }}"><img alt="{{ site.title }} Logo" src="{{ site.title-img }}"/></a>

diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
@@ -352,11 +352,11 @@ img {
 }
 
 @media (min-width: 768px) {
-  .navbar-custom .avatar-container {
+  .navbar-custom.top-nav-regular .avatar-container {
     width: 6.25rem;
   }
 
-  .navbar-custom .avatar-container .avatar-img-border {
+  .navbar-custom.top-nav-regular .avatar-container .avatar-img-border {
     width: 100%;
     {% unless site.round-avatar == false %}
     box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
@@ -365,7 +365,7 @@ img {
     {% endunless %}
   }
 
-  .navbar-custom .avatar-container .avatar-img {
+  .navbar-custom.top-nav-regular .avatar-container .avatar-img {
     width: 100%;
   }
 }
@@ -582,6 +582,12 @@ footer .footer-custom-content {
   margin-top: 3.1875rem; /* The small navbar is 50px tall + 1px border */
   margin-bottom: 2.1875rem;
 }
+nav.top-nav-short-permanent ~ header > .intro-header {
+  margin-top: 5rem;
+}
+nav.top-nav-short-permanent ~ header > .intro-header.big-img {
+  margin-top: 3.1875rem;
+}
 .intro-header.big-img .big-img-transition {
   position: absolute;
   width: 100%;