<commit_before>import React from 'react'
import Link from 'gatsby-link'
import Helmet from 'react-helmet'

import MainSkills from '../../components/skills/MainSkills'
import Technologies from '../../components/skills/Technologies'
import Tools from '../../components/skills/Tools'
import MiscSkills from '../../components/skills/MiscSkills'

class Skills extends React.Component {
  render () {
    const site = this.props.data.site
    const siteTitle = site.siteMetadata.title

    return (
      <div>

        <Helmet title={`Kenntnisse | ${siteTitle}`}/>

        <h1>Kenntnisse</h1>
        <p>Diese Liste spiegelt wieder <span
           className="low">woher ich komme</span>, <span
           className="middle">was ich bevorzuge</span> und <span
           className="high">wofür ich brenne</span>.
        </p>

        <div className="skills">
          <MainSkills />
          <Technologies />
          <Tools />
          <MiscSkills />
        </div>

        <style jsx>{`
          .skills {
            margin-bottom: 30px;
          }

          .skills :global(ul) {
            list-style-type: none;
          }

          .skills :global(ul) {
            list-style-type: none;
          }

          .skills :global(ul),
          .skills :global(dl),
          .skills :global(dd) {
            margin-bottom: 0;
          }

          .skills :global(.skill-list) {
            display: flex;
          }

          .skills :global(.category),
          .skills :global(.details) {
            padding: 5px 0 5px 0;
            font-size: 85%;
          }

          .skills :global(.category) {
            width: 30%;
            margin-right: 20px;
          }

          .skills :global(.details) {
            width: 70%;
          }

          .skills :global(.row) {
            display: flex;
            flow-direction: row;
          }

          .skills :global(.details) :global(li) {
            padding-left: 5px;
            margin-bottom: 3px;
          }

          .skills :global(.low), .low {
            color: hsla(220, 0%, 60%, 1)
          }
          .skills :global(.middle), .middle {
            color: hsla(130, 30%, 40%, 1);
            text-shadow: 0 1px 1px #ddd;
          }
          .skills :global(.high), .high {
            /* color: hsla(20, 85%, 50%, 1); */
            color: hsla(354, 44%, 49%, 1);
            text-shadow: 0 1px 1px #ddd;
          }
        `}</style>
      </div>
    )
  }
}

Skills.propTypes = {
  route: React.PropTypes.object,
}

export default Skills

export const pageQuery = `
 {
   site {
     siteMetadata {
       title
     }
   }
 }
`
<commit_msg>harmonize colors and font size<commit_after>import React from 'react'
import Link from 'gatsby-link'
import Helmet from 'react-helmet'

import MainSkills from '../../components/skills/MainSkills'
import Technologies from '../../components/skills/Technologies'
import Tools from '../../components/skills/Tools'
import MiscSkills from '../../components/skills/MiscSkills'

class Skills extends React.Component {
  render () {
    const site = this.props.data.site
    const siteTitle = site.siteMetadata.title

    return (
      <div>

        <Helmet title={`Kenntnisse | ${siteTitle}`}/>

        <h1>Kenntnisse</h1>
        <p>Diese Liste spiegelt wieder <span
           className="low">woher ich komme</span>, <span
           className="middle">was ich bevorzuge</span> und <span
           className="high">wofür ich brenne</span>.
        </p>

        <div className="skills">
          <MainSkills />
          <Technologies />
          <Tools />
          <MiscSkills />
        </div>

        <style jsx>{`
          .skills {
            margin-bottom: 30px;
          }

          .skills :global(ul) {
            list-style-type: none;
          }

          .skills :global(ul) {
            list-style-type: none;
          }

          .skills :global(ul),
          .skills :global(dl),
          .skills :global(dd) {
            margin-bottom: 0;
          }

          .skills :global(.skill-list) {
            display: flex;
          }

          .skills :global(.category),
          .skills :global(.details) {
            padding: 5px 0 5px 0;
          }

          .skills :global(.category) {
            width: 30%;
            margin-right: 20px;
          }

          .skills :global(.details) {
            width: 70%;
          }

          .skills :global(.row) {
            display: flex;
            flow-direction: row;
          }

          .skills :global(.details) :global(li) {
            padding-left: 5px;
            margin-bottom: 3px;
          }

          .skills :global(.low), .low {
            color: hsla(220, 0%, 60%, .9);
          }
          .skills :global(.middle), .middle {
            color: hsla(33, 40%, 35%, .9);
          }
          .skills :global(.high), .high {
            color: hsla(130, 45%, 30%, 1);
          }
        `}</style>
      </div>
    )
  }
}

Skills.propTypes = {
  route: React.PropTypes.object,
}

export default Skills

export const pageQuery = `
 {
   site {
     siteMetadata {
       title
     }
   }
 }
`

{'fraction_non_alphanumeric': 0.1371827165278047, 'fraction_numerical': 0.01821352451075373, 'mean_word_length': 1.4545886828340466, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 0, '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': '218498', 'n_tokens_mistral': 1706, 'n_tokens_neox': 1570, 'n_words': 351}