new css style

Author: simo-hue

DOCUMENTATION.md

@@ -888,3 +888,22 @@ Riscrittura completa del template:
 **File**: `data/links.yml`
 - Added the IELTS Academic exam (score 7.5) to the "Certificates" section.
 - Configured the link to point to `/docs/IELTS.pdf` which should be placed in the `static/docs/` directory.
+
+---
+
+# Professional Markdown Styling for Blog Posts
+
+## Date: 2026-03-30
+## Modifications
+Implemented a premium, rich styling upgrade for all markdown-rendered elements in blog posts using pure CSS and Vanilla JS.
+- **CSS (`assets/css/custom.css`)**: Added `.blog-prose` rule block. Includes:
+  - Drop cap for the first paragraph.
+  - Gradient headings with left borders.
+  - Redesigned blockquotes with quote icons and subtle backgrounds.
+  - Styled inline code pills and dark-themed code blocks.
+  - Custom gradient bullets and numbered list markers.
+  - Alternating colored tables and gradient horizontal rules.
+- **Layout (`layouts/blog/single.html`)**: Added the `.blog-prose` class to the main `<article>` tag.
+- **JS (`assets/js/main.js`)**:
+  - Implemented an IntersectionObserver to apply scroll-reveal animations (`.blog-prose-reveal`) to headings, quotes, and images.
+  - Added logic to generate a "Copy" button (`.copy-code-btn`) for all `<pre>` code blocks.

assets/css/custom.css

@@ -1213,8 +1213,308 @@ body>div:last-child:empty {
   border-radius: 0.5rem;
 }
 
-.content-with-zoom img:hover,
 .content-zoom-img:hover {
   transform: scale(1.015);
   box-shadow: 0 12px 40px rgba(0,0,0,0.18);
 }
+
+/* =========================================================
+   BLOG PROSE ENHANCEMENTS
+   ========================================================= */
+
+/* 1. Drop Cap for First Paragraph */
+.blog-prose > p:first-of-type::first-letter {
+  font-size: 3.5em;
+  font-weight: 800;
+  float: left;
+  line-height: 0.8;
+  margin-right: 0.1em;
+  margin-top: -0.05em;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: #667eea; /* fallback */
+  padding-bottom: 0.1em; /* prevents gradient clipping on some letters */
+}
+
+/* 2. Custom Gradient Headings with Left Border */
+.blog-prose h2, .blog-prose h3, .blog-prose h4 {
+  position: relative;
+  padding-left: 1rem;
+  margin-top: 2.5em;
+  scroll-margin-top: 6rem; /* for ToC anchors */
+}
+
+.blog-prose h2::before, .blog-prose h3::before, .blog-prose h4::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10%;
+  bottom: 10%;
+  width: 4px;
+  background: linear-gradient(to bottom, #667eea, #764ba2);
+  border-radius: 4px;
+}
+
+/* 3. Redesigned Blockquotes - Pull Quote Style */
+.blog-prose blockquote {
+  position: relative;
+  padding: 1.5rem 1.5rem 1.5rem 3rem;
+  margin: 2.5rem 0;
+  border-left: none; /* remove default prose border */
+  background: rgba(102, 126, 234, 0.05);
+  border-radius: 0 0.5rem 0.5rem 0;
+  font-style: italic;
+  font-weight: 500;
+  color: inherit;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
+}
+
+.dark .blog-prose blockquote {
+  background: rgba(102, 126, 234, 0.08);
+}
+
+.blog-prose blockquote::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to bottom, #667eea, #764ba2);
+  border-radius: 4px 0 0 4px;
+}
+
+/* Add quote icon to blockquote */
+.blog-prose blockquote::after {
+  content: "\201C";
+  position: absolute;
+  left: 1rem;
+  top: 0.5rem;
+  font-size: 3.5rem;
+  font-family: Georgia, serif;
+  color: #667eea;
+  opacity: 0.25;
+  line-height: 1;
+}
+
+.blog-prose blockquote p {
+  margin: 0 !important; /* Override prose spacing inside blockquote */
+}
+
+/* 4. Styled Inline Code Pills */
+.blog-prose p code, .blog-prose li code, .blog-prose a code {
+  padding: 0.2em 0.4em;
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  border-radius: 0.3em;
+  font-size: 0.85em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  word-break: break-word;
+}
+
+.dark .blog-prose p code, .dark .blog-prose li code, .dark .blog-prose a code {
+  background: rgba(155, 181, 255, 0.15);
+  color: #9bb5ff;
+}
+
+.blog-prose p code::before, .blog-prose p code::after,
+.blog-prose li code::before, .blog-prose li code::after {
+  content: "" !important; /* Remove prose backticks */
+}
+
+/* 5. Custom Dark Code Blocks (pre code) */
+.blog-prose pre {
+  position: relative;
+  background-color: #1e1e2e !important; /* Deep dark tech theme */
+  border-radius: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 1.5rem !important;
+  margin: 2rem 0;
+  overflow-x: auto;
+}
+
+.blog-prose pre code {
+  color: #cdd6f4 !important; /* Light text for dark bg */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9em;
+  line-height: 1.6;
+  background: transparent !important;
+  padding: 0;
+}
+
+/* Copy Button for Code Blocks */
+.copy-code-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  color: #cdd6f4;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 0.4rem;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  backdrop-filter: blur(4px);
+}
+
+.copy-code-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.copy-code-btn.copied {
+  background: rgba(16, 185, 129, 0.2) !important;
+  color: #10b981 !important;
+  border-color: rgba(16, 185, 129, 0.4) !important;
+}
+
+/* 6. Action-Colored Gradient Link Underlines */
+.blog-prose a {
+  color: inherit;
+  text-decoration: none;
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 100% 2px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.blog-prose a:hover {
+  background-size: 100% 100%;
+  color: white !important;
+  border-radius: 0.15rem;
+  padding: 0 0.1rem;
+}
+
+/* Don't apply this to linked images */
+.blog-prose a:has(img) {
+  background-image: none;
+}
+
+/* 7. Custom Bullet List Markers */
+.blog-prose ul {
+  list-style: none !important; /* remove default */
+  padding-left: 1.5rem;
+}
+
+.blog-prose ul > li {
+  position: relative;
+  padding-left: 0.5rem;
+}
+
+.blog-prose ul > li::before {
+  content: "";
+  position: absolute;
+  left: -1rem;
+  top: 0.65rem; /* Adjust based on line-height */
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
+}
+
+/* Override prose ol completely */
+.blog-prose ol {
+  counter-reset: custom-counter;
+  list-style: none !important;
+  padding-left: 1.5rem;
+}
+
+.blog-prose ol > li {
+  position: relative;
+  counter-increment: custom-counter;
+  padding-left: 0.5rem;
+}
+
+.blog-prose ol > li::before {
+  content: counter(custom-counter) "." !important;
+  position: absolute;
+  left: -1.8rem;
+  top: 0;
+  color: #667eea;
+  font-weight: bold;
+  font-size: 1em;
+  width: 1.5rem;
+  text-align: right;
+  background: transparent !important;
+}
+
+/* 8. Gradient Horizontal Rules (hr) */
+.blog-prose hr {
+  border: 0;
+  height: 2px;
+  background: linear-gradient(to right, transparent, #667eea, #764ba2, transparent);
+  margin: 3rem 0;
+  opacity: 0.5;
+}
+
+/* 9. Styled Tables */
+.blog-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2rem 0;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+}
+
+.dark .blog-prose table {
+  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+}
+
+.blog-prose thead {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.blog-prose thead th {
+  padding: 1rem;
+  text-align: left;
+  font-weight: 600;
+  border: none;
+}
+
+.blog-prose tbody tr {
+  background: white;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+
+.dark .blog-prose tbody tr {
+  background: rgba(30, 41, 59, 0.5);
+  border-bottom-color: rgba(255,255,255,0.05);
+}
+
+.blog-prose tbody tr:nth-child(even) {
+  background: rgba(0,0,0,0.02);
+}
+
+.dark .blog-prose tbody tr:nth-child(even) {
+  background: rgba(255,255,255,0.02);
+}
+
+.blog-prose tbody td {
+  padding: 1rem;
+}
+
+/* Scroll Animation Classes */
+.blog-prose-reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: opacity, transform;
+}
+
+.blog-prose-reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}