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

Compare commits

base: mycosystems:1ee556aeb03cbe740df2c92c7e992dc83e4979d1
Branches Tags
mycosystems:main
..
compare: mycosystems:85e72dfff7a5a161408c5dedcd82a3118905b53a
Branches Tags
mycosystems:main

No commits in common. "1ee556aeb03cbe740df2c92c7e992dc83e4979d1" and "85e72dfff7a5a161408c5dedcd82a3118905b53a" have entirely different histories.
1ee556aeb0 ... 85e72dfff7

2 changed files with 21 additions and 8 deletions
Show stats Expand all files Collapse all files

29
public/@brooke/index.html
View file

@ -6,7 +6,7 @@
<title>@Brooke</title> <title>@Brooke</title>
<style> <style>
@font-face { @font-face {
font-family: PixelifySans; font-family: FreePixel;
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");
@ -16,8 +16,10 @@
--background: #242424e5; --background: #242424e5;
--accent-1: #d182ff; --accent-1: #d182ff;
--accent-2: #eb53d3; --accent-2: #eb53d3;
--content-spacing: 5px;
--background-img: url("/@brooke/bg.webp"); --background-img: url("/@brooke/bg.webp");
--banner: url("/@brooke/fractal.webp"); --banner: url("/@brooke/fractal.webp");
--titleBars: url("/@brooke/title-bar.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;
@ -26,7 +28,7 @@
html { html {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: PixelifySans; font-family: FreePixel;
} }
body { body {
background-image: var(--background-img); background-image: var(--background-img);
@ -34,15 +36,16 @@
background-attachment: fixed; background-attachment: fixed;
background-size: auto 300px; background-size: auto 300px;
} }
.bar { .topbar {
background-image: var(--banner); background-image: var(--banner);
height: 150px; height: 150px;
background-size: cover; background-size: cover;
background-position: 60%; background-position: 60%;
margin-bottom: var(--content-spacing);
border: var(--border); border: var(--border);
} }
#container { #container {
max-width: 550px; max-width: 850px;
margin: 0 auto; margin: 0 auto;
} }
#container a { #container a {
@ -53,6 +56,15 @@
} }
#flex { #flex {
display: flex; display: flex;
max-width: 850px;
}
.sidebar-title,
.title {
background-image: var(--titleBars);
border: var(--border);
font-size: 20px;
background-size: auto 100%;
background-repeat: repeat-x;
} }
main { main {
width: 100%; width: 100%;
@ -73,9 +85,10 @@
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div class="bar"></div> <div class="topbar"></div>
<div id="flex"> <div id="flex">
<main> <main>
<div class="sidebar-title">&nbsp;</div>
<div style="padding: 1rem; padding-top: 0"> <div style="padding: 1rem; padding-top: 0">
<p>Hi! My name is Brooke.</p> <p>Hi! My name is Brooke.</p>
<p> <p>
@ -113,9 +126,11 @@
<img <img
loading="lazy" loading="lazy"
src="/@brooke/flag10kb.webp" src="/@brooke/flag10kb.webp"
alt="The words '10kB' split in half by a black cross, on a blue background."
height="32" height="32"
width="88" width="88"
alt="The words '10kB' split in half by a black cross, on a blue background." title="The 10kB Gallery!"
style="image-rendering: crisp-edges"
/> />
</a> </a>
<img <img
@ -141,7 +156,6 @@
/> />
<a target="_blank" href="https://besties.house/" <a target="_blank" href="https://besties.house/"
><img ><img
loading="lazy"
src="/@brooke/besties.webp" src="/@brooke/besties.webp"
height="31" height="31"
width="88" width="88"
@ -151,7 +165,6 @@
</div> </div>
</main> </main>
</div> </div>
<div class="bar"></div>
</div> </div>
</body> </body>
</html> </html>

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB