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

Compare commits

base: mycosystems:dbcdeb089f4b5b603ae7ef4fb6cd4ee4aa36d78b
Branches Tags
mycosystems:main
...
compare: mycosystems:eeb250c3f5bfa7c6964fb082a3ee5ec0c95ef020
Branches Tags
mycosystems:main

5 commits
dbcdeb089f ... eeb250c3f5

Author SHA1 Message Date
brooke
eeb250c3f5 convert gif to webp
All checks were successful
Static / build (push) Successful in 4s
Details
2024-08-09 17:32:53 -04:00
brooke
77e4e5de7a extend bullet point links for mobile accessibility 2024-08-09 17:29:36 -04:00
brooke
f8ba9c4d20 lazy load images, set html language, set font weight and font display explicity in @font-face 2024-08-09 17:20:03 -04:00
brooke
847794b590 set explicit width for tags 2024-08-09 17:16:54 -04:00
brooke
0c299a9637 convert images to webp 2024-08-09 17:16:12 -04:00
10 changed files with 29 additions and 28 deletions
Show stats Expand all files Collapse all files

BIN
public/@brooke/bg.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
public/@brooke/bg.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/@brooke/flag10kb.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/@brooke/fractal.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/@brooke/fractal.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 342 KiB

57
public/@brooke/index.html
View file

@ -1,22 +1,23 @@
<!doctype html> <!doctype html>
<html> <html lang="en">
<head> <head>
<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: FreePixel; font-family: FreePixel;
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;
} }
:root { :root {
--background: #242424e5; --background: #242424e5;
--accent-1: #d182ff; --accent-1: #d182ff;
--accent-2: #eb53d3; --accent-2: #eb53d3;
--content-spacing: 5px; --content-spacing: 5px;
--background-img: url("/@brooke/bg.jpg"); --banner: url("/@brooke/fractal.webp");
--banner: url("/@brooke/fractal.gif"); --titleBars: url("/@brooke/title-bar.webp");
--titleBars: url("/@brooke/title-bar.jpg");
--text-color: white; --text-color: white;
--link-color: var(--accent-1); --link-color: var(--accent-1);
--border: 1px solid black; --border: 1px solid black;
@ -34,10 +35,7 @@
background-size: auto 300px; background-size: auto 300px;
} }
.topbar { .topbar {
background-image: var(--banner);
height: 150px; height: 150px;
background-size: cover;
background-position: 60%;
margin-bottom: var(--content-spacing); margin-bottom: var(--content-spacing);
border: var(--border); border: var(--border);
} }
@ -58,7 +56,6 @@
.sidebar-title, .sidebar-title,
.title { .title {
background-image: var(--titleBars); background-image: var(--titleBars);
font-weight: 700;
border: var(--border); border: var(--border);
font-size: 20px; font-size: 20px;
background-size: auto 100%; background-size: auto 100%;
@ -76,14 +73,13 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
p {
font-weight: 700;
}
</style> </style>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div class="topbar"></div> <video class="topbar" autoplay muted loop playsinline>
<source src="/@brooke/fractal.webp" type="video/webm">
</video>
<div id="flex"> <div id="flex">
<main> <main>
<div class="sidebar-title">&nbsp;</div> <div class="sidebar-title">&nbsp;</div>
@ -92,7 +88,10 @@
<p> <p>
I help organizations and individuals get on board with the idea of I help organizations and individuals get on board with the idea of
using FLOSS (Free/Libre/Open Source Software) software. I enjoy using FLOSS (Free/Libre/Open Source Software) software. I enjoy
and am proficient in <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://code.forgejo.org/forgejo/act">Gitub/ACT</a>. and am proficient in <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://code.forgejo.org/forgejo/act">Gitub/ACT</a>.
</p> </p>
<p>I like to talk about:</p> <p>I like to talk about:</p>
<ul> <ul>
@ -103,14 +102,12 @@
</ul> </ul>
<p>Find me:</p> <p>Find me:</p>
<ul> <ul>
<li> <a target="_blank" href="https://coop.myco.systems/">
<a target="_blank" href="https://coop.myco.systems/">Blog</a> <li>Blog</li>
</li> </a>
<li> <a target="_blank" href="https://kolektiva.social/@brooke/">
<a target="_blank" href="https://kolektiva.social/@brooke/" <li>Mastodon</li>
>Mastodon</a </a>
>
</li>
</ul> </ul>
<p> <p>
This website's layout is inspired by This website's layout is inspired by
@ -121,37 +118,41 @@
<div> <div>
<a target="_blank" href="https://10kb.neocities.org/about"> <a target="_blank" href="https://10kb.neocities.org/about">
<img <img
src="https://10kb.neocities.org/icons/flag10kb.png" loading="lazy"
src="/@brooke/flag10kb.webp"
alt="The words '10kB' split in half by a black cross, on a blue background." alt="The words '10kB' split in half by a black cross, on a blue background."
height="32" height="32"
width="auto" width="88"
title="The 10kB Gallery!" title="The 10kB Gallery!"
style="image-rendering: crisp-edges" style="image-rendering: crisp-edges"
/> />
</a> </a>
<img <img
src="/@brooke/trans.png" loading="lazy"
src="/@brooke/trans.webp"
height="32" height="32"
width="auto" width="88"
alt="A trans flag." alt="A trans flag."
/> />
<img <img
loading="lazy"
src="/@brooke/piracy.gif" src="/@brooke/piracy.gif"
height="32" height="32"
width="auto" width="88"
alt="A piracy flag." alt="A piracy flag."
/> />
<img <img
loading="lazy"
src="/@brooke/acab.gif" src="/@brooke/acab.gif"
height="32" height="32"
width="auto" width="88"
alt="All Cops Are Bastards." alt="All Cops Are Bastards."
/> />
<a target="_blank" href="https://besties.house/" <a target="_blank" href="https://besties.house/"
><img ><img
src="/@brooke/besties.gif" src="/@brooke/besties.gif"
height="32" height="32"
width="auto" width="88"
alt="Besties.house, first unionised group chat." alt="Besties.house, first unionised group chat."
/></a> /></a>
</div> </div>

BIN
public/@brooke/title-bar.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
public/@brooke/title-bar.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
public/@brooke/trans.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 183 B

BIN
public/@brooke/trans.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 168 B