From 75b97cc875b1a680d8406cc403eedef2d7ff01e3 Mon Sep 17 00:00:00 2001
From: Gianmarco Gargiulo <me@gianmarco.gg>
Date: Sat, 4 Nov 2023 23:52:43 +0100
Subject: [PATCH] Changed the styling on the title and the buttons of the
 ytr.html page, changed the font weight of various headings, improved the post
 cards for tags, changed the font of the comments section's title and changed
 the Javascript messages of the video players and the comments section

---
 static/ytr.html                               | 29 ++++++++++++-------
 themes/hugo-casper3/assets/scss/custom.scss   |  6 ++++
 themes/hugo-casper3/assets/scss/main.scss     |  6 ++--
 .../hugo-casper3/layouts/_default/single.html |  4 +--
 .../layouts/partials/post-card.html           |  4 +++
 .../layouts/shortcodes/video.html             |  4 +--
 6 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/static/ytr.html b/static/ytr.html
index 8c67739..34177a4 100644
--- a/static/ytr.html
+++ b/static/ytr.html
@@ -18,8 +18,8 @@
 		body {
 			display: table-cell;
 			vertical-align: middle;
-			background-color: #000000;
-			color: white;
+			background-color: #1e1e1e;
+			color: #e5e5e5;
 			font: small-caption;
 		}
 
@@ -29,12 +29,15 @@
 
 		h1 {
 			text-align: center;
+			font-family: "Mustica Pro";
+			font-weight: normal;
 		}
 
 		.button {
-			border: none;
+			border: 1px solid;
 			color: white;
 			padding: 10px 32px;
+			margin-bottom: 5px;
 			text-align: center;
 			text-decoration: none;
 			display: inline-block;
@@ -43,10 +46,18 @@
 			border-radius: 5px;
 		}
 
-		#pipedbtn {background-color: darkred} /* Piped */
-		#ytbtn {background-color: red} /* YouTube */
-		#odybtn {background-color: purple} /* Odysee */
-		#ptbtn {background-color: #C2540A} /* PeerTube */
+		@media screen and (min-width: 0px) and (max-width: 500px) {
+			.button{ display: block; }
+		}
+
+		#pipedbtn {background-color: rgba(139,0,0,.2); border-color: darkred} /* Piped */
+		#pipedbtn:hover {background-color: darkred}
+		#ytbtn {background-color: rgba(255,0,0,.2); border-color: red} /* YouTube */
+		#ytbtn:hover {background-color: red}
+		#odybtn {background-color: rgba(128,0,128,.2); border-color: purple} /* Odysee */
+		#odybtn:hover {background-color: purple}
+		#ptbtn {background-color: rgba(194,84,10,.2); border-color: #C2540A} /* PeerTube */
+		#ptbtn:hover {background-color: #C2540A}
 
 		@font-face {
 			font-family: "Mustica Pro";
@@ -61,10 +72,6 @@
 			font-weight: normal;
 			font-style: normal
 		}
-
-		h1 {
-			font-family: "Mustica Pro";
-		}
 	</style>
 	<script>
 		const queryString = window.location.search;
diff --git a/themes/hugo-casper3/assets/scss/custom.scss b/themes/hugo-casper3/assets/scss/custom.scss
index 6fde34b..f2add2c 100644
--- a/themes/hugo-casper3/assets/scss/custom.scss
+++ b/themes/hugo-casper3/assets/scss/custom.scss
@@ -126,6 +126,12 @@
   color: white;
 }
 
+/* COMMENTS TITLE */
+.comments-title {
+    font-family: "Mustica Pro";
+    font-weight: normal; // Probably unnecessary.
+}
+
 /* ISSO CSS */
 
 #isso-thread {
diff --git a/themes/hugo-casper3/assets/scss/main.scss b/themes/hugo-casper3/assets/scss/main.scss
index 4442c79..cad3f5d 100644
--- a/themes/hugo-casper3/assets/scss/main.scss
+++ b/themes/hugo-casper3/assets/scss/main.scss
@@ -1261,7 +1261,7 @@ h5,h6{
         margin:.5em 0 .2em;
         font-size:2.5rem;
         line-height:1.3em;
-        font-weight:600;
+        font-weight:1;
         &+h4{
             margin-top:0;
         }
@@ -1269,7 +1269,7 @@ h5,h6{
     & h4{
         margin:.5em 0 .2em;
         font-size:2.5rem;
-        font-weight:600;
+        font-weight:1;
     }
     & h5{
         display:block;
@@ -1285,7 +1285,7 @@ h5,h6{
     & h6{
         margin:.5em 0 .2em;
         font-size:2rem;
-        font-weight:700;
+        font-weight:1;
     }
     & table{
         display:inline-block;
diff --git a/themes/hugo-casper3/layouts/_default/single.html b/themes/hugo-casper3/layouts/_default/single.html
index 3f041b6..4b2ef59 100644
--- a/themes/hugo-casper3/layouts/_default/single.html
+++ b/themes/hugo-casper3/layouts/_default/single.html
@@ -62,9 +62,9 @@
 
         </article>
     {{ if ne .Params.rss_ignore true }}
-    <h4>Comments</h4>
+    <h4 class="comments-title">Comments</h4>
     <small>Supports Markdown formatting. <a href="/tos">Terms of Service and Privacy Policy</a>.</small>
-    <section id="isso-thread" data-isso-css-url="{{ .RelPermalink }}"><noscript><small>Javascript must be enabled to see the comments.</small></noscript></section>
+    <section id="isso-thread" data-isso-css-url="{{ .RelPermalink }}"><noscript><br /><div id="banner"><span><small>Javascript must be enabled to see the comments.</small></span></div></noscript></section>
     {{ end }}
     </div>
 </main>
diff --git a/themes/hugo-casper3/layouts/partials/post-card.html b/themes/hugo-casper3/layouts/partials/post-card.html
index 19bb786..e3a361b 100644
--- a/themes/hugo-casper3/layouts/partials/post-card.html
+++ b/themes/hugo-casper3/layouts/partials/post-card.html
@@ -31,9 +31,13 @@
             </a>
 
             <footer class="post-card-meta">
+                        {{ if ne .context.Section "tags" }}
                         <span class="post-card-byline-date"><a href="{{ .context.CurrentSection.Permalink }}">{{ .context.Section }}</a> <span class="bull">&bull;</span> <time datetime="{{ .context.Date.Format "2006-31-01" }}">{{ .context.Date.Format "2 January 2006" }}</time>
                         {{ if ne .context.Lastmod .context.Date }}
                         <span class="bull">&bull;</span><span class="post-card-byline-date"><time datetime="{{ .context.Lastmod.Format "2006-31-01" }}"> <svg class="byline-meta-symbol" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -1000 960 960" width="16" fill="currentColor"><path d="M180-180h44l443-443-44-44-443 443v44Zm614-486L666-794l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248-120H120v-128l504-504 128 128Zm-107-21-22-22 44 44-22-22Z"/></svg> {{ .context.Lastmod.Format "2 January 2006" }}</time>
+                        {{ end }}
+                        {{ else }}
+                        <span class="post-card-byline-date"><time datetime="{{ .context.Lastmod.Format "2006-31-01" }}">Last post from {{ .context.Lastmod.Format "2 January 2006" }}</time>
                         {{ end }}
                             {{ if ne .context.ReadingTime 0 }}<span class="bull">&bull;</span> {{ .context.ReadingTime }} min read <span class="bull">&bull;</span> {{ range (.context.GetTerms "tags") }}
             <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>&nbsp;&nbsp;{{ end }}
diff --git a/themes/hugo-casper3/layouts/shortcodes/video.html b/themes/hugo-casper3/layouts/shortcodes/video.html
index 3c2299a..491a4a1 100644
--- a/themes/hugo-casper3/layouts/shortcodes/video.html
+++ b/themes/hugo-casper3/layouts/shortcodes/video.html
@@ -1,6 +1,6 @@
 <div class="embed video-player">
-<noscript><h3>The video players don't work without JavaScript enabled!</h3><br></br></noscript>
-<iframe class="youtube-player" type="text/html" width="700" height="385" src="/ytr.html?yt={{ index .Params 0 }}&ody={{ index .Params 1 }}&pt={{ index .Params 2 }}" allowfullscreen frameborder="0"></iframe>
+<noscript><div id="banner"><span><small>Javascript must be enabled for the video players to work.</small></span></div></noscript>
+<iframe class="youtube-player" type="text/html" width="100%" height="385" src="/ytr.html?yt={{ index .Params 0 }}&ody={{ index .Params 1 }}&pt={{ index .Params 2 }}" allowfullscreen frameborder="0"></iframe>
 <p></p>
 </div>