Skip to content
This repository was archived by the owner on Oct 2, 2025. It is now read-only.

update favicon #16

Merged
narthur merged 1 commit into from
Sep 2, 2025
Merged

update favicon #16

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 101 additions & 109 deletions src/layouts/Layout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,122 +4,114 @@ import "../styles/global.css";

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<meta
name="description"
content="TaskRatchet is a todo list that charges you real money if you don't complete your tasks on time."
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="https://fav.farm/🔧" />
<title>TaskRatchet - The Todo List You Won't Ignore</title>
<style is:inline>
/* Critical styles to prevent flash */
:root {
--bg-main: white;
--text-primary: #1e293b;
--bg-header: rgba(255, 255, 255, 0.75);
--logo-text: #0f172a;
--primary: #3b82f6;
--secondary: #8b5cf6;
--gray-100: #f1f5f9;
--font-sans:
"Inter", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<meta
name="description"
content="TaskRatchet is a todo list that charges you real money if you don't complete your tasks on time."
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="https://fav.farm/⚙️" />
<title>TaskRatchet - The Todo List You Won't Ignore</title>
<style is:inline>
/* Critical styles to prevent flash */
:root {
--bg-main: white;
--text-primary: #1e293b;
--bg-header: rgba(255, 255, 255, 0.75);
--logo-text: #0f172a;
--primary: #3b82f6;
--secondary: #8b5cf6;
--gray-100: #f1f5f9;
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
:root {
--bg-main: #0f172a;
--text-primary: #f8fafc;
--bg-header: rgba(15, 23, 42, 0.75);
--logo-text: #f8fafc;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg-main: #0f172a;
--text-primary: #f8fafc;
--bg-header: rgba(15, 23, 42, 0.75);
--logo-text: #f8fafc;
}
}

/* Ensure immediate dark mode if saved */
html[data-theme="dark"] {
--bg-main: #0f172a;
--text-primary: #f8fafc;
--bg-header: rgba(15, 23, 42, 0.75);
--logo-text: #f8fafc;
}
/* Ensure immediate dark mode if saved */
html[data-theme="dark"] {
--bg-main: #0f172a;
--text-primary: #f8fafc;
--bg-header: rgba(15, 23, 42, 0.75);
--logo-text: #f8fafc;
}

body {
background-color: var(--bg-main);
color: var(--text-primary);
margin: 0;
font-family: var(--font-sans);
}
body {
background-color: var(--bg-main);
color: var(--text-primary);
margin: 0;
font-family: var(--font-sans);
}

Comment on lines +54 to 60
Copy link

@coderabbitai coderabbitai bot Sep 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Define the .no-transitions utility to make the toggle effective.

You add/remove no-transitions in JS, but there’s no CSS for it here. Add a minimal rule to prevent flashes.

       body {
         background-color: var(--bg-main);
         color: var(--text-primary);
         margin: 0;
         font-family: var(--font-sans);
       }
+      .no-transitions *, .no-transitions *::before, .no-transitions *::after {
+        transition: none !important;
+        animation: none !important;
+      }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
body {
background-color: var(--bg-main);
color: var(--text-primary);
margin: 0;
font-family: var(--font-sans);
}
body {
background-color: var(--bg-main);
color: var(--text-primary);
margin: 0;
font-family: var(--font-sans);
}
.no-transitions *, .no-transitions *::before, .no-transitions *::after {
transition: none !important;
animation: none !important;
}
🤖 Prompt for AI Agents 
In src/layouts/Layout.astro around lines 54 to 60, there is no CSS rule for the
.no-transitions utility referenced by the JS toggle; add a minimal rule in this
stylesheet that targets .no-transitions and its descendants to disable
transitions and animations (e.g., set transition and animation to none, using
!important to override existing rules) so toggling .no-transitions prevents
visual flashes.

.header-logo {
width: 40px;
height: 40px;
}
.header-logo {
width: 40px;
height: 40px;
}

/* Prevent layout shift for hero section */
.hero {
min-height: 600px;
background: linear-gradient(
135deg,
var(--gray-50) 0%,
white 100%
);
padding: 14rem 0 6rem;
margin-top: -4rem;
text-align: center;
}
/* Prevent layout shift for hero section */
.hero {
min-height: 600px;
background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
padding: 14rem 0 6rem;
margin-top: -4rem;
text-align: center;
}
Comment on lines +67 to +73
Copy link

@coderabbitai coderabbitai bot Sep 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix undefined CSS variable used in hero gradient.

.hero uses var(--gray-50) but --gray-50 isn’t defined, making the background declaration invalid. Define it for both themes.

Apply this diff:

@@
       :root {
         --bg-main: white;
         --text-primary: #1e293b;
         --bg-header: rgba(255, 255, 255, 0.75);
         --logo-text: #0f172a;
         --primary: #3b82f6;
         --secondary: #8b5cf6;
         --gray-100: #f1f5f9;
+        --gray-50: #f8fafc;
         --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
       }
@@
       @media (prefers-color-scheme: dark) {
         :root {
           --bg-main: #0f172a;
           --text-primary: #f8fafc;
           --bg-header: rgba(15, 23, 42, 0.75);
           --logo-text: #f8fafc;
+          --gray-50: #0b1220;
         }
       }
@@
       .hero {
         min-height: 600px;
-        background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
+        background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
         padding: 14rem 0 6rem;
         margin-top: -4rem;
         text-align: center;
       }

Also applies to: 25-35, 37-44

🤖 Prompt for AI Agents 
In src/layouts/Layout.astro around lines 67-73 (and also check lines 25-35 and
37-44), the .hero background references an undefined CSS variable --gray-50
which invalidates the gradient; define --gray-50 in your theme variables (e.g.,
add --gray-50: <hex or hsl value>; in the :root for light theme and the
corresponding selector for dark theme) so both themes declare the variable
before .hero is used, ensuring the gradient resolves correctly.


/* Critical header styles */
.site-header {
padding: 1rem 0;
background: var(--bg-header);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
/* Critical header styles */
.site-header {
padding: 1rem 0;
background: var(--bg-header);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}

.container {
max-width: 1600px;
margin: 0 auto;
padding: 0 3rem;
}
</style>
<script is:inline>
// Initial theme setup - run as early as possible
(function () {
// Add class to disable transitions during load
document.documentElement.classList.add("no-transitions");
.container {
max-width: 1600px;
margin: 0 auto;
padding: 0 3rem;
}
</style>
<script is:inline>
// Initial theme setup - run as early as possible
(function () {
// Add class to disable transitions during load
document.documentElement.classList.add("no-transitions");

const theme =
localStorage.getItem("theme") ||
(window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light");
document.documentElement.setAttribute("data-theme", theme);
const theme =
localStorage.getItem("theme") ||
(window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light");
document.documentElement.setAttribute("data-theme", theme);

// Remove the no-transitions class after a small delay
window.addEventListener("load", () => {
setTimeout(() => {
document.documentElement.classList.remove(
"no-transitions",
);
}, 100);
});
})();
</script>
</head>
<body>
<slot />
</body>
// Remove the no-transitions class after a small delay
window.addEventListener("load", () => {
setTimeout(() => {
document.documentElement.classList.remove("no-transitions");
}, 100);
});
})();
</script>
</head>
<body>
<slot />
</body>
</html>