style(): Fix style not being in head tag

This commit is contained in:
kami
2026-03-04 04:51:09 +08:00
parent bfaadbdbe4
commit 2a8eb622b2
2 changed files with 118 additions and 116 deletions

View File

@@ -9,21 +9,7 @@ const { title, description, pubDate, updatedDate, gitLink } = Astro.props;
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={title} description={description} /> <BaseHead title={title} description={description} />
</head> <!-- To add meta data here later -->
<body>
<main>
<Header />
<div class="wrapper">
<a href={gitLink ?? 'https://github.com/juli0n21'} style="position: relative;">
<GithubIcon style="position: absolute; right:0;" width="50px" height="50px" />
</a>
<slot />
</div>
</main>
</body>
</html>
<style> <style>
body { body {
display:flex; display:flex;
@@ -49,3 +35,18 @@ main { display: flex;
} }
</style> </style>
</head>
<body>
<main>
<Header />
<div class="wrapper">
<a href={gitLink ?? 'https://github.com/juli0n21'} style="position: relative;">
<GithubIcon style="position: absolute; right:0;" width="50px" height="50px" />
</a>
<slot />
</div>
</main>
</body>
</html>

View File

@@ -71,48 +71,6 @@ if (response.ok) {
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<div class="layout">
<aside class="sidebar">
<Header />
</aside>
<!-- Removed redundant alt flag, default dom has alt flag set to "" -->
<main class="scrolling-gallery">
<div class="gallery-wrapper">
<div class="scroll-track">
{images.map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
{images.map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
</div>
<div class="scroll-track track-reverse">
{shuffeled.slice().reverse().map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
{shuffeled.slice().reverse().map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
</div>
</div>
</main>
</div>
</body>
</html>
<style> <style>
body, html { body, html {
margin: 0; margin: 0;
@@ -204,3 +162,46 @@ main {
100% { transform: translateX(calc(50%)) } 100% { transform: translateX(calc(50%)) }
} }
</style> </style>
</head>
<body>
<div class="layout">
<aside class="sidebar">
<Header />
</aside>
<!-- Removed redundant alt flag, default dom has alt flag set to "" -->
<main class="scrolling-gallery">
<div class="gallery-wrapper">
<div class="scroll-track">
{images.map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
{images.map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
</div>
<div class="scroll-track track-reverse">
{shuffeled.slice().reverse().map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
{shuffeled.slice().reverse().map((src) => (
<div class="tilted-container">
<img src={src} />
</div>
))}
</div>
</div>
</main>
</div>
</body>
</html>
<!-- import Footer from '@components/Footer.astro'; -->