configuration

ricing your distro

the default ui lives under /~/system/parts

configurable parts:

• head-extras

  • extra markup to add to the document head

  • useful for overriding themes or loading custom javascript

• empty-page

  • the markup displayed on empty pages

  • usually displaying form for populating the current location with a template

to override a part file, place it under /~/config/parts with the same name.

example

place a %manx load at /~/config/parts/head-extras to customize the document head for all your hawk pages.

(see /~/system/parts/head-extras)

modifying feather colors

feather is built to be configurable with css variables.

tweak the colors and add any extra css styles that you want by configuring the document head using the method described above.

here is an example /~/config/parts/head-extras file:

;head-extras
  ;script: console.log('you are deeply loved.');
  ;style
    ::  change these hex values
    ::  to customize the feather
    ::  colors for light and dark
    ;-  %-  trip
    '''
    :root {
      --light-b-4:    #6688ee;
      --light-b-3:    #55bb33;
      --light-b-2:    #ddaa33;
      --light-b-1:    #dd5522;
      --light-b0:     #e8e8e8;
      --light-b1:     #dcdcdc;
      --light-b2:     #d2d2d2;
      --light-b3:     #d0d0d0;
      --light-b4:     #c8c8c8;
      --light-f-4:    #113399;
      --light-f-3:    #338822;
      --light-f-2:    #997733;
      --light-f-1:    #994422;
      --light-f0:     #111111;
      --light-f1:     #333333;
      --light-f2:     #444444;
      --light-f3:     #555555;
      --light-f4:     #777777;
      --dark-b-4:     #335599;
      --dark-b-3:     #225511;
      --dark-b-2:     #665522;
      --dark-b-1:     #662222;
      --dark-b0:      #111111;
      --dark-b1:      #272727;
      --dark-b2:      #373737;
      --dark-b3:      #444444;
      --dark-b4:      #555555;
      --dark-f-4:     #5599cc;
      --dark-f-3:     #55dd55;
      --dark-f-2:     #ccbb33;
      --dark-f-1:     #ee7755;
      --dark-f0:      #eeeeee;
      --dark-f1:      #cccccc;
      --dark-f2:      #bbbbbb;
      --dark-f3:      #aaaaaa;
      --dark-f4:      #888888;
    }
    '''
  ==
==

if you'd prefer to not distinguish between light and dark mode, you can configure like so:

;head-extras
  ;script: console.log('you are deeply loved.');
  ;style
    ::  change these hex values
    ::  to customize the feather
    ::  colors for light and dark
    ;-  %-  trip
    '''
    :root {
      --b-4:    #6688ee;
      --b-3:    #55bb33;
      --b-2:    #ddaa33;
      --b-1:    #dd5522;
      --b0:     #e8e8e8;
      --b1:     #dcdcdc;
      --b2:     #d2d2d2;
      --b3:     #d0d0d0;
      --b4:     #c8c8c8;
      --f-4:    #113399;
      --f-3:    #338822;
      --f-2:    #997733;
      --f-1:    #994422;
      --f0:     #111111;
      --f1:     #333333;
      --f2:     #444444;
      --f3:     #555555;
      --f4:     #777777;
    }
    '''
  ==
==