The website similar to this current form was created approximately on 2015-11-06 and gradually expanded into the thing it is now. First, it was needed for publishing additional research data and information about courses I tought.

Build system

All posts are written in markdown (with bits in html) and converted to final html with use of hugo ↗. Hugo makes the process of creating static websites pretty smooth. The structure of websites reflects the folder structure in the content folder. A page is created for every:

example.md file on address example (and no subsites will be created!),
about/index.md file on address about (and no subsites will be created!),
and finally, path/_index.md on address path.

This caveat burned me several times – the first two ways cannot be used for directories which have site subdirectories, as they represent the leafs in website’s structure.

Example structure quite:

content/
├── _index.md
├── about
│   └── index.md
├── example.md
└── images
    ├── background
    │   └── pic.png
    └── anim.gif

Color scheme

primary colors
- main: #ff6b00
- dark (link): #923d00
- medium (bg): #f6e0bc
- light (default bg): #f8eede
secondary colors
- main: #37f7fa
- dark (font): #484848
- medium (bg): #b0b0b0
- light (code bg): #f0f0f0

This scheme is used in css files across the site. Code is colored using highlight.js with custom style.

Elements

Markdown

All markdown elements are as usual:

link using [link](address “tooltip”)
using ![picture](address “tooltip”)
*italic*
**bold**
~~~~cross~~~~
code using backticks `

code block is enclosed in three backticks `

Expandbox

Easy enough, make js function to toggle style and bind it to onclick.

function toggleDiv(divID) {
    var box = document.getElementById(divID);
    if(box.classList.contains("hidden")){
        box.classList.remove("hidden");
    }else{
        box.classList.add("hidden");
    }
}
function setupToggleDiv(divID, contolID) {
    document.getElementById(contolID).onclick = function (){
        toggleDiv(divID)
    };
}

The html setup is like this

<div class="expandbox">
<div class="expand-container hidden" id="{{.Get "id"}}-box">
<div class="expand-title" id="{{.Get "id"}}-control">➤ **{{.Get "title"}}**</div>
<div class="expand-content">
{{ .Inner }}
</div>
</div>
<script>setupToggleDiv({{.Get "id"}} + "-box", {{.Get "id"}} + "-control")</script>

And last, the css is roughly like this

.expandbox .expand-content {
	transform: scaleY(1);
	transform-origin: top;
	transition: transform 0.3s ease-out;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 1px;
	transition: font-size .25s, margin .25s, padding .25s, opacity .5s .25s;
}
.expandbox .expand-container.hidden .expand-content {
	font-size: 0;
	margin: 0;
	opacity: 0;
	padding: 0;
	transition: opacity .25s, font-size .5s .25s, margin .5s .25s, padding .5s .25s;
}

Click the element to expand its content.

This expandbox is based on the method posted on stack overflow ↗ by Steven Vachon.

Webs with nice elements

Hugo

Debugging

{{ printf "%#v" . }}

Passign arguments to partials

{{ partial "header" (dict "first" firstValue "second" secondValue) }}

Kontext

{{ with .Page }}
    {{/* The context, ".", is now the page */}}
{{ end }}

{{ range .Pages }}
    {{/* The context, ".", is now each one of the pages as it goes through the loop */}}
{{ end }}

Sources

https://ruddra.com/hugo-add-toc-anywhere/ ↗

This website