css: improved pdf-embed load fail appearance

layouts/shortcodes/blocks/pdfembed.html

@@ -16,5 +16,12 @@
 </section>
 
 <object data="{{ $pdfFile }}" type="application/pdf" width="100%" style="height:40vh;" class="presentation-box mt-1">
-      <p>Unable to display PDF file. Please download it instead.</p>
+	<div class="pdf-load-fail">
+		<div class="pdf-fail-text">
+			<p><i class="fa-solid fa-file-pdf fa-2xl"></i></p>
+			<p>Unable to display PDF.</p>
+			<p>Please download it directly <a href="{{ $pdfFile }}">here</a> instead.</p>
+			<p class="chrome-pdf">Chrome on mobile devices does not currently include an in-browser PDF reader. This is the most common reason to see this error.</p>
+		</div>
+	</div>
 </object>

static/css/rosenpass.css

@@ -281,6 +281,42 @@ div.click-to-copy{
   /* max-width: 75%; */
 }
 
+.pdf-load-fail{
+  background-color: #00000040;
+  border-radius: 1rem;
+  height: 40vh;
+  box-shadow: 0.25rem 0.25rem 0.25rem #00000050;
+}
+
+.pdf-fail-text{
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.pdf-fail-text i{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.pdf-fail-text p{
+  text-align: center;
+  text-shadow: 1px 1px 1px #00000020;
+}
+
+.pdf-fail-text p:has(i){
+  margin-top: auto;
+}
+
+.chrome-pdf{
+  margin-top: auto;
+  margin-bottom: 2rem;
+}
+
 .indent {
   margin-left: 0.25rem;
 }
@@ -289,6 +325,8 @@ div.click-to-copy{
   border-radius: 30px;
   padding-top: 0.5rem;
   margin-inline: 0.25rem;
+  justify-content: center;
+  align-items: center;
 }
 
 .flex-reverse {