mycosystems/myco.systems
3
0
Fork 0
Code Pull requests Activity Actions

Compare commits

base: mycosystems:57a4fd007037987a54d86a4319c761bdef4e24a4
Branches Tags
mycosystems:main
..
compare: mycosystems:9b753d1ddb6ffef3377f271d2e51b2f48ca8d085
Branches Tags
mycosystems:main

No commits in common. "57a4fd007037987a54d86a4319c761bdef4e24a4" and "9b753d1ddb6ffef3377f271d2e51b2f48ca8d085" have entirely different histories.
57a4fd0070 ... 9b753d1ddb

2 changed files with 187 additions and 175 deletions
Show stats Expand all files Collapse all files

BIN
public/@brooke/deb.webp
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 904 B

362
public/@brooke/index.html
View file

@ -1,186 +1,198 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <a rel="me" href="https://kolektiva.social/@brooke"></a>
<a rel="me" href="https://kolektiva.social/@brooke"></a> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@Brooke</title>
<title>@Brooke</title> <style>
<style> @font-face {
@font-face { font-family: PixelifySans;
font-family: PixelifySans; font-weight: 700;
font-weight: 700; src: url(/@brooke/font/static/PixelifySans-Regular.ttf)
src: url(/@brooke/font/static/PixelifySans-Regular.ttf) format("truetype"); format("truetype");
font-display: swap; font-display: swap;
} }
:root {
:root { --background: #242424e5;
--background: #242424e5; --accent-1: #d182ff;
--accent-1: #d182ff; --background-img: url("/@brooke/bg.webp");
--background-img: url("/@brooke/bg.webp"); --banner-top: url("/@brooke/fractal-top.webp");
--banner-top: url("/@brooke/fractal-top.webp"); --banner-bottom: url("/@brooke/fractal-bottom.webp");
--banner-bottom: url("/@brooke/fractal-bottom.webp"); --text-color: white;
--text-color: white; --link-color: var(--accent-1);
--link-color: var(--accent-1); --border: 1px solid black;
--border: 1px solid black; }
} body,
html {
body, margin: 0;
html { box-sizing: border-box;
margin: 0; font-family: PixelifySans;
box-sizing: border-box; height: 100%;
font-family: PixelifySans; }
height: 100%; body {
} background-image: var(--background-img);
color: var(--text-color);
body { background-attachment: fixed;
background-image: var(--background-img); background-size: auto 300px;
color: var(--text-color); }
background-attachment: fixed; .bar-bottom,
background-size: auto 300px; .bar-top {
} height: 150px;
background-size: cover;
.bar-bottom, border: var(--border);
.bar-top { }
height: 150px; .bar-top {
background-size: cover; background-image: var(--banner-top);
border: var(--border); background-position: center bottom;
} }
.bar-bottom {
.bar-top { background-image: var(--banner-bottom);
background-image: var(--banner-top); background-position: center top;
background-position: center bottom; }
} #container {
max-width: 750px;
.bar-bottom { margin: 0 auto;
background-image: var(--banner-bottom); border-top: none;
background-position: center top; display: flex;
} flex-direction: column;
}
#container { #container a {
max-width: 750px; color: var(--link-color);
margin: 0 auto; }
border-top: none; #flex {
display: flex; display: flex;
flex-direction: column; flex: 1;
} overflow: auto;
}
#container a {
color: var(--link-color);
}
#flex {
display: flex;
flex: 1;
overflow: auto;
}
main {
width: 100%;
background-color: var(--background);
}
.content {
padding: 25px;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
li {
padding: 0.25rem;
}
ul {
padding-left: 1rem;
}
@media only screen and (max-width: 750px) {
main { main {
width: 100%;
background-color: var(--background);
}
.content {
padding: 25px;
}
body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow-wrap: break-word;
} }
li {
#container { padding: 0.25rem;
height: 100vh;
} }
ul {
#flex { padding-left: 1rem;
flex-wrap: wrap;
} }
} @media only screen and (max-width: 750px) {
</style> main {
</head> display: flex;
align-items: center;
<body> justify-content: center;
<div id="container"> overflow-wrap: break-word;
<div class="bar-top"></div> }
<div id="flex"> #container {
<main> height: 100vh;
<div style="padding: 1rem; padding-top: 0"> }
<p>Hi! My name is Brooke. I use She/They pronouns.</p> #flex {
<p> flex-wrap: wrap;
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 </style>
<a target="_blank" href="https://solvespace.com/index.pl">SolveSpace</a>, </head>
<a target="_blank" href="https://en.wikipedia.org/wiki/Fused_filament_fabrication">FFF/SLS 3D printing</a>, <body>
<a target="_blank" href="https://gohugo.io">Hugo</a>, <div id="container">
<a target="_blank" href="https://www.debian.org/">Debian flavors of Linux</a>, <div class="bar-top"></div>
<a target="_blank" href="https://www.docker.com/">Docker</a>, and <div id="flex">
<a target="_blank" href="https://forgejo.org/docs/latest/user/actions/">ACT based CI/CD</a>. <main>
</p> <div style="padding: 1rem; padding-top: 0">
<p>Online, I like to talk about:</p> <p>Hi! My name is Brooke. I use She/They pronouns.</p>
<ul> <p>
<li>Off-grid living</li> I'm a 20-something trying to help organizations and individuals
<li>Rubber Tramping</li> get on board with the idea of using FLOSS (Free/Libre/Open Source
<li>Open Source projects of all kinds</li> Software). I enjoy and am proficient with
<li>Intentional communities</li> <a target="_blank" href="https://solvespace.com/index.pl">SolveSpace</a>,
</ul> <a target="_blank" href="https://en.wikipedia.org/wiki/Fused_filament_fabrication"
<p>Where you can find me:</p> >FFF/SLS 3D printing</a
<ul> >, <a target="_blank" href="https://gohugo.io">Hugo</a>,
<a target="_blank" href="https://coop.myco.systems/"> <a target="_blank" href="https://www.debian.org/">Debian flavors of Linux</a>,
<li>Blog</li> <a target="_blank" href="https://www.docker.com/">Docker</a>, and
</a> <a target="_blank" href="https://forgejo.org/docs/latest/user/actions/"
<a target="_blank" href="https://kolektiva.social/@brooke/"> >ACT based CI/CD</a
<li>Mastodon</li> >.
</a> </p>
<!-- <li> <p>Online, I like to talk about:</p>
SSB <ul>
<span id="codeblock" <li>Off-grid living</li>
style="font-size: 10px; overflow-wrap: break-word">@/7fjKaOZYlNV1xMzUjbLGxKFwLssU4pI4aY4eGKHemM=.ed25519</span> <li>Rubber Tramping</li>
</li> --> <li>Open Source projects of all kinds</li>
</ul> <li>Intentional communities</li>
<p> </ul>
This website's layout is inspired by <p>Where you can find me:</p>
<a target="_blank" href="https://goblin-heart.net/sadgrl/">sadgirl.online</a>.<br />And, here's some tags <ul>
for things I like: <a target="_blank" href="https://coop.myco.systems/">
</p> <li>Blog</li>
<div> </a>
<a target="_blank" href="https://10kb.neocities.org/about"><img loading="lazy" src="/@brooke/flag10kb.webp" <a target="_blank" href="https://kolektiva.social/@brooke/">
height="32" width="88" <li>Mastodon</li>
alt="The words '10kB' split in half by a black cross, on a blue background." /></a> </a>
<img loading="lazy" src="/@brooke/trans.webp" height="31" width="88" <li>
alt="The trans flag. A flag wih blue, pink, and white strips." /> SSB
<a target="_blank" href="https://wetdry.world/@mudkip/113012175157957188"><img loading="lazy" <span
src="/@brooke/piracy.webp" height="31" width="88" id="codeblock"
alt="Piracy Now! With a skull a crossed bones to the left." /></a> style="font-size: 10px; overflow-wrap: break-word"
<img loading="lazy" src="/@brooke/acab.webp" height="31" width="88" >@/7fjKaOZYlNV1xMzUjbLGxKFwLssU4pI4aY4eGKHemM=.ed25519</span
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" </li>
width="88" alt="Besties.house, first unionised group chat." /></a> </ul>
<a target="_blank" href="https://debian.org"><img loading="lazy" src="/@brooke/deb.webp" height="31" <p>
width="88" alt="Powered by Debian" /></a> 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> </div>
</div> </main>
</main> </div>
<div class="bar-bottom"></div>
</div> </div>
<div class="bar-bottom"></div> </body>
</div> </html>
</body>
</html>