172 lines
3 KiB
HTML
172 lines
3 KiB
HTML
<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 hugo.Data.stack }}
|
|
<div class = "stack_row">
|
|
<h3 class="stack_header"> {{ .section }} </h3>
|
|
<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">
|
|
<h4 style="margin: 0px;"> {{ .name }} </h4>
|
|
<p style="margin: 0px;">{{.description | markdownify}}</p>
|
|
</div>
|
|
{{ $.Scratch.Set "counter" (add ($.Scratch.Get "counter") 1) }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|