Initial version of hugo-stack

layouts/partials/stack.html

@@ -0,0 +1,172 @@
+<style>
+
+
+@media(min-width: 800px){
+  .stack_row{
+    position: relative;
+    display: flex;
+    margin-top: 30px;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .stack_item{
+    width: 34%;
+    margin: 5px; 
+  }
+
+  .stack_item_wide{
+    width: 42%;
+  }
+  .stack_item_0{
+    transform: translateX(0%);
+  }
+
+  .stack_item_1{
+    transform: translateX(58%);
+  }
+
+  .stack_item_2{
+    transform: translateX(122%);
+  }
+
+  .stack_item_3{
+    transform: translateX(30%);
+  }
+
+  .stack_item_4{
+    transform: translateX(88%);
+  }
+
+  .stack_item_5{
+    transform: translateX(10%);
+  }
+
+  .stack_item_6{
+    transform: translateX(68%);
+  }
+
+  .stack_item_7{
+    transform: translateX(118%);
+  }
+
+  .stack_item_8{
+    transform: translateX(40%);
+  }
+
+  .stack_item_9{
+    transform: translateX(6%);
+  }
+
+  .stack_item_10{
+    transform: translateX(78%);
+  }
+
+  .stack_item_11{
+    transform: translateX(24%);
+  }
+
+  .stack_item_12{
+    transform: translateX(98%);
+  }
+  .stack_image{
+    width:100%;
+    padding: 20px;
+  }
+
+  .stack_item:not(:has(img)) {
+    width: fit-content;
+    min-width: 20%;
+    max-width: 32%;
+  }
+
+  .stack_item:nth-child(even of .stack_item):not(:has(img)) {
+    max-width: 38%;
+  }
+}
+
+.stack_row{
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.stack_image{
+    width:100%;
+    box-sizing: border-box;
+    padding: 0px;
+    align: center;
+  }
+
+ .stack_text{
+   width:100%;
+   padding: 0px 5px;
+   box-sizing: border-box;
+   border-left: 4px solid {{ .Site.Params.accentColor }};
+   position: relative;
+ }
+
+.stack_item{
+  padding: 0px;
+  box-sizing: border-box;
+  margin: 10px; 
+}
+
+.stack_row::before{
+  content: "";
+  position: absolute;
+  left: -25px;
+  top: 0;
+  bottom: -30px;
+  width: 1px;
+  background: {{ .Site.Params.accentColor }};
+}
+
+.stack_header{
+  position: relative;
+  padding: 0px;
+  margin: 0px;
+}
+
+.stack_header::before {
+  content: "";
+  position: absolute;
+
+  left: -24px;
+  top: 50%;
+
+  width: 15px;
+  height: 15px;
+
+  background: {{ .Site.Params.accentColor }};
+  border: 2px solid {{ .Site.Params.accentColor }};
+  border-radius: 20px;
+
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+</style>
+
+{{ $.Scratch.Set "counter" 0 }}
+{{ range .Site.Data.stack }}
+  <div class = "stack_row">
+      <h2 class="stack_header"> {{ .section }} </h2>
+      <p style="margin: 0px;">{{.description}}</p>
+    {{ range .items }}
+      {{ $i := $.Scratch.Get "counter"}} 
+      <div class='stack_item stack_item_{{mod $i 13}} {{ if mod $i 2}} stack_item_wide {{end}}'>
+          {{ with .image }}
+            <div class = "stack_image">
+                <img src={{.}} style="width:100%; align:center; display: block;"/>
+            </div>
+          {{end}}
+          <div class="stack_text">
+            <h3 style="margin: 0px;"> {{ .name }} </h3>
+            <p style="margin: 0px;">{{.description | markdownify}}</p>
+          </div>
+          {{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
+      </div>
+    {{ end }}
+  </div>
+{{ end }}

layouts/shortcodes/stack.html

@@ -0,0 +1 @@
+{{ partial "stack.html" . }}