simplify header html; alternative to #1227

daattali · Nov 4, 2023 · 9424f6d · 9424f6d
1 parent ff34170
commit 9424f6d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 81 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,15 +1,11 @@
-<!-- TODO this file has become a mess, refactor it -->
-
 {% assign date_format = site.date_format | default: "%B %-d, %Y" %}
 
-{% if page.cover-img or page.title %}
-
 {% if page.cover-img %}
   <div id="header-big-imgs" data-num-img={% if page.cover-img.first %}{{ page.cover-img.size }}{% else %}1{% endif %}
     {% for bigimg in page.cover-img %}
     {% assign imgnum = forloop.index %}
     {% for imginfo in bigimg %}
-      {% if imginfo[0] %}
+    {% if imginfo[0] %}
       data-img-src-{{ imgnum }}="{{ imginfo[0] | absolute_url }}"
       data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
     {% else %}
@@ -21,8 +17,8 @@
 {% endif %}
 
 <header class="header-section {% if page.cover-img %}has-img{% endif %}">
-{% if page.cover-img %}
-<div class="big-img intro-header">
+<div class="intro-header {% if page.cover-img %} big-img {% endif %}">
+  {% if page.cover-img or page.title %}
   <div class="container-md">
     <div class="row">
       <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
@@ -56,43 +52,8 @@ <h2 class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</h2>
       </div>
     </div>
   </div>
-  <span class='img-desc'></span>
-</div>
-{% endif %}
-<div class="intro-header no-img">
-  <div class="container-md">
-    <div class="row">
-      <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
-        <div class="{{ include.type }}-heading">
-          <h1>{% if page.title %}{{ page.title | strip_html }}{% else %}<br/>{% endif %}</h1>
-          {% if page.subtitle %}
-            {% if include.type == "page" %}
-              <hr class="small">
-              <span class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</span>
-            {% else %}
-              <h2 class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</h2>
-            {% endif %}
-          {% endif %}
-
-          {% if include.type == "post" %} 
-            {% if page.author %}
-              By <strong>{{ page.author | strip_html }}</strong><br>
-            {% endif%}
-            <span class="post-meta">Posted on {{ page.date | date: date_format }}</span>
-            {% if page.last-updated %}
-              <span class="post-meta">
-                <span class="d-none d-md-inline middot">&middot;</span>
-                Last updated {{ page.last-updated | date: date_format }}
-              </span>
-            {% endif %}
-            {% if page.readtime %}
-              {% include readtime.html %}
-            {% endif %}
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
+  {% endif %}
+  {% if page.cover-img %}<span class='img-desc'></span>{% endif %}
 </div>
 
 {% if page.header-extra %}
@@ -102,7 +63,3 @@ <h2 class="{{ include.type }}-subheading">{{ page.subtitle | strip_html }}</h2>
 {% endif %}
 
 </header>
-
-{% else %}
-<div class="intro-header"></div>
-{% endif %}
diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
@@ -740,39 +740,6 @@ nav.top-nav-short-permanent ~ header > .intro-header.big-img {
   }
 }
 
-.header-section.has-img .no-img {
-  margin-top: 0;
-  background-color: #FCFCFC;
-  margin: 0 0 2.5rem;
-  padding: 1.25rem 0;
-  box-shadow: 0 0 0.3125rem #AAA;
-}
-/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
-.header-section.has-img .intro-header.no-img {
-  display: none;
-}
-@media (max-width: 365px) {
-  .header-section.has-img .intro-header.no-img {
-    display: block;
-  }
-  .intro-header.big-img {
-    width: 100%;
-    height: 13.75rem;
-  }
-  .intro-header.big-img .page-heading,
-  .intro-header.big-img .post-heading {
-    display: none;
-  }
-  .header-section.has-img .big-img {
-    margin-bottom: 0;
-  }
-}
-@media (max-width: 325px) {
-  .intro-header.big-img {
-    height: 12.5rem;
-  }
-}
-
 #header-gh-btns {
   margin-bottom: 0.9375rem;
 }