Skip to content

Japanese colors #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 14, 2025
Merged

Japanese colors #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3005710
fix empty qoute
benthecoder Sep 13, 2025
a6b079f
new japanese colors
benthecoder Sep 14, 2025
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
2 changes: 1 addition & 1 deletion app/api/rss/feed.json
View file
Open in desktop

Large diffs are not rendered by default.

61 changes: 35 additions & 26 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,21 @@
@tailwind components;
@tailwind utilities;

@layer utilities {
.bg-japanese-kinairo { background-color: #FBFAF5; }
.bg-japanese-shironeri { background-color: #F3F3F2; }
.bg-japanese-hakuji { background-color: #F8FBFB; }
.bg-japanese-soshoku { background-color: #EAE5E3; }
.bg-japanese-shiraumenezu { background-color: #E5E4E6; }
.text-japanese-shironezu { color: #DCDDDD; }
}

body {
background: linear-gradient(
135deg,
#fff8f3 0%,
/* Warm cream */ #fffcf7 50%,
/* Paper white */ #fff8f3 100% /* Warm cream */
#F3F3F2 0%,
/* Silk white - shironeri */ #FBFAF5 50%,
/* Natural dough - kinairo */ #F8FBFB 100% /* White porcelain - hakuji */
);
min-height: 100vh;
background-attachment: fixed;
Expand All @@ -16,16 +25,16 @@ body {
.dark body {
background: linear-gradient(
135deg,
#0a1f15 0%,
/* Darker phthalo green */ #0d2419 50%,
/* Deep phthalo green */ #0a1f15 100% /* Darker phthalo green */
#1a1b26 0%,
/* Dark base */ #2a2b36 50%,
/* Slightly lighter */ #1a1b26 100% /* Dark base */
);
min-height: 100vh;
background-attachment: fixed;
}

.prose {
color: #334155;
color: #595857; /* sumiiro - ink color */
width: 100%;
min-width: 100%;
padding: 0 0.5rem;
Expand All @@ -46,15 +55,15 @@ body {
}

.dark .prose {
color: #e2e8f0;
color: #F3F3F3; /* nyuhakushoku - milky white */
}

.prose strong {
font-weight: bolder;
}

.dark .prose strong {
color: #93d2fd;
color: #E7E7EB; /* murasakisuishiyou */
font-weight: bold;
}

Expand All @@ -63,8 +72,8 @@ body {
}

.prose code {
background-color: #b3b3b3;
color: #050505;
background-color: #F7FCFE; /* unoharairo */
color: #595857; /* sumiiro */
padding: 0.2em 0.2em;
border-radius: 0.3em;
font-size: 0.85em;
Expand Down Expand Up @@ -106,15 +115,15 @@ body {

.dark .prose a {
background-image: url('../public/underline-dark.png');
color: #fff;
color: theme('colors.dark.text');
}

.prose a:hover {
color: #d70a1b;
color: #595857; /* sumiiro */
}

.dark .prose a:hover {
color: #ff959e;
color: #91989C; /* ginnezu */
}

.prose h1 {
Expand All @@ -133,31 +142,31 @@ body {
.dark .prose h1,
.dark .prose h2,
.dark .prose h3 {
color: #fff; /* set your preferred color for dark mode */
color: #FFFFFC; /* gofuniro - chalk white */
}

.prose blockquote {
margin: 0 0.1em 0 0.1em;
padding: 0 0em 0 1em;
border-left: 3px solid #b0afaf;
border-left: 3px solid #E5E4E6; /* shiraumenezu */
border-left-width: 3px;
border-color: #000000;
border-color: #E5E4E6;
quotes: none;
font-style: normal;
font-weight: normal;
color: #595959;
color: #949495; /* nezumiiro */
}

.prose hr {
margin-top: 2em;
margin-bottom: 2em;
border-width: 0.1px;
border-color: #b0afaf;
border-color: theme('colors.japanese.shiraumenezu');
}

.dark .prose blockquote {
border-color: #fff;
color: #b4b4b4;
border-color: #91989C; /* ginnezu */
color: #E7E7EB; /* murasakisuishiyou */
}

.prose img {
Expand All @@ -172,18 +181,18 @@ body {
}

::selection {
background: rgba(147, 197, 253, 0.3);
color: #1a1a2e;
background: theme('colors.japanese.murasakisuishiyou / 30%');
color: theme('colors.light.text');
}

mark {
background-color: #faec9b;
background-color: theme('colors.japanese.unoharairo');
color: black;
}

.dark ::selection {
background: rgba(147, 197, 253, 0.2);
color: #fff;
background: theme('colors.japanese.nyuhakushoku / 20%');
color: theme('colors.dark.text');
}

.hover-container {
Expand Down
4 changes: 2 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ export default function RootLayout({
lang="en"
className={`${averia.variable} font-serif`}
>
<body className="flex flex-col mb-40 mx-2 md:mx-10 md:flex-row md:items-start md:mt-10 dark:bg-black bg-gradient-to-br from-transparent via-light-phthalo-200 to-transparent dark:from-transparent dark:via-dark-phthalo-200 dark:to-transparent">
<body className="flex flex-col mb-40 mx-2 md:mx-10 md:flex-row md:items-start md:mt-10">
<Providers>
<Sidebar />
<main className="flex-auto text-md md:mt-0 px-2 md:px-10 max-w-xl lg:max-w-3xl mx-auto w-full selection:bg-light-phthalo-100/10 dark:selection:bg-dark-phthalo-100/20">
<main className="flex-auto text-md md:mt-0 px-2 md:px-10 max-w-xl lg:max-w-3xl mx-auto w-full selection:bg-japanese-murasakisuishiyou/20 dark:selection:bg-japanese-nyuhakushoku/20">
{children}
</main>
</Providers>
Expand Down
10 changes: 5 additions & 5 deletions app/posts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const ArchivePage = () => {
});
return (
<div>
<h1 className="font-bold text-left mb-6 text-2xl hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors">
<h1 className="font-bold text-left mb-6 text-2xl hover:text-light-accent dark:hover:text-dark-accent transition-colors">
{' '}
Archive
</h1>
Expand All @@ -25,7 +25,7 @@ const ArchivePage = () => {
Filter by{' '}
<Link
href="/tags"
className="underline hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors"
className="underline hover:text-light-accent dark:hover:text-dark-accent transition-colors"
>
tags
</Link>
Expand All @@ -34,7 +34,7 @@ const ArchivePage = () => {
<div>
<Link
href="/random"
className="underline hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors"
className="underline hover:text-light-accent dark:hover:text-dark-accent transition-colors"
>
random
</Link>{' '}
Expand All @@ -44,15 +44,15 @@ const ArchivePage = () => {
<div>
<Link
href="/search"
className="underline hover:text-[#123524] dark:hover:text-[#1c4f36] transition-colors"
className="underline hover:text-light-accent dark:hover:text-dark-accent transition-colors"
>
search
</Link>{' '}
🔍
</div>
</div>

<p className="text-[#123524] dark:text-[#2f8259]/90 text-sm mb-10">
<p className="text-japanese-sumiiro dark:text-japanese-murasakisuishiyou text-sm mb-10 font-medium">
Total: {totalBlogs} ({new Intl.NumberFormat().format(totalWordCount)}{' '}
words)
</p>
Expand Down
42 changes: 21 additions & 21 deletions app/search/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ interface SearchResult {
const LoadingComponent = () => {
return (
<div className="flex flex-col items-center space-y-4 py-8">
<div className="w-48 h-1 bg-[#e6c9a8]/20 dark:bg-[#1e2030] rounded-full overflow-hidden">
<div className="w-full h-full bg-[#927456] dark:bg-[#7aa2f7] animate-loading-bar" />
<div className="w-48 h-1 bg-light-border/20 dark:bg-dark-tag rounded-full overflow-hidden">
<div className="w-full h-full bg-light-accent dark:bg-dark-accent animate-loading-bar" />
</div>
<span className="text-sm text-[#927456]/70 dark:text-[#7aa2f7]/70">
<span className="text-sm text-light-accent/70 dark:text-dark-accent/70">
Searching posts...
</span>
</div>
Expand All @@ -46,27 +46,27 @@ const SearchResult = ({ result }: { result: SearchResult }) => {
const truncatedContent = truncateText(content);
if (result.chunk_type === 'code') {
return (
<pre className="bg-[#faf4eb] dark:bg-[#1e2030] p-2 rounded text-sm overflow-x-auto mt-2">
<pre className="bg-light-tag dark:bg-dark-tag p-2 rounded text-sm overflow-x-auto mt-2">
<code>{truncatedContent}</code>
</pre>
);
}
return (
<p className="text-[#2c353d]/70 dark:text-[#c7cce1]/70 mt-2 text-sm">
<p className="text-light-text/70 dark:text-dark-text/70 mt-2 text-sm">
{truncatedContent}
</p>
);
};

return (
<div className="group border-l-2 border-[#e6c9a8] dark:border-[#1e2030] pl-4 py-3 mb-4 hover:border-[#927456] dark:hover:border-[#7aa2f7] transition-colors hover:bg-[#faf4eb]/50 dark:hover:bg-[#1e2030]/50 rounded-r">
<div className="group border-l-2 border-light-border dark:border-dark-tag pl-4 py-3 mb-4 hover:border-light-accent dark:hover:border-dark-accent transition-colors hover:bg-light-tag/50 dark:hover:bg-dark-tag/50 rounded-r">
<Link href={`/posts/${result.post_slug}`} className="block space-y-2">
<div className="flex items-center justify-between">
<h3 className="font-medium text-[#2c353d] dark:text-[#a9b1d6] group-hover:text-[#927456] dark:group-hover:text-[#7aa2f7] transition-colors">
<h3 className="font-medium text-light-text dark:text-dark-text group-hover:text-light-accent dark:group-hover:text-dark-accent transition-colors">
{result.post_title}
</h3>
<div className="flex items-center gap-2">
<span className="text-xs px-2 py-1 rounded-full bg-[#927456]/10 dark:bg-[#7aa2f7]/10 text-[#927456] dark:text-[#7aa2f7] font-medium">
<span className="text-xs px-2 py-1 rounded-full bg-light-accent/10 dark:bg-dark-accent/10 text-light-accent dark:text-dark-accent font-medium">
{Math.round(
(result.hybrid_score ??
result.keyword_score ??
Expand All @@ -80,7 +80,7 @@ const SearchResult = ({ result }: { result: SearchResult }) => {
<div className="prose prose-sm max-w-none">
{formatContent(result.content)}
</div>
<div className="text-xs text-[#927456]/70 dark:text-[#7aa2f7]/70 font-medium">
<div className="text-xs text-light-accent/70 dark:text-dark-accent/70 font-medium">
<span className="capitalize">{result.chunk_type}</span>
{result.metadata.section && (
<>
Expand Down Expand Up @@ -237,7 +237,7 @@ function SearchContent() {
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search posts..."
className="w-full p-2 bg-[#fffcf7] dark:bg-[#1a1b26] border border-[#e6c9a8] dark:border-[#1e2030] rounded-lg focus:ring-2 focus:ring-[#927456] dark:focus:ring-[#7aa2f7] focus:border-transparent text-[#2c353d] dark:text-[#c7cce1] placeholder-gray-400 dark:placeholder-gray-500"
className="w-full p-2 bg-light-bg dark:bg-dark-bg border border-light-border dark:border-dark-tag rounded-lg focus:ring-2 focus:ring-light-accent dark:focus:ring-dark-accent focus:border-transparent text-light-text dark:text-dark-text placeholder-gray-400 dark:placeholder-gray-500"
/>

{/* Search Type Toggle */}
Expand All @@ -247,8 +247,8 @@ function SearchContent() {
onClick={() => handleSearchTypeChange('hybrid')}
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
searchType === 'hybrid'
? 'bg-[#927456] dark:bg-[#7aa2f7] text-white'
: 'bg-[#e6c9a8]/20 dark:bg-[#1e2030] text-[#2c353d] dark:text-[#c7cce1] hover:bg-[#e6c9a8]/40 dark:hover:bg-[#1e2030]/70'
? 'bg-light-accent dark:bg-dark-accent text-white'
: 'bg-light-border/20 dark:bg-dark-tag text-light-text dark:text-dark-text hover:bg-light-border/40 dark:hover:bg-dark-tag/70'
}`}
>
Hybrid
Expand All @@ -258,8 +258,8 @@ function SearchContent() {
onClick={() => handleSearchTypeChange('semantic')}
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
searchType === 'semantic'
? 'bg-[#927456] dark:bg-[#7aa2f7] text-white'
: 'bg-[#e6c9a8]/20 dark:bg-[#1e2030] text-[#2c353d] dark:text-[#c7cce1] hover:bg-[#e6c9a8]/40 dark:hover:bg-[#1e2030]/70'
? 'bg-light-accent dark:bg-dark-accent text-white'
: 'bg-light-border/20 dark:bg-dark-tag text-light-text dark:text-dark-text hover:bg-light-border/40 dark:hover:bg-dark-tag/70'
}`}
>
Semantic
Expand All @@ -269,16 +269,16 @@ function SearchContent() {
onClick={() => handleSearchTypeChange('keyword')}
className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
searchType === 'keyword'
? 'bg-[#927456] dark:bg-[#7aa2f7] text-white'
: 'bg-[#e6c9a8]/20 dark:bg-[#1e2030] text-[#2c353d] dark:text-[#c7cce1] hover:bg-[#e6c9a8]/40 dark:hover:bg-[#1e2030]/70'
? 'bg-light-accent dark:bg-dark-accent text-white'
: 'bg-light-border/20 dark:bg-dark-tag text-light-text dark:text-dark-text hover:bg-light-border/40 dark:hover:bg-dark-tag/70'
}`}
>
Keyword
</button>
</div>

{/* Search Type Explanation */}
<div className="text-xs text-center text-[#2c353d]/60 dark:text-[#c7cce1]/60 italic mt-1">
<div className="text-xs text-center text-light-text/60 dark:text-dark-text/60 italic mt-1">
{searchType === 'hybrid' &&
'Combines meaning and exact matches for balanced results'}
{searchType === 'semantic' &&
Expand All @@ -302,7 +302,7 @@ function SearchContent() {
) : (
// Only show "no results" message if a search has been performed
!isLoading && hasSearched && query && (
<div className="text-center py-6 text-[#2c353d]/70 dark:text-[#c7cce1]/70">
<div className="text-center py-6 text-light-text/70 dark:text-dark-text/70">
<p>No results found for "{query}"</p>
<p className="text-sm mt-2">
Try a different search type or modify your query
Expand All @@ -320,10 +320,10 @@ export default function SearchPage() {
fallback={
<div className="max-w-3xl mx-auto px-4 py-8">
<div className="flex flex-col items-center space-y-4 py-8">
<div className="w-48 h-1 bg-[#e6c9a8]/20 dark:bg-[#1e2030] rounded-full overflow-hidden">
<div className="w-full h-full bg-[#927456] dark:bg-[#7aa2f7] animate-loading-bar" />
<div className="w-48 h-1 bg-light-border/20 dark:bg-dark-tag rounded-full overflow-hidden">
<div className="w-full h-full bg-light-accent dark:bg-dark-accent animate-loading-bar" />
</div>
<span className="text-sm text-[#927456]/70 dark:text-[#7aa2f7]/70">
<span className="text-sm text-light-accent/70 dark:text-dark-accent/70">
Loading search...
</span>
</div>
Expand Down
5 changes: 3 additions & 2 deletions app/tags/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ export const generateStaticParams = async () => {
}));
};

const TagPage = (props: any) => {
const tag = decodeURIComponent(props.params.slug);
const TagPage = async (props: any) => {
const params = await props.params;
const tag = decodeURIComponent(params.slug);
const postMetadata = getPostMetadata();

const filteredPosts = postMetadata.filter((post) =>
Expand Down
8 changes: 4 additions & 4 deletions components/ChatInterface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,8 @@ export default function ChatInterface({
<div
className={`max-w-[80%] rounded-lg px-3 py-2 ${
message.role === 'user'
? 'bg-[#0b93f6] text-white ml-auto'
: 'bg-[#e5e5ea] dark:bg-[#303030] text-black dark:text-white'
? 'bg-japanese-soshoku text-japanese-sumiiro ml-auto'
: 'bg-japanese-hakuji dark:bg-japanese-nezumiiro/30 text-japanese-sumiiro dark:text-japanese-nyuhakushoku'
}`}
>
<div className="text-sm leading-relaxed break-words">
Expand Down Expand Up @@ -208,7 +208,7 @@ export default function ChatInterface({
messages.length > 0 &&
messages[messages.length - 1].role === 'user' && (
<div className="flex justify-start">
<div className="bg-[#e5e5ea] dark:bg-[#303030] rounded-lg px-4 py-2.5 user-select-none">
<div className="bg-japanese-shiraumenezu dark:bg-dark-tag rounded-lg px-4 py-2.5 user-select-none">
<div className="flex space-x-1.5">
<div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500 animate-typing"></div>
<div className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-500 animate-typing-middle"></div>
Expand Down Expand Up @@ -237,7 +237,7 @@ export default function ChatInterface({
type="submit"
disabled={isLoading || !input.trim()}
className={`${
input.trim() ? 'bg-[#0b93f6]' : 'bg-gray-200 dark:bg-gray-700'
input.trim() ? 'bg-light-accent' : 'bg-japanese-shiraumenezu dark:bg-dark-tag'
} rounded-full p-2 disabled:opacity-50 transition-colors user-select-none`}
aria-label="Send message"
>
Expand Down
Loading