maliMirkec

# reload source
alias brc="source ~/.config/fish/.bashrc"

# open explorer in current folder
alias e.="explorer ."

# git: log pretty
alias gl="git log --oneline --graph"

# git: status condensed

maliMirkec

<h1>Reading List No.7</h1>

<h3><a href="http://mentor.silvestar.codes/reads#2020-06-01">The UI Development Mentoring Newsletter</a></h3>

<h5><strong>2020-06-01</strong></h5>

<ul>
    <li>
        <strong><a href="https://www.htmhell.dev/20-close-buttons/">HTMHell special: close buttons</a></strong>
        <br />

maliMirkec

{"timestamp":1562760199686,"data":{"ace":[{"timestamp":1562760199686,"stars":36,"forks":6,"issues":0,"repo":"https://github.com/botanicus/ace"}],"acrylamid":[{"timestamp":1562760199686,"stars":288,"forks":42,"issues":45,"repo":"https://github.com/posativ/acrylamid"}],"adm-dev-kit":[{"timestamp":1562760199686,"stars":29,"forks":4,"issues":11,"repo":"https://github.com/iamfrntdv/adm-dev-kit"}],"amsf":[{"timestamp":1562760199686,"stars":218,"forks":117,"issues":6,"repo":"https://github.com/sparanoid/almace-scaffolding"}],"anodize":[{"timestamp":1562760199686,"stars":4,"forks":0,"issues":0,"repo":"https://github.com/sidmani/anodize"}],"antora":[{"timestamp":1562760199686,"followers":559,"stars":165,"forks":63,"issues":121,"repo":"https://gitlab.com/antora/antora"}],"antwar":[{"timestamp":1562760199686,"stars":461,"forks":32,"issues":8,"repo":"https://github.com/antwarjs/antwar"}],"asimov-static":[{"timestamp":1562760199686,"stars":4,"forks":3,"issues":0,"repo":"https://github.com/adamrenklint/asimov-static"}],"as

maliMirkec

:root {
  --color-alpha: rgb(255, 64, 136);
  --color-beta: rgb(0, 131, 192);
  --color-gamma: rgb(51, 186, 145);
  --color-delta: rgb(252, 216, 4);
  --color-omega: #f8f9fa;
  --color-text: #0a1922;
  --lh: 1.6;
  --fz: 16px;
}

maliMirkec

// Source: https://www.leejamesrobinson.com/blog/how-stripe-designs-beautiful-websites/

body {
  font-family: Camphor, Open Sans, Segoe UI, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

maliMirkec

.hero {
  position: relative;
  overflow: hidden;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

maliMirkec

.hero:after {
  content: “”;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  border-bottom: 10em solid white;
  border-left: 100vw solid transparent;
}

maliMirkec

.hero:before {
  content: “”;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 10em;
  background-image: linear-gradient(to top left, #111 45%, transparent 50%);
  transform-origin: center center;
  transform: scale(1.25) translateY(-.5em);

maliMirkec

<a class=”hero” href=”//www.silvestarbistrovic.from.hr" target=”_blank”>
  <div class=”hero__content”>
    <h1 class=”hero__text”>
      Star Bist
    </h1>
    <div class=”hero__icon”>
      <svg>…</svg>
    </div>
  </div>
</a>

maliMirkec

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});