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

This commit is contained in:
Dean Attali 2020-08-31 17:46:42 +00:00
parent 5068c2de8d
commit 86b9f8236c
3 changed files with 12 additions and 4 deletions

View File

@ -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)

View File

@ -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>

View File

@ -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%;