https://jangobrecht.com/

ID de l'analyse :
7ae0a5e8-7a2e-4076-b75c-5f6fcf4d3c74Terminée
URL soumise :
https://jangobrecht.com/
Fin du rapport :

Liens : 2 trouvé(s)

Liens sortants identifiés à partir de la page

Lientexte
https://mastodon.scot/@janMastodon
https://www.mojeek.com

Variables JavaScript : 4 trouvée(s)

Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel

NomType
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
getContrastColorfunction

Messages de journal de console : 0 trouvé(s)

Messages consignés dans la console web

HTML

Le corps HTML de la page en données brutes

<!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>