ai/log
1
0
Fork 0
Code Pull Requests Actions Wiki Activity

Fix code block file path display for mobile

Browse Source 
- Move file path from right-top overlay to top header bar
- Use block display instead of absolute positioning
- Add dedicated styling for filename header bar
- Adjust code padding when filename is present
- Optimize mobile responsiveness to prevent overlap

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
syui
2025-06-14 17:03:31 +09:00
parent f52249c292
commit 5838adf5a6
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
my-blog/static/css/style.css
View File

@ -517,25 +517,21 @@ a.view-markdown:any-link {
margin: 16px 0; margin: 16px 0;
font-size: 14px; font-size: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
position: relative;
} }
/* File name display for code blocks */ /* File name display for code blocks - top bar style */
.article-body pre[data-filename]::before { .article-body pre[data-filename]::before {
content: attr(data-filename); content: attr(data-filename);
position: absolute; display: block;
top: 0;
right: 0;
background: #2D2D30; background: #2D2D30;
color: #CCCCCC; color: #AE81FF;
padding: 4px 12px; padding: 8px 16px;
font-size: 12px; font-size: 12px;
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace; font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
border-bottom-left-radius: 4px; border-bottom: 1px solid #3E3D32;
border: 1px solid #3E3D32; margin: 0;
border-top: none; width: 100%;
border-right: none; box-sizing: border-box;
z-index: 1;
} }
.article-body pre code { .article-body pre code {
@ -548,6 +544,11 @@ a.view-markdown:any-link {
line-height: 1.4; line-height: 1.4;
} }
/* Adjust padding when filename is present */
.article-body pre[data-filename] code {
padding: 16px;
}
/* Inline code (not in pre blocks) */ /* Inline code (not in pre blocks) */
.article-body code { .article-body code {
background: var(--light-white); background: var(--light-white);
@ -853,6 +854,16 @@ a.view-markdown:any-link {
white-space: pre-wrap; white-space: pre-wrap;
} }
/* Mobile filename display */
.article-body pre[data-filename]::before {
padding: 6px 12px;
font-size: 11px;
}
.article-body pre[data-filename] code {
padding: 12px;
}
.article-body code { .article-body code {
word-break: break-all; word-break: break-all;
} }