<commit_before>@import '_normalize.styl'
@import '_variables.styl'
@import '_typography.styl'
@import '_animations.styl'

// stylint, Stylus' linter, doesn't lint anything inside this
// block
:global
  html, body
    height: 100%
  body
    background: offwhite
  .center
    margin: 0 auto
  .pointer
    cursor: pointer

  .m-t
    margin-top: 1.0rem
  .m-b
    margin-bottom: 1.0rem

  .wrap-row
    flex-wrap: wrap
    flex-direction: row
    justify-content: space-between

  .grid-figure
    flex-flow: row wrap
    flex-basis: calc(33.333% - 2rem)
    flex-grow: 1
    flex-shrink: 0
    margin: 0 1rem 2rem 1rem
    // padding 2rem
    border: 1px solid lightgrey
    background: white
    position: relative

  ul
    margin-before: 0.5rem
    // li
  // .editable
  //   &:hover:after
  //     position: absolute
  //     top: 0
  //     right: 0
  //     font-size: 2.0rem
  //     font-weight: normal
  //     content: 'Editable'
  //     background-color: red
  //     padding: 2rem 0

  // For inline editable fields
  .invalid
    border: 1px solid darken(red, 20%)

  @media (max-width: cardWidth)
    .grid-figure
      flex-basis: calc(100% - 2rem)
      margin: 0 1rem .5rem 1rem

  .single
    max-width: cardWidth
    min-width: cardWidth
    flex-shrink: 0

  .single .grid-figure
    // Single stack
    box-shadow: 7px 7px 6px 1px rgba(0,0,0,0.05)

  @media (max-width: cardWidth)
    .single
      min-width: unset
      flex: 1 0

  /*
    Buttons
  */
  .control-buttons
    width: 100%
    flex-flow: row wrap
    .button
      flex-grow: 1
      margin-right: 1rem

  button, .button
    border: 2px solid lightgrey
    border-radius: 0.5rem
    background: none
    flex-basis: 48%
    display: inline-block
    // line-height 2
    text-decoration: none
    padding: 0.90rem 0.75rem
    margin: 0.50rem 0
    text-align: center
    color: blue
    transition: all 0.2s
    box-sizing: padding-box
    cursor: pointer
    user-select: none // Disallow selection of button text
    &:hover, &:focus
      border-color: blue
      outline: 0
    &[disabled]
      color: lightgrey
      cursor: not-allowed
    &[disabled]:hover
      border-color: lightgrey

  .btn-inactive
    color: lightgrey
  .btn-active
    color: green
  .btn-delete
    color: red
    &:hover, &:focus
      border-color: red

  /*
    Forms
  */
  .edit-form
    padding: 2rem 2rem
    display: flex
    flex: 1 0 auto
    flex-flow: column nowrap
    justify-content: space-between
  input, textarea
    width: 100%
    border: 0
    font-size: 1.4rem
    padding: 1rem 0
    border-bottom: 1px solid lightgrey
    outline: none
    resize: vertical
    transition: all 0.2s
    opacity: 0.6
    &:hover
      opacity: 1
  .large-input
    font-size: 2.5rem

  // Taken from https://github.com/michaelhue/keyscss/blob/master/keys.css
  kbd
    display: inline
    display: inline-block
    min-width: 1.25em
    padding: .3em .5em
    font: bold .85em/1 "Helvetica", Arial, sans-serif
    text-align: center
    text-decoration: none
    -moz-border-radius: .3em
    -webkit-border-radius: .3em
    border-radius: .3em
    border: none
    cursor: default
    -moz-user-select: none
    -webkit-user-select: none
    user-select: none

  kbd[title], .key[title]
    cursor: help

  kbd, kbd.light, .light-keys kbd, .key.light, .light-keys .key
    background: rgb(250, 250, 250);
    background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
    color:  rgb(50, 50, 50);
    text-shadow: 0 0 2px rgb(255, 255, 255);
    -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
    -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
    box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);


  .ReactModal__Body--open
    overflow: hidden

  main.main-container
    flex-grow: 1
    flex-direction: row
    order: 2
    justify-content: center
    section
      margin-top: contentMargin

  @media (max-width: cardWidth)
    main.main-container section
      margin-top: 0.4rem

  footer
    order: 3
    display: flex
    flex-direction: row
    justify-content: center
    p, a, a:active, a:hover, a:visited
      font-size: 1.3rem
      color: lighten(lightgrey, 10%)

  @media (max-width: cardWidth)
    footer
      display: none
<commit_msg>making buttons 50%<commit_after>@import '_normalize.styl'
@import '_variables.styl'
@import '_typography.styl'
@import '_animations.styl'

// stylint, Stylus' linter, doesn't lint anything inside this
// block
:global
  html, body
    height: 100%
  body
    background: offwhite
  .center
    margin: 0 auto
  .pointer
    cursor: pointer

  .m-t
    margin-top: 1.0rem
  .m-b
    margin-bottom: 1.0rem

  .wrap-row
    flex-wrap: wrap
    flex-direction: row
    justify-content: space-between

  .grid-figure
    flex-flow: row wrap
    flex-basis: calc(33.333% - 2rem)
    flex-grow: 1
    flex-shrink: 0
    margin: 0 1rem 2rem 1rem
    // padding 2rem
    border: 1px solid lightgrey
    background: white
    position: relative

  ul
    margin-before: 0.5rem
    // li
  // .editable
  //   &:hover:after
  //     position: absolute
  //     top: 0
  //     right: 0
  //     font-size: 2.0rem
  //     font-weight: normal
  //     content: 'Editable'
  //     background-color: red
  //     padding: 2rem 0

  // For inline editable fields
  .invalid
    border: 1px solid darken(red, 20%)

  @media (max-width: cardWidth)
    .grid-figure
      flex-basis: calc(100% - 2rem)
      margin: 0 1rem .5rem 1rem

  .single
    max-width: cardWidth
    min-width: cardWidth
    flex-shrink: 0

  .single .grid-figure
    // Single stack
    box-shadow: 7px 7px 6px 1px rgba(0,0,0,0.05)

  @media (max-width: cardWidth)
    .single
      min-width: unset
      flex: 1 0

  /*
    Buttons
  */
  .control-buttons
    width: 100%
    flex-flow: row wrap
    .button
      flex-grow: 1
      margin-right: 1rem

  button, .button
    border: 2px solid lightgrey
    border-radius: 0.5rem
    background: none
    flex-basis: 50%
    display: inline-block
    // line-height 2
    text-decoration: none
    padding: 0.90rem 0.75rem
    margin: 0.50rem 0
    text-align: center
    color: blue
    transition: all 0.2s
    box-sizing: padding-box
    cursor: pointer
    user-select: none // Disallow selection of button text
    &:hover, &:focus
      border-color: blue
      outline: 0
    &[disabled]
      color: lightgrey
      cursor: not-allowed
    &[disabled]:hover
      border-color: lightgrey

  .btn-inactive
    color: lightgrey
  .btn-active
    color: green
  .btn-delete
    color: red
    &:hover, &:focus
      border-color: red

  /*
    Forms
  */
  .edit-form
    padding: 2rem 2rem
    display: flex
    flex: 1 0 auto
    flex-flow: column nowrap
    justify-content: space-between
  input, textarea
    width: 100%
    border: 0
    font-size: 1.4rem
    padding: 1rem 0
    border-bottom: 1px solid lightgrey
    outline: none
    resize: vertical
    transition: all 0.2s
    opacity: 0.6
    &:hover
      opacity: 1
  .large-input
    font-size: 2.5rem

  // Taken from https://github.com/michaelhue/keyscss/blob/master/keys.css
  kbd
    display: inline
    display: inline-block
    min-width: 1.25em
    padding: .3em .5em
    font: bold .85em/1 "Helvetica", Arial, sans-serif
    text-align: center
    text-decoration: none
    -moz-border-radius: .3em
    -webkit-border-radius: .3em
    border-radius: .3em
    border: none
    cursor: default
    -moz-user-select: none
    -webkit-user-select: none
    user-select: none

  kbd[title], .key[title]
    cursor: help

  kbd, kbd.light, .light-keys kbd, .key.light, .light-keys .key
    background: rgb(250, 250, 250);
    background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
    color:  rgb(50, 50, 50);
    text-shadow: 0 0 2px rgb(255, 255, 255);
    -moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
    -webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
    box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);


  .ReactModal__Body--open
    overflow: hidden

  main.main-container
    flex-grow: 1
    flex-direction: row
    order: 2
    justify-content: center
    section
      margin-top: contentMargin

  @media (max-width: cardWidth)
    main.main-container section
      margin-top: 0.4rem

  footer
    order: 3
    display: flex
    flex-direction: row
    justify-content: center
    p, a, a:active, a:hover, a:visited
      font-size: 1.3rem
      color: lighten(lightgrey, 10%)

  @media (max-width: cardWidth)
    footer
      display: none

{'fraction_non_alphanumeric': 0.12498686008619783, 'fraction_numerical': 0.0710606538421108, 'mean_word_length': 2.25487512829285, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5072087', 'n_tokens_mistral': 4096, 'n_tokens_neox': 3419, 'n_words': 1014}