gomesite/index.html

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>gomepage</title>
  <meta charset='utf-8'/>
  <meta name='theme-color' content='#efe5d7'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'/>
  <link rel='icon' type='image/x-icon' href='./favicon.ico'>
  <link rel='preconnect' href='https://fonts.googleapis.com'>
  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
  <link rel='preload' href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' as='style' onload='this.onload=null;this.rel="stylesheet"'>
  <noscript><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap'></noscript>
  <style>
    html {
      color: #323a42;
      background-color: #efe5d7;
      /* background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bc/Sir_Walter_Buffalo_Grass.jpg);
      background-size: cover;
      background-position: center; */
      height: 100%;
      font-family: 'Palatino Linotype', Lora, serif;
      font-size: 1.25em;
    }
    body {
      margin: 0;
      min-height: 100%;
      display: grid;
      grid-template-columns: 1fr min-content;
      grid-template-rows: 1fr auto min-content;
      line-height: 1.2;
    }
    *::selection {
      background: #eab77533;
    }
    header {
      grid-column: 2;
      grid-row: 1 / span 2;
      width: min-content;
      height: min-content;
      overflow: hidden;
      background-color: #efe5d7;
      padding-left: 2em;
      padding-bottom: 2em;
    }
    main {
      grid-column: 1;
      grid-row: 1;
      padding: 1em;
      background-color: #efe5d7;
      max-width: fit-content;
      height: fit-content;
    }
    footer {
      display: flex;
      grid-column: 1 / span 2;
      grid-row: 2 / span 2;
      pointer-events: none;
    }
    .title-box, h1, h2, h3, h4, h5, h6 {
      font-weight: normal;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: Optima, 'Palatino Linotype', Lora, serif;
    }
    h2, h3 {
      margin: 0.5em 0;
    }
    .title-box {
      position: relative;
      border: 2px solid #323a42;
      border-top: none;
      border-right: none;
      font-size: 48px;
      height: 3em;
      width: 10em;
      background-color: #efe5d7;
    }
    .title-box:hover {
      cursor: pointer;
      border-color: #6d747a;
      color: #6d747a;
    }
    .title-box .title {
      background-color: inherit;
      position: absolute;
      bottom: -13px;
      padding: 0 0.25em 0 0.25em;
      user-select: none;
    }
    nav {
      font-size: 18px;
      position: relative;
      display: flex;
      flex-direction: column;
      /* this counters the left offset, but adds no real padding  */
      padding-right: 1rem;
      left: 1rem;
      right: 0;
      border-bottom: 2px solid #323a42;
      transition: opacity 50ms;
      opacity: 0;
      pointer-events: none;
    }
    a {
      color: #323a42;
    }
    nav a {
      margin: 0.25em 0.75em 0.25em 0;
      padding: 0.25em;
      position: relative;
      left: -0.25em;
      color: #323a42;
      text-decoration: none;
      line-height: 1.2;
      border-radius: 2px;
    }
    nav a:first-child {
      margin-top: 1em;
    }
    nav a:last-child {
      margin-bottom: 1em;
    }
    a:hover, a:focus {
      color: #6d747a;
      outline: 0;
    }
    a:focus-visible {
      outline: 1px dashed #beb0b1;
    }
    nav a .link-title {
      font-weight: bold;
    }
    nav a .link-description::before {
      font-weight: normal;
      content: '— ';
    }
    nav a.new .link-title::after {
      content: '*';
      color: #984624;
    }
    nav a.new:hover .link-title::after, nav a.new:focus .link-title::after {
      color: #BF8E7C;
    }
    nav.show, nav:focus-within {
      opacity: 1;
      pointer-events: all;
    }
    .gome-img {
      user-select: none;
    }
    .gome-img[src^='./img/desktop'] {
      width: auto;
      max-width: min(1280px, 100%);
    }
    .gome-img[src^='./img/tablet'] {
      display: none;
      max-width: 100%;
    }
    .gome-img[src^='./img/mobile'] {
      display: none;
      max-width: 100%;
    }
    article {
      font-size: 18px;
    }
    #wotd h3 {
      font-family: Optima, 'Palatino Linotype', Lora, serif;
      font-size: 1.2em;
      margin: 0 0 0.5em 0;
    }
    #wotd .definiendum {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 0.5em;
    }
    #wotd time, #wotd .pronunciation {
      display: block;
      margin-bottom: 1em;
    }
    .pronunciation:not(:empty)::before, .pronunciation:not(:empty)::after {
      content: '⧸';
    }
    #wotd ul {
      margin: 0 0 1em 0;
      padding-left: 0.5em;
      list-style: none;
    }
    #wotd li {
      margin-bottom: 0.25em;
    }
    #statuscafe {
      padding-left: 0.5em;
    }
    #statuscafe-username a {
      margin: -0.15em;
      padding: 0.15em;
      border-radius: 2px;
    }
    @media only screen and (max-width: 960px) {
      body {
        grid-template-rows: min-content auto min-content;
      }
      header {
        grid-column: 1 / span 2;
        grid-row: 1;
        width: 100%;
        padding: 0;
      }
      main {
        grid-row: 2;
      }
      footer {
        grid-row: 3;
      }
      .title-box {
        border-left: none;
        height: 1em;
        width: 100%;
      }
      .title-box:hover {
        cursor: initial;
        border-color: #323a42;
        color: #323a42;
      }
      nav {
        opacity: 1;
        pointer-events: all;
      }
      .gome-img[src^='./img/desktop'] {
        display: none;
      }
      .gome-img[src^='./img/tablet'] {
        display: initial;
      }
    }
    @media only screen and (max-width: 640px) {
      footer {
        align-items: flex-end;
      }
      .gome-img[src^='./img/tablet'] {
        display: none;
      }
      .gome-img[src^='./img/mobile'] {
        display: initial;
      }
    }
  </style>
</head>
<body>
  <header id='header'>
    <div class='title-box'>
      <span class='title'>gomepage</span>
    </div>
    <nav>
      <a href='journal'><span class='link-title'>Journal</span> <span class='link-description'>a collection of articles, essays, and posts authored by me.</span></a>
      <a href='bookmarks'><span class='link-title'>Bookmarks</span> <span class='link-description'>some curated lists of web pages I want to keep track of and share with others.</span></a>
      <a href='socials' class='new'><span class='link-title'>Socials</span> <span class='link-description'>other accounts of mine around the web.</span></a>
    </nav>
  </header>
  <main>
    <article id='wotd'>
      <h2 class='title'>Word of the day</h2>
      <time class='date'></time>
      <div class='definiendum'></div>
      <div class='pronunciation'></div>
    </article>
    <article id='status'>
      <h2>My status</h2>
      <div id='statuscafe'>
        <div id='statuscafe-username'></div>
        <div id='statuscafe-content'></div>
      </div>
      <script src='https://status.cafe/current-status.js?name=gome' defer></script>
    </article>
  </main>
  <footer>
    <img src='./img/desktop_gomes.webp' class='gome-img' alt='Kabouters at work' />
    <img src='./img/tablet_gomes.webp' class='gome-img' alt='Kabouters at work' />
    <img src='./img/mobile_gome.webp' class='gome-img' alt='Lone kabouter' />
  </footer>
  <script>
    const header = document.querySelector('#header');
    const nav = header.querySelector('nav');

    const revealNav = () => {
      nav.classList.add('show');
    }

    const hideNav = () => {
      nav.classList.remove('show');
    }

    header.addEventListener('click', e => {
      if (!nav.contains(e.target) && nav !== e.target) {
        if (nav.classList.contains('show')) {
          hideNav();
        }
        else if (!nav.classList.contains('show')) {
          revealNav();
        }
      }
    });
    window.addEventListener('click', e => {
      if (!header.contains(e.target) && header !== e.target) {
        hideNav();
      }
    });
  </script>
  <script type='module'>
    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    const wotd = document.querySelector('#wotd');
    const today = new Date();
    let entry;
    try {
      let day = today.getDate().toString();
      if (day.length === 1) {
        day = '0' + day;
      }
      let month = (today.getMonth() + 1).toString();
      if (month.length === 1) {
        month = '0' + month;
      }
      const response = await fetch(`./wotd/${today.getFullYear()}.${month}.${day}.json`);
      if (!response.ok) {
        throw new Error(`HTTP response ${response.status} ${response.statusText}`);
      }
      entry = await response.json();
    } catch (e) {
      console.error('Word of the Day error:', e);
    }
    if (!entry) {
      document.querySelector('#wotd').remove();
    } else {
      wotd.querySelector('.date').textContent = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
      wotd.querySelector('.definiendum').textContent = entry.word;
      wotd.querySelector('.pronunciation').textContent = entry.pronunciation;
      let definitionHTML = '';
      for (const definitionEntry of entry.definitions) {
        definitionHTML += `<h3 class='part-of-speech'>${definitionEntry.part}</h4>`;
        definitionHTML += `<ul class='definitions'>`;
        for (const definition of definitionEntry.definitions) {
          definitionHTML += `<li class='definition'>${definition}</li>`
        }
        definitionHTML += `</ul>`;
      }
      wotd.innerHTML += definitionHTML;
    }
  </script>
</body>
</html>
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								<!DOCTYPE html>
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								<html lang='en'>
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								<head>
 								  <title>gomepage</title>
 								  <meta charset='utf-8'/>
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								  <meta name='theme-color' content='#efe5d7'>
 								  <meta name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'/>
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								  <link rel='icon' type='image/x-icon' href='./favicon.ico'>
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								  <link rel='preconnect' href='https://fonts.googleapis.com'>
 								  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								  <link rel='preload' href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap' as='style' onload='this.onload=null;this.rel="stylesheet"'>
 								  <noscript><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap'></noscript>
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								  <style>
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    html {
 								      color: #323a42;
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								      background-color: #efe5d7;
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								      /* background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/bc/Sir_Walter_Buffalo_Grass.jpg);
 								      background-size: cover;
 								      background-position: center; */
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      height: 100%;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      font-family: 'Palatino Linotype', Lora, serif;
 								      font-size: 1.25em;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    body {
 								      margin: 0;
 								      min-height: 100%;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      display: grid;
 								      grid-template-columns: 1fr min-content;
 								      grid-template-rows: 1fr auto min-content;
 								      line-height: 1.2;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    *::selection {
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								      background: #eab77533;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    header {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      grid-column: 2;
 								      grid-row: 1 / span 2;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      width: min-content;
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								      height: min-content;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      overflow: hidden;
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								      background-color: #efe5d7;
 								      padding-left: 2em;
 								      padding-bottom: 2em;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    main {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      grid-column: 1;
 								      grid-row: 1;
 								      padding: 1em;
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								      background-color: #efe5d7;
 								      max-width: fit-content;
 								      height: fit-content;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    footer {
 								      display: flex;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      grid-column: 1 / span 2;
 								      grid-row: 2 / span 2;
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								      pointer-events: none;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								    }
 								    .title-box, h1, h2, h3, h4, h5, h6 {
 								      font-weight: normal;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
-												add status.cafe widget

											
										
										
											2022-07-01 01:01:40 +00:00
+								    h1, h2, h3, h4, h5, h6 {
 								      font-family: Optima, 'Palatino Linotype', Lora, serif;
 								    }
 								    h2, h3 {
 								      margin: 0.5em 0;
 								    }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    .title-box {
 								      position: relative;
 								      border: 2px solid #323a42;
 								      border-top: none;
 								      border-right: none;
 								      font-size: 48px;
 								      height: 3em;
 								      width: 10em;
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								      background-color: #efe5d7;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								    .title-box:hover {
 								      cursor: pointer;
 								      border-color: #6d747a;
 								      color: #6d747a;
 								    }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    .title-box .title {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      background-color: inherit;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      position: absolute;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      bottom: -13px;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      padding: 0 0.25em 0 0.25em;
 								      user-select: none;
 								    }
 								    nav {
 								      font-size: 18px;
 								      position: relative;
 								      display: flex;
 								      flex-direction: column;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      /* this counters the left offset, but adds no real padding  */
 								      padding-right: 1rem;
 								      left: 1rem;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      right: 0;
 								      border-bottom: 2px solid #323a42;
 								      transition: opacity 50ms;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      opacity: 0;
 								      pointer-events: none;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
-												tweak status styling

											
										
										
											2022-07-01 03:40:10 +00:00
+								    a {
 								      color: #323a42;
 								    }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    nav a {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      margin: 0.25em 0.75em 0.25em 0;
 								      padding: 0.25em;
 								      position: relative;
 								      left: -0.25em;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      color: #323a42;
 								      text-decoration: none;
 								      line-height: 1.2;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      border-radius: 2px;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    nav a:first-child {
 								      margin-top: 1em;
 								    }
 								    nav a:last-child {
 								      margin-bottom: 1em;
 								    }
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								    a:hover, a:focus {
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      color: #6d747a;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      outline: 0;
 								    }
 								    a:focus-visible {
 								      outline: 1px dashed #beb0b1;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    nav a .link-title {
 								      font-weight: bold;
 								    }
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								    nav a .link-description::before {
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      font-weight: normal;
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								      content: '— ';
 								    }
 								    nav a.new .link-title::after {
 								      content: '*';
 								      color: #984624;
 								    }
 								    nav a.new:hover .link-title::after, nav a.new:focus .link-title::after {
 								      color: #BF8E7C;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								    nav.show, nav:focus-within {
 								      opacity: 1;
 								      pointer-events: all;
 								    }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    .gome-img {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      user-select: none;
 								    }
 								    .gome-img[src^='./img/desktop'] {
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      width: auto;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      max-width: min(1280px, 100%);
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    .gome-img[src^='./img/tablet'] {
 								      display: none;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      max-width: 100%;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
 								    .gome-img[src^='./img/mobile'] {
 								      display: none;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      max-width: 100%;
 								    }
-												add status.cafe widget

											
										
										
											2022-07-01 01:01:40 +00:00
+								    article {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      font-size: 18px;
 								    }
 								    #wotd h3 {
 								      font-family: Optima, 'Palatino Linotype', Lora, serif;
 								      font-size: 1.2em;
 								      margin: 0 0 0.5em 0;
 								    }
 								    #wotd .definiendum {
 								      font-size: 1.5em;
 								      font-weight: bold;
 								      margin-bottom: 0.5em;
 								    }
 								    #wotd time, #wotd .pronunciation {
 								      display: block;
 								      margin-bottom: 1em;
 								    }
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								    .pronunciation:not(:empty)::before, .pronunciation:not(:empty)::after {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      content: '⧸';
 								    }
 								    #wotd ul {
 								      margin: 0 0 1em 0;
 								      padding-left: 0.5em;
 								      list-style: none;
 								    }
 								    #wotd li {
 								      margin-bottom: 0.25em;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    }
-												tweak status styling

											
										
										
											2022-07-01 03:40:10 +00:00
+								    #statuscafe {
 								      padding-left: 0.5em;
 								    }
 								    #statuscafe-username a {
 								      margin: -0.15em;
 								      padding: 0.15em;
 								      border-radius: 2px;
 								    }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    @media only screen and (max-width: 960px) {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      body {
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								        grid-template-rows: min-content auto min-content;
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      header {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								        grid-column: 1 / span 2;
 								        grid-row: 1;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								        width: 100%;
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								        padding: 0;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      }
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      main {
 								        grid-row: 2;
 								      }
 								      footer {
 								        grid-row: 3;
 								      }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      .title-box {
 								        border-left: none;
 								        height: 1em;
 								        width: 100%;
 								      }
-												a few styling tweaks

											
										
										
											2022-04-30 01:19:43 +00:00
+								      .title-box:hover {
 								        cursor: initial;
 								        border-color: #323a42;
 								        color: #323a42;
 								      }
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      nav {
 								        opacity: 1;
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								        pointer-events: all;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      }
 								      .gome-img[src^='./img/desktop'] {
 								        display: none;
 								      }
 								      .gome-img[src^='./img/tablet'] {
 								        display: initial;
 								      }
 								    }
 								    @media only screen and (max-width: 640px) {
 								      footer {
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								        align-items: flex-end;
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								      }
 								      .gome-img[src^='./img/tablet'] {
 								        display: none;
 								      }
 								      .gome-img[src^='./img/mobile'] {
 								        display: initial;
 								      }
 								    }
 								  </style>
 								</head>
 								<body>
 								  <header id='header'>
 								    <div class='title-box'>
 								      <span class='title'>gomepage</span>
 								    </div>
 								    <nav>
 								      <a href='journal'><span class='link-title'>Journal</span> <span class='link-description'>a collection of articles, essays, and posts authored by me.</span></a>
 								      <a href='bookmarks'><span class='link-title'>Bookmarks</span> <span class='link-description'>some curated lists of web pages I want to keep track of and share with others.</span></a>
-												add socials page

											
										
										
											2022-04-23 15:20:32 +00:00
+								      <a href='socials' class='new'><span class='link-title'>Socials</span> <span class='link-description'>other accounts of mine around the web.</span></a>
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								    </nav>
 								  </header>
 								  <main>
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								    <article id='wotd'>
-												add status.cafe widget

											
										
										
											2022-07-01 01:01:40 +00:00
+								      <h2 class='title'>Word of the day</h2>
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								      <time class='date'></time>
 								      <div class='definiendum'></div>
 								      <div class='pronunciation'></div>
 								    </article>
-												tweak status styling

											
										
										
											2022-07-01 03:40:10 +00:00
+								    <article id='status'>
-												add status.cafe widget

											
										
										
											2022-07-01 01:01:40 +00:00
+								      <h2>My status</h2>
 								      <div id='statuscafe'>
 								        <div id='statuscafe-username'></div>
 								        <div id='statuscafe-content'></div>
 								      </div>
 								      <script src='https://status.cafe/current-status.js?name=gome' defer></script>
 								    </article>
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								  </main>
 								  <footer>
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								    <img src='./img/desktop_gomes.webp' class='gome-img' alt='Kabouters at work' />
 								    <img src='./img/tablet_gomes.webp' class='gome-img' alt='Kabouters at work' />
 								    <img src='./img/mobile_gome.webp' class='gome-img' alt='Lone kabouter' />
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								  </footer>
 								  <script>
 								    const header = document.querySelector('#header');
 								    const nav = header.querySelector('nav');
 								    const revealNav = () => {
 								      nav.classList.add('show');
 								    }
 								    const hideNav = () => {
 								      nav.classList.remove('show');
 								    }
 								    header.addEventListener('click', e => {
 								      if (!nav.contains(e.target) && nav !== e.target) {
 								        if (nav.classList.contains('show')) {
 								          hideNav();
 								        }
 								        else if (!nav.classList.contains('show')) {
 								          revealNav();
 								        }
 								      }
 								    });
 								    window.addEventListener('click', e => {
 								      if (!header.contains(e.target) && header !== e.target) {
 								        hideNav();
 								      }
 								    });
 								  </script>
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								  <script type='module'>
-												hot fixes to wotd

											
										
										
											2022-06-02 15:17:01 +00:00
+								    const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
-												wotd is working

											
										
										
											2022-04-09 01:54:33 +00:00
+								    const wotd = document.querySelector('#wotd');
 								    const today = new Date();
 								    let entry;
 								    try {
 								      let day = today.getDate().toString();
 								      if (day.length === 1) {
 								        day = '0' + day;
 								      }
 								      let month = (today.getMonth() + 1).toString();
 								      if (month.length === 1) {
 								        month = '0' + month;
 								      }
 								      const response = await fetch(`./wotd/${today.getFullYear()}.${month}.${day}.json`);
 								      if (!response.ok) {
 								        throw new Error(`HTTP response ${response.status} ${response.statusText}`);
 								      }
 								      entry = await response.json();
 								    } catch (e) {
 								      console.error('Word of the Day error:', e);
 								    }
 								    if (!entry) {
 								      document.querySelector('#wotd').remove();
 								    } else {
 								      wotd.querySelector('.date').textContent = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
 								      wotd.querySelector('.definiendum').textContent = entry.word;
 								      wotd.querySelector('.pronunciation').textContent = entry.pronunciation;
 								      let definitionHTML = '';
 								      for (const definitionEntry of entry.definitions) {
 								        definitionHTML += `<h3 class='part-of-speech'>${definitionEntry.part}</h4>`;
 								        definitionHTML += `<ul class='definitions'>`;
 								        for (const definition of definitionEntry.definitions) {
 								          definitionHTML += `<li class='definition'>${definition}</li>`
 								        }
 								        definitionHTML += `</ul>`;
 								      }
 								      wotd.innerHTML += definitionHTML;
 								    }
 								  </script>
-												initial commit

											
										
										
											2022-04-09 01:44:33 +00:00
+								</body>
 								</html>