#!/usr/bin/env coffee

cssify = require "@boisgera/cssify"

console.log "******************************************************************"

console.log cssify
  a:
    "b, c":
      d: 1

console.log "******************************************************************"

console.log cssify 
  html:
    head:
      display: "none"
    fontSize: "16px"
    body:
      color: "black"
    
console.log "******************************************************************"

console.log cssify
  "*":
    margin: 0
    padding: 0
    border: 0
    boxSizing: "content-box" # "border-box" ? 
    # Study the transition (changes aspect)
    fontSize: "100%"
    font: "inherit"
    verticalAlign: "baseline"
  html:
    lineHeight: 1
  "ol, ul":
    listStyle: "none"
  "blockquote, q":
    "quotes": "none"
    "&:before":
      content: "none"
    "&:after":
      content: "none"
  table:
    borderCollapse: "collapse"
    borderSpacing: 0

console.log "******************************************************************"

console.log cssify
  span:
    fontSize: "16px"
    "&:hover":
      color: "blue"

console.log "******************************************************************"

console.log cssify
  html:
    "--base": 5
    "--lineHeight": 7
    lineHeight: 7 + "px" # use rems instead.
    fontSize: 90
    fontFamily: "Alegreya, serif"
    fontStyle: "normal"
    fontWeight: "normal"
    em:
      fontStyle: "italic"
    strong:
      fontWeight: "bold"
    textRendering: "optimizeLegibility"
    textAlign: "left"
    "p, .p": # TODO: remove margin when p is "boxed" and last.
      marginBottom: 7 + "px"
      textAlign: "justify"
      hyphens: "auto"
      MozHyphens: "auto"
    section: # TODO: see above wrt boxed content.s
      marginBottom: 7 + "px"

console.log "******************************************************************"

console.log cssify
  main:
    "> header, > .header, > #header": # 
      marginTop: "1px"
      h1:
        fontWeight: "bold"

console.log "******************************************************************"

console.log cssify
    main:
      "> header, > .header, > #header": # child of body is probably not appropriate ...
                  # instead, search for "a top-level section" (main, article, 
                  # class="main", etc.) and select the headers that are children
                  # -- not descendants -- of these.
        #borderTop: "3px solid #000000"
        marginTop: "calc(2 * var(--base-line-height))"
        marginBottom: "calc(2 * var(--base-line-height))"
        h1:
          fontSize: 48 + "px"
          lineHeight: "calc(1.5 * var(--base-line-height))"
          marginTop: 0.0   # compensate somewhere else, here
          marginBottom: "var(--base-line-height)"    # is not the place.
          fontWeight: "bold"
        ".author":
          fontSize: 24 + "px"
          lineHeight: "calc(1 * var(--base-line-height))"
  #        paddingTop: "1.5px" # makes the "true" baseline periodic (48 px)
          marginBottom: "calc(0.5 * var(--base-line-height))"
          fontWeight: "normal"
        ".date":
          fontFamily: "sans"
          lineHeight: "calc(1 * var(--base-line-height))"
          fontSize: 24 + "px"
          fontWeight: "normal"
          marginBottom: "calc(0.5 * var(--base-line-height))"
          float: "none" # it's a pain to have to put that here to counteract
                        # the "float: left" used in "normal" h3 ...
                        # OTOH, this date and author stuff probably shouldn't
                        # be separate headings ...

  # TODO: remove the float: left; instead turn the heading inline and insert it
  #       into the next paragraph (if any).