Some Information about the actual implementation of Hugo on this site.

Temp Theme

zzo CSS Cards

Structure

DONT Use Material Components where possible. At least for prototypes.

MDC Web Intro MDC Web MDL

changed my mind on the material stuff. it's a larger commitment than I want to take on (byte wise)

Templates

Follow BEM naming style and conventions

  • Block
  • Element
  • Modifier

Concepts and Important Rules

  • block or element must have unique name (css class) (no cascading)
  • no html elements in css selectors
  • css class = block name = template name ?
  • css class for elements = blockname__elementname (i.e.
  • each block should be best represented as it's own template (able to be included anywhere anytime)
  • block re-use - id based selectors can't be used, only class selectors
  • modifier is an additional CSS class for a block or an element (class="menu menu_size_big)

Markdown Reminders

  • code blocks in ``` or indented 4 spaces.
this is a code block?

Hugo commands

new post

hugo new posts/identifier.md

Colors and Solarized

:root {
--base03:    #002b36;
--base02:    #073642;
--base01:    #586e75;
--base00:    #657b83;
--base0:     #839496;
--base1:     #93a1a1;
--base2:     #eee8d5;
--base3:     #fdf6e3;
--yellow:    #b58900;
--orange:    #cb4b16;
--red:       #dc322f;
--magenta:   #d33682;
--violet:    #6c71c4;
--blue:      #268bd2;
--cyan:      #2aa198;
--green:     #859900;
--accent: var(--violet);
}

html, .dark {
    background-color: var(--base03);
    color: var(--base0);
    * { color: var(--base0); }
    h1,h2,h3,h4,h5,h6 { color: var(--base1); border-color: var(--base0); }
    a, a:active, a:visited { color: var(--base1); }
}

html * {
  color-profile: sRGB;
  rendering-intent: auto;
  a, a:active, a:visited, code.url { color: var(--accent) ; }
  h1,h2,h3,h4,h5,h6 { color: var(--accent); }
}