~thames/tham.es

00adf75ff7de7b26fa399ac8206a5598169a6804 — thames a month ago 4002caa 
Feat: Font and Dark Theme
patch browse .tar.gz 
2 files changed, 51 insertions(+), 8 deletions(-)

M src/index.11ty.js
A src/static/font.woff2

M src/index.11ty.js => src/index.11ty.js +51 -8
@@ 10,13 10,27 @@ export function render(data) {
          href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥃</text></svg>"
          type="image/svg+xml"
        />
        <link rel="preload" href="/thames.gif" as="image" />
        <link
          rel="preload"
          href="/font.woff2"
          as="mono"
          type="font/woff2"
          crossorigin="anonymous"
        />
        <style>
          @font-face {
            font-family: 'mono';
            src: url('/font.woff2') format('woff2');
          }
          html,
          body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-size: clamp(1.2rem, 2.4vw, 2rem);
            font-size: clamp(1.2rem, 2vw, 2rem);
            background: #fdfdff;
            color: #0c0f12;
          }

          main {


@@ 32,9 46,8 @@ export function render(data) {
          }

          section {
            line-height: 1.6;
            font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times,
              serif;
            line-height: 1.4;
            font-family: 'mono', monospace;
            display: flex;
            align-items: center;
          }


@@ 56,6 69,13 @@ export function render(data) {
            text-decoration: none;
          }

          a:focus {
            background: #fff8e7;
            outline: 2px solid #fff8e7;
            outline-offset: 0px;
            border-radius: 5px;
          }

          @media (max-width: 600px) {
            section {
              flex-direction: column;


@@ 64,6 84,30 @@ export function render(data) {
              margin: 2em 0 0 0;
            }
          }

          @media (prefers-color-scheme: dark) {
            body {
              background: #0c0f12;
              color: #bebec4;
            }
            img {
              background: #191f26;
            }

            a {
              color: #bebec4;
            }

            a:focus {
              background: #1f272e;
              outline: 2px solid #1f272e;
            }
          }

          ::selection {
            background: #00ffbf;
            color: black;
          }
        </style>
      </head>
      <body>


@@ 75,10 119,9 @@ export function render(data) {
              Welcome, I'm
              <a class="u-url p-name" rel="me" href="https://tham.es">thames</a
              >. This is my space on the web&nbsp;— simple, open, and indie.
              <span class="p-note"
                >I'm a Domain&nbsp;Name, Emacs, NESdev, and Whiskey
                enthusiast.</span
              >
              <span class="p-note">
                I'm a Domain Name, Emacs, NESdev, and Whiskey enthusiast.
              </span>
            </p>
          </section>
        </main>


A src/static/font.woff2 => src/static/font.woff2 +0 -0