diff options
Diffstat (limited to 'themes/cranky/layouts/shortcodes')
-rw-r--r-- | themes/cranky/layouts/shortcodes/hidvid.html | 10 | ||||
-rw-r--r-- | themes/cranky/layouts/shortcodes/img.html | 20 | ||||
-rw-r--r-- | themes/cranky/layouts/shortcodes/prj.html | 116 | ||||
-rw-r--r-- | themes/cranky/layouts/shortcodes/tagcloud.html | 3 | ||||
-rw-r--r-- | themes/cranky/layouts/shortcodes/vid.html | 6 |
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> |