Taevas/taevas.xyz
Taevas/taevas.xyz
1
0
Fork 0
Code Issues Pull requests Projects Activity

Font change, start redesigning some Infos

Browse source 
To think it all started from finding out how Chromium does faux bold
This commit is contained in:
Taevas 2025-03-19 14:25:16 +01:00
parent aee74ce9e8
commit 172c575ab5
16 changed files with 52 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

5
api/fediverse_kitsuclub.ts
View file

@ -49,11 +49,10 @@ export const fediverse_kitsuclub: Handler = async () => {
const emojis_to_get: Promise<void>[] = [];
while (scan_text.includes(":")) {
const index_1 = scan_text.indexOf(":");
const index_2 = scan_text.substring(index_1 + 1).indexOf(":");
if (index_2 === -1) {
if (scan_text.substring(index_1 + 1).includes(":") === false) {
scan_text = scan_text.substring(index_1 + 1);
} else {
const index_2 = scan_text.substring(index_1 + 1).indexOf(":") + scan_text.substring(0, index_1).length;
const potential_emoji = scan_text.substring(index_1 + 1, index_2 + 1);
if (!potential_emoji.includes(" ")) {
emojis_to_get.push(new Promise(async (resolve) => {

BIN
assets/fonts/IBMPlexMono-Bold.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/IBMPlexMono-Regular.ttf Normal file
View file

Binary file not shown.

BIN
assets/fonts/LexendDeca-Regular.ttf
View file

Binary file not shown.

2
index.html
View file

@ -10,7 +10,7 @@
<script defer src="https://visitors.taevas.xyz/script.js" data-website-id="f196d626-e609-4841-9a80-0dc60f523ed5"></script>
<title>Site - taevas.xyz</title>
</head>
<body>
<body class="bg-linear-to-tl from-amber-100 via-sky-300 to-amber-100 bg-fixed">
<span id="links" style="display: none;">
<a rel="me" href="https://taevas.xyz/">Taevas</a>
<a rel="me" href="https://www.youtube.com/@TTTaevas">YouTube</a>

16
src/App.css
View file

@ -21,18 +21,20 @@
}
@font-face {
font-family: "LexendDeca";
src: url("assets/fonts/LexendDeca-Regular.ttf") format("truetype");
font-family: "IBMPlexMono";
src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "IBMPlexMono";
src: url("assets/fonts/IBMPlexMono-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
.App {
font-family: "LexendDeca", "Arial", sans-serif;
}
p {
line-height: 1.15rem;
font-family: "IBMPlexMono", "Arial", sans-serif;
}
p a {

6
src/Infos/Fediverse/KitsuClub.tsx
View file

@ -36,11 +36,11 @@ export default function KitsuClub() {
</time>
</div>,
// emojis that are only in the post aren't in the response yet :(
<Link classes="mt-1 px-2 py-2 inline-block font-bold leading-[18px] bg-white text-blue-800 text-left text-sm"
key={"link"} link={`https://kitsunes.club/notes/${data.note_id}`} text={<>{
<Link classes="mt-1 px-2 py-2 inline-block font-bold leading-[24px] bg-white text-blue-800 text-left text-sm"
key={"link"} link={`https://kitsunes.club/notes/${data.note_id}`} text={<p>{
...data.text.split("\n").map((te) => emojify(te, data.emojis).concat(<br/>))
.concat(images)
}</>}
}</p>}
/>
]);
} catch {

8
src/Infos/Gaming/Speedruncom.tsx
View file

@ -25,13 +25,13 @@ export default function Speedruncom() {
setElements([
<div key={"data"} className="flex pb-2">
<img alt="game thumbnail" src={data.thumbnail} className="h-24 m-auto" />
<div className="m-auto pl-2">
<Link key={"more"} classes="mt-1 px-1 py-2 inline-block w-full font-bold leading-[18px] bg-white text-blue-800" link={data.link}
<div className="m-auto ml-4 w-full">
<Link key={"more"} classes="text-lg/6 inline-block px-1 py-2 w-full font-bold bg-white text-blue-800" link={data.link}
text={`${data.game} (${data.details.toString()}) in ${data.time}`}/>
<p className="mt-2">Placed <strong>#{data.place}</strong></p>
<p className="font-bold">{data.date}</p>
</div>
</div>,
<p key="placement" className="mt-2">Placed <strong>#{data.place}</strong></p>,
<p key="date" className="font-bold">{data.date}</p>,
<> {
data.video ? <ButtonLink key={"youtube"} link={data.video} text="YouTube video"/> : ""
} </>

2
src/Infos/Info.tsx
View file

@ -12,7 +12,7 @@ export default class Info extends Component<{
return (
<div className="m-2.5 flex w-80 hover:scale-[1.02] active:scale-[1.02]">
<h2 className={`[text-orientation:upright] [writing-mode:vertical-rl]
uppercase text-start text-2xl tracking-[-.1em] font-bold pt-2
uppercase text-start text-2xl tracking-[-.1em] font-bold pt-2 pb-2
rounded-l-xl bg-white select-none
${state !== 2 ? "text-sky-600" : "text-purple-600"}`}>
{this.props.type}

26
src/Infos/Media/Anilist.tsx
View file

@ -26,24 +26,18 @@ export default function Anilist() {
try {
setElements([
<div key={"data"} className="flex mb-4">
<img className="m-auto w-18 h-24" alt="anime cover" src={data.cover} />
<div className="m-auto pl-2">
<Link classes="mt-1 px-1 py-2 inline-block w-full font-bold leading-[18px] bg-white text-blue-800" link={data.url} text={data.title}/>
<p className="mt-4">Started: <strong>{data.startDate}</strong></p>
{
data.episodes.watched >= data.episodes.total ?
<p>Finished: <strong>{data.endDate}</strong></p> :
<p>Ep. {data.episodes.watched}: <strong>{data.updateDate}</strong></p>
}
<img className="mx-auto w-18 h-24" alt="anime cover" src={data.cover} />
<div className="m-auto ml-4 w-full">
<Link classes="text-lg/6 inline-block px-1 py-2 w-full font-bold bg-white text-blue-800" link={data.url} text={data.title}/>
</div>
</div>,
<>
{
data.episodes.watched >= data.episodes.total ?
<p>I gave it a <strong>{data.score}/10</strong></p> :
<p><strong>{data.episodes.watched}/{data.episodes.total}</strong> episodes watched</p>
}
</>,
<p key="start" className="text-left">Started: <strong>{data.startDate}</strong></p>,
<p key="last" className="text-left">{data.episodes.watched >= data.episodes.total ?
<>Finished: <strong>{data.endDate}</strong></> :
<>Ep. {data.episodes.watched}: <strong>{data.updateDate}</strong></>}</p>,
<p key="status" className="text-left">{data.episodes.watched >= data.episodes.total ?
<>I gave it a <strong>{data.score}/10</strong></> :
<><strong>{data.episodes.watched}/{data.episodes.total}</strong> episodes watched</>}</p>,
]);
} catch {
setError(true);

23
src/Infos/Media/Lastfm.tsx
View file

@ -22,21 +22,20 @@ export default function Lastfm() {
if (data) {
try {
const date = new Date(Number(data.date) * 1000);
const dateParagraph = !data.listening ? <p key="date" className="text-left mt-1">
When: <span className="font-bold">{format(date)}</span>
</p> : <></>;
setElements([
<div key="data" className="flex leading-[18px]">
<img alt="album thumbnail" src={data.image} className="m-auto h-24 w-24"/>
<div className="m-auto pl-4 w-fit">
<p className="mb-2">{data.listening ? "I'm currently listening to" : "Last listened to"}</p>
<Link classes="mt-1 px-1 py-2 inline-block w-full font-bold leading-[18px] bg-white text-blue-800" link={data.url} text={data.name}/>
<div key="data" className="flex mb-4">
<img alt="album thumbnail" src={data.image} className="mx-auto h-24 w-24"/>
<div className="m-auto ml-4 w-full">
<Link classes="text-lg/6 inline-block px-1 py-2 w-full font-bold bg-white text-blue-800" link={data.url} text={data.name}/>
</div>
</div>,
<p key="artist" className="text-left mt-4">Artist: <span className="font-bold">{data.artist}</span></p>,
<p key="album" className="text-left mt-1">Album: <span className="font-bold">{data.album}</span></p>,
dateParagraph,
<p key="artist" className="text-left">Artist: <strong>{data.artist}</strong></p>,
<p key="album" className="text-left">Album: <strong>{data.album}</strong></p>,
<>{
data.listening ?
<p key="date" className="mt-2 font-bold">Currently listening!</p> :
<p key="date" className="text-left">When: <strong>{format(date)}</strong></p>
}</>,
]);
} catch {
setError(true);

6
src/Infos/Website.tsx
View file

@ -25,12 +25,12 @@ export default function Website({
return (
<div className="hover:font-bold active:font-bold overflow-hidden">
<a href={link} target="_blank" rel="noreferrer" draggable="false">
<h2 className="pr-1 py-1 rounded-tr-[10px] bg-white uppercase text-right font-bold text-indigo-500 transition-all
hover:brightness-110 hover:pr-4 hover:text-blue-600">
<h2 className="pr-1 py-1 rounded-tr-[10px] bg-white uppercase text-right text-lg font-bold text-indigo-500 transition-all
hover:brightness-110 hover:pr-16 hover:text-blue-600">
{name}
</h2>
</a>
<div className="p-4 m-auto">
<div className="p-4 m-auto max-h-[320px] overflow-auto">
{
state === 1 ?
elements.map((e, i) =>

2
src/Infos/index.tsx
View file

@ -12,7 +12,7 @@ export default class Infos extends Component {
private readonly collection = React.createRef<HTMLDivElement>();
render() {
return <div ref={this.collection} className="z-110 lg:z-0 w-[27px] lg:w-[360px] fixed right-0 h-screen outline outline-4 outline-white overflow-y-auto
return <div ref={this.collection} className="text-base z-110 lg:z-0 w-[27px] lg:w-[360px] fixed right-0 h-screen outline outline-4 outline-white overflow-y-auto
bg-linear-to-r from-sky-600 to-indigo-600">
<div draggable="false" ref={this.dragbar} className="z-100 h-full w-[25px] fixed right-[7px] lg:right-[340px] cursor-ew-resize select-none hover:bg-linear-to-r from-white/80 to-white/1 active:to-white/20"></div>
<div className="z-90 p-2.5 flex flex-wrap text-white">

2
src/Main/MainWindow/TabButtons/TabButton.tsx
View file

@ -10,7 +10,7 @@ export default function TabButton({
content: string | React.JSX.Element;
}) {
return (
<button className={`cursor-pointer text-xl text-white m-2 p-4 border-solid border-white border-4 rounded-md bg-linear-to-t from-70% ${colors} active:brightness-90`} onClick={onClick}>
<button className={`cursor-pointer text-2xl text-white m-2 py-2 px-4 border-solid border-white border-4 rounded-md bg-linear-to-t from-70% ${colors} active:brightness-90`} onClick={onClick}>
{content}
</button>
);

9
src/Main/Tabs/Tab.tsx
View file

@ -8,7 +8,7 @@ export default class Tab extends Component<{
id: string;
name: ReturnType<typeof Translatable>;
elements: React.JSX.Element[];
logo?: JSX.Element;
logo?: React.JSX.Element;
position?: string;
}> {
static contextType = TabContext;
@ -21,7 +21,7 @@ export default class Tab extends Component<{
<TabContext.Consumer>
{tabs => (
<AnimateHeight
className={`absolute w-full lg:w-[525px] lg:rounded-xl ${this.props.position}
className={`absolute w-full lg:w-[625px] lg:rounded-xl ${this.props.position}
bg-blue-800/75 hover:bg-blue-800/80 active:bg-blue-800/70 backdrop-brightness-75 backdrop-contrast-150 backdrop-blur
shadow-[12px_12px_0_0] shadow-blue-950/75
${tabs.find((t) => t.id === this.props.id)?.priority ?? "z-50"}`}
@ -39,11 +39,12 @@ export default class Tab extends Component<{
<path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"/>
</svg>
</div>
<h3 className="text-4xl text-center font-bold text-blue-700 overflow-hidden truncate select-none pt-1">
<h3 className="text-3xl text-center font-bold text-blue-600 overflow-hidden truncate select-none pt-1">
{this.props.name} - taevas.xyz
</h3>
</div>
<div className="drop-shadow-2xl">
<div className="drop-shadow-2xl max-h-[500px] overflow-y-auto
[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-300 [&::-webkit-scrollbar-thumb]:bg-indigo-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:rounded-full">
{
this.props.elements.map((e, i) =>
<div key={`element-${i}}`}>

2
src/Main/index.tsx
View file

@ -12,7 +12,7 @@ export default function MainContent() {
}, [lang]);
return (
<div className="h-screen w-screen max-w-[1632px] m-auto lg:pl-[50px] lg:pr-[413px] lg:py-12">
<div className="text-lg/6 h-screen w-screen max-w-[1632px] m-auto lg:pl-[50px] lg:pr-[413px] lg:py-12">
<LanguageContext.Provider value={lang}>
<TabContext.Provider value={tabs}>
<MainWindow setLang={setLang} setTabs={setTabs}/>