Made by Dude -badge

Sivujen tekijästä ilmoittaa Made by Dude -badge, joka lisätään asiakkaan suostumuksesta sivuston Footer-osioon. Tämä sivu sisältää badgen käyttöönottoon vaadittavat universaalit snippetit, joita ei ole sisällytetty starter-teemaamme mukaan.

Lisää ennen footer.php-tiedoston containerin lopetustagia:

<p class="dude-badge"><a class="no-external-link-indicator" href="https://www.dude.fi" data-tooltip="Sivut toteuttanut" aria-label="Sivut toteuttanut Digitoimisto Dude Oy, siirry ulkoiselle sivustolle dude.fi"><svg aria-hidden="true" class="tip" xmlns="http://www.w3.org/2000/svg" width="36" height="12" viewBox="0 0 36 12"><path class="tip-color" transform="rotate(0)" d="M2.658, .000 C-13.615, .000 50.938, .000 34.662, .000 C28.662, .000 23.035, 12.002 18.660, 12.002 C14.285, 12.002 8.594, .000 2.658, .000 Z"></path></svg><svg width="85" height="17" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 85 17"><g fill="transparent" class="heart" fill-rule="evenodd"><path d="M7.5 13.963L2.192 8.412a3.152 3.152 0 01-.59-3.634h0a3.166 3.166 0 012.312-1.7 3.133 3.133 0 012.72.882l.866.803.867-.803a3.133 3.133 0 012.718-.882 3.167 3.167 0 012.312 1.7h0a3.153 3.153 0 01-.589 3.634L7.5 13.962z" class="stroke" stroke="#03061b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path class="fill" fill="#03061b" d="M50.696 8.166c0 .943-.338 2.782-2.601 2.782-2.278 0-2.618-1.84-2.618-2.782V3h-4.34v5.455c0 3.472 2.6 5.545 6.958 5.545 4.346 0 6.942-2.073 6.942-5.545V3h-4.34v5.166zM85 6.052V3H71.717v11H85v-3.052h-9.073v-1.22h7.543V7.271h-7.543V6.052zM33.14 10.948h-2.894V6.057h2.895c1.498 0 2.543 1.146 2.543 2.443 0 1.314-1.045 2.448-2.543 2.448zM34.179 3H26v11h8.178c2.832 0 5.723-2.196 5.723-5.5 0-3.324-2.891-5.5-5.723-5.5zM63.722 10.948h-2.895V6.057h2.895c1.499 0 2.543 1.146 2.543 2.443 0 1.314-1.044 2.448-2.543 2.448zM64.76 3h-8.178v11h8.178c2.832 0 5.723-2.196 5.723-5.5 0-3.324-2.891-5.5-5.723-5.5z"/></g></svg></a></p>

Uusi tiedosto: sass/layout/_dude-badge.scss:

/* stylelint-disable declaration-no-important, a11y/font-size-is-readable */
// Badge variables
$color-badge-logo-dark: #03061b;
$color-badge-logo-light: $color-white;
$color-badge-tooltip-text-dark: $color-white;
$color-badge-tooltip-text-light: #03061b;
$color-badge-tooltip-background-light: rgba(255, 255, 255, .8);
$color-badge-tooltip-background-dark: rgba(17, 17, 17, .9);

// Light or dark?
$color-badge-logo: $color-badge-logo-light;
$color-badge-tooltip-text: $color-badge-tooltip-text-light;
$color-badge-tooltip-background: $color-badge-tooltip-background-light;

.site-footer .container {
  position: relative;
}

.site-footer .dude-badge {
  
  // Adjust based on the site
  text-align: center;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 45px;

  @media (min-width: 500px) {
    text-align: left;
    margin: 0;
  }

  a:hover .heart,
  a:focus .heart {
    fill: $color-badge-logo;
  }

  .fill {
    fill: $color-badge-logo;
  }

  .stroke {
    stroke: $color-badge-logo;
  }
}

.site-footer {
  [data-tooltip] {
    cursor: pointer;
    position: relative;
    transform: translate(-48%, 18px);
    transform-origin: top;
    transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
  }

  [data-tooltip]::after {
    background: $color-badge-tooltip-background;
    border-radius: 4px;
    bottom: 100%;
    color: $color-badge-tooltip-text;
    content: attr(data-tooltip);
    font-family: sans-serif !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    left: 50%;
    margin-bottom: 11px;
    opacity: 0;
    padding: 5px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    text-shadow: none !important;
    transform: translate(-48%, 10px);
    transform-origin: top;
    transition: transform 200ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
    width: 100px;
    z-index: 10;
  }

  [data-tooltip] .tip {
    bottom: 100%;
    content: "";
    height: 6px;
    left: 50%;
    margin-bottom: 10px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translate(-37%, 15px);
    transform-origin: top;
    transition: transform 155ms cubic-bezier(.19, 1, .22, 1), opacity 200ms cubic-bezier(.19, 1, .22, 1);
    width: 18px;
    z-index: 10;

    .tip-color {
      fill: $color-badge-tooltip-background;
    }
  }

  [data-tooltip]:hover .tip,
  [data-tooltip]:hover::after,
  [data-tooltip]:focus .tip,
  [data-tooltip]:focus::after,
  [data-tooltip][data-tooltip-visible] .tip,
  [data-tooltip][data-tooltip-visible]::after {
    opacity: 1;
    pointer-events: auto;
  }

  [data-tooltip]:hover::after,
  [data-tooltip][data-tooltip-visible]::after {
    transform: translate(-48%, -5px);
  }

  [data-tooltip]:hover .tip,
  [data-tooltip][data-tooltip-visible] .tip {
    transform: translate(-37%, 0);
  }
}

global.scss:

@import '../layout/dude-badge';

Tämä Handbook kertoo kuinka me teemme asioita Dudella, mutta saa ottaa koppia myös omaan toimintaan. Emme takaa että kaikki meidän jutut toimivat muilla samalla tavalla. Ole mitä olet! Kaikki on avointa GitHubissa: digitoimistodude/handbook