diff --git a/my-blog/static/css/style.css b/my-blog/static/css/style.css index 8478059..a1955a8 100644 --- a/my-blog/static/css/style.css +++ b/my-blog/static/css/style.css @@ -2,7 +2,7 @@ :root { --theme-color: #FF4500; --white: #fff; - --light-gray: #aaa; + --light-gray: #f6f8fa; --dark-gray: #666; --background: #fff; } @@ -65,9 +65,9 @@ body { /* Ask AI styles */ .ask-ai-btn { - background: var(--light-gray); + background: var(--theme-color); color: var(--white); - border: 2px solid var(--white); + /* border: 2px solid var(--white); */ padding: 8px 16px; border-radius: 6px; cursor: pointer; @@ -423,9 +423,9 @@ body { } .markdown-btn { - background: #fd7e14; + background: #d1d9e0; color: white; - border-color: #fd7e14; + /* border-color: #fd7e14; */ } .markdown-btn:hover { @@ -479,7 +479,7 @@ body { color: #656d76; } -/* Molokai-inspired code blocks */ +/* Code blocks - Molokai theme */ .article-body pre { background: #1B1D1E; border: 1px solid #3E3D32; @@ -516,13 +516,13 @@ body { /* Inline code */ .article-body code { - background: #2F3129; - color: #A6E22E; + background: #f5f5f5; + color: var(--theme-color); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace; font-size: 13px; - border: 1px solid #3E3D32; + /* border: 1px solid var(--white); */ } /* Molokai color scheme for syntax highlighting */ @@ -1062,6 +1062,18 @@ body { background: #fef2f2; } +/* Fix long URI display on mobile */ +.chat-message small, +.comment-item small { + word-wrap: break-word; + word-break: break-all; + overflow-wrap: break-word; + display: block; + font-size: 12px; + color: #656d76; + margin-top: 4px; +} + .message-header { display: flex; align-items: center; @@ -1160,3 +1172,42 @@ body { margin-bottom: 8px; } } + +/* Mobile optimizations for screens under 700px */ +@media (max-width: 700px) { + .comment-section { + max-width: 100%; + padding: 0 16px; + box-sizing: border-box; + } + + .app-main { + max-width: 100%; + padding: 20px 16px; + box-sizing: border-box; + } + + /* Ensure long URIs break properly on small screens */ + .chat-message small, + .comment-item small { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + + /* Adjust spacing for mobile */ + .comment-item, + .chat-message { + margin-bottom: 8px; + } + + /* Stack buttons vertically on very small screens */ + .button-group { + flex-direction: column; + width: 100%; + } + + .button-group button { + width: 100%; + } +} diff --git a/my-blog/static/icomoon/fonts/icomoon.eot b/my-blog/static/icomoon/fonts/icomoon.eot new file mode 100644 index 0000000..95caa7b Binary files /dev/null and b/my-blog/static/icomoon/fonts/icomoon.eot differ diff --git a/my-blog/static/icomoon/fonts/icomoon.svg b/my-blog/static/icomoon/fonts/icomoon.svg new file mode 100644 index 0000000..665487e --- /dev/null +++ b/my-blog/static/icomoon/fonts/icomoon.svg @@ -0,0 +1,34 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/my-blog/static/icomoon/fonts/icomoon.ttf b/my-blog/static/icomoon/fonts/icomoon.ttf new file mode 100644 index 0000000..c0fa4d6 Binary files /dev/null and b/my-blog/static/icomoon/fonts/icomoon.ttf differ diff --git a/my-blog/static/icomoon/fonts/icomoon.woff b/my-blog/static/icomoon/fonts/icomoon.woff new file mode 100644 index 0000000..e31da24 Binary files /dev/null and b/my-blog/static/icomoon/fonts/icomoon.woff differ diff --git a/my-blog/static/icomoon/style.css b/my-blog/static/icomoon/style.css new file mode 100644 index 0000000..580d1b4 --- /dev/null +++ b/my-blog/static/icomoon/style.css @@ -0,0 +1,99 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?mxezzh'); + src: url('fonts/icomoon.eot?mxezzh#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?mxezzh') format('truetype'), + url('fonts/icomoon.woff?mxezzh') format('woff'), + url('fonts/icomoon.svg?mxezzh#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-git:before { + content: "\e901"; +} +.icon-cube:before { + content: "\e900"; +} +.icon-game:before { + content: "\e9d5"; +} +.icon-card:before { + content: "\e9d6"; +} +.icon-book:before { + content: "\e9d7"; +} +.icon-git1:before { + content: "\e9d3"; +} +.icon-moji_a:before { + content: "\e9c3"; +} +.icon-archlinux:before { + content: "\e9c4"; +} +.icon-archlinuxjp:before { + content: "\e9c5"; +} +.icon-syui:before { + content: "\e9c6"; +} +.icon-phoenix-power:before { + content: "\e9c7"; +} +.icon-phoenix-world:before { + content: "\e9c8"; +} +.icon-power:before { + content: "\e9c9"; +} +.icon-phoenix:before { + content: "\e9ca"; +} +.icon-honeycomb:before { + content: "\e9cb"; +} +.icon-ai:before { + content: "\e9cc"; +} +.icon-robot:before { + content: "\e9cd"; +} +.icon-sandar:before { + content: "\e9ce"; +} +.icon-moon:before { + content: "\e9cf"; +} +.icon-home:before { + content: "\e9d0"; +} +.icon-cloud:before { + content: "\e9d1"; +} +.icon-api:before { + content: "\e9d2"; +} +.icon-aibadge:before { + content: "\ebf8"; +} +.icon-aiterm:before { + content: "\ebf7"; +} diff --git a/src/markdown.rs b/src/markdown.rs index b030a7c..b4ea2ac 100644 --- a/src/markdown.rs +++ b/src/markdown.rs @@ -88,10 +88,11 @@ impl MarkdownProcessor { let parser = Parser::new_ext(content, options); let mut html_output = String::new(); let mut code_block = None; - let theme = self.theme_set.themes.get(&self.highlight_theme) - .or_else(|| self.theme_set.themes.get("Monokai")) - .or_else(|| self.theme_set.themes.get("InspiredGitHub")) + // Force use dark theme for better visibility on dark background + let theme = self.theme_set.themes.get("base16-monokai.dark") .or_else(|| self.theme_set.themes.get("base16-ocean.dark")) + .or_else(|| self.theme_set.themes.get("Solarized (dark)")) + .or_else(|| self.theme_set.themes.get(&self.highlight_theme)) .unwrap_or_else(|| self.theme_set.themes.values().next().unwrap()); let mut events = Vec::new();