Compare commits

...

4 commits

Author SHA1 Message Date
1ee556aeb0 add a second fractal under the content and reduce max size
All checks were successful
Static / build (push) Successful in 6s
2024-08-10 00:35:56 -04:00
fe4fdd8ca1 update font name 2024-08-10 00:31:45 -04:00
c956d79fe6 make all the tags the same 2024-08-10 00:31:24 -04:00
6b8fe75014 remove title bar 2024-08-10 00:29:08 -04:00
2 changed files with 8 additions and 21 deletions

View file

@ -6,7 +6,7 @@
<title>@Brooke</title> <title>@Brooke</title>
<style> <style>
@font-face { @font-face {
font-family: FreePixel; 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");
@ -16,10 +16,8 @@
--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;
@ -28,7 +26,7 @@
html { html {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: FreePixel; font-family: PixelifySans;
} }
body { body {
background-image: var(--background-img); background-image: var(--background-img);
@ -36,16 +34,15 @@
background-attachment: fixed; background-attachment: fixed;
background-size: auto 300px; background-size: auto 300px;
} }
.topbar { .bar {
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: 850px; max-width: 550px;
margin: 0 auto; margin: 0 auto;
} }
#container a { #container a {
@ -56,15 +53,6 @@
} }
#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%;
@ -85,10 +73,9 @@
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div class="topbar"></div> <div class="bar"></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>
@ -126,11 +113,9 @@
<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"
title="The 10kB Gallery!" alt="The words '10kB' split in half by a black cross, on a blue background."
style="image-rendering: crisp-edges"
/> />
</a> </a>
<img <img
@ -156,6 +141,7 @@
/> />
<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"
@ -165,6 +151,7 @@
</div> </div>
</main> </main>
</div> </div>
<div class="bar"></div>
</div> </div>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB