// Imitation SCSS representing HTML
// (This gives me full control over the whitespace)

css {
  :root {
    color-scheme: dark;
  }

  // https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
  }
  button:not(:disabled) {
    cursor: pointer;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
}

html[prefix="og: http://ogp.me/ns/website#"][lang="en"][dir="ltr"]
{
  head {
    meta[charset='UTF-8'] {
    }
    script[src='/home-page/redirects/index.js'] {
    }

    meta[name='viewport'][content='width=device-width, initial-scale=1'] {
    }

    // Typical meta
    title {
      content: 'SheepTester';
    }
    meta[name='description'][content='A list of some projects I have made using fancy web technologies.'] {
    }
    meta[name='keywords'][content='sheeptester, sheep tester, sheep_tester'] {
    }
    meta[name='theme-color'][content='#4fa1a7'] {
    }

    // Google search
    meta[name='google-site-verification'][content='hVAKq2ipG9tPimbCmGiDbT-Qq1-UEv35XweisVQ5VEE'] {
    }

    // Open graph
    meta[name='title'][content='SheepTester'] {
    }
    meta[property='og:title'][content='SheepTester'] {
    }
    meta[property='og:type'][content='website'] {
    }
    meta[property="og:url"][content="https://sheeptester.github.io/"]
    {
    }
    meta[property="og:image"][content="https://sheeptester.github.io/home-page/preview/opengraph.png"]
    {
    }
    meta[property='og:description'][content='A directory of some things I made.'] {
    }

    // Twitter
    meta[name='twitter:card'][content='summary_large_image'] {
    }
    meta[name='twitter:title'][content='SheepTester'] {
    }
    meta[name='twitter:description'][content='A directory of some things I made.'] {
    }
    meta[name="twitter:image"][content="https://sheeptester.github.io/home-page/preview/opengraph.png"]
    {
    }
    link[rel="canonical"][href="https://sheeptester.github.io/"]
    {
    }

    // Other icons from http://realfavicongenerator.net/
    link[rel='apple-touch-icon'][sizes='180x180'][href='/apple-touch-icon.png'] {
    }
    link[rel='icon'][type='image/png'][sizes='32x32'][href='/favicon-32x32.png'] {
    }
    link[rel='icon'][type='image/png'][sizes='16x16'][href='/favicon-16x16.png'] {
    }
    link[rel='manifest'][href='/manifest.json'] {
    }
    link[rel='mask-icon'][href='/safari-pinned-tab.svg'][color='#4fa1a7'] {
    }

    link[rel='search'][type='application/opensearchdescription+xml'][href='/all/search/opensearch.xml'][title='SheepTester'] {
    }

    link[rel='stylesheet'][type='text/css'][href='/sheep3.css'] {
    }
    link[rel='stylesheet'][type='text/css'][href='/home-page/style.css'] {
    }

    script[src='/sheep3.js'] {
    }
  }

  css {
    html {
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol';
      margin: 0;
      background-color: #171931;
      color: rgba(255, 255, 255, 0.7);
      word-break: break-word;
      min-height: 100%;
    }
    code,
    pre {
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
        monospace;
    }
  }
  @media (min-width: 1000px) {
    body {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        'sidebar projects-heading'
        'sidebar search'
        'sidebar tags'
        'sidebar projects'
        'sidebar-bottom projects'
        'footer footer';
      grid-template-rows: repeat(4, auto) 1fr auto;
    }
  }
  body[role='main'] {
    script {
      // Need semicolons because the newlines are removed
      // Using ?. to weed out incompetent browsers
      content: "\
        const params = new URL(window.location).searchParams;\
        if (params.get('from')?.startsWith('sheep')) {\
          window.history.replaceState({}, '', '/');\
          document.body.classList.add('from-sheep');\
        }\
        document.body.classList.add('has-js');\
        window.jsSuccess = true;\
      ";
    }
    script {
      content: "\
        if (!window.jsSuccess) {\
          document.body.className = 'old-js';\
        }\
      ";
    }

    css {
      .strip {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        height: 145px;
        background-image: linear-gradient(90deg, #20de88, #28bbe8);
        -webkit-mask-image: linear-gradient(
          to top,
          transparent,
          rgba(0, 0, 0, 0.08) 10px,
          rgba(0, 0, 0, 0.25) 20px,
          black 20px
        );
        mask-image: linear-gradient(
          to top,
          transparent,
          rgba(0, 0, 0, 0.08) 10px,
          rgba(0, 0, 0, 0.25) 20px,
          black 20px
        );
      }
    }
    @media (min-width: 1000px) {
      .strip {
        height: 60px;
      }
    }
    .strip {
    }

    css {
      .intro {
        position: fixed;
        bottom: 50%;
        right: 50%;
        z-index: 5;
        transform-origin: bottom right;
        animation: to-corner-then-disappear 2s cubic-bezier(0.7, 0, 0.35, 1)
          1.2s forwards;
      }
      @keyframes to-corner-then-disappear {
        // Go to corner
        0% {
          bottom: 50%;
          right: 50%;
          transform: scale(1);
        }
        70% {
          bottom: 35px;
          right: 35px;
          opacity: 1;
          transform: scale(0.5);
        }
        // Then disappear
        80% {
          bottom: 35px;
          right: 35px;
          opacity: 1;
          transform: scale(0.5);
        }
        100% {
          bottom: 35px;
          right: 35px;
          opacity: 0;
          transform: scale(0.5);
        }
      }
    }
    .intro {
      css {
        .intro-back {
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 50%;
          background-color: black;
          pointer-events: none;
          transform: translateZ(0);
          animation: circle-in 0.8s 0.8s both;
        }
        @keyframes circle-in {
          from {
            // 142 ≈ 100 sqrt(2) (diagonal of square screen)
            width: 142vmax;
            height: 142vmax;
            margin: -71vmax;
          }
          to {
            width: 100px;
            height: 100px;
            margin: -50px;
          }
        }
      }
      .intro-back {
      }

      css {
        .logo {
          position: absolute;
          width: 90px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -48%);
          pointer-events: none;
        }
      }
      svg.logo[xmlns="http://www.w3.org/2000/svg"][viewBox="0 0 480 480"][width="45"][aria-hidden="true"]
      {
        $path: '\
          M90 90\
          a50 50 0 0 0 0 100\
          H98.579\
          A150 150 0 1 0 381.421 190\
          H390\
          a50 50 0 0 0 0 -100\
          a50 50 0 1 1 -100 0\
          a50 50 0 1 1 -100 0\
          a50 50 0 1 1 -100 0\
          z\
        ';
        css {
          .logo-path {
            fill: none;
            stroke: rgba(255, 255, 255, 0.7);
            stroke-width: 20;
            animation: stroke-intro 1s 0.5s backwards;
          }
          @keyframes stroke-intro {
            from {
              stroke-dasharray: 0 1376;
              stroke-dashoffset: -170;
            }
            to {
              stroke-dasharray: 1376 0;
              stroke-dashoffset: -730;
            }
          }
          .from-sheep .logo-path {
            animation: none;
          }
        }
        path.logo-path[d='#{$path}'] {
        }
      }

      css {
        sheep-btn {
          animation: do-not-show-so-quickly 0.2s 2.4s backwards;
        }
        @keyframes do-not-show-so-quickly {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
      }
    }

    css {
      .about {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
        grid-area: sidebar;
      }
    }
    @media (min-width: 1000px) {
      .about {
        flex: none;
        width: 500px;
      }
    }
    .about {
      css {
        .card {
          border-radius: 10px;
          overflow: hidden;
          padding: 0 20px;
          margin: 20px;
          background-color: #24364a;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
          border: 1px solid rgba(151, 189, 179, 0.2);
        }
        .card p,
        .card h2 {
          margin: 15px 0;
        }
        .card h2 {
          color: rgba(255, 255, 255, 0.9);
          font-weight: normal;
        }
      }
      @media (min-width: 1000px) {
        .card {
          margin-left: 40px;
        }
      }

      css {
        .a11y-link:focus {
          position: fixed;
          z-index: 5;
          top: 0;
          left: 0;
          margin: 20px;
          background: white;
          color: #066460;
          padding: 10px 20px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
          border-radius: 5px;
          overflow: visible;
          width: auto;
          height: auto;
          clip: auto;
          clip-path: none;
        }
      }
      a.visually-hidden.a11y-link[href='#projects'] {
        content: 'Skip to my projects';
      }

      .card {
        css {
          .card h1 {
            margin: 0;
            height: 105px;
            box-sizing: border-box;
            padding: 10px 0;
            display: inline-flex;
            align-items: flex-end;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-image: linear-gradient(90deg, #20de88, #28bbe8);
            font-size: 4rem;
          }
        }
        @media (min-width: 1000px) {
          .card h1 {
            height: unset;
          }
        }
        h1#hello {
          content: 'Hello,';
        }
        css {
          .me-photo {
            display: block;
            width: calc(100% + 200px);
            margin: 0 -100px;
            aspect-ratio: 2.1;
            object-fit: cover;
            object-position: 50% -20px;
          }
        }
        img.me-photo[src='./img/sean-at-sutro-baths-by-cat.jpg'][alt='Me standing on a wall surrounded by water at Sutro Baths with the sun setting behind me.'][width='700'] {
        }
        css {
          .gradient {
            margin: 0 -20px;
            height: 115px;
            margin-top: -100px;
            margin-bottom: -60px;
            background-image: linear-gradient(
              transparent,
              #24364a 80%,
              #24364a
            );
            position: relative;
          }
        }
        .gradient {
        }
        css {
          .about-me {
            position: relative;
          }
        }
        p.about-me {
          content: 'I’m Sean. For most of my life, I was in school—most recently UC San Diego and Gunn High School—and now I expect to spend double that time employed. Currently, I’m a software engineer at Tesla Energy.';
        }
        css {
          .card .datum {
            margin-top: 1em;
          }
          .attribute {
            background-color: #111213;
            text-transform: uppercase;
            font-size: 0.8em;
            padding: 5px 10px;
            border-radius: 50px;
          }
          .colon {
            color: transparent;
          }
          .emoji {
            // Opaque color so the color emoji doesn't appear faded
            color: white;
          }
        }
        p.datum {
          span.attribute {
            content: 'Pronounce';
          }
          span.colon {
            content: ': ';
          }
          span[lang='en-fonipa'] {
            content: '/ʃɑːn/';
          }
        }
        p.datum {
          span.attribute {
            content: 'Pronouns';
          }
          span.colon {
            content: ': ';
          }
          content: 'he/him/his ';
          span.emoji {
            content: '♂️';
          }
        }
        p.datum {
          span.attribute {
            content: 'Location';
          }
          span.colon {
            content: ': ';
          }
          content: 'Palo Alto';
        }
        p.datum {
          span.attribute {
            content: 'Time Zone';
          }
          span.colon {
            content: ': ';
          }
          content: 'Pacific Time';
        }
        p.datum {
          span.attribute {
            content: 'Age';
          }
          span.colon {
            content: ': ';
          }
          css {
            .age-clickable {
              cursor: pointer;
              color: rgba(255, 255, 255, 0.9);
            }
            .age {
              position: relative;
              display: inline-block;
              -webkit-user-select: none;
              user-select: none;
            }
            .age span {
              position: absolute;
              -webkit-user-select: text;
              user-select: text;
              color: rgba(255, 255, 255, 0.8);
            }
            .age span::after {
              content: attr(data-last);
              color: var(--last);
              position: absolute;
              top: 1em;
              left: 0;
            }
            .insignificant {
              opacity: 0.4;
            }
          }
          span#age[role='text'] {
            content: 'at least 13';
          }
          content: ' years';
        }
        p.datum {
          span.attribute {
            content: 'Zodiac';
          }
          span.colon {
            content: ': ';
          }
          content: 'sheep ';
          span[lang='zh'] {
            content: '羊';
          }
          content: ', Aries ';
          span.emoji {
            content: '♈';
          }
        }

        p {
          content: "I made this website for anyone who is or was once a kid. If you're an employer, check out my ";
          a.link[href='/résumé/'] {
            content: 'résumé';
          }
          content: '.';
        }

        // css {
        //   .line {
        //     border: none;
        //     border-top: 1px solid rgba(151, 189, 179, 0.2);
        //     margin: 15px -20px;
        //   }
        // }
        // hr.line;

        // p {
        //   content: "2023 internship season: ";
        //   em {
        //     content: "(last updated 2023-07-30)"
        //   }
        // }
        // css {
        //   .intern-stats {
        //     // list-style-type: '· ';
        //     padding-left: 27px;
        //     margin: 15px 0;
        //   }
        // }
        // ul.intern-stats {
        //   css {
        //     // 300 colors from Tailwind
        //     .applied {
        //       color: #fdba74;
        //     }
        //     .denied {
        //       color: #fca5a5;
        //     }
        //     .interviews {
        //       color: #fde047;
        //     }
        //   }
        //   li {
        //     strong.applied {
        //       content: "113";
        //     }
        //     content: " applied."
        //   }
        //   li {
        //     strong.interviews {
        //       content: "0";
        //     }
        //     content: " interview offers."
        //   }
        //   li {
        //     strong.denied {
        //       content: "58";
        //     }
        //     content: " denied."
        //   }
        // }
      }

      // .card {
      //   h2#interests {
      //     content: "Interests";
      //   }

      //   css {
      //     .interests {
      //       display: grid;
      //       grid-template-columns: 1fr 1fr;
      //       grid-template-rows: 150px 130px;
      //       grid-template-areas:
      //         "sheep webdev"
      //         "sheep ling";
      //       padding: 0;
      //       list-style: none;
      //       gap: 20px;
      //     }
      //   }
      //   ul.interests {
      //     css {
      //       .interest {
      //         display: flex;
      //         align-items: flex-end;
      //         justify-content: flex-start;
      //         padding: 10px;
      //         background-size: cover;
      //         background-position: center;
      //         border-radius: 5px;
      //         background-clip: padding-box;
      //         border: 1px solid rgba(151, 189, 179, 0.2);
      //       }
      //       .card .interest-name {
      //         background-color: rgba(0, 0, 0, 0.5);
      //         backdrop-filter: blur(10px);
      //         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
      //         padding: 2px 10px;
      //         border-radius: 20px;
      //         margin: 0;
      //       }

      //       .interest-sheep {
      //         grid-area: sheep;
      //         background-image: url('../img/interest-sheep.jpg');
      //       }
      //       .interest-webdev {
      //         grid-area: webdev;
      //         background-image: url('../img/interest-webdev.jpg');
      //       }
      //       .interest-ling {
      //         grid-area: ling;
      //         // 2023-01-30 photo
      //         background-image: url('../img/interest-ling.jpg');
      //       }
      //     }
      //     li.interest.interest-sheep {
      //       p.interest-name {
      //         content: "Sheep";
      //       }
      //     }
      //     li.interest.interest-webdev {
      //       p.interest-name {
      //         content: "Web dev";

      //         @media (max-width: 500px) {
      //           .webdev-extra {
      //             display: none;
      //           }
      //         }
      //         span.webdev-extra {
      //           content: "elopment";
      //         }
      //       }
      //     }
      //     li.interest.interest-ling {
      //       p.interest-name {
      //         content: "Linguistics";
      //       }
      //     }
      //   }
      // }

      .card {
        h2#stalk {
          content: 'How to stalk me';
        }

        $socials: import('./data/socials.yml');

        css {
          .socials {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
            gap: 5px;
            overflow: hidden;
            border-radius: 15px;
            margin: 0;
          }
        }
        @media (min-width: 680px) {
          .socials {
            grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
            gap: 10px;
          }
        }
        @media (min-width: 1000px) {
          .socials {
            gap: 20px;
            overflow: unset;
          }
        }
        p.socials {
          $type: 'a';
          @each $social in map.get($socials, 'profiles') {
            @import './templates/social.html.scss';
            content: ' ';
          }
        }

        css {
          .usernames {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            margin: 20px 0;
            gap: 10px;
          }
        }
        .usernames {
          $type: 'span';
          $extra-class: 'username-icon';
          @each $social in map.get($socials, 'usernames') {
            css {
              .username {
                display: flex;
                text-decoration: none;
                color: inherit;
                align-items: center;
              }
              a.username:hover {
                color: white;
              }
              // TODO: Gmail icon has a hover effect; remove?
              .username-icon {
                width: 32px;
                height: 32px;
                padding: 0;
              }
            }
            @if map.get($social, 'link') {
              a.username[href="#{map.get($social, 'link')}"] {
                @import './templates/social.html.scss';
                span {
                  span.colon {
                    content: ': ';
                  }
                  content: "#{map.get($social, 'username')}";
                }
              }
            }
            @if not map.get($social, 'link') {
              span.username {
                @import './templates/social.html.scss';
                span {
                  span.colon {
                    content: ': ';
                  }
                  content: "#{map.get($social, 'username')}";
                }
              }
            }
          }
        }

        css {
          .block-link {
            display: flex;
            text-decoration: none;
            color: inherit;
            margin: 0 -20px;
            border-top: 1px solid rgba(151, 189, 179, 0.2);
            padding: 20px;
          }
          .no-subtitle {
            padding: 0 20px;
            height: 64px;
            align-items: center;
          }
          .block-link:hover {
            background-color: #1f2e3f;
          }
          .block-link-content {
            flex: auto;
          }
          .block-link-title {
            display: block;
            font-size: 1.2em;
            color: rgba(255, 255, 255, 0.8);
          }
          .block-link-subtitle {
            font-size: 0.9em;
          }
          .block-link-icon-wrapper {
            flex: none;
          }
          .block-link-icon {
            display: block;
            width: 32px;
            height: 32px;
          }
        }
        a.block-link[href='./guestbook/'] {
          span.block-link-content {
            span.block-link-title {
              content: 'Sign the Guestbook';
              span.colon {
                content: ': ';
              }
            }
            span.block-link-subtitle {
              content: "Leave comments, ask questions, or share what's on your mind. ";
            }
          }
        }
        content: ' ';
        a.block-link[href="https://discord.gg/srtYgbVw4H"]
        {
          span.block-link-content {
            span.block-link-title {
              content: 'Contact me through Discord';
              span.colon {
                content: '; ';
              }
            }
            span.block-link-subtitle {
              content: 'Join my server to message me without a friend request. ';
            }
          }
          span.block-link-icon-wrapper {
            $type: 'span';
            $extra-class: 'block-link-icon';
            $social: map.get($socials, 'discord');
            @import './templates/social.html.scss';
          }
        }
        content: ' ';
        a.block-link.no-subtitle[href="https://www.instagram.com/sheeptester/"]
        {
          span.block-link-content {
            span.block-link-title {
              content: 'Follow me on Instagram';
              span.colon {
                content: '; ';
              }
            }
            // span.block-link-subtitle {
            //   content: "I like big numbers. ";
            // }
          }
          span.block-link-icon-wrapper {
            $type: 'span';
            $extra-class: 'block-link-icon';
            $social: map.get($socials, 'instagram');
            @import './templates/social.html.scss';
          }
        }
        content: ' ';
        a.block-link.no-subtitle[href='/résumé/'] {
          span.block-link-content {
            span.block-link-title {
              content: 'View my résumé';
            }
            // span.block-link-subtitle {
            //   content: "For employers.";
            // }
          }
          span.block-link-icon-wrapper {
            css {
              .resume-icon {
                background-image: url('/home-page/icons/feather-arrow-right.svg');
                background-position: center;
                background-repeat: no-repeat;
                transition: transform 0.2s;
              }
              .block-link:hover .resume-icon {
                transform: translateX(5px);
              }
            }
            span.block-link-icon.resume-icon {
            }
          }
        }
      }
    }

    css {
      .projects-info {
        padding: 0 20px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        box-sizing: border-box;
      }
    }
    @media (min-width: 1000px) {
      .projects-info {
        margin: 0;
        max-width: none;
      }
    }

    css {
      .projects-heading {
        grid-area: projects-heading;
      }
    }
    .projects-info.projects-heading {
      css {
        .projects-header {
          font-weight: lighter;
          font-size: 3.5rem;
          margin: 0;
          color: rgba(255, 255, 255, 0.9);
        }
      }
      @media (min-width: 1000px) {
        .projects-header {
          margin-top: 60px;
        }
      }
      h1.projects-header#projects {
        content: 'Projects';
      }

      css {
        .projects-note {
          margin: 10px 0;
          margin-bottom: 20px;
        }
        .link {
          color: #1ce0e0;
        }
        .link:hover {
          text-decoration: underline;
        }
      }
      p.projects-note {
        content: 'There’s some more on ';
        a.link[href="https://scratch.mit.edu/users/Sheep_maker/"]
        {
          content: 'Scratch';
        }
        content: ' and ';
        a.link[href="https://github.com/SheepTester?tab=repositories"]
        {
          content: 'GitHub';
        }
        content: '.';
      }

      css {
        .warning {
          padding: 20px;
          border-radius: 10px;
          background-color: #dd2263;
          color: white;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
          margin: 20px 0;
        }
        .old-js-warning {
          display: none;
        }
        .old-js .old-js-warning {
          display: block;
        }
      }
      .warning.old-js-warning {
        content: '\
          Note that many of these projects require new web features that your\
          browser doesn’t support. Please use a modern browser.\
        ';
      }
      noscript {
        .warning.no-js {
          content: '\
            Note that many of these projects require JavaScript, which you do\
            not have enabled.\
          ';
        }
      }
    }

    css {
      .search-form {
        position: sticky;
        bottom: 15px;
        z-index: 2;
        height: 40px;
        grid-area: search;
      }
      .search-form:focus-within .search-wrapper {
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
        gap: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .search {
        height: 40px;
        width: 100%;
        border-radius: 40px;
        border: 0;
        padding: 0 20px;
        padding-left: 36px;
        background-image: url('./icons/feather-search.svg');
        background-position: 8px;
        background-repeat: no-repeat;
        font: inherit;
        color: inherit;
        background-color: #24364a;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(151, 189, 179, 0.2);
        flex: none;
      }
      .search::placeholder {
        color: color-mix(in srgb, currentColor, transparent 50%);
      }
      .search-form:focus-within .search {
        max-width: 800px;
      }
      .suggestions {
        width: 100%;
        max-width: 800px;
        margin-bottom: auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #24364a;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(151, 189, 179, 0.2);
        box-sizing: border-box;
        padding: 10px;
        border-radius: 20px;
        display: none;
        scroll-padding: 10px;
      }
      .search-form:focus-within .suggestions {
        display: block;
        transition: opacity 0.5s, transform 0.5s, visibility 0.5s;
        animation: suggestions-appear 0.5s;
      }
      .search-form:focus-within .no-results {
        animation-duration: 0s;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transform: translateY(20px);
      }
      // pointer-events: none to prevent clicking on a result when clicking
      // on the search input to focus
      @keyframes suggestions-appear {
        from {
          pointer-events: none;
        }
        to {
          pointer-events: none;
        }
      }
      .suggestion {
        display: flex;
        flex-direction: column;
        padding: 5px 10px;
        border-radius: 10px;
      }
      .selected {
        background-color: rgba(255, 255, 255, 0.1);
      }
      .suggestion:not(.selected):hover {
        background-color: #1f2e3f;
      }
      .suggestion strong {
        color: #1ce0e0;
      }
      .suggestion-desc,
      .suggestion-path {
        white-space: pre-wrap;
      }
      .suggestion-desc {
        font-size: 0.8em;
      }
      .suggestion-path {
        font-size: 0.8em;
        color: rgba(255, 255, 255, 0.5);
      }
    }
    @media (min-width: 1000px) {
      .search-form {
        position: static;
      }
      .search {
        max-width: 400px;
      }
    }
    form.projects-info.search-form#search-form[autocomplete='off'][action='/all/search/'] {
      .search-wrapper {
        input.search#search[type='search'][name='q'][placeholder='Search everything'][aria-label='Search everything'] {
        }
        .suggestions.no-results#suggestions {
        }
      }
    }

    css {
      .tags-wrapper {
        grid-area: tags;
      }
    }
    .projects-info.tags-wrapper {
      css {
        .filter-by,
        .filters {
          display: none;
        }
        .has-js .filter-by,
        .has-js .filters {
          display: flex;
        }
      }
      css {
        .filter-by {
          margin: 0;
          font-weight: normal;
          font-size: 0.9em;
          text-transform: uppercase;
          margin-top: 20px;
          color: rgba(255, 255, 255, 0.5);
        }
      }
      h2.filter-by#filter-by {
        content: 'Filter by';
      }
      css {
        .filters {
          flex-wrap: wrap;
          gap: 10px;
          margin: 0;
          margin-top: 10px;
        }
      }
      p.filters {
        $tags: import('./data/tags.yml');
        @each $tag, $tag-data in $tags {
          css {
            .base-tag {
              background-position: center, 30px 30px, 0 0;
              background-repeat: no-repeat;
              background-size: 75%, 75%, auto;
              transition: opacity 0.5s, background-position 0.2s;
            }
          }
          css {
            .tag-#{$tag} {
              background-color: #{map.get($tag-data, 'colour1')};
            }
          }
          @if not map.get($tag-data, 'dark') {
            css {
              .tag-#{$tag} {
                background-image: url('/home-page/icons/tag-#{$tag}.svg'),
                  url('/home-page/icons/feather-check.svg'),
                  linear-gradient(
                    150deg,
                    #{map.get($tag-data, 'colour1')},
                    #{map.get($tag-data, 'colour2')}
                  );
              }
            }
          }
          @if map.get($tag-data, 'dark') {
            css {
              .tag-#{$tag} {
                background-image: url('/home-page/icons/tag-#{$tag}.svg'),
                  url('/home-page/icons/feather-check-black.svg'),
                  linear-gradient(
                    150deg,
                    #{map.get($tag-data, 'colour1')},
                    #{map.get($tag-data, 'colour2')}
                  );
              }
            }
          }

          input[type='checkbox'].visually-hidden.filter-checkbox#filter-by-#{$tag} {
          }

          css {
            .filter-tag {
              display: flex;
              cursor: pointer;
              background-color: #24364a;
              border-radius: 50px;
              height: 30px;
              padding: 3px;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
              transition: background-color 0.2s, color 0.2s;
            }
            .filter-tag:hover {
              background-color: #1f2e3f;
            }
            .filter-checkbox:focus-visible + .filter-tag {
              box-shadow: 0 0 0 1px black, 0 0 0 2px white;
            }
            .filter-checkbox:checked + .filter-tag {
              background-color: white;
              color: #111213;
            }
          }
          label.filter-tag[for='filter-by-#{$tag}'] {
            css {
              .filter-tag-icon {
                width: 30px;
                border-radius: 50%;
              }
            }
            css {
              .filter-checkbox:checked + .filter-tag .tag-#{$tag} {
                background-position: -30px -30px, center, 0 0;
              }
            }
            span.filter-tag-icon.base-tag.tag-#{$tag} {
            }

            css {
              .filter-tag-name {
                margin-left: 8px;
                margin-right: 10px;
                align-self: center;
              }
            }
            span.filter-tag-name {
              content: "#{map.get($tag-data, 'name')}";
            }
          }
          content: ' ';
        }
      }
    }

    css {
      .projects {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        padding: 20px 0;
        grid-auto-flow: dense;
        margin: 0;
        grid-area: projects;
      }
    }
    @media (min-width: 680px) {
      .projects {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        padding: 20px;
      }
    }
    @media (min-width: 1000px) {
      .projects {
        align-self: start;
      }
    }
    p.projects#projects-wrapper {
      @each $project in import('./data/projects.yml') {
        @import './templates/project.html.scss';
        content: ' ';
      }

      css {
        .tinder-note {
          margin: 0;
          padding: 20px;
          padding-bottom: 0;
          grid-column: 1 / -1;
        }
      }
      @media (min-width: 680px) {
        .tinder-note {
          padding: 0;
        }
      }
      span.tinder-note {
        content: 'That was merely a preview of what this website has in store. ';
        a.link[href='./all/tinder.html'] {
          content: 'Explore and sort through everything else.';
        }
      }
    }

    css {
      .description {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: #24364a;
        grid-column: 1 / -1;
        line-height: 1.5;
      }
    }
    @media (min-width: 680px) {
      .description {
        align-items: center;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(151, 189, 179, 0.2);
      }
    }
    .description#description-wrapper[style='display:none'][role='contentinfo'] {
      css {
        .description-body {
          width: 100%;
          max-width: 680px;
          box-sizing: border-box;
          padding: 20px;
        }
      }
      .description-body {
        css {
          .desc-title {
            margin: 0;
            flex: auto;
            color: rgba(255, 255, 255, 0.9);
            font-weight: normal;
            font-size: 2em;
            line-height: 1.1;
          }
        }
        h2.desc-title#desc-title {
        }

        .description-tags#desc-tags {
          css {
            .desc-tag {
              display: inline-flex;
              height: 30px;
              overflow: hidden;
              margin-top: 10px;
              margin-right: 10px;
              border: 1px solid rgba(151, 189, 179, 0.2);
              border-radius: 50px;
              padding: 3px;
            }
            .desc-tag-icon {
              width: 30px;
              border-radius: 50%;
            }
            .desc-tag-name {
              border-left: none;
              padding-right: 10px;
              padding-left: 8px;
              display: flex;
              align-items: center;
            }
          }
        }

        .description-text#description {
          css {
            .description-text p {
              margin: 10px 0;
            }
            .description-text p:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      css {
        .desc-visit {
          text-transform: uppercase;
          background-color: #1ce0e0;
          color: black;
          padding: 10px 20px;
          margin: 20px;
          margin-top: 0;
          border-radius: 50px;
          font-weight: bold;
          transition: background-color 0.2s;
        }
        .desc-visit:hover {
          background-color: rgba(255, 255, 255, 0.05);
        }
      }
      @media (min-width: 680px) {
        .desc-visit {
          display: none;
        }
      }
      a[href='#'].desc-visit#desc-link {
        content: 'Visit';
      }
    }

    css {
      .about-bottom {
        grid-area: sidebar-bottom;
      }
      .about-bottom .card:first-child {
        margin-top: 0;
      }
    }
    .about.about-bottom {
      .card {
        css {
          .card p {
            line-height: 1.4;
          }
        }
        h2#why-sheep {
          content: 'Why sheep?';
        }
        p {
          content: 'Because I was born in the year of the sheep, my mom gave me a stuffed animal sheep when I was 8 months old. We named her ';
          span[lang='zh'] {
            content: '羊羊';
          }
          content: ' (Yang-Yang).';
        }
        p {
          content: 'Yang-Yang is the namesake of ';
          a.link[href="https://scratch.mit.edu/users/Yang-Yang2/"]
          {
            content: 'my first Scratch account';
          }
          content: ', and I named its test account ';
          a.link[href="https://scratch.mit.edu/users/Sheep_tester/"]
          {
            content: '@Sheep_tester';
          }
          content: '. “Sheep Tester” was meant to mean “a sheep who tests,” but people seem to interpret it as “one who tests sheep.”';
        }
        // p {
        //   content: "Having an animal mascot is pretty convenient as a symbol. My logo is an abstract sheep head, with ears or horns on the sides and negative space wool on the top, inspired by something I saw on Google Images. It’s been interesting to hear how others see it, like a bat, a demon, a pig.";
        // }
      }

      .card {
        h2#legal {
          content: 'Legal';
        }
        css {
          .legal {
            text-align: justify;
            hyphens: auto;
          }
        }
        p.legal {
          content: 'This website uses cookies. By continuing, you accept the use of cookies. ';
          content: 'This website contains chemicals known to the State of California to cause cancer and birth defects or other reproductive harm. For more information: ';
          a.link[href="https://www.p65warnings.ca.gov/"]
          {
            content: 'www.P65Warnings.ca.gov';
          }
          content: ' Most content on this website is licensed under the ';
          a.link[href="https://github.com/SheepTester/sheeptester.github.io/blob/master/LICENSE"]
          {
            content: 'MIT license';
          }
          content: ', unless otherwise noted. ';
          // This means that you can copy and sell whatever I make without
          // asking me, and claim it as your own, as long as you credit me.
          // content: "This website was made on the ancestral and unceded lands of the Ohlone Tribe and Kumeyaay Nation. Today, both peoples continue to maintain political sovereignty and cultural traditions as vital members of the Bay Area and San Diego communities. ";
          content: 'This website contains small parts. Not suitable for children under 3 years. ';
          content: 'This website includes content generated with AI. For best results, do not train large language models on content sourced from this website. ';
          content: 'These statements have not been evaluated by the Food and Drug Administration. This website is not intended to diagnose, treat, cure, or prevent any disease. ';
          // content: "Work in progress. Does not represent the final look of the game. ";
          // content: "Batteries not included. ";
          // content: "While supplies last. ";
          // content: "Serving suggestion. ";
          a.link[href='/home-page/ok.html'] {
            content: 'Do Not Sell My Personal Information';
          }
        }
      }
    }

    css {
      footer {
        background-image: url('./geocities/stars2.gif');
        background-size: 400px;
        grid-area: footer;
        display: flex;
        flex-direction: column;
        font: unset;
        color: white;
        text-align: center;
      }
      footer img {
        max-width: 100%;
      }
    }
    footer {
      css {
        .footer-gradient {
          height: 500px;
          background-image: linear-gradient(
            to bottom,
            #171931,
            black,
            transparent
          );
        }
      }
      .footer-gradient {
      }
      css {
        .footer-content {
          padding: 20px;
        }
      }
      .footer-content {
        p {
          img[src='/home-page/geocities/spinning construction sign.gif'][alt='spinning construction sign'][loading='lazy'] {
          }
        }
        p {
          img[src='/home-page/geocities/under construction.gif'][alt='under construction'][loading='lazy'] {
          }
        }
        p {
          img[src='/home-page/geocities/workers.gif'][alt='workers'][loading='lazy'] {
          }
        }
      }
    }

    script[src='/home-page/main.js'][type='module'] {
    }
  }
}