improve the ui and post content

runzbuzz · Jun 24, 2024 · 0bb5654 · 0bb5654
1 parent b89ab4d
commit 0bb5654
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 *.gem
 .bundle
 .jekyll-cache
@@ -7,4 +8,4 @@ Gemfile.lock
 _site/
 .sass-cache/
 .jekyll-cache/
-.jekyll-metadata
+.jekyll-metadata
diff --git a/Gemfile b/Gemfile
@@ -11,4 +11,6 @@ gem 'jekyll-paginate'
 gem 'jekyll-feed'
 gem 'jekyll-seo-tag'
 gem 'jekyll-sitemap'
-gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem "bundler", "~> 2.5"
diff --git a/_includes/head.html b/_includes/head.html
@@ -20,6 +20,12 @@
 
     <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
 
+        <!-- add bootstrap >
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+        <!-- end of bootstrap -->
+
+
     <!-- Fonts for the main menu-->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -54,9 +60,6 @@
         {% endif %}
         <!-- End Google Analytics -->
 
-        <!-- add bootstrap >
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-        <!-- end of bootstrap -->
+
 
 </head>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -8,35 +8,35 @@
 
     <div class = "cover-img">
       {% if post.cover %}
-        <img src="{{post.cover}}" alt="Podcast Cover">
+        <img src="{{ post.cover | prepend: "/assets/forposts/" | absolute_url}}" alt="Podcast Cover">
       {% else %}
-        <img src="{{ "/assets/img/runz.png" | absolute_url}}" alt="Podcast Cover">
+      	<!-- -->
+        <img src="{{ "/assets/img/sidebar-mascot.png" | absolute_url}}" alt="Podcast Cover">
+
       {% endif %}
     </div>
 
-    <div class = title>
+    <div class = "title">
         <h2 id = "post-title"><a href="{{ post.url  | absolute_url }}">{{ post.title }}</a></h2>
 
         <div class = "info">
             <span>
               {% if site.data.settings.translate-date == true %}
-                <i class="far fa-calendar" aria-hidden="true"></i>{%- include date.html date=post.date -%}<span> - </span><i class="far fa-clock"></i> {{post.length}}
+                <i class="far fa-calendar" aria-hidden="true"></i>{%- include date.html date=post.date -%}<span> 
+                {%if post.length%}
+                 — </span><i class="far fa-clock"></i> {{post.length}}-minute read
+                 {%endif%}
               {% else %}
-                <i class="far fa-calendar" aria-hidden="true"></i>{{ post.date | date_to_long_string}}<span> - </span><i class="far fa-clock"></i> {{post.length}}
+                <i class="far fa-calendar" aria-hidden="true"></i>{{ post.date | date_to_long_string}}<span>
+                {%if post.length%}
+                 — </span><i class="far fa-clock"></i> {{post.length}}-minute read
+                 {%endif%}
               {% endif %}
             </span>
         </div>
     </div>
 
 
-    {% capture file %}
-        {{- post.file -}}
-    {% endcapture %}
-    {% capture title %}
-        {{- post.title -}}
-    {% endcapture %}
-    {% include player.html file=file title=title %}
-
     <div class = "long-excerpt">
         <p>
             {% if post.description %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,6 +2,24 @@
 layout: default
 ---
 
+<style>
+.dot {
+  height: 5px;
+  width: 5px;
+  background-color: #6b8fab;
+  border-radius: 50%;
+  display: inline-block;
+  margin-left: 10px;
+  margin-right: 10px;
+
+       position: relative;
+			  top: 50%;
+			  -ms-transform: translateY(-50%);
+			  transform: translateY(-50%);   
+
+}
+</style>
+
 <div class = "single-post">
         <div class="categories">
                 {% assign categories = page.categories %}
@@ -11,12 +29,25 @@
                   {% unless forloop.last %}&nbsp;{% endunless %} 
                 {% endfor %}
         </div>
-        <h2 style="padding-top: 1.5rem;">{{page.title}}</h2>
-        <p style=" text-align: center; color: #6b8fab;font-size: 1rem; padding-top: 0.5rem; padding-bottom: 1rem;font-style: italic;">{{page.description}}</p>
+        <h1 style="padding-top: 1.5rem;">{{page.title}}</h1>
 
+        	{%if page.length%}
+
+		        <p style=" text-align: center; color: #6b8fab;font-size: 1rem; padding-top: 0.5rem; font-style: bold;"> 
+
+		        {% if page.author %}Written by {{page.author}} <span class="dot"></span> {% endif %}
+
+		        Updated {{ page.date | date: "%-d %B %Y" }}
+		        <span class="dot"></span>
+		        {{page.length}}—minute read </p>
+			{%endif%}
+
+                <p style=" text-align: center; color: #6b8fab;font-size: 1.1rem; padding-top: 0.75rem; padding-bottom: 1rem;font-style: italic;">{{page.description}}</p>
 
         {% if page.cover %}
+        		<!--
                 <img src="{{ page.cover | prepend: "/assets/forposts/" | absolute_url}}" alt="Post Cover">
+                -->
         {% endif %}
 
 

diff --git a/_posts/2019-11-03-example-2.md b/_posts/2019-11-03-example-2.md
@@ -3,6 +3,7 @@ title: A random extra episode - EXTRA
 layout: post
 categories: [Example, Jekyll]
 description: Description goes here
+author: Joe Black
 ---
 
 Here you can write things for this episode.

diff --git a/_posts/2019-11-17-example-1.md b/_posts/2019-11-17-example-1.md
@@ -5,9 +5,11 @@ categories: [Example, Jekyll, Main]
 type: main # I use this to split main episodes to extra ones
 description: Description goes here
 file: https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3 #Link to your .mp3 file
-length: "52:14" # mm:ss
+length: "3" #
 videoid: dQw4w9WgXcQ #Copy here only the id of your YouTube video
 cover: wave.svg
+author: Joe Black
+
 ---
 
 Here you can write things for this episode.

diff --git a/_sass/home.scss b/_sass/home.scss
@@ -7,6 +7,29 @@
         height: 210px;
         margin-bottom: 80px;
         background-color: white;
+		border-radius: 5px;
+
+        .cover-img{
+        	display: inline;
+        	position: relative;
+			  //border: 3px solid green;
+			  height: 100%;
+			  aspect-ratio : 1 / 1;
+	        img{
+	        	display: block;
+	        	width: 210px;
+	           //width: auto;
+	           height: 210px;
+	           float: left;
+	           margin-right: 10px;
+	           // The following is to center the image vertically           
+	           position: relative;
+			  top: 50%;
+			  -ms-transform: translateY(-50%);
+			  transform: translateY(-50%);   
+	        }
+        }
+
         p{
             padding: 0 5px;
         }
@@ -15,20 +38,13 @@
         }
         h2{
             padding-top: 5px;
-            margin-right: 5px;
+            margin-right: 5px;   
             a{
-                margin-bottom: 10px;
+                margin-bottom: 5px;
+                display: inline-block;
+                margin-top: 0.5rem;
             }
         }
-        img{
-           width: auto;
-           height: 210px;
-           float: left;
-           margin-right: 10px;
-        }
-        .player-container{
-            margin: 10px auto;
-        }
         .info{
             margin-bottom: 10px;
             font-size: 1rem;

diff --git a/_sass/post.scss b/_sass/post.scss
@@ -18,6 +18,10 @@
             p{
                 font-size: 1.1rem;
             }
+            h1{
+                text-align: center;
+                font-size: 2.5rem;
+            }
             h2{
                 text-align: center;
             }