CSS SLACK plaid

css-slack-plaid.markdown

CSS SLACK plaid

Just a lil app love over here. Slack FTW!

A Pen by BROWNERD on CodePen.

License.

style.stylus

$blue = #8AD4DD
$orange = #EFB458
$green = #5CC4A4
$cream = #FEF7E9
$pink = #E74E7E
$purple = #646490
$yellow = #FAEF64
trans = transparent

*
  box-sizing border-box
  
  
body
  display flex
  align-items center
  justify-content center
  height 100vh
  width 100vw
  
  background \
	repeating-linear-gradient(
		-45deg,
    trans,
		trans 12.5%,
		$green 12.5%,
		$green 25%,
		trans 25%,
		trans 37.5%,
    $orange 37.5%,
    $orange 50%
	),
	repeating-linear-gradient(
		45deg,
		trans,
		trans 12.5%,
		$blue 12.5%,
		$blue 25%,
		trans 25%,
		trans 37.5%,
    $pink 37.5%,
    rgba($pink, 1) 50%
	), $cream

  background-size: 40rem 40rem
  background-blend-mode multiply
  position relative
  
  &::after
    background \
	repeating-linear-gradient(
		-45deg,
    trans,
    trans 6%,
		$yellow 6%,
		$yellow 6.5%,
		trans 6.5%,
		trans 18.5%,
    $yellow 18.5%,
		$yellow 19%,
		trans 19%,
		trans 31%,
    $purple 31%,
    $purple 31.5%,
    trans 31.5%,
		trans 43.5%,
    $purple 43.5%,
    $purple 44%,
    trans 44%,
		trans 50%
	),
	repeating-linear-gradient(
		45deg,
		trans,
    trans 6%,
		$purple 6%,
		$purple 6.5%,
		trans 6.5%,
		trans 18.5%,
    $purple 18.5%,
		$purple, 19%,
		trans 19%,
		trans 31%,
    $yellow 31%,
    $yellow 31.5%,
    trans 31.5%,
		trans 43.5%,
    $yellow 43.5%,
    $yellow 44%,
    trans 44%,
		trans 50%
	)
    content: ''
    position absolute
    height 100vh
    width 100vw
    top 0
    left 0
    
    background-size: 40rem 40rem
    mix-blend-mode multiply