summaryrefslogtreecommitdiff
path: root/themes/cranky/layouts/shortcodes
diff options
context:
space:
mode:
Diffstat (limited to 'themes/cranky/layouts/shortcodes')
-rw-r--r--themes/cranky/layouts/shortcodes/hidvid.html10
-rw-r--r--themes/cranky/layouts/shortcodes/img.html20
-rw-r--r--themes/cranky/layouts/shortcodes/prj.html116
-rw-r--r--themes/cranky/layouts/shortcodes/tagcloud.html3
-rw-r--r--themes/cranky/layouts/shortcodes/vid.html6
5 files changed, 155 insertions, 0 deletions
diff --git a/themes/cranky/layouts/shortcodes/hidvid.html b/themes/cranky/layouts/shortcodes/hidvid.html
new file mode 100644
index 0000000..14f592d
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/hidvid.html
@@ -0,0 +1,10 @@
+<details>
+ <summary>Click to reveal video.</summary>
+<iframe src="{{ index .Params 0 }}"
+ loading="lazy"
+ sandbox="allow-same-origin allow-scripts allow-popups"
+ allowfullscreen frameborder="0"
+ class="embvid"
+ title="Embedded Video">
+</iframe>
+</details>
diff --git a/themes/cranky/layouts/shortcodes/img.html b/themes/cranky/layouts/shortcodes/img.html
new file mode 100644
index 0000000..ff7959b
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/img.html
@@ -0,0 +1,20 @@
+<!--
+ class: class of the figure
+ link: url the image directs to
+ alt: alternative text
+ caption: caption
+ mouse: what the image says when moused over ("title" in HTML)
+-->
+<figure {{ with .Get "class" }}class="{{.}}"{{ end -}}>
+ {{- with .Get "link"}}<a href="{{.}}">{{ end -}}
+ <img src="{{ .Get "src" }}"
+ {{- with .Get "mouse" }} title="{{.}}"{{ end -}}
+ {{- with .Get "alt" }} alt="{{.}}"{{ end -}}
+ >
+ {{- if .Get "link"}}</a>{{ end -}}
+ {{- with .Get "caption" -}}
+ <figcaption>
+ {{- . -}}
+ </figcaption>
+ {{- end -}}
+</figure>
diff --git a/themes/cranky/layouts/shortcodes/prj.html b/themes/cranky/layouts/shortcodes/prj.html
new file mode 100644
index 0000000..246a8e1
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/prj.html
@@ -0,0 +1,116 @@
+<div class="container">
+ <!-- Loop through all projects -->
+ {{ range first 3 (where .Site.RegularPages "Section" "projects") }}
+ <a class="card" href="{{ .Permalink }}">
+ <h3 class="title">{{ .Title }}</h3>
+ <div class="bar">
+ <div class="emptybar"></div>
+ <div class="filledbar"></div>
+ </div>
+ <p class="summary">{{ .Summary | truncate 220 "..." }}</p>
+ </a>
+ <!-- End the loop -->
+ {{ end }}
+</div>
+<a class="button projects" href="/projects">More Projects</a>
+<style>
+ .container {
+ position: relative;
+ height: auto;
+ width: 600px;
+ left: calc(50% - 300px);
+ display: flex;
+ margin-bottom: 30px;
+ }
+
+ .card {
+ display: flex;
+ height: auto;
+ width: 230px;
+ margin-top: 20px;
+ /* background-color: #222d32; */
+ background: linear-gradient(-45deg, #111a1f, #222d32);
+ color: var(--text-fg);
+ border-radius: 10px;
+ box-shadow: -1rem 0 3rem #000;
+ /* margin-left: -50px; */
+ transition: 0.4s ease-out;
+ position: relative;
+ left: 0px;
+ }
+
+ .card:not(:first-child) {
+ margin-left: -50px;
+ }
+
+ .card:hover {
+ box-shadow: 0 0 4rem #554;
+ transform: translateY(-20px);
+ transition: 0.4s ease-out;
+ color: var(--text-fg);
+ }
+
+ .card:hover ~ .card {
+ position: relative;
+ left: 70px;
+ transition: 0.4s ease-out;
+ }
+
+ .title {
+ color: var(--text-fg);
+ font-weight: bold;
+ position: absolute;
+ left: 20px;
+ top: 15px;
+ }
+
+ .card:hover > .title {
+ color: var(--header-fg);
+ transition: 0.4s ease-out;
+ }
+
+ .bar {
+ position: absolute;
+ top: 70px;
+ left: 20px;
+ height: 5px;
+ width: 150px;
+ }
+
+ .summary {
+ /* position: relative; */
+ margin-top: 80px;
+ margin-left: 10px;
+ margin-right: 10px;
+ top: 70px;
+ left: 20px;
+ }
+
+ .emptybar {
+ background-color: #2e3033;
+ width: 100%;
+ height: 100%;
+ }
+
+ .filledbar {
+ position: absolute;
+ top: 0px;
+ z-index: 3;
+ width: 0px;
+ height: 100%;
+ background: linear-gradient(90deg, #66aabb 0%, #8ea374 22%, #ebcb88 100%);
+ transition: 0.6s ease-out;
+ }
+
+ .card:hover .filledbar {
+ width: 120px;
+ transition: 0.4s ease-out;
+ }
+ /* center the button */
+ .projects {
+ position: relative;
+ left: calc(50% - 50px);
+ margin-top: 30px;
+ margin-bottom: 30px;
+ }
+</style>
diff --git a/themes/cranky/layouts/shortcodes/tagcloud.html b/themes/cranky/layouts/shortcodes/tagcloud.html
new file mode 100644
index 0000000..0cf0118
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/tagcloud.html
@@ -0,0 +1,3 @@
+{{ if isset .Site.Taxonomies "tags" }}{{ if not (eq (len .Site.Taxonomies.tags) 0) }} <ul id="tagcloud">
+ {{ range $name, $items := .Site.Taxonomies.tags }}{{ $url := printf "%s/%s" "tags" ($name | urlize | lower)}}<li><a href="{{ $url | absURL }}" id="tag_{{ $name }}">{{ $name | title }}</a></li>
+ {{ end }}</ul>{{ end }}{{ end }}
diff --git a/themes/cranky/layouts/shortcodes/vid.html b/themes/cranky/layouts/shortcodes/vid.html
new file mode 100644
index 0000000..4c612fe
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/vid.html
@@ -0,0 +1,6 @@
+<iframe src="{{ index .Params 0 }}"
+ loading="lazy"
+ sandbox="allow-same-origin allow-scripts allow-popups"
+ allowfullscreen frameborder="0"
+ title="Embedded Video">
+</iframe>