created pdf embed shortcode and style

2 files changed, 35 insertions, 0 deletions

diff --git a/layouts/shortcodes/embedded_pdf.html b/layouts/shortcodes/embedded_pdf.html
new file mode 100644
index 0000000..4b066ec
--- /dev/null
+++ b/layouts/shortcodes/embedded_pdf.html
@@ -0,0 +1,13 @@
+<!-- <iframe class="pdf-embed" src="{{ .Get "src" }}" width="{{ .Get "width" }}" height="{{ .Get "height" }}"></iframe> -->
+<div class="embed-container">
+<iframe class="pdf-embed embed" src="{{ .Get "src" }}" loading="lazy"
+{{ with .Get "name" }} name="{{ . }}" {{ end }}
+{{ with .Get "title" }} title="{{ . }}" {{ end }}
+{{ with .Get "width" }} width="{{ . }}" {{ end }}
+{{ with .Get "height" }} height="{{ . }}" {{ end }}>
+    <a href="{{ .Get "src" }}">{{ .Get "title" }}</a>
+</iframe>
+<div class="embed-fallback">
+    <a href="{{ .Get "src" }}">{{ .Get "title" }} &darr;</a>
+</div>
+</div>
diff --git a/static/css/styles.css b/static/css/styles.css
index a904220..54c98f2 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -304,3 +304,25 @@ nav > h1 {
     /* filter: brightness(0.5); */
     fill: var(--link-color);
 }
+
+.pdf-embed {
+    display: flex;
+    width: 100%;
+    height: 50em;
+}
+
+.embed-fallback {
+    display : none;
+}
+
+@media (width < 700px) {
+    .embed {
+        display: none;
+    }
+
+    .embed-fallback {
+        display: flex;
+        justify-content: center;
+    }
+
+}