feat: Update CounterCard and MarkdownContent styles

Update CounterCard and MarkdownContent styles, and add Credits Content
This commit is contained in:
Ayane Satomi 2023-10-21 13:24:38 +00:00
parent 45409382db
commit 1cbb7d8651
4 changed files with 11 additions and 8 deletions

3
home_content/README.md Normal file
View file

@ -0,0 +1,3 @@
## Credits Content
This contains the credits content in the website. If you want to localize, just simply copy `en.md` and translate from there.

View file

@ -21,11 +21,11 @@ export function animateMascot() {
const parentEl = document.getElementById("mascot-tgt") as HTMLElement; const parentEl = document.getElementById("mascot-tgt") as HTMLElement;
mascotEl.src = `/assets/img/hertaa${mascotId}.gif`; mascotEl.src = `/assets/img/hertaa${mascotId}.gif`;
mascotEl.style.position = "absolute";
mascotEl.style.right = "-500px"; mascotEl.style.right = "-500px";
mascotEl.style.top = counterButton.getClientRects()[0].bottom + scrollY - mascotEl.style.opacity = "60%";
412 + "px"; mascotEl.style.top = counterButton.getClientRects()[0].top + scrollY -
mascotEl.classList.add("z-[0]"); 408 + "px";
mascotEl.classList.add("z-[0]", "absolute", "bg-scroll");
parentEl.appendChild(mascotEl); parentEl.appendChild(mascotEl);
let pos = -500; let pos = -500;

View file

@ -2,7 +2,7 @@ import { CSS, render } from "$gfm";
export default function MarkdownContent({ mdData }: { mdData: string }) { export default function MarkdownContent({ mdData }: { mdData: string }) {
return ( return (
<div class="px-4 py-8 aspect-square mx-8 my-8 bg-white items-center justify-center"> <div class="flex mx-auto flex-col px-4 py-8 aspect-auto bg-white rounded items-center z-20">
<style dangerouslySetInnerHTML={{ __html: CSS }} /> <style dangerouslySetInnerHTML={{ __html: CSS }} />
<div <div
class="markdown-body" class="markdown-body"

View file

@ -83,11 +83,11 @@ export default function Home(
// added a pseudo-div here so I can nest another div inside it smh // added a pseudo-div here so I can nest another div inside it smh
return ( return (
<div> <div>
<div class="px-4 py-8 mx-auto bg-[#9d88d3]" id="mascot-tgt"> <div class="px-4 py-8 mx-auto bg-[#9d88d3]">
<div class="max-w-screen-md mx-auto flex flex-col items-center justify-center"> <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center" id="mascot-tgt">
<img class="z-10" src="/favicon.png" width="60px" /> <img class="z-10" src="/favicon.png" width="60px" />
<h1 class="text-4xl text-white text-center font-bold z-10"> <h1 class="text-4xl text-white text-center font-bold z-10">
Welcome to herta kuru (v2?) Welcome to herta kuru
</h1> </h1>
<p class="my-4 font-bold text-center text-white z-10"> <p class="my-4 font-bold text-center text-white z-10">
The website for Herta, the <del>annoying</del>{" "} The website for Herta, the <del>annoying</del>{" "}