---
title: new template
date: 2021-08-27
draft: true
tags:
- hugo
summary: >
  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](https://after-dark.habd.as/)
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 %}}

### Warnings and Notes

{{% note %}}
Awesome Note
{{% /note %}}

{{% warning %}}
Important Warning
{{% /warning %}}


## block quotes

A bit of text before

> Not really satisfied with the blockquotes yet.

a bit of text behind.
 
## Flex box

<br>

### 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).

1. la la la la la
1. lo lo lo lo lo
1. lololololol
1. 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
1. lululululul

## Big parts

Big parts are useful for code

```shell
#!/usr/bin/env bash
echo "small code"
```

{{% content-big %}}
```shell
#!/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
```