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

const Footer = () => (
  <footer role="contentinfo">
    <div className="meta">
      <span className="copyright">Copyright © { new Date().getFullYear() } <em><NAME></em></span>
      {/*
      <Link to={'/prinzipien/'}>Prinzipien</Link>
      <span className="seperator apart"></span>
      */}
      <span className="metaLinks">
        <Link to={'/impressum/'}>Impressum</Link>
        <span className="seperator">•</span>
        <Link to={'/datenschutz/'}>Datenschutz</Link>
      </span>
    </div>

    <style jsx>{`
      footer {
        width: 100%;
        font-family: 'Open Sans', sans-serif;

        /*
        border-top: 1px solid rgba(25, 100, 174, .2);
        background-color: rgba(25, 100, 174, .1);
        border-top: 1px solid hsla(105, 70%, 38%, .3);
        background-color: hsla(105, 80%, 38%, .1);
        */

        border-top: 1px solid #b0dda4;
        border-bottom: 1px solid #b0dda4;
        background-color: #ebf6e8;

        height: 45px;
        font-size: 80%;
        text-align: center;
      }

      footer :global(a),
      footer :global(a:visited) {
        padding: 0 5px;
        text-decoration: none;
        padding-bottom: 1px;
        border-radius: 5px;
        color: #1964ae;
      }

      footer :global(a:hover) {
        background-color: #ffb;
      }

      .meta {
        margin: 0 auto;
        padding-top: 9px;
        text-shadow: 0 1px 0 rgba(255,255,255, 1);
      }

      .copyright {
        padding-right: 30px;
      }

      .copyright em {
        font-style: normal;
        padding-left: 10px;
      }

      .seperator.apart {
        padding: 0 20px 0 10px;
        color: #999;
      }

      .seperator {
        padding: 0 5px 0 5px;
        color: #999;
      }
    `}</style>
  </footer>
)

export default Footer<commit_msg>add responsive layout<commit_after>import React from 'react'
import Link from 'gatsby-link'

// import FaGithub from 'react-icons/lib/fa/github'
// import FaStackOverflow from 'react-icons/lib/fa/stack-overflow'

import {s, m} from '../utils/breakpoints'

const Footer = () => (
  <footer role="contentinfo">
    <div className="meta">
      <span className="copyright">
        © { new Date().getFullYear() }
        <em><NAME></em>
      </span>
      {/*
      <Link to={'/prinzipien/'}>Prinzipien</Link>
      <span className="seperator apart"></span>
      */}
      <span className="metaLinks">
        <Link to={'/impressum/'}>Impressum</Link>
        <span className="seperator">•</span>
        <Link to={'/datenschutz/'}>Datenschutz</Link>
      </span>
      {/*
      <span className="seperator apart"></span>
      <span className="icons">
        <a href="#"><FaGithub /></a>
        <a href="#"><FaStackOverflow /></a>
      </span>
      */}
    </div>

    <style jsx>{`
      footer {
        width: 100%;
        font-family: 'Open Sans', sans-serif;

        /*
        border-top: 1px solid rgba(25, 100, 174, .2);
        background-color: rgba(25, 100, 174, .1);
        border-top: 1px solid hsla(105, 70%, 38%, .3);
        background-color: hsla(105, 80%, 38%, .1);
        */

        border-top: 1px solid #b0dda4;
        border-bottom: 1px solid #b0dda4;
        background-color: #ebf6e8;

        font-size: 80%;
        text-align: center;
        padding: 8px 0;
      }

      footer :global(a),
      footer :global(a:visited) {
        padding: 0 5px;
        text-decoration: none;
        padding-bottom: 1px;
        border-radius: 5px;
        color: #1964ae;
      }

      footer :global(a:hover) {
        background-color: #ffb;
      }

      .icons {
        font-size: 110%;
      }

      .meta {
        margin: 0 auto;
        text-shadow: 0 1px 0 rgba(255,255,255, 1);
      }

      .copyright {
        padding-right: 30px;
      }

      .copyright em {
        font-style: normal;
        padding-left: 5px;
      }

      .seperator.apart {
        padding: 0 20px 0 10px;
        color: #999;
      }

      .seperator {
        padding: 0 5px 0 5px;
        color: #999;
      }

      /* Media Queries */

      @media (max-width: ${s}) {
        .copyright { display: block; }
        .icons { display: block; }
      }
    `}</style>
  </footer>
)

export default Footer
{'fraction_non_alphanumeric': 0.1570171375636869, 'fraction_numerical': 0.04377026401111626, 'mean_word_length': 1.8118489583333333, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 61, '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': '4193830', 'n_tokens_mistral': 1639, 'n_tokens_neox': 1439, 'n_words': 330}