summaryrefslogtreecommitdiff
path: root/themes/cranky/layouts/shortcodes/prj.html
diff options
context:
space:
mode:
Diffstat (limited to 'themes/cranky/layouts/shortcodes/prj.html')
-rw-r--r--themes/cranky/layouts/shortcodes/prj.html116
1 files changed, 116 insertions, 0 deletions
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>