theBreadCompany/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make somewhat reactive

Browse source
This commit is contained in:
theBreadCompany 2025-05-07 02:09:01 +02:00
parent 5cbbd3daf3
commit fa420e1659
2 changed files with 51 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
index.css
View file

@ -24,6 +24,7 @@ html, body {
background-color: var(--background); background-color: var(--background);
color: var(--text); color: var(--text);
height: 100vh; height: 100vh;
width: 100vw;
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -35,7 +36,7 @@ a { color: unset; text-decoration: none; }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.flex-h { display: flex; } .flex-h, .r-flex-h { display: flex; }
.center-v { align-items: center; } .center-v { align-items: center; }
.center-h { justify-content: center; } .center-h { justify-content: center; }
@ -74,8 +75,14 @@ a { color: unset; text-decoration: none; }
border-bottom: 1px solid var(--text); border-bottom: 1px solid var(--text);
} }
.page-bar[bottom="true"] { .page-bar[bottom="true"] {
display: none;
border-top: 1px solid var(--text); border-top: 1px solid var(--text);
} }
.logo-big {
width: 10vw;
aspect-ratio: 1;
margin-right: 5em;
}
.scroll-hint { .scroll-hint {
position: relative; position: relative;
height: 10%; height: 10%;
@ -93,12 +100,19 @@ a { color: unset; text-decoration: none; }
} }
ul.h-list { ul.h-list {
display: inline; display: inline-block;
circle: list; circle: list;
} }
.h-list li { .h-list li {
display: inline; display: inline;
margin-right: 0.5em; margin-right: 0.5em;
whitespace: no-wrap;
}
.h-list.pilled li {
padding: 0.5em 1em;
background-color: var(--primary);
border-radius: 20px;
color: var(--background);
} }
.product { .product {
@ -164,13 +178,41 @@ ul.h-list {
.socials-tile[variant="mastodon"] { mask-image: url("https://api.iconify.design/mdi:mastodon.svg"); } .socials-tile[variant="mastodon"] { mask-image: url("https://api.iconify.design/mdi:mastodon.svg"); }
.socials-tile[variant="email"] { mask-image: url("https://api.iconify.design/mdi:email.svg"); } .socials-tile[variant="email"] { mask-image: url("https://api.iconify.design/mdi:email.svg"); }
.socials-tile[variant="discord"] { mask-image: url("https://api.iconify.design/mdi:discord.svg"); } .socials-tile[variant="discord"] { mask-image: url("https://api.iconify.design/mdi:discord.svg"); }
.socials-tile:hover {
}
.txt-list div { .txt-list div {
margin-left: 2em; margin-left: 2em;
} }
@media(max-width: 800px) {
.r-flex-h {
display: flex;
flex-direction: column;
}
.page { padding: 1em; }
.h-list { padding-left: unset; }
.logo-big {
width: 25vw;
margin-right: unset;
}
.separator {
height: 2px;
width: 100%;
background-color: var(--text);
margin: 2em 0;
}
.socials-tile {
width: 2em;
height: 2em;
}
.page-bar[bottom="true"] {
border-top: unset;
}
.product[placeholder="true"],
.page-bar[bottom="true"] > * {
display: none;
}
}
#ts { color: #3178c6; } #ts { color: #3178c6; }
#rs { color: #dea584; } #rs { color: #dea584; }
#html { color: #e34c26; } #html { color: #e34c26; }

10
index.html
View file

@ -28,8 +28,8 @@
</div> </div>
<div class="page" first="true"> <div class="page" first="true">
<div></div> <div></div>
<div class="flex-h center-h center-v"> <div class="r-flex-h center-h center-v">
<img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="width: 10vw; aspect-ratio: 1; margin-right: 5em"> <img class="logo-big" src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo">
<div> <div>
<h2>Hi, I'm bread</h2> <h2>Hi, I'm bread</h2>
<p>I'm a computer science student from Germany. I'm interested in</p> <p>I'm a computer science student from Germany. I'm interested in</p>
@ -101,7 +101,7 @@
<div class="page"> <div class="page">
<div class="flex-v center-v center-h"> <div class="flex-v center-v center-h">
<h2>Live Services</h2> <h2>Live Services</h2>
<div class="flex-h"> <div class="r-flex-h">
<a href="https://fixiv.net"> <a href="https://fixiv.net">
<div class="product"> <div class="product">
<div class="flex-h center-v"> <div class="flex-h center-v">
@ -142,10 +142,10 @@
<div class="page" first="true"> <div class="page" first="true">
<div></div> <div></div>
<div class="flex-v center-h center-v"> <div class="flex-v center-h center-v">
<div class="flex-h center-h center-v"> <div class="r-flex-h center-h center-v">
<div class="flex-v center-h center-v"> <div class="flex-v center-h center-v">
<h2>Friends</h2> <h2>Friends</h2>
<ul class="h-list"> <ul class="h-list pilled">
<li><a href="https://henhaa.art">Henrik</a></li> <li><a href="https://henhaa.art">Henrik</a></li>
<li><a href="https://emma.pizza">Emma</a></li> <li><a href="https://emma.pizza">Emma</a></li>
</ul> </ul>