mahdium/portfolio
1
0
Fork 0
mirror of https://github.com/mmahdium/portfolio.git synced 2026-08-16 21:14:31 +03:30
Code Issues Packages Projects Releases Wiki Activity

feat(blog): Enhance blog content styling and readability

Browse Source 
- Add comprehensive blog content CSS with RTL support
- Implement responsive typography and layout improvements
- Create dedicated CSS for blog prose and content styling
- Optimize code blocks, headings, and typography for better readability
- Add scroll padding and responsive design considerations
- Improve dark mode color contrast and styling
- Enhance code and blockquote styling with better visual hierarchy
This commit is contained in:
mahdiarghyani
2025-11-11 16:52:54 +03:30
parent 56f6a11285
commit 5f28eaa179
11 changed files with 1077 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/content/Alert.vue
+3 -2
View File
@@ -1,7 +1,8 @@
<template>
<div :class="alertClass" class="my-4 flex items-center gap-2 rounded-lg px-4 py-3">
<div :class="alertClass"
class="my-6 flex items-center gap-3 rounded-xl px-4 py-3.5 ring-1 ring-inset backdrop-blur-sm">
<UIcon :name="icon" class="h-5 w-5 flex-shrink-0" />
<div class="flex-1 text-sm">
<div class="flex-1 text-sm leading-relaxed">
<slot />
</div>
</div>
app/components/content/ProseCode.vue
+15 -17
View File
@@ -69,31 +69,31 @@ const languageLabel = computed(() => {
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
justify-content: center;
padding: 0.875rem 1.5rem;
background: rgba(30, 41, 59, 0.8);
border-bottom: 1px solid rgba(71, 85, 105, 0.3);
backdrop-filter: blur(8px);
min-height: 3rem;
min-height: 2.75rem;
}
.code-filename {
font-size: 0.9375rem;
font-size: 0.875rem;
color: #e2e8f0;
font-family: 'Courier New', monospace;
font-weight: 500;
}
.code-language {
font-size: 0.8125rem;
color: #94a3b8;
font-size: 0.75rem;
color: #cbd5e1;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.05em;
padding: 0.375rem 0.75rem;
background: rgba(99, 102, 241, 0.15);
padding: 0.25rem 0.625rem;
background: rgba(99, 102, 241, 0.2);
border-radius: 0.375rem;
border: 1px solid rgba(99, 102, 241, 0.3);
border: 1px solid rgba(99, 102, 241, 0.4);
}
.code-block-content {
@@ -177,14 +177,12 @@ const languageLabel = computed(() => {
<div class="code-block-wrapper" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
<!-- Header with filename and language -->
<div v-if="filename || language" class="code-block-header">
<div class="flex items-center gap-3">
<span v-if="filename" class="code-filename">
{{ filename }}
</span>
<span v-if="language && !filename" class="code-language">
{{ languageLabel }}
</span>
</div>
<span v-if="filename" class="code-filename">
{{ filename }}
</span>
<span v-if="language && !filename" class="code-language">
{{ languageLabel }}
</span>
</div>
<!-- Code block -->