hack.less wip

content/nixos/new-design.md

@@ -0,0 +1,128 @@
+---
+title: new template
+date: 2021-08-27
+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.
+
+## 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 >}}
+{{% flex-third %}}{{% card text="1/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="2/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="3/3" /%}}{{% /flex-third %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-full%}}{{% card text="1" /%}}{{% /flex-full%}}
+{{< /flexbox >}}
+
+## Flex box in Big Content
+
+{{% content-big %}}
+{{< flexbox >}}
+{{% flex-third %}}{{% card text="1/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="2/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="3/3" /%}}{{% /flex-third %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-full%}}{{% card text="1" /%}}{{% /flex-full%}}
+{{< /flexbox >}}
+{{% /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
+```
+

content/nixos/test-article.md

@@ -10,28 +10,42 @@ summary: >
 In this article we are discussing a concrete setup with concrete tools and a concrete language.
 But the solutions described here, are intended to help you with your set up.
 
+## Cards
+
+{{% card header="penis" %}}
+mumu
+{{% /card %}}
+
+{{% card %}}
+mumu
+{{% /card %}}
+
 ## Flex box
 
-{{% flexbox %}}
-  {{% flex-third %}}1/3{{% /flex-third %}}
-  {{% flex-third %}}2/3{{% /flex-third %}}
-  {{% flex-third %}}3/3{{% /flex-third %}}
-  {{% flex-half%}}1/2{{% /flex-half %}}
-  {{% flex-half%}}2/2{{% /flex-half %}}
-  {{% flex-full%}}1/1{{% /flex-full %}}
-{{% /flexbox %}}
+> 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 >}}
+{{% flex-third %}}{{% card text="1/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="2/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="3/3" /%}}{{% /flex-third %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-full%}}{{% card text="1" /%}}{{% /flex-full%}}
+{{< /flexbox >}}
 
 ## Flex box in Big Content
 
 {{% content-big %}}
-{{% flexbox %}}
-{{% flex-third %}}1/3{{% /flex-third %}}
-{{% flex-third %}}2/3{{% /flex-third %}}
-{{% flex-third %}}3/3{{% /flex-third %}}
-{{% flex-half%}}1/2{{% /flex-half %}}
-{{% flex-half%}}2/2{{% /flex-half %}}
-{{% flex-full%}}1/1{{% /flex-full %}}
-{{% /flexbox %}}
+{{< flexbox >}}
+{{% flex-third %}}{{% card text="1/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="2/3" /%}}{{% /flex-third %}}
+{{% flex-third %}}{{% card text="3/3" /%}}{{% /flex-third %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-half%}}{{% card text="1/2" /%}}{{% /flex-half %}}
+{{% flex-full%}}{{% card text="1" /%}}{{% /flex-full%}}
+{{< /flexbox >}}
 {{% /content-big %}}
 
 ## Listings
@@ -129,7 +143,7 @@ Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
 This way project specific tweaks are stored in the place where it belongs,
 and other people can use their favorite IDE with the same setup.
 
-## Configure Spacemacs
+## Code
 
 Spacemacs is basically an `~/.emacs.d` folder and a mutable file `~/.spacemacs`.
 I tried to configure `~/.spacemacs` via [home-manager](https://github.com/rycee/home-manager)
@@ -140,6 +154,8 @@ to configure files in `~/.spacemacs.d/` and `load` them in
 the configuration functions inside `~/.spacemacs`. A simple `(load "~/.spacemacs.d/hook-user-config.el")`
 inside the `dotspacemacs/user-config` function is enough, to make it work.
 
+{{% content-big %}}
+
 ```nix
 { pkgs, lib, config, ... }:
 let
@@ -240,6 +256,9 @@ in
 }
 ```
 
+{{% /content-big %}}
+
+
 We setup emacs to run `direnve-update-environment` and `lsp` once we start the `haskell-mode`.
 But we did not install `lsp`.
 In my setups the `lsp-server` is installed by the project file (lsp.nix), and is loaded via `direnv` (`direnv-update-environment` in emacs).

layouts/shortcodes/card.html

@@ -0,0 +1,7 @@
+<div class="card">
+{{ with .Get "header" }}<header class="card-header">{{ . }}</header>{{ end }}
+<div class="card-body">
+{{ with .Get "text" }}{{ . }}{{ end }}
+{{ .Inner }}
+</div>
+</div>

src/lessc/page/main-hack.less

@@ -101,3 +101,24 @@ a:hover {
   background-color: @color-link-hover-background;
   color: @color-link-hover-font;
 }
+
+// cards
+.card {
+  border: 1px solid #ccc;
+  padding: 0px;
+  margin: 0px;
+  text-align: center;
+
+  .card-header {
+    color: #333;
+    text-align: center;
+    background-color: #ddd;
+  }
+
+  .card-body{
+    text-align: center;
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+}
+