# June 6, 2019

# Today I worked on the UI kit for TAP using Fabricator (opens new window).

I wrote a mixin for outlining text with an IE fallback

@mixin font-outline($stroke, $fill, $default, $width) {
  color: $default;
  @supports 
  ((-webkit-text-stroke-color: $stroke)
  and
  (-webkit-text-fill-color: $fill))
  or
  ((-moz-text-stroke-color: $stroke)
  and
  (-moz-text-fill-color: $fill)) {
    text-stroke: $width $stroke;
    -webkit-text-stroke: $width $stroke;
    -webkit-text-fill-color: $fill;
    -moz-text-stroke: $width $gray1;
    -moz-text-fill-color: $fill;
  }
  // paint-order: stroke fill;
}

// then include 

@include font-outline($gray3, transparent, $text-light, 1.5px);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# I also learned how to set a background image on text.

  background-image: url('../images/grit_text_black.png');
  // background-size: 200%;
  background-position: center center;
  background-clip: text;
  @supports (-webkit-text-fill-color: transparent) {
    -webkit-text-fill-color: transparent;
  }

1
2
3
4
5
6
7

# Then I used some sass interpolation to make translating his pixel style guides easier.

16 is my base font size.

  font-size: #{(48/16)}em;
  @include breakpoint(large) {
    font-size: #{(76/16)}em;
  }
  @include breakpoint(xlarge) {
    font-size: #{(95/16)}em;
  }

1
2
3
4
5
6
7

# I also discovered

eleventy (opens new window) the static site generator
and started this diary inspired by this post (opens new window).