cosmetics

Author: alvagante

_includes/adi_detail.html

@@ -1,20 +1,20 @@
-<section id="blogs">
+<section id="adi">
   <div class="content-section-a">
     <div class="container">
       <div class="row adi-list">
         <div class="col-lg-2">
-          <a href="{{ site.url }}/AbnormalDevOpsIterations/"><img class="img-responsive" src="{{ site.url }}/img/pic-adi.png" alt="Abnormal DevOps Iterations"></a>
-          <h4>{{ page.number }}</h4>
+          <a href="{{ site.url }}/AbnormalDevOpsIterations/"><img class="img-responsive central-image" src="{{ site.url }}/img/pic-adi.png" alt="Abnormal DevOps Iterations"></a>
         </div>
         <div class="col-lg-2">
-          <img class="img-responsive" src="{{ site.url }}/AbnormalDevOpsIterations/img/{{ page.number }}.png" alt="ADI {{ page.number }} - {{ page.guest }}: {{ page.title }}">
+          <h1>ADI {{ page.number }}</h1>
         </div>
         <div class="col-lg-8">
         <h1>{{ page.guest }} - {{ page.title }}</h2>
         </div>
       </div>
       <div class="row">
         <div class="col-lg-5">
+          <img class="img-responsive float-image" src="{{ site.url }}/AbnormalDevOpsIterations/img/{{ page.number }}.png" alt="ADI {{ page.number }} - {{ page.guest }}: {{ page.title }}">
           {{ content }}
           <div class="tags">{% for tag in page.tags %}#{{ tag }} {% endfor %}</div>
         </div>

_includes/adi_list.html

@@ -1,28 +1,20 @@
 <section id="blog">
   <div class="content-section-a">
     <div class="container">
-      <div class="row">
-        <div>
-          <div class="lead">
-          <h2>Abnormal DevOps Iterations: Human Intelligence</h2>
-          <h2>A podcast about Puppet, DevOps, IT operations, AI and everything</h2>
+      <h1>Human Intelligence</h1>
 
-          {% assign sorted_posts = site.episodes | sort: "path" | reverse %}
-          {% for post in sorted_posts %}
-          <div class="row adi-list">
-            <div class="col-lg-4">
-              <a href="{{ site.url }}{{ post.url }}" target="_parent"><img class="img-responsive" src="{{ site.url }}/AbnormalDevOpsIterations/img/{{ post.number }}.png" alt="ADI {{ post.number }} - {{ post.guest }}: {{ post.title }}"></a>
-            </div>
-            <div class="col-lg-8">
-            <h2>{{ post.number }} - {{ post.guest }}</h2>
-            <h2><a href="{{ site.url }}{{ post.url }}" target="_parent">{{ post.title }}</a></h2>
-            </div>
-          </div>
-          {% endfor %}
-          </ul>
-          </div>
+      {% assign sorted_posts = site.episodes | sort: "path" | reverse %}
+      {% for post in sorted_posts %}
+      <div class="row adi-list">
+        <div class="col-lg-4">
+          <a href="{{ site.url }}{{ post.url }}" target="_parent"><img class="img-responsive" src="{{ site.url }}/AbnormalDevOpsIterations/img/{{ post.number }}.png" alt="ADI {{ post.number }} - {{ post.guest }}: {{ post.title }}"></a>
+        </div>
+        <div class="col-lg-8">
+        <h3>{{ post.number }} - {{ post.guest }}</h3>
+        <h3><a href="{{ site.url }}{{ post.url }}" target="_parent">{{ post.title }}</a></h3>
         </div>
       </div>
+      {% endfor %}
     </div>
   </div>
 </section>

_includes/adi_splash.html

@@ -2,22 +2,20 @@
   <div class="adi-header">
     <div class="container">
       <div class="row">
-        <div class="col-lg-4">
-          <a href="{{ site.url }}/AbnormalDevOpsIterations/"><img class="img-responsive" src="{{ site.url }}/img/pic-adi.png" alt="Abnormal DevOps Iterations"></a>
+        <div class="col-lg-4 central-image">
+          <a href="{{ site.url }}/AbnormalDevOpsIterations/"><img class="img-responsive central-image" src="{{ site.url }}/img/adi-white.png" alt="Abnormal DevOps Iterations"></a>
         </div>
         <div class="col-lg-4">
             <h1>Abnormal DevOps Iterations</h1>
-            <hr class="intro-divider">
             <h2>A podcast about Puppet, DevOps, IT operations, AI and everything</h2>
         </div>
         <div class="col-lg-4">
           <div class="lead">
             <h3>Video:</h3>
             <a href="https://youtube.com/@AbnormalDevOpsIterations" class="btn btn-default btn-lg" target="_blank"><span class="network-name">YouTube</span></a>
-           <hr class="intro-divider">
             <h3>Audio:</h3>
-            <a href="https://open.spotify.com/show/4viAGMM539m0A230xqKhqD?si=bd0d41f805054313" target="_blank"><h3>Spotify</h3></a>
-            <a href="https://music.amazon.com/podcasts/fbb3a98e-1877-4e66-8b65-23388d0e867e/abnormal-devops-iterations" target="_blank"><h3>Amazon Music</h3></a>
+            <a href="https://open.spotify.com/show/4viAGMM539m0A230xqKhqD?si=bd0d41f805054313" target="_blank"><h4>Spotify</h4></a>
+            <a href="https://music.amazon.com/podcasts/fbb3a98e-1877-4e66-8b65-23388d0e867e/abnormal-devops-iterations" target="_blank"><h4>Amazon Music</h4></a>
         </div>
       </div>
     </div>

css/landing-page.css

@@ -16,7 +16,8 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+p {
     font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
     font-weight: 700;
 }
@@ -86,11 +87,19 @@ h6 {
     background: url(../img/background-podcast.jpg) no-repeat center center;
     background-size: cover;
     vertical-align: middle;
+}
+
+.central-image {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }
 
+.float-image {
+    float: left; /* or right */
+    margin: 10px; /* Adjust margin as needed */
+}
+
 .adi-list {
     padding-top: 10px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
     padding-bottom: 10px;