beautiful-jekyll-theme 4.1.0 → 6.0.1

data/assets/css/{main.css → beautifuljekyll.css}

@@ -20,6 +20,7 @@ body {
   background-image: url({{ site.page-img | relative_url }});
   background-attachment: fixed;
   {% endif %}
+  overflow-wrap: break-word;
 }
 p {
   line-height: 1.5;
@@ -42,6 +43,9 @@ h3 {
 h4 {
   font-size: 1.125rem;
 }
+h1, h2, h3, h4 {
+  margin-top: 1.25rem;
+}
 a {
   color: {{ site.link-col | default: "#008AFF" }};
 }
@@ -65,42 +69,33 @@ hr.small {
 }
 
 /* fix in-page anchors to not be behind fixed header */
-:target:before { 
+:target:before {
   content: "";
   display: block;
   height: 3.125rem; /* navbar height */
   margin: -3.125rem 0 0;
 }
 
-.main-content {
-  padding-top: 5rem;
-}
-@media (min-width: 768px) {
-  .main-content {
-    padding-top: 8.125rem;
-  }
-}
-
 .hideme {
   display: none;
 }
 
 ::-moz-selection {
-  color: white;
+  color: #fff;
   text-shadow: none;
   background-color: {{ site.hover-col | default: "#0085A1" }};
 }
 ::selection {
-  color: white;
+  color: #fff;
   text-shadow: none;
   background-color: {{ site.hover-col | default: "#0085A1" }};
 }
 img::selection {
-  color: white;
+  color: #fff;
   background: transparent;
 }
 img::-moz-selection {
-  color: white;
+  color: #fff;
   background: transparent;
 }
 
@@ -108,6 +103,13 @@ img {
   max-width: 100%;
 }
 
+.linked-section {
+  padding-top: 3.75rem;
+  margin-top: -1.5625rem;
+}
+
+/* Comments */
+
 .disqus-comments {
   margin-top: 1.875rem;
 }
@@ -118,24 +120,19 @@ img {
   }
 }
 
-.linked-section {
-  padding-top: 3.75rem;
-  margin-top: -1.5625rem;
-}
-
 /* --- Navbar --- */
 
 .navbar-custom {
-  background-color: {{ site.navbar-col | default: "#F5F5F5" }};
-  border-bottom: 1px solid {{ site.navbar-border-col | default: "#EAEAEA" }};
+  background-color: {{ site.navbar-col | default: "#EAEAEA" }};
+  border-bottom: 1px solid {{ site.navbar-border-col | default: "#DDDDDD" }};
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   {% if site.navbar-img %}
     background-image: url({{ site.navbar-img | relative_url }});
     background-attachment: fixed;
   {% endif %}
-  -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-  -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
-  transition: background .5s ease-in-out,padding .5s ease-in-out;
+  -webkit-transition: padding .5s ease-in-out;
+  -moz-transition: padding .5s ease-in-out;
+  transition: padding .5s ease-in-out;
 }
 
 .navbar-custom,
@@ -177,27 +174,18 @@ img {
   height: 2.5rem;
 }
 
-.navbar-custom .navbar-brand:hover,
-.navbar-custom .navbar-brand:focus ,
-.navbar-custom .navbar-nav .nav-link:hover,
-.navbar-custom .navbar-nav .nav-link:focus,
-.navbar-custom .navbar-nav .dropdown-item:hover,
-.navbar-custom .navbar-nav .dropdown-item:focus {
-  color: {{ site.hover-col | default: "#0085A1" }};
-}
-
 .navbar-custom .navbar-nav .nav-item {
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   letter-spacing: 0.0625rem;
 }
 
 .navbar-custom .navbar-nav .nav-link {
   padding-top: 0;
   padding-bottom: 0;
-  line-height: 1.5;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  line-height: 1.25rem;
+  padding-top: 0.9375rem;
+  padding-bottom: 0.9375rem;
 }
 
 .navbar-custom .navbar-brand,
@@ -223,7 +211,7 @@ img {
   border-width: 0.4em;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1200px) {
   .navbar-custom {
     padding-top: 1.25rem;
     padding-bottom: 1.25rem;
@@ -238,17 +226,17 @@ img {
     height: 3.125rem;
   }
 
-  .navbar-expand-md .navbar-nav .nav-link {
+  .navbar-expand-xl .navbar-nav .nav-link {
     padding-left: 0.9375rem;
     padding-right: 0.9375rem;
   }
 
-  .navbar-expand-md .navbar-nav .nav-item:not(.dropdown):last-child .nav-link {
+  .navbar-expand-xl .navbar-nav .nav-item:not(.dropdown):last-child .nav-link {
     padding-right: 0;
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1200px) {
   .navbar-custom .nav-item.dropdown:hover {
     background: rgba(0, 0, 0, 0.1);
   }
@@ -259,38 +247,49 @@ img {
 }
 
 .navbar-custom .nav-item.dropdown .dropdown-menu {
-  min-width: 0;
   margin-top: 0;
   font-size: 1em;
   border: 0;
   padding: 0;
+  {% if site.navbar-var-length %}
+  min-width: 100%;
+  {% else %}
+  min-width: 0;
   width: 100%;
   word-break: break-word;
+  {% endif %}
 }
+
 .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
-  white-space: normal;
   padding: 0.625rem;
-  background-color: {{ site.navbar-col | default: "#F5F5F5" }};
+  background-color: {{ site.navbar-col | default: "#EAEAEA" }};
   text-decoration: none !important;
-  border-width: 0 1px 1px 1px;
   font-weight: normal;
+  color: {{ site.navbar-text-col | default: "#404040" }};
+  {% unless site.navbar-var-length %}
+  white-space: normal;
+  {% endunless %}
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1200px) {
   .navbar-custom .nav-item.dropdown .dropdown-menu {
     text-align: center;
   }
 
   .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
     padding-left: 0.625rem;
-    border: 1px solid {{ site.navbar-border-col | default: "#EAEAEA" }};
+    border: 1px solid {{ site.navbar-border-col | default: "#DDDDDD" }};
     border-width: 0 1px 1px;
   }
+
+  .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item:first-child {
+    border-top-width: 1px;
+  }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 1199px) {
   .navbar-custom .navbar-collapse {
-    border-top: 1px solid {{ site.navbar-border-col | default: "#EAEAEA" }};
+    border-top: 1px solid {{ site.navbar-border-col | default: "#DDDDDD" }};
     margin: 0 -1rem;
   }
 
@@ -310,12 +309,20 @@ img {
     padding-left: 2rem;
   }
 }
+.navbar-custom .navbar-brand:hover,
+.navbar-custom .navbar-brand:focus ,
+.navbar-custom .navbar-nav .nav-link:hover,
+.navbar-custom .navbar-nav .nav-link:focus,
+.navbar-custom .navbar-nav .dropdown-menu .dropdown-item:hover,
+.navbar-custom .navbar-nav .dropdown-menu .dropdown-item:focus {
+  color: {{ site.hover-col | default: "#0085A1" }};
+}
 
 .navbar-custom .avatar-container {
   position: absolute;
   left: 50%;
   width: 3.125rem;
-  margin-top: 1.75rem;
+  bottom: -1.5rem;
   transition: opacity 0.5s ease-in-out;
   -webkit-transition: opacity 0.5s ease-in-out;
   -moz-transition: opacity 0.5s ease-in-out;
@@ -330,7 +337,6 @@ img {
 
 .navbar-custom .avatar-container .avatar-img-border {
   width: 100%;
-  display: inline-block;
   margin-left: -50%;
   {% unless site.round-avatar == false %}
     border-radius: 50%;
@@ -351,12 +357,13 @@ img {
   display: none;
 }
 
-@media (min-width: 768px) {
-  .navbar-custom .avatar-container {
+@media (min-width: 1200px) {
+  .navbar-custom.top-nav-regular .avatar-container {
     width: 6.25rem;
+    bottom: -1.9375rem;
   }
 
-  .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 +372,7 @@ img {
     {% endunless %}
   }
 
-  .navbar-custom .avatar-container .avatar-img {
+  .navbar-custom.top-nav-regular .avatar-container .avatar-img {
     width: 100%;
   }
 }
@@ -377,7 +384,7 @@ footer {
   border-top: 1px #EAEAEA solid;
   margin-top: 3.125rem;
   font-size: 0.875rem;
-  background-color: {{ site.footer-col | default: "#F5F5F5" }};
+  background-color: {{ site.footer-col | default: "#EAEAEA" }};
   {% if site.footer-img %}
     background-image: url({{ site.footer-img | relative_url }});
     background-attachment: fixed;
@@ -392,6 +399,11 @@ footer a {
   color: {{ site.footer-link-col | default: "#404040" }};
 }
 
+footer a:hover,
+footer a:focus {
+  color: {{ site.footer-hover-col | default: "#0085A1" }};
+}
+
 footer .list-inline {
   margin: 0;
   padding: 0;
@@ -428,11 +440,16 @@ footer .footer-custom-content {
   }
 }
 
-/* --- Post preview --- */
+/* --- Post preview (feed) --- */
+
+.posts-list {
+    margin: 0;
+}
 
 .post-preview {
   padding: 1.25rem 0;
   border-bottom: 1px solid #eee;
+  overflow: hidden;
 }
 
 @media (min-width: 768px) {
@@ -447,6 +464,7 @@ footer .footer-custom-content {
 
 .post-preview a {
   text-decoration: none;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: {{ site.text-col | default: "#404040" }};
 }
 
@@ -471,33 +489,70 @@ footer .footer-custom-content {
   font-size: 1.125rem;
   font-style: italic;
   margin: 0 0 0.625rem;
+  font-family: 'Lora', 'Times New Roman', serif;
 }
-.post-preview .post-entry {
-  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.post-entry-container {
+.post-heading .post-meta {
   display: inline-block;
-  width: 100%;
 }
-.post-entry {
+@media (max-width: 767px) {
+  .post-heading .post-meta {
+    display: block;
+    margin-bottom: 0;
+  }
+}
+.post-heading .post-meta .middot {
+  margin: 0 0.625rem;
+}
+.post-preview .post-entry {
   width: 100%;
 }
-.post-image {
+.post-preview .post-image {
   float: right;
   margin-left: 0.625rem;
   height: 12rem;
   width: 12rem;
-  margin-top: -2.1875rem;
-  filter: grayscale(90%);
 }
-.post-image:hover {
+.post-preview .post-image {
+  filter: grayscale(40%);
+}
+.post-preview .post-image:hover {
   filter: grayscale(0%);
 }
-.post-image img {
-  border-radius: 6.25rem;
-  height: 12rem;
-  width: 12rem;
+.post-preview .post-image img {
+  max-height: 100%;
+  max-width: 100%;
+}
+.post-preview .post-image-short {
+  margin-top: -2.1875rem;
+}
+@media (max-width: 767px) {
+  .post-preview .post-image {
+    height: 9rem;
+    width: 9rem;
+  }
+  .post-preview .post-image-short {
+    margin-top: 0;
+  }
+}
+.post-preview .post-image-small {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  display: none;
+}
+.post-preview .post-image-small img {
+  max-width: 6.25rem;
+  max-height: 6.25rem;
+}
+@media (max-width: 500px) {
+  .post-preview .post-image {
+    display: none;
+  }
+  .post-preview .post-image-small {
+    display: block;
+  }
 }
+
 .post-preview .post-read-more {
   font-weight: 800;
 }
@@ -512,21 +567,32 @@ footer .footer-custom-content {
 
 .blog-tags {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  color: #999;
   font-size: 0.9375rem;
-  margin-bottom: 1.875rem;
+  margin: 1.875rem 0;
+}
+
+.blog-tags span {
+  color: {{ site.text-col | default: "#404040" }};
+  opacity: 0.8;
+}
+
+.blog-tags .list-inline-item {
+  margin-right: 0;
 }
 
 .blog-tags a {
-  color: {{ site.link-col | default: "#008AFF" }};
+  color: {{ site.text-col | default: "#404040" }};
   text-decoration: none;
   padding: 0 0.3125rem;
+  opacity: 0.8;
+  border: 1px solid transparent;
+  border-radius: 0.1875rem;
 }
 
 .blog-tags a:hover {
-  border-radius: 2px;
-  color: {{ site.hover-col | default: "#0085A1" }};
-  background-color: #EEE;
+  opacity: 1;
+  color: {{ site.text-col | default: "#404040" }};
+  border-color: {{ site.text-col | default: "#404040" }};
 }
 
 .post-preview .blog-tags {
@@ -540,28 +606,30 @@ footer .footer-custom-content {
   }
 }
 
-@media (max-width: 767px) {
-  .post-image, .post-image img {
-    margin-top: 0;
-    height: 9rem;
-    width: 9rem;
-  }
+/* Tags page */
+
+.tag-btn {
+  margin: 0.3125rem;
 }
 
-@media (max-width: 500px) {
-  .post-image, .post-image img {
-    height: 6.25rem;
-    width: 6.25rem;
-  }
+#full-tags-list {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
 
-  .post-image {
-    width: 100%;
-    text-align: center;
-    margin-top: 0;
-    margin-left: 0;
-    float: none;
-  }
+#full-tags-list .tag-entry {
+  margin: 0 0 0.9375rem 1.5625rem;
+}
+
+#full-tags-list .tag-entry a {
+  font-size: 1.25rem;
+}
+
+#full-tags-list .tag-entry .entry-date {
+  color: #808080;
+  font-style: italic;
+  font-size: 1rem;
 }
+
 /* --- Post and page headers --- */
 
 .intro-header {
@@ -577,6 +645,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%;
@@ -643,7 +717,7 @@ footer .footer-custom-content {
   bottom: 0;
   display: none;
 }
-@media (min-width: 768px) {
+@media (min-width: 1200px) {
   .intro-header {
     margin-top: 8.125rem;
   }
@@ -698,17 +772,6 @@ footer .footer-custom-content {
   }
 }
 
-.caption {
-  text-align: center;
-  font-size: 0.875rem;
-  padding: 0.625rem;
-  font-style: italic;
-  margin: 0;
-  display: block;
-  border-bottom-right-radius: 0.3125rem;
-  border-bottom-left-radius: 0.3125rem;
-}
-
 #header-gh-btns {
   margin-bottom: 0.9375rem;
 }
@@ -719,18 +782,6 @@ footer .footer-custom-content {
   }
 }
 
-.reader-time {
-  display: inline-block;
-}
-@media (max-width: 767px) {
-  .reader-time {
-    display: block;
-  }
-}
-.reader-time .middot { 
-  margin: 0 0.625rem;
-}
-
 /* --- Pagination --- */
 
 .pagination {
@@ -813,9 +864,22 @@ table tr td :last-child {
 
 /* --- Code blocks --- */
 
+code {
+  padding: 0.125rem 0.25rem;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 0.25rem;
+}
+
+pre code {
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+
 pre {
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: 0.875rem;
+  line-height: 1.5em;
   border-radius: 0.25rem;
   padding: 0.59375rem;
 }
@@ -826,7 +890,7 @@ pre {
 }
 .highlight > pre {
   background-image: linear-gradient(
-    rgba(0,0,0,0.06), rgba(0,0,0,0.06) 1.5em, rgba(0,0,0,0.03) 1.5em, rgba(0,0,0,0.03) 3em);
+    rgba(0,0,0,0.03), rgba(0,0,0,0.03) 1.5em, rgba(0,0,0,0.02) 1.5em, rgba(0,0,0,0.02) 3em);
   background-size: auto 3em;
   background-position-y: 0.625rem;
   border: 1px solid rgba(0,0,0,0.1);
@@ -835,7 +899,9 @@ pre {
 .highlight > pre:not([class~="highlight"]) { /* code block with line number */
   padding: 0;
 }
-.highlight table, .highlight tr, .highlight td { /* to be removed after fixing table styles */
+.highlight table,
+.highlight tr,
+.highlight td { /* to be removed after fixing table styles */
   border: none;
   background: none;
   padding: 0;
@@ -858,14 +924,28 @@ pre {
   background: none;
 }
 
+/* Fix table border github gist snippets */
+
+.gist, .gist-file table tr {
+  border: unset;
+}
+
+.gist, .gist-file table tr td {
+  border: unset;
+}
+
 /* --- Social media sharing section --- */
 
 #social-share-section {
   margin-bottom: 1.875rem;
+  margin-top: 1.875rem;
 }
 
 /* --- Notification boxes --- */
-.box-note, .box-warning, .box-error, .box-success {
+.box-note,
+.box-warning,
+.box-error,
+.box-success {
   padding: 0.9375rem 0.9375rem 0.9375rem 0.625rem;
   margin: 1.25rem 1.25rem 1.25rem 0.3125rem;
   border: 1px solid #eee;
@@ -893,36 +973,148 @@ pre {
   border-left-color: #3CB371;
 }
 
-/* Fix table border github gist snippets */
+/* --- Misc blog post styles --- */
 
-.gist, .gist-file table tr {
-  border: unset;
+.blog-post :first-child {
+  margin-top: 0;
 }
 
-.gist, .gist-file table tr td {
-  border: unset;
+.blog-post img {
+  max-width: 100%;
 }
 
-/* Tags page */
+.blog-post .caption {
+  text-align: center;
+  font-size: 0.875rem;
+  padding: 0.625rem;
+  font-style: italic;
+  color: #777;
+  margin: 0;
+  display: block;
+  border-bottom-right-radius: 0.3125rem;
+  border-bottom-left-radius: 0.3125rem;
+}
 
-.tag-btn {
-  margin: 0.3125rem;
+.blog-post hr {
+  max-width: 25%;
+  border-width: 0.25rem;
+  border-radius: 0.1875rem;
+  border-color: #808080;
 }
 
-#full-tags-list {
-  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+.blog-post blockquote {
+  padding: 0.625rem 1.25rem;
+  margin: 0 0 1.25rem;
+  font-size: 1.1rem;
+  border-left: 0.3125rem solid #eee;
 }
 
-#full-tags-list .tag-entry {
-  margin: 0 0 0.9375rem 1.5625rem;
+.blog-post blockquote p:last-child {
+  margin-bottom: 0;
 }
 
-#full-tags-list .tag-entry a {
-  font-size: 1.25rem;
+.center {
+  display: block;
+  margin: 0 auto;
 }
 
-#full-tags-list .tag-entry .entry-date {
-  color: #808080;
-  font-style: italic;
-  font-size: 1rem;
+/* Search bar */
+#beautifuljekyll-search-overlay {
+  display: none;
+  z-index: 999999;
+  position: fixed;
+  background: rgba(0,0,0,0.9);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  text-align: center;
+  padding: 1rem;
+}
+#nav-search-exit {
+  position: absolute;
+  top: 1.5rem;
+  cursor: pointer;
+  right: 25%;
+  margin-right: 2rem;
+  color: #555;
+  font-size: 2rem;
+  line-height: 2rem;
+  font-weight: bold;
+}
+#nav-search-exit:hover {
+  color: #000;
+}
+#nav-search-input {
+  text-align: center;
+  background: #e7edee;
+  margin: auto;
+  display: block;
+  font-size: 2rem;
+  width: 50%;
+  transition: width 300ms ease;
+  color: #222;
+  border-radius: 5rem;
+  outline: none;
+  border: none;
+  padding: 0 3rem;
+}
+@media (max-width: 1199px) {
+  #nav-search-input {
+    width: 75%;
+  }
+  #nav-search-exit {
+    right: 12.5%;
+  }
+}
+@media (max-width: 767px) {
+  #nav-search-input {
+    width: 100%;
+  }
+  #nav-search-exit {
+    right: 0;
+  }
+}
+#nav-search-input:focus {
+  background: #f3f8fe;
+  box-shadow: 0px 0.15rem 1rem #e7f4ff;
+  outline: none;
+}
+
+#nav-search-input::placeholder {
+  color: #777;
+}
+
+#search-results-container {
+  list-style: none;
+  padding-left: unset;
+  margin-top: 1.5rem;
+  color: #fff;
+  font-size: 1.5rem;
+  max-height: calc(100vh - 6.5rem);
+  overflow-y: auto;
+}
+#search-results-container a {
+  color: #fff;
+  text-decoration: none;
+}
+#search-results-container a:hover {
+  color: #fff;
+  text-decoration: underline;
+}
+
+#nav-search-icon {
+  display: inline-block;
+}
+#nav-search-text {
+  display: none;
+}
+
+@media (max-width: 1199px) {
+  #nav-search-icon {
+    display: none;
+  }
+  #nav-search-text {
+    display: inline-block;
+  }
 }