My New Hugo Site

  1. Bash
    1. Filters
      1. grep
      2. Sed
      3. jq
    2. Shellspec
  2. Design
  3. Architectural Patterns
    1. Systemd
    2. Message Broker
    3. JSON-RPC
  4. Go
    1. Concurrency
    2. Web Applications
    3. Compound Data
    4. Json
    5. Go vs Erlang
  5. Prolog Cookbook
  6. Documentation
    1. Hugo
      1. Go Html Template
      2. Table of Contents
    2. HTML
    3. CSS
      1. Color
      2. Style Guides
      3. Layout
    4. Mathjax
  7. Visualization
    1. D3
      1. Venn Diagrams
    2. SVG
    3. Visjs
      1. Network
  8. Data
    1. Yaml
    2. Events
      1. JSON-LD
    3. JSON
      1. jCal
    4. SQL
  9. JavaScript

Layout

padding vs margin

https://www.youtube.com/watch?v=EhbZGV2dqZ4

margin

https://www.youtube.com/watch?v=Azfj1efPAH0

Centering

Grid

horizontally, justify-*

justify-items

justify-content

justify-self

vertically, align-*

align-* works differently in flex and grid

align-items

align-content

align-self

These only work within flex boxes.

.container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

right justify

.container {
  display: flex;
  margin-left: auto;
}

Grid

CSS-Tricks Guide

Grid Container

The element on which display: grid is applied.

I’ve picked body.

body {
  display: grid;
  grid-template-columns: 1fr 4fr;
}

Grid Tracks

Grid Items

The children (i.e. direct descendants) of the grid container.

Mine are header, section, article and footer.

header {
  display: block;
  grid-row: 1;
  grid-column: 1 / span 2;
}

section {
  display: block;
  grid-row: 2;
  grid-column: 1;
}

article {
  display: block;
  grid-row: 2;
  grid-column: 2;
}

footer {
  display: block;
  grid-row: 3;
  grid-column: 1 / span 2;
}

Positioning items against lines

Line-positioning shorthands

Gutters

Flexbox