6.2 KiB
title | date | tags | summary | |
---|---|---|---|---|
new template | 2021-08-27 |
|
It took me a long time, but I finally created a hugo template I was sketching for quite some time. It is heavily inspired of after-dark but I was to "dark" for me. |
It took me a long time, but I finally created a hugo template I was sketching for quite some time. It is heavily inspired of after-dark but I was to "dark" for me.
Here is a list of elements.
Paragraphs
I found it strange that margin of headings do not intersect with margins of the other elements.
But margins of paragraphs do intersect with other elements like divs or anything.
{{< flexbox-half >}} {{% flexitem %}}{{% card text="1/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="2/2" /%}}{{% /flexitem %}} {{< /flexbox-half >}}
Images
{{% figure src="https://images.pexels.com/photos/262325/pexels-photo-262325.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" width="100%" %}}
Subsections
yey.
Cards
If you wand to highlight something, use cards.
with header
{{% card header="with card header" %}} card body {{% /card %}}
without header
{{% card %}} card body {{% /card %}}
Flex box
Todo das soll eigentlich anders sein! Ich möchte hier bei der flexbox schon definieren wie die unterteilung ist und dann entscheidet das bildschirm scaling, wie das ganze aussehen wird.
flexbox half
{{< flexbox-half >}} {{% flexitem %}}{{% card text="1/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="2/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="3/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="4/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="5/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="6/2" /%}}{{% /flexitem %}} {{< /flexbox-half >}}
flexbox half
{{< flexbox-half >}} {{% flexitem %}}{{% card header="header" text="1/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card header="header" text="2/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card header="header" text="3/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card header="header" text="4/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card header="header" text="5/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card header="header" text="6/2" /%}}{{% /flexitem %}} {{< /flexbox-half >}}
flexbox thrid
{{< flexbox-third >}} {{% flexitem %}}{{% card text="1/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="2/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="3/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="4/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="5/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="6/3" /%}}{{% /flexitem %}} {{< /flexbox-third >}}
Flex box in Big Content
{{% content-big %}} {{< flexbox-half >}} {{% flexitem %}}{{% card text="1/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="2/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="3/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="1/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="1/2" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="1" /%}}{{% /flexitem %}} {{< /flexbox-half >}}
{{< flexbox-third >}} {{% flexitem %}}{{% card text="1/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="2/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="3/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="4/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="5/3" /%}}{{% /flexitem %}} {{% flexitem %}}{{% card text="6/3" /%}}{{% /flexitem %}} {{< /flexbox-third >}}
{{% /content-big %}}
Lists
of course
- la la la la la
- lo lo lo lo lo
- lololololol
- lelelelelel yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo
- lululululul
Number lists
We also have numbered lists (of course).
- la la la la la
- lo lo lo lo lo
- lololololol
- lelelelelel yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo yolo
- lululululul
Big parts
Big parts are useful for code
#!/usr/bin/env bash
echo "small code"
{{% content-big %}}
#!/usr/bin/env bash
cat <<EOF
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
very very very big code very big code very big code very big code very big code very big code very big code very big code
EOF