https://jangobrecht.com/

ID da verificação
7ae0a5e8-7a2e-4076-b75c-5f6fcf4d3c74Concluído
URL enviado:
https://jangobrecht.com/
Relatório concluído:
LinkTexto
https://mastodon.scot/@janMastodon
https://www.mojeek.com

Variáveis JavaScript · 4 encontrada(s)

NomeTipo
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
getContrastColorfunction

Mensagens de registro do console · 0 encontrada(s)

HTML

<!DOCTYPE html><html lang="en-GB"><head>
	<meta name="generator" content="Hugo 0.138.0">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://jangobrecht.com/images/favicon.png">
<title>Home - jan’s thoughts
    </title>
<meta name="title" content="Home">
<meta name="description" content="Thoughts on the future and hypertext">
<meta name="keywords" content="">


<meta property="og:url" content="https://jangobrecht.com/">
  <meta property="og:site_name" content="jan’s thoughts">
  <meta property="og:title" content="Home">
  <meta property="og:description" content="Heyo 👀 My name is Jan. I’m a human who lives in Edinburgh.
What’s this all about? When you’re reading this, you’ve entered my personal internet playground. Welcome, please come in, have a seat, a beer and pretzels. This is where I come to collect and express my thoughts, as well as to try out new tech. It’s my mental sanctuary, so psst!
Views are all my own, so I take full responsibility for what I personally write and publish here.">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
    <meta property="og:image" content="https://jangobrecht.com/images/share.png">




  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://jangobrecht.com/images/share.png">
  <meta name="twitter:title" content="Home">
  <meta name="twitter:description" content="Heyo 👀 My name is Jan. I’m a human who lives in Edinburgh.
What’s this all about? When you’re reading this, you’ve entered my personal internet playground. Welcome, please come in, have a seat, a beer and pretzels. This is where I come to collect and express my thoughts, as well as to try out new tech. It’s my mental sanctuary, so psst!
Views are all my own, so I take full responsibility for what I personally write and publish here.">




  <meta itemprop="name" content="Home">
  <meta itemprop="description" content="Heyo 👀 My name is Jan. I’m a human who lives in Edinburgh.
What’s this all about? When you’re reading this, you’ve entered my personal internet playground. Welcome, please come in, have a seat, a beer and pretzels. This is where I come to collect and express my thoughts, as well as to try out new tech. It’s my mental sanctuary, so psst!
Views are all my own, so I take full responsibility for what I personally write and publish here.">
  <meta itemprop="datePublished" content="2024-11-13T13:37:00+00:00">
  <meta itemprop="dateModified" content="2024-11-13T13:37:00+00:00">
  <meta itemprop="wordCount" content="86">
  <meta itemprop="image" content="https://jangobrecht.com/images/share.png">
<meta name="referrer" content="no-referrer-when-downgrade">

    
    <link rel="alternate" type="application/rss+xml" href="https://jangobrecht.com/index.xml" title="jan’s thoughts">
     <style>
   
   

  :root {
     
    --main-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --bg-color-1: #f0efe7;
    --main-dark-color: #191a22;
    --main-light-color: #f5f5f5;
    --main-greyish-color: #ddd;
    --main-darkish-color: #888;
    --main-link-color: #3273dc;
    --main-link-visited-color: #8b6fcb;
    --skinny-font: 400;
    --fatty-font: 700;
    text-rendering: optimizeSpeed;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    font-family: var(--main-font-family);
    margin: auto;
    padding: 20px;
    max-width: 720px;
    text-align: left;
    background-color: var(--bg-color-1);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--main-dark-color);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b {
    color: var(--main-dark-color);
  }

  a {
    color: var(--main-link-color);
  }

  .title {
    display: inline-block;
    text-decoration: none;
    border: 0;
    color: var(--main-dark-color);
    transform: rotate(-2deg);
  }

  .title span {
    font-weight: var(--skinny-font);
  }

  nav a {
    margin-right: 10px;
  }

  .is-active {
    font-weight: var(--fatty-font);
    text-decoration: none;
  }

  textarea {
    width: 100%;
    font-size: 16px;
  }

  button,
  input {
    font-size: 16px;
  }

  content {
    line-height: 1.6;
  }

  table {
    width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  code {
    padding: 2px 5px;
    background-color: #f2f2f2;
  }

  pre code {
    color: var(--main-dark-color);
    display: block;
    padding: 20px;
    white-space: pre-wrap;
    font-size: 14px;
  }

  blockquote {
    border-left: 1px solid #999;
    color: var(--main-dark-color);
    padding-left: 20px;
    font-style: italic;
  }

  footer {
    padding: 25px;
    text-align: center;
  }

  .helptext {
    color: var(--main-darkish-color);
    font-size: small;
  }

  .errorlist {
    color: #eba613;
    font-size: small;
  }

   
  ul.blog-posts {
    list-style-type: none;
    padding: unset;
  }

  ul.blog-posts li {
    display: flex;
  }

  ul.blog-posts li span {
    flex: 0 0 130px;
  }

  ul.blog-posts li a:visited {
    color: var(--main-link-visited-color);
  }

  figure {
    margin: 0 auto 15px;
  }

   
  figure.about {
    text-align: center;
  }
  figure.about img {
    border-radius: 50%;
  }

  @media (prefers-color-scheme: dark) {
    body {
      background-color: var(--main-dark-color);
      color: var(--main-greyish-color);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    strong,
    b {
      color: #eee;
    }

    a {
      color: #8cc2dd;
    }

    code {
      background-color: #777;
    }

    pre code {
      color: var(--main-greyish-color);
    }

    blockquote {
      color: var(--main-greyish-color);
    }

    textarea,
    input {
      background-color: #252525;
      color: var(--main-greyish-color);
    }

    .helptext {
      color: #aaa;
    }
  }
</style>

 </head>

  <body>
    <header><header style="display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.1rem 1.1rem 0;">
  <a href="/" class="title">
    <h2>jan’s thoughts</h2>
  </a>
  <nav aria-label="Main Navigation"><nav class="main-nav">
  <input type="checkbox" id="menu-toggle" class="menu-toggle">
  <label for="menu-toggle" class="menu-icon">
    <span></span>
    <span></span>
    <span></span>
  </label>
  <ul class="menu-items">
         
    <li>
      <a href="/" class="is-active">Home</a>
    </li>
        
    <li>
      <a href="/blog/">Blog</a>
    </li>
        
    <li>
      <a href="/photos/">Photos</a>
    </li>
        
    <li>
      <a href="/about/">About</a>
    </li>
        
    <li>
      <a href="/guestbook/">Guestbook</a>
    </li>
        
    <li>
      <a href="/contact/">Contact</a>
    </li>
    
  </ul>
</nav>

<style>
  .main-nav {
    position: relative;
  }

  .menu-toggle {
    display: none;
  }

  .menu-icon {
    display: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 2;
    width: 30px;
    height: 25px;
  }

  .menu-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #191a22;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }

  .menu-icon span:nth-child(1) {
    top: 0px;
  }

  .menu-icon span:nth-child(2) {
    top: 10px;
  }

  .menu-icon span:nth-child(3) {
    top: 20px;
  }

  .menu-items {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
  }

  .menu-items li {
    margin-left: 20px;
  }

  .menu-items a {
    text-decoration: none;
    color: #191a22;
  }

  @media (prefers-color-scheme: dark) {
    .menu-items a {
      color: #f8f8f8;
    }

    .menu-icon span {
      background-color: #f8f8f8;
    }
  }

  .menu-items a.is-active {
    font-weight: bold;
  }

  @media (max-width: 768px) {
    .main-nav {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .menu-icon {
      display: block;
    }

    .menu-items {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      width: 250px;
      background-color: #f8f8f8;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      flex-direction: column;
    }

    @media (prefers-color-scheme: dark) {
      .menu-items {
        background-color: #191a22;
      }
    }

    .menu-items li {
      margin: 0 0 15px 0;
      text-align: left;
    }

    .menu-items li:last-child {
      margin-bottom: 0;
    }

    .menu-items a {
      display: block;
      padding: 5px 0;
    }

    .menu-toggle:checked ~ .menu-items {
      display: block;
    }

    .menu-toggle:checked ~ .menu-icon span:nth-child(1) {
      top: 10px;
      transform: rotate(135deg);
    }

    .menu-toggle:checked ~ .menu-icon span:nth-child(2) {
      opacity: 0;
      left: -60px;
    }

    .menu-toggle:checked ~ .menu-icon span:nth-child(3) {
      top: 10px;
      transform: rotate(-135deg);
    }
  }
</style>
</nav>
</header></header>
    <main>
<h1 id="heyo-">Heyo 👀</h1>
<p>My name is Jan. I’m a human who lives in Edinburgh.</p>
<h2 id="whats-this-all-about">What’s this all about?</h2>
<p>When you’re reading this, you’ve entered my personal internet playground. Welcome, please come in, have a seat, a beer and pretzels. This is where I come to collect and express my thoughts, as well as to try out new tech. It’s my mental sanctuary, so psst!</p>
<p>Views are all my own, so I take full responsibility for what I personally write and publish here.</p>
<p>Thanks for stopping by! ✌️</p>

</main>
    <footer><small><a href="/contact/" rel="me">Contact me</a> ⬌
  <a rel="me" href="https://mastodon.scot/@jan" title="Find me on Mastodon">Mastodon</a>
  ⬌ <a href="/guestbook/" title="Sign my guestbook">Guestbook</a> ⬌
  <a href="/yaml-to-json/" title="YAML to JSON converter">YAML to JSON</a></small><br>



<div id="counter">
  <span class="digit" style="background-color: rgb(25, 220, 210); color: rgb(255, 255, 255);">9</span>
  <span class="digit" style="background-color: rgb(136, 195, 86); color: rgb(0, 0, 0);">9</span>
  <span class="digit" style="background-color: rgb(167, 140, 128); color: rgb(0, 0, 0);">6</span>
  <span class="digit" style="background-color: rgb(94, 169, 131); color: rgb(0, 0, 0);">1</span>
  <span class="digit" style="background-color: rgb(95, 183, 36); color: rgb(255, 255, 255);">3</span>
  <span class="digit" style="background-color: rgb(155, 63, 230); color: rgb(0, 0, 0);">9</span>
</div>
<span id="counter-note">hits since 01/01/1970</span>

<div id="b88x31">
  
  
  <a href="https://www.mojeek.com" rel="nofollow"><img src="/images/mojeek.png" alt="Use Mojeek search engine" width="88" height="31"></a>

  
</div>

<style>
  #b88x31 {
    margin-top: 10px;
  }
  #counter {
    margin: 25px auto 0;
  }
  .digit {
    background-color: #191a22;
     
    font-family: "Comic Sans MS", monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    margin: 0;
    color: #191a22;
  }
  #counter-note {
    color: #191a22;
    font-family: "Comic Sans MS", monospace;
    font-size: 11px;
    font-weight: 700;
  }
  @media (prefers-color-scheme: dark) {
    #counter-note {
      color: #f5f5f5;
    }
  }
</style>

<script>
  const digitSpans = document.querySelectorAll(".digit");

  digitSpans.forEach((span) => {
    const randomDigit = Math.floor(Math.random() * 10);
    span.textContent = randomDigit;
    const randomColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
      Math.random() * 256
    )}, ${Math.floor(Math.random() * 256)})`;

    span.style.backgroundColor = randomColor;

    const color = getContrastColor(randomColor);

    span.style.color = color;
  });

  function getContrastColor(bgColor) {
    const rgb = bgColor
      .substring(4, bgColor.length - 1)
      .replace(/ /g, "")
      .split(",");
    const r = parseInt(rgb[0], 10) / 255;
    const g = parseInt(rgb[1], 10) / 255;
    const b = parseInt(rgb[2], 10) / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    const l = (max + min) / 2;
    const d = max - min;
    let h, s;
    if (max === min) {
      h = s = 0;
    } else {
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r:
          h = (g - b) / d + (g < b ? 6 : 0);
          break;
        case g:
          h = (b - r) / d + 2;
          break;
        case b:
          h = (r - g) / d + 4;
          break;
      }
      h /= 6;
    }
    return l > 0.5 ? "#000000" : "#ffffff";
  }
</script>


</footer>

    


</body></html>