myco.systems/public/@brooke/index.html

<!doctype html>
<html lang="en">
  <head>
    <a rel="me" href="https://kolektiva.social/@brooke"></a>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Brooke</title>
    <style>
      @font-face {
        font-family: PixelifySans;
        font-weight: 700;
        src: url(/@brooke/font/static/PixelifySans-Regular.ttf)
          format("truetype");
        font-display: swap;
      }
      :root {
        --background: #242424e5;
        --accent-1: #d182ff;
        --background-img: url("/@brooke/bg.webp");
        --banner-top: url("/@brooke/fractal-top.webp");
        --banner-bottom: url("/@brooke/fractal-bottom.webp");
        --text-color: white;
        --link-color: var(--accent-1);
        --border: 1px solid black;
      }
      body,
      html {
        margin: 0;
        box-sizing: border-box;
        font-family: PixelifySans;
        height: 100%;
      }
      body {
        background-image: var(--background-img);
        color: var(--text-color);
        background-attachment: fixed;
        background-size: auto 300px;
      }
      .bar-bottom,
      .bar-top {
        height: 150px;
        background-size: cover;
        border: var(--border);
      }
      .bar-top {
        background-image: var(--banner-top);
        background-position: center bottom;
      }
      .bar-bottom {
        background-image: var(--banner-bottom);
        background-position: center top;
      }
      #container {
        max-width: 750px;
        margin: 0 auto;
        border-top: none;
        display: flex;
        flex-direction: column;
      }
      #container a {
        color: var(--link-color);
      }
      #flex {
        display: flex;
        flex: 1;
        overflow: auto;
      }
      main {
        width: 100%;
        background-color: var(--background);
      }
      .content {
        padding: 25px;
      }
      li {
        padding: 0.25rem;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      @media only screen and (max-width: 750px) {
        main {
          display: flex;
          align-items: center;
          justify-content: center;
          overflow-wrap: break-word;
        }
        #container {
          height: 100vh;
        }
        #flex {
          flex-wrap: wrap;
        }
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="bar-top"></div>
      <div id="flex">
        <main>
          <div style="padding: 1rem; padding-top: 0">
            <p>Hi! My name is Brooke. I use She/They pronouns.</p>
            <p>
              I'm a 20-something trying to help organizations and individuals
              get on board with the idea of using FLOSS (Free/Libre/Open Source
              Software). I enjoy and am proficient with
              <a href="https://ollama.ai">Ollama</a>,
              <a href="https://gohugo.io">Hugo</a>,
              <a href="https://www.debian.org/">Debian flavors of Linux</a>,
              <a href="https://www.docker.com/">Docker</a>, and CI/CD, primarily
              <a href="https://forgejo.org/docs/latest/user/actions/"
                >Github/ACT</a
              >.
            </p>
            <p>Online, I like to talk about:</p>
            <ul>
              <li>Off-grid living</li>
              <li>Rubber Tramping</li>
              <li>Open Source projects of all kinds</li>
              <li>Intentional communities</li>
            </ul>
            <p>Where you can find me:</p>
            <ul>
              <a target="_blank" href="https://coop.myco.systems/">
                <li>Blog</li>
              </a>
              <a target="_blank" href="https://kolektiva.social/@brooke/">
                <li>Mastodon</li>
              </a>
              <a target="_blank" href="/@brooke/ssb">
                <li>SSB</li>
              </a>
            </ul>
            <p>
              This website's layout is inspired by
              <a target="_blank" href="https://goblin-heart.net/sadgrl/"
                >sadgirl.online</a
              >.<br />And, here's some tags for things I like:
            </p>
            <div>
              <a target="_blank" href="https://10kb.neocities.org/about">
                <img
                  loading="lazy"
                  src="/@brooke/flag10kb.webp"
                  height="32"
                  width="88"
                  alt="The words '10kB' split in half by a black cross, on a blue background."
                />
              </a>
              <img
                loading="lazy"
                src="/@brooke/trans.webp"
                height="31"
                width="88"
                alt="The trans flag. A flag wih blue, pink, and white strips."
              />
              <img
                loading="lazy"
                src="/@brooke/piracy.webp"
                height="31"
                width="88"
                alt="Piracy Now! With a skull a crossed bones to the left."
              />
              <img
                loading="lazy"
                src="/@brooke/acab.webp"
                height="31"
                width="88"
                alt="All Cops Are Bastards. Flashing text pink and yellow."
              />
              <a target="_blank" href="https://besties.house/"
                ><img
                  loading="lazy"
                  src="/@brooke/besties.webp"
                  height="31"
                  width="88"
                  alt="Besties.house, first unionised group chat."
              /></a>
            </div>
          </div>
        </main>
      </div>
      <div class="bar-bottom"></div>
    </div>
  </body>
</html>
personal site! 2024-08-09 01:39:53 -04:00			`<!doctype html>`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`<html lang="en">`
personal site! 2024-08-09 01:39:53 -04:00			`<head>`
mastodon verificaiton 2024-08-09 18:10:00 -04:00			`<a rel="me" href="https://kolektiva.social/@brooke"></a>`
personal site! 2024-08-09 01:39:53 -04:00			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
			`<title>@Brooke</title>`
			`<style>`
			`@font-face {`
update font name 2024-08-10 00:31:45 -04:00			`font-family: PixelifySans;`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`font-weight: 700;`
remove public from links 2024-08-09 13:53:01 -04:00			`src: url(/@brooke/font/static/PixelifySans-Regular.ttf)`
personal site! 2024-08-09 01:39:53 -04:00			`format("truetype");`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`font-display: swap;`
personal site! 2024-08-09 01:39:53 -04:00			`}`
			`:root {`
			`--background: #242424e5;`
			`--accent-1: #d182ff;`
fix accidental deletion 2024-08-09 17:33:55 -04:00			`--background-img: url("/@brooke/bg.webp");`
fix link 2024-08-10 14:28:06 -04:00			`--banner-top: url("/@brooke/fractal-top.webp");`
			`--banner-bottom: url("/@brooke/fractal-bottom.webp");`
personal site! 2024-08-09 01:39:53 -04:00			`--text-color: white;`
			`--link-color: var(--accent-1);`
			`--border: 1px solid black;`
			`}`
			`body,`
			`html {`
			`margin: 0;`
			`box-sizing: border-box;`
update font name 2024-08-10 00:31:45 -04:00			`font-family: PixelifySans;`
center 2024-08-10 03:10:17 -04:00			`height: 100%;`
personal site! 2024-08-09 01:39:53 -04:00			`}`
			`body {`
			`background-image: var(--background-img);`
			`color: var(--text-color);`
			`background-attachment: fixed;`
add font files, update fractal 2024-08-09 13:40:36 -04:00			`background-size: auto 300px;`
personal site! 2024-08-09 01:39:53 -04:00			`}`
update fractals 2024-08-10 03:27:56 -04:00			`.bar-bottom,`
			`.bar-top {`
personal site! 2024-08-09 01:39:53 -04:00			`height: 150px;`
rollback video changes, foolish misunderstanding of webp 2024-08-09 17:37:11 -04:00			`background-size: cover;`
personal site! 2024-08-09 01:39:53 -04:00			`border: var(--border);`
			`}`
update fractals 2024-08-10 03:27:56 -04:00			`.bar-top {`
			`background-image: var(--banner-top);`
update fractals position to show the end 2024-08-10 14:08:50 -04:00			`background-position: center bottom;`
update fractals 2024-08-10 03:27:56 -04:00			`}`
			`.bar-bottom {`
			`background-image: var(--banner-bottom);`
update fractals position to show the end 2024-08-10 14:08:50 -04:00			`background-position: center top;`
update fractals 2024-08-10 03:27:56 -04:00			`}`
personal site! 2024-08-09 01:39:53 -04:00			`#container {`
center 2024-08-10 03:10:17 -04:00			`max-width: 750px;`
personal site! 2024-08-09 01:39:53 -04:00			`margin: 0 auto;`
Update public/@brooke/index.html 2024-08-10 05:14:41 +00:00			`border-top: none;`
center 2024-08-10 03:10:17 -04:00			`display: flex;`
			`flex-direction: column;`
personal site! 2024-08-09 01:39:53 -04:00			`}`
			`#container a {`
			`color: var(--link-color);`
			`}`
			`#flex {`
			`display: flex;`
center 2024-08-10 03:10:17 -04:00			`flex: 1;`
			`overflow: auto;`
personal site! 2024-08-09 01:39:53 -04:00			`}`
			`main {`
			`width: 100%;`
			`background-color: var(--background);`
			`}`
			`.content {`
			`padding: 25px;`
			`}`
change wording, add ssb profile 2024-08-10 13:48:41 -04:00			`li {`
increase link padding for mobile 2024-08-09 18:02:47 -04:00			`padding: 0.25rem;`
			`}`
center all 2024-08-10 11:53:36 -04:00			`body {`
			`display: flex;`
			`align-items: center;`
			`justify-content: center;`
			`}`
			`@media only screen and (max-width: 750px) {`
			`main {`
			`display: flex;`
			`align-items: center;`
			`justify-content: center;`
update ssb to be a separate text file, I don't want the pain of setting up proper mobile formatting with codeblocks 2024-08-10 14:27:18 -04:00			`overflow-wrap: break-word;`
center all 2024-08-10 11:53:36 -04:00			`}`
Update public/@brooke/index.html 2024-08-10 05:14:41 +00:00			`#container {`
center 2024-08-10 03:10:17 -04:00			`height: 100vh;`
Update public/@brooke/index.html 2024-08-10 05:16:55 +00:00			`}`
			`#flex {`
center 2024-08-10 03:10:17 -04:00			`flex-wrap: wrap;`
			`}`
			`}`
personal site! 2024-08-09 01:39:53 -04:00			`</style>`
			`</head>`
			`<body>`
			`<div id="container">`
update fractals 2024-08-10 03:27:56 -04:00			`<div class="bar-top"></div>`
personal site! 2024-08-09 01:39:53 -04:00			`<div id="flex">`
			`<main>`
			`<div style="padding: 1rem; padding-top: 0">`
change wording, add ssb profile 2024-08-10 13:48:41 -04:00			`<p>Hi! My name is Brooke. I use She/They pronouns.</p>`
personal site! 2024-08-09 01:39:53 -04:00			`<p>`
change wording, add ssb profile 2024-08-10 13:48:41 -04:00			`I'm a 20-something trying to help organizations and individuals`
			`get on board with the idea of using FLOSS (Free/Libre/Open Source`
			`Software). I enjoy and am proficient with`
			`<a href="https://ollama.ai">Ollama</a>,`
typos, add ollama, 2024-08-10 13:01:01 -04:00			`<a href="https://gohugo.io">Hugo</a>,`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`<a href="https://www.debian.org/">Debian flavors of Linux</a>,`
			`<a href="https://www.docker.com/">Docker</a>, and CI/CD, primarily`
update ssb to be a separate text file, I don't want the pain of setting up proper mobile formatting with codeblocks 2024-08-10 14:27:18 -04:00			`<a href="https://forgejo.org/docs/latest/user/actions/"`
			`>Github/ACT</a`
			`>.`
personal site! 2024-08-09 01:39:53 -04:00			`</p>`
change wording, add ssb profile 2024-08-10 13:48:41 -04:00			`<p>Online, I like to talk about:</p>`
personal site! 2024-08-09 01:39:53 -04:00			`<ul>`
			`<li>Off-grid living</li>`
			`<li>Rubber Tramping</li>`
			`<li>Open Source projects of all kinds</li>`
			`<li>Intentional communities</li>`
			`</ul>`
update ssb to be a separate text file, I don't want the pain of setting up proper mobile formatting with codeblocks 2024-08-10 14:27:18 -04:00			`<p>Where you can find me:</p>`
personal site! 2024-08-09 01:39:53 -04:00			`<ul>`
extend bullet point links for mobile accessibility 2024-08-09 17:29:36 -04:00			`<a target="_blank" href="https://coop.myco.systems/">`
			`<li>Blog</li>`
			`</a>`
			`<a target="_blank" href="https://kolektiva.social/@brooke/">`
			`<li>Mastodon</li>`
			`</a>`
update ssb to be a separate text file, I don't want the pain of setting up proper mobile formatting with codeblocks 2024-08-10 14:27:18 -04:00			`<a target="_blank" href="/@brooke/ssb">`
			`<li>SSB</li>`
			`</a>`
personal site! 2024-08-09 01:39:53 -04:00			`</ul>`
update wording for brooke page 2024-08-09 17:11:28 -04:00			`<p>`
			`This website's layout is inspired by`
			`<a target="_blank" href="https://goblin-heart.net/sadgrl/"`
			`>sadgirl.online</a`
			`>.<br />And, here's some tags for things I like:`
			`</p>`
personal site! 2024-08-09 01:39:53 -04:00			`<div>`
			`<a target="_blank" href="https://10kb.neocities.org/about">`
			`<img`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`loading="lazy"`
convert images to webp 2024-08-09 17:16:12 -04:00			`src="/@brooke/flag10kb.webp"`
update 10kb 2024-08-09 18:05:50 -04:00			`height="32"`
set explicit width for tags 2024-08-09 17:16:54 -04:00			`width="88"`
make all the tags the same 2024-08-10 00:31:24 -04:00			`alt="The words '10kB' split in half by a black cross, on a blue background."`
personal site! 2024-08-09 01:39:53 -04:00			`/>`
			`</a>`
			`<img`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`loading="lazy"`
convert images to webp 2024-08-09 17:16:12 -04:00			`src="/@brooke/trans.webp"`
fix height to match actual size 2024-08-09 18:05:27 -04:00			`height="31"`
set explicit width for tags 2024-08-09 17:16:54 -04:00			`width="88"`
update alt text 2024-08-09 18:07:08 -04:00			`alt="The trans flag. A flag wih blue, pink, and white strips."`
personal site! 2024-08-09 01:39:53 -04:00			`/>`
			`<img`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`loading="lazy"`
fix links to new webp files 2024-08-09 17:58:47 -04:00			`src="/@brooke/piracy.webp"`
fix height to match actual size 2024-08-09 18:05:27 -04:00			`height="31"`
set explicit width for tags 2024-08-09 17:16:54 -04:00			`width="88"`
update alt text 2024-08-09 18:07:08 -04:00			`alt="Piracy Now! With a skull a crossed bones to the left."`
personal site! 2024-08-09 01:39:53 -04:00			`/>`
			`<img`
lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00			`loading="lazy"`
fix links to new webp files 2024-08-09 17:58:47 -04:00			`src="/@brooke/acab.webp"`
fix height to match actual size 2024-08-09 18:05:27 -04:00			`height="31"`
set explicit width for tags 2024-08-09 17:16:54 -04:00			`width="88"`
update alt text 2024-08-09 18:07:08 -04:00			`alt="All Cops Are Bastards. Flashing text pink and yellow."`
personal site! 2024-08-09 01:39:53 -04:00			`/>`
			`<a target="_blank" href="https://besties.house/"`
			`><img`
make all the tags the same 2024-08-10 00:31:24 -04:00			`loading="lazy"`
fix links to new webp files 2024-08-09 17:58:47 -04:00			`src="/@brooke/besties.webp"`
fix height to match actual size 2024-08-09 18:05:27 -04:00			`height="31"`
set explicit width for tags 2024-08-09 17:16:54 -04:00			`width="88"`
personal site! 2024-08-09 01:39:53 -04:00			`alt="Besties.house, first unionised group chat."`
			`/></a>`
			`</div>`
			`</div>`
			`</main>`
			`</div>`
update fractals 2024-08-10 03:27:56 -04:00			`<div class="bar-bottom"></div>`
personal site! 2024-08-09 01:39:53 -04:00			`</div>`
			`</body>`
			`</html>`