From f5bdc557bcc0823fa6cc3cbd5b8e7a0900d0e82e Mon Sep 17 00:00:00 2001 From: mgoin Date: Tue, 25 Nov 2025 16:20:50 -0500 Subject: [PATCH 1/3] Beautify Signed-off-by: mgoin --- _config.yml | 8 +- _layouts/home.html | 47 ++++ _layouts/post.html | 37 +++ _sass/minima/custom-styles.scss | 482 +++++++++++++++++++++++++++++++- 4 files changed, 569 insertions(+), 5 deletions(-) create mode 100644 _layouts/home.html create mode 100644 _layouts/post.html diff --git a/_config.yml b/_config.yml index 1af635e..7c6f808 100644 --- a/_config.yml +++ b/_config.yml @@ -61,6 +61,8 @@ minima: header_pages: - index.md -# Set to `true` to show excerpts on the homepage. -# -# show_excerpts: false +# Show excerpts on the homepage +show_excerpts: true + +# Excerpt settings +excerpt_separator: diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100644 index 0000000..bb6cc22 --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,47 @@ +--- +layout: default +--- + +
+
+

{{ site.title | escape }}

+

{{ site.description | escape }}

+
+ + {%- if site.posts.size > 0 -%} +
+ {%- for post in site.posts -%} + + {%- endfor -%} +
+ {%- endif -%} +
diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..5be2dea --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,37 @@ +--- +layout: default +--- + +
+
+
+

{{ page.title | escape }}

+
+ {%- if page.author -%} + + · + {%- endif -%} + + {%- if page.modified_date -%} + · + + Updated: + + {%- endif -%} +
+
+ +
+ {{ content }} +
+ +
+ +
+
diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index 14a2eb7..3211228 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -1,3 +1,481 @@ +// vLLM Brand Colors +$vllm-amber: #E5A733; +$vllm-blue: #6FA8DC; +$vllm-amber-dark: #C48F2A; +$vllm-blue-dark: #5A8FC7; + +// Ensure images have proper background img { - background-color: $lm-background-color; -} \ No newline at end of file + background-color: $lm-background-color; +} + +// ============================================ +// HOME PAGE STYLES +// ============================================ + +.home { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; +} + +.home-header { + text-align: center; + padding: 2rem 0 3rem; + border-bottom: 1px solid rgba($vllm-blue, 0.2); + margin-bottom: 2.5rem; +} + +.home-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 0.5rem; + letter-spacing: -0.02em; +} + +.home-description { + font-size: 1.125rem; + opacity: 0.7; + max-width: 600px; + margin: 0 auto; +} + +// Post Grid +.post-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 1.5rem; + padding-bottom: 3rem; +} + +// Post Card +.post-card { + background: $lm-background-color; + border-radius: 8px; + overflow: hidden; + border: 1px solid rgba(0, 0, 0, 0.08); + transition: transform 0.2s ease, box-shadow 0.2s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); + } + + @media (prefers-color-scheme: dark) { + background: $dm-background-color; + border-color: rgba(255, 255, 255, 0.08); + + &:hover { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); + } + } +} + +.post-card-link { + display: block; + text-decoration: none; + color: inherit; +} + +.post-card-image { + aspect-ratio: 16 / 9; + overflow: hidden; + background: linear-gradient(135deg, rgba($vllm-amber, 0.05) 0%, rgba($vllm-blue, 0.05) 100%); + + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + } + + .post-card:hover & img { + transform: scale(1.03); + } +} + +.post-card-image-placeholder { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba($vllm-amber, 0.08) 0%, rgba($vllm-blue, 0.08) 100%); + + svg { + width: 60px; + height: 48px; + opacity: 0.6; + } + + @media (prefers-color-scheme: dark) { + background: linear-gradient(135deg, rgba($vllm-amber, 0.12) 0%, rgba($vllm-blue, 0.12) 100%); + } +} + +.post-card-content { + padding: 1.25rem; +} + +.post-card-title { + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; + margin: 0 0 0.75rem; + letter-spacing: -0.01em; + + .post-card:hover & { + color: $vllm-blue; + } + + @media (prefers-color-scheme: dark) { + .post-card:hover & { + color: $vllm-blue; + } + } +} + +.post-card-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; + font-size: 0.8125rem; + opacity: 0.6; + margin-bottom: 0.75rem; +} + +.post-card-author { + &::after { + content: "\00b7"; + margin-left: 0.5rem; + } +} + +.post-card-excerpt { + font-size: 0.875rem; + line-height: 1.6; + opacity: 0.75; + margin: 0; +} + +// ============================================ +// POST PAGE STYLES +// ============================================ + +.post { + max-width: 780px; + margin: 0 auto; + padding: 0 1rem; +} + +.post-header { + padding: 2rem 0 1.5rem; + margin-bottom: 2rem; + border-bottom: 1px solid rgba($vllm-blue, 0.15); + position: relative; +} + +.post-header-accent { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, $vllm-amber 0%, $vllm-blue 100%); + border-radius: 2px; +} + +.post-title { + font-size: 2.25rem; + font-weight: 700; + line-height: 1.2; + margin: 0 0 1rem; + letter-spacing: -0.02em; + + @media (max-width: 600px) { + font-size: 1.75rem; + } +} + +.post-meta { + font-size: 0.9375rem; + opacity: 0.65; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.25rem; +} + +.post-meta-sep { + margin: 0 0.25rem; +} + +.post-author { + font-weight: 500; +} + +// Post Content +.post-content { + font-size: 1.0625rem; + line-height: 1.75; + + h1, h2, h3, h4, h5, h6 { + margin-top: 2rem; + margin-bottom: 1rem; + font-weight: 600; + letter-spacing: -0.01em; + } + + h2 { + font-size: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba($vllm-blue, 0.15); + } + + h3 { + font-size: 1.25rem; + } + + h4 { + font-size: 1.125rem; + } + + p { + margin-bottom: 1.25rem; + } + + a { + color: $vllm-blue-dark; + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 2px; + + &:hover { + color: $vllm-amber-dark; + } + + @media (prefers-color-scheme: dark) { + color: $vllm-blue; + + &:hover { + color: $vllm-amber; + } + } + } + + // Code blocks + pre, code { + font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; + font-size: 0.875em; + } + + code { + background: rgba($vllm-blue, 0.08); + padding: 0.15em 0.4em; + border-radius: 4px; + + @media (prefers-color-scheme: dark) { + background: rgba($vllm-blue, 0.15); + } + } + + pre { + background: #1e1e2e; + color: #cdd6f4; + padding: 1rem 1.25rem; + border-radius: 8px; + overflow-x: auto; + margin: 1.5rem 0; + border-left: 3px solid $vllm-blue; + + code { + background: none; + padding: 0; + font-size: 0.875rem; + color: inherit; + } + } + + // Blockquotes + blockquote { + margin: 1.5rem 0; + padding: 0.75rem 1.25rem; + border-left: 3px solid $vllm-amber; + background: rgba($vllm-amber, 0.05); + border-radius: 0 6px 6px 0; + font-style: italic; + + p:last-child { + margin-bottom: 0; + } + + @media (prefers-color-scheme: dark) { + background: rgba($vllm-amber, 0.08); + } + } + + // Images + img { + max-width: 100%; + height: auto; + border-radius: 6px; + margin: 1.5rem 0; + } + + // Tables + table { + width: 100%; + border-collapse: collapse; + margin: 1.5rem 0; + font-size: 0.9375rem; + } + + th, td { + padding: 0.75rem 1rem; + text-align: left; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + + @media (prefers-color-scheme: dark) { + border-color: rgba(255, 255, 255, 0.1); + } + } + + th { + font-weight: 600; + background: rgba($vllm-blue, 0.05); + + @media (prefers-color-scheme: dark) { + background: rgba($vllm-blue, 0.1); + } + } + + tr:hover td { + background: rgba($vllm-amber, 0.03); + + @media (prefers-color-scheme: dark) { + background: rgba($vllm-amber, 0.05); + } + } + + // Lists + ul, ol { + margin: 1rem 0 1.25rem; + padding-left: 1.5rem; + } + + li { + margin-bottom: 0.5rem; + line-height: 1.6; + + &::marker { + color: $vllm-blue; + } + } + + // Horizontal rule + hr { + border: none; + height: 1px; + background: linear-gradient(90deg, transparent, rgba($vllm-blue, 0.3), transparent); + margin: 2.5rem 0; + } +} + +// Post Footer +.post-footer { + margin-top: 3rem; + padding-top: 1.5rem; + border-top: 1px solid rgba($vllm-blue, 0.15); +} + +// ============================================ +// SITE HEADER ADJUSTMENTS +// ============================================ + +.site-header { + border-bottom-color: rgba($vllm-blue, 0.15); +} + +.site-title { + font-weight: 700; + letter-spacing: -0.01em; + + &:hover { + text-decoration: none; + opacity: 0.8; + } +} + +// ============================================ +// SITE FOOTER ADJUSTMENTS +// ============================================ + +.site-footer { + border-top: 1px solid rgba($vllm-blue, 0.15); +} + +// ============================================ +// ADMONITIONS (GitHub-style notes/warnings) +// ============================================ + +.markdown-alert { + padding: 1rem 1.25rem; + margin: 1.5rem 0; + border-radius: 6px; + border-left: 3px solid; + + .markdown-alert-title { + font-weight: 600; + margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; + } + + p:last-child { + margin-bottom: 0; + } +} + +.markdown-alert-note { + background: rgba($vllm-blue, 0.08); + border-color: $vllm-blue; + + .markdown-alert-title { + color: $vllm-blue-dark; + + @media (prefers-color-scheme: dark) { + color: $vllm-blue; + } + } +} + +.markdown-alert-warning { + background: rgba($vllm-amber, 0.08); + border-color: $vllm-amber; + + .markdown-alert-title { + color: $vllm-amber-dark; + + @media (prefers-color-scheme: dark) { + color: $vllm-amber; + } + } +} + +// ============================================ +// RESPONSIVE ADJUSTMENTS +// ============================================ + +@media (max-width: 600px) { + .post-grid { + grid-template-columns: 1fr; + } + + .home-title { + font-size: 2rem; + } + + .post-content { + font-size: 1rem; + } +} From 3167c6d89d633bcb6bd5f802e5200803a79b1e08 Mon Sep 17 00:00:00 2001 From: mgoin Date: Tue, 25 Nov 2025 16:27:11 -0500 Subject: [PATCH 2/3] Try Signed-off-by: mgoin --- _includes/custom-head.html | 4 +- _layouts/home.html | 22 +- _layouts/post.html | 9 - _sass/minima/custom-styles.scss | 483 +---------------------------- assets/css/custom.css | 531 ++++++++++++++++++++++++++++++++ 5 files changed, 546 insertions(+), 503 deletions(-) create mode 100644 assets/css/custom.css diff --git a/_includes/custom-head.html b/_includes/custom-head.html index 6b553b4..28b74bf 100644 --- a/_includes/custom-head.html +++ b/_includes/custom-head.html @@ -1,3 +1,5 @@ + + {% if page.math %} -{% endif %} \ No newline at end of file +{% endif %} diff --git a/_layouts/home.html b/_layouts/home.html index bb6cc22..9682805 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -3,28 +3,26 @@ ---
-
+

{{ site.title | escape }}

{{ site.description | escape }}

-
+ {%- if site.posts.size > 0 -%}
{%- for post in site.posts -%}
- {%- if post.image -%} -
- {{ post.title | escape }} -
- {%- else -%} -
+
+ {%- if post.image -%} + + {%- else -%} - - + + + {%- endif -%}
- {%- endif -%}

{{ post.title | escape }}

@@ -36,7 +34,7 @@

{{ post.title | escape }}

{%- if post.excerpt -%} -

{{ post.excerpt | strip_html | truncate: 120 }}

+

{{ post.excerpt | strip_html | truncatewords: 25 }}

{%- endif -%}
diff --git a/_layouts/post.html b/_layouts/post.html index 5be2dea..782fa3e 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,7 +4,6 @@
-

{{ page.title | escape }}

{%- if page.author -%} @@ -16,14 +15,6 @@

{{ page.title | escape }} - {%- if page.modified_date -%} - · - - Updated: - - {%- endif -%}

diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index 3211228..5ec7bdf 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -1,481 +1,2 @@ -// vLLM Brand Colors -$vllm-amber: #E5A733; -$vllm-blue: #6FA8DC; -$vllm-amber-dark: #C48F2A; -$vllm-blue-dark: #5A8FC7; - -// Ensure images have proper background -img { - background-color: $lm-background-color; -} - -// ============================================ -// HOME PAGE STYLES -// ============================================ - -.home { - max-width: 1200px; - margin: 0 auto; - padding: 0 1rem; -} - -.home-header { - text-align: center; - padding: 2rem 0 3rem; - border-bottom: 1px solid rgba($vllm-blue, 0.2); - margin-bottom: 2.5rem; -} - -.home-title { - font-size: 2.5rem; - font-weight: 700; - margin-bottom: 0.5rem; - letter-spacing: -0.02em; -} - -.home-description { - font-size: 1.125rem; - opacity: 0.7; - max-width: 600px; - margin: 0 auto; -} - -// Post Grid -.post-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); - gap: 1.5rem; - padding-bottom: 3rem; -} - -// Post Card -.post-card { - background: $lm-background-color; - border-radius: 8px; - overflow: hidden; - border: 1px solid rgba(0, 0, 0, 0.08); - transition: transform 0.2s ease, box-shadow 0.2s ease; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); - } - - @media (prefers-color-scheme: dark) { - background: $dm-background-color; - border-color: rgba(255, 255, 255, 0.08); - - &:hover { - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); - } - } -} - -.post-card-link { - display: block; - text-decoration: none; - color: inherit; -} - -.post-card-image { - aspect-ratio: 16 / 9; - overflow: hidden; - background: linear-gradient(135deg, rgba($vllm-amber, 0.05) 0%, rgba($vllm-blue, 0.05) 100%); - - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; - } - - .post-card:hover & img { - transform: scale(1.03); - } -} - -.post-card-image-placeholder { - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, rgba($vllm-amber, 0.08) 0%, rgba($vllm-blue, 0.08) 100%); - - svg { - width: 60px; - height: 48px; - opacity: 0.6; - } - - @media (prefers-color-scheme: dark) { - background: linear-gradient(135deg, rgba($vllm-amber, 0.12) 0%, rgba($vllm-blue, 0.12) 100%); - } -} - -.post-card-content { - padding: 1.25rem; -} - -.post-card-title { - font-size: 1.125rem; - font-weight: 600; - line-height: 1.4; - margin: 0 0 0.75rem; - letter-spacing: -0.01em; - - .post-card:hover & { - color: $vllm-blue; - } - - @media (prefers-color-scheme: dark) { - .post-card:hover & { - color: $vllm-blue; - } - } -} - -.post-card-meta { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.5rem; - font-size: 0.8125rem; - opacity: 0.6; - margin-bottom: 0.75rem; -} - -.post-card-author { - &::after { - content: "\00b7"; - margin-left: 0.5rem; - } -} - -.post-card-excerpt { - font-size: 0.875rem; - line-height: 1.6; - opacity: 0.75; - margin: 0; -} - -// ============================================ -// POST PAGE STYLES -// ============================================ - -.post { - max-width: 780px; - margin: 0 auto; - padding: 0 1rem; -} - -.post-header { - padding: 2rem 0 1.5rem; - margin-bottom: 2rem; - border-bottom: 1px solid rgba($vllm-blue, 0.15); - position: relative; -} - -.post-header-accent { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, $vllm-amber 0%, $vllm-blue 100%); - border-radius: 2px; -} - -.post-title { - font-size: 2.25rem; - font-weight: 700; - line-height: 1.2; - margin: 0 0 1rem; - letter-spacing: -0.02em; - - @media (max-width: 600px) { - font-size: 1.75rem; - } -} - -.post-meta { - font-size: 0.9375rem; - opacity: 0.65; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.25rem; -} - -.post-meta-sep { - margin: 0 0.25rem; -} - -.post-author { - font-weight: 500; -} - -// Post Content -.post-content { - font-size: 1.0625rem; - line-height: 1.75; - - h1, h2, h3, h4, h5, h6 { - margin-top: 2rem; - margin-bottom: 1rem; - font-weight: 600; - letter-spacing: -0.01em; - } - - h2 { - font-size: 1.5rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid rgba($vllm-blue, 0.15); - } - - h3 { - font-size: 1.25rem; - } - - h4 { - font-size: 1.125rem; - } - - p { - margin-bottom: 1.25rem; - } - - a { - color: $vllm-blue-dark; - text-decoration: underline; - text-decoration-thickness: 1px; - text-underline-offset: 2px; - - &:hover { - color: $vllm-amber-dark; - } - - @media (prefers-color-scheme: dark) { - color: $vllm-blue; - - &:hover { - color: $vllm-amber; - } - } - } - - // Code blocks - pre, code { - font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; - font-size: 0.875em; - } - - code { - background: rgba($vllm-blue, 0.08); - padding: 0.15em 0.4em; - border-radius: 4px; - - @media (prefers-color-scheme: dark) { - background: rgba($vllm-blue, 0.15); - } - } - - pre { - background: #1e1e2e; - color: #cdd6f4; - padding: 1rem 1.25rem; - border-radius: 8px; - overflow-x: auto; - margin: 1.5rem 0; - border-left: 3px solid $vllm-blue; - - code { - background: none; - padding: 0; - font-size: 0.875rem; - color: inherit; - } - } - - // Blockquotes - blockquote { - margin: 1.5rem 0; - padding: 0.75rem 1.25rem; - border-left: 3px solid $vllm-amber; - background: rgba($vllm-amber, 0.05); - border-radius: 0 6px 6px 0; - font-style: italic; - - p:last-child { - margin-bottom: 0; - } - - @media (prefers-color-scheme: dark) { - background: rgba($vllm-amber, 0.08); - } - } - - // Images - img { - max-width: 100%; - height: auto; - border-radius: 6px; - margin: 1.5rem 0; - } - - // Tables - table { - width: 100%; - border-collapse: collapse; - margin: 1.5rem 0; - font-size: 0.9375rem; - } - - th, td { - padding: 0.75rem 1rem; - text-align: left; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - - @media (prefers-color-scheme: dark) { - border-color: rgba(255, 255, 255, 0.1); - } - } - - th { - font-weight: 600; - background: rgba($vllm-blue, 0.05); - - @media (prefers-color-scheme: dark) { - background: rgba($vllm-blue, 0.1); - } - } - - tr:hover td { - background: rgba($vllm-amber, 0.03); - - @media (prefers-color-scheme: dark) { - background: rgba($vllm-amber, 0.05); - } - } - - // Lists - ul, ol { - margin: 1rem 0 1.25rem; - padding-left: 1.5rem; - } - - li { - margin-bottom: 0.5rem; - line-height: 1.6; - - &::marker { - color: $vllm-blue; - } - } - - // Horizontal rule - hr { - border: none; - height: 1px; - background: linear-gradient(90deg, transparent, rgba($vllm-blue, 0.3), transparent); - margin: 2.5rem 0; - } -} - -// Post Footer -.post-footer { - margin-top: 3rem; - padding-top: 1.5rem; - border-top: 1px solid rgba($vllm-blue, 0.15); -} - -// ============================================ -// SITE HEADER ADJUSTMENTS -// ============================================ - -.site-header { - border-bottom-color: rgba($vllm-blue, 0.15); -} - -.site-title { - font-weight: 700; - letter-spacing: -0.01em; - - &:hover { - text-decoration: none; - opacity: 0.8; - } -} - -// ============================================ -// SITE FOOTER ADJUSTMENTS -// ============================================ - -.site-footer { - border-top: 1px solid rgba($vllm-blue, 0.15); -} - -// ============================================ -// ADMONITIONS (GitHub-style notes/warnings) -// ============================================ - -.markdown-alert { - padding: 1rem 1.25rem; - margin: 1.5rem 0; - border-radius: 6px; - border-left: 3px solid; - - .markdown-alert-title { - font-weight: 600; - margin-bottom: 0.5rem; - display: flex; - align-items: center; - gap: 0.5rem; - } - - p:last-child { - margin-bottom: 0; - } -} - -.markdown-alert-note { - background: rgba($vllm-blue, 0.08); - border-color: $vllm-blue; - - .markdown-alert-title { - color: $vllm-blue-dark; - - @media (prefers-color-scheme: dark) { - color: $vllm-blue; - } - } -} - -.markdown-alert-warning { - background: rgba($vllm-amber, 0.08); - border-color: $vllm-amber; - - .markdown-alert-title { - color: $vllm-amber-dark; - - @media (prefers-color-scheme: dark) { - color: $vllm-amber; - } - } -} - -// ============================================ -// RESPONSIVE ADJUSTMENTS -// ============================================ - -@media (max-width: 600px) { - .post-grid { - grid-template-columns: 1fr; - } - - .home-title { - font-size: 2rem; - } - - .post-content { - font-size: 1rem; - } -} +// Custom styles are in /assets/css/custom.css +// This file is kept for minima theme compatibility diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..683af47 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,531 @@ +/* vLLM Blog Custom Styles */ + +:root { + --vllm-amber: #E5A733; + --vllm-blue: #6FA8DC; + --vllm-amber-dark: #C48F2A; + --vllm-blue-dark: #4A7DAD; + --bg-light: #fdfdfd; + --bg-dark: #1a1a2e; + --text-light: #111; + --text-dark: #e0e0e0; + --border-light: rgba(0,0,0,0.08); + --border-dark: rgba(255,255,255,0.1); +} + +/* ============================================ + HOME PAGE STYLES + ============================================ */ + +.home { + max-width: 1100px; + margin: 0 auto; + padding: 0 20px; +} + +.home-header { + text-align: center; + padding: 40px 0 48px; + margin-bottom: 40px; + border-bottom: 2px solid var(--vllm-blue); + background: linear-gradient(180deg, transparent 0%, rgba(111, 168, 220, 0.03) 100%); +} + +.home-title { + font-size: 2.5rem; + font-weight: 700; + margin: 0 0 12px; + letter-spacing: -0.03em; +} + +.home-description { + font-size: 1.1rem; + opacity: 0.7; + max-width: 500px; + margin: 0 auto; + line-height: 1.5; +} + +/* Post Grid */ +.post-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 24px; + padding-bottom: 60px; +} + +/* Post Card */ +.post-card { + background: #fff; + border-radius: 12px; + overflow: hidden; + border: 1px solid var(--border-light); + transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +.post-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); + border-color: var(--vllm-blue); +} + +.post-card-link { + display: block; + text-decoration: none; + color: inherit; +} + +.post-card-image { + aspect-ratio: 16 / 9; + overflow: hidden; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + position: relative; +} + +.post-card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.post-card:hover .post-card-image img { + transform: scale(1.05); +} + +.post-card-image-placeholder { + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, rgba(229, 167, 51, 0.08) 0%, rgba(111, 168, 220, 0.12) 100%); +} + +.post-card-image-placeholder svg { + width: 80px; + height: 64px; + opacity: 0.5; +} + +.post-card-content { + padding: 20px; +} + +.post-card-title { + font-size: 1.1rem; + font-weight: 600; + line-height: 1.4; + margin: 0 0 12px; + color: #1a1a1a; + letter-spacing: -0.01em; +} + +.post-card:hover .post-card-title { + color: var(--vllm-blue-dark); +} + +.post-card-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + font-size: 0.8rem; + color: #666; + margin-bottom: 10px; + gap: 4px; +} + +.post-card-author::after { + content: "·"; + margin-left: 6px; +} + +.post-card-excerpt { + font-size: 0.875rem; + line-height: 1.55; + color: #555; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* ============================================ + POST PAGE STYLES + ============================================ */ + +.post { + max-width: 760px; + margin: 0 auto; + padding: 0 20px; +} + +.post-header { + padding: 32px 0 24px; + margin-bottom: 32px; + border-bottom: 1px solid #e5e5e5; + position: relative; +} + +.post-header::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--vllm-amber) 0%, var(--vllm-blue) 100%); + border-radius: 2px; +} + +.post-title { + font-size: 2.25rem; + font-weight: 700; + line-height: 1.2; + margin: 0 0 16px; + letter-spacing: -0.02em; + color: #111; +} + +.post-meta { + font-size: 0.95rem; + color: #666; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; +} + +.post-meta-sep { + color: #999; +} + +.post-author { + font-weight: 500; + color: #444; +} + +/* Post Content */ +.post-content { + font-size: 1.0625rem; + line-height: 1.8; + color: #333; +} + +.post-content h1, +.post-content h2, +.post-content h3, +.post-content h4 { + margin-top: 2.5rem; + margin-bottom: 1rem; + font-weight: 600; + color: #111; + letter-spacing: -0.01em; +} + +.post-content h2 { + font-size: 1.5rem; + padding-bottom: 8px; + border-bottom: 2px solid var(--vllm-blue); +} + +.post-content h3 { + font-size: 1.25rem; +} + +.post-content p { + margin-bottom: 1.25rem; +} + +.post-content a { + color: var(--vllm-blue-dark); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 3px; + transition: color 0.15s ease; +} + +.post-content a:hover { + color: var(--vllm-amber-dark); +} + +/* Code */ +.post-content code { + font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; + font-size: 0.875em; + background: rgba(111, 168, 220, 0.1); + padding: 2px 6px; + border-radius: 4px; +} + +.post-content pre { + background: #1e1e2e; + color: #cdd6f4; + padding: 20px 24px; + border-radius: 10px; + overflow-x: auto; + margin: 24px 0; + border-left: 4px solid var(--vllm-blue); + font-size: 0.875rem; + line-height: 1.6; +} + +.post-content pre code { + background: none; + padding: 0; + color: inherit; + font-size: inherit; +} + +/* Blockquotes */ +.post-content blockquote { + margin: 24px 0; + padding: 16px 24px; + border-left: 4px solid var(--vllm-amber); + background: rgba(229, 167, 51, 0.06); + border-radius: 0 8px 8px 0; + font-style: italic; + color: #555; +} + +.post-content blockquote p:last-child { + margin-bottom: 0; +} + +/* Images */ +.post-content img { + max-width: 100%; + height: auto; + border-radius: 8px; + margin: 24px 0; +} + +/* Tables */ +.post-content table { + width: 100%; + border-collapse: collapse; + margin: 24px 0; + font-size: 0.9375rem; +} + +.post-content th, +.post-content td { + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid #e5e5e5; +} + +.post-content th { + font-weight: 600; + background: rgba(111, 168, 220, 0.08); + color: #333; +} + +.post-content tr:hover td { + background: rgba(229, 167, 51, 0.04); +} + +/* Lists */ +.post-content ul, +.post-content ol { + margin: 16px 0 20px; + padding-left: 24px; +} + +.post-content li { + margin-bottom: 8px; + line-height: 1.6; +} + +.post-content li::marker { + color: var(--vllm-blue); +} + +/* Horizontal rule */ +.post-content hr { + border: none; + height: 2px; + background: linear-gradient(90deg, transparent, var(--vllm-blue), transparent); + margin: 48px 0; +} + +/* Post Footer */ +.post-footer { + margin-top: 48px; + padding-top: 24px; + border-top: 1px solid #e5e5e5; +} + +/* ============================================ + HEADER & FOOTER + ============================================ */ + +.site-header { + border-top: 3px solid var(--vllm-blue) !important; + border-bottom: 1px solid #e5e5e5 !important; +} + +.site-title { + font-weight: 700 !important; + letter-spacing: -0.01em; +} + +.site-footer { + border-top: 1px solid #e5e5e5; + background: #fafafa; +} + +/* ============================================ + ADMONITIONS + ============================================ */ + +.markdown-alert { + padding: 16px 20px; + margin: 24px 0; + border-radius: 8px; + border-left: 4px solid; +} + +.markdown-alert-title { + font-weight: 600; + margin-bottom: 8px; + display: flex; + align-items: center; + gap: 8px; +} + +.markdown-alert p:last-child { + margin-bottom: 0; +} + +.markdown-alert-note { + background: rgba(111, 168, 220, 0.1); + border-color: var(--vllm-blue); +} + +.markdown-alert-note .markdown-alert-title { + color: var(--vllm-blue-dark); +} + +.markdown-alert-warning { + background: rgba(229, 167, 51, 0.1); + border-color: var(--vllm-amber); +} + +.markdown-alert-warning .markdown-alert-title { + color: var(--vllm-amber-dark); +} + +/* ============================================ + DARK MODE + ============================================ */ + +@media (prefers-color-scheme: dark) { + .post-card { + background: #252536; + border-color: var(--border-dark); + } + + .post-card:hover { + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); + } + + .post-card-title { + color: #e8e8e8; + } + + .post-card-meta { + color: #999; + } + + .post-card-excerpt { + color: #aaa; + } + + .post-card-image { + background: linear-gradient(135deg, #2a2a3d 0%, #1e1e2e 100%); + } + + .post-title { + color: #f0f0f0; + } + + .post-meta { + color: #999; + } + + .post-author { + color: #bbb; + } + + .post-content { + color: #d0d0d0; + } + + .post-content h1, + .post-content h2, + .post-content h3, + .post-content h4 { + color: #f0f0f0; + } + + .post-content a { + color: var(--vllm-blue); + } + + .post-content a:hover { + color: var(--vllm-amber); + } + + .post-content code { + background: rgba(111, 168, 220, 0.15); + } + + .post-content blockquote { + background: rgba(229, 167, 51, 0.1); + color: #bbb; + } + + .post-content th, + .post-content td { + border-color: #3a3a4a; + } + + .post-content th { + background: rgba(111, 168, 220, 0.12); + color: #e0e0e0; + } + + .home-header { + background: linear-gradient(180deg, transparent 0%, rgba(111, 168, 220, 0.05) 100%); + } + + .site-footer { + background: #1a1a2e; + } + + .post-header { + border-color: #3a3a4a; + } +} + +/* ============================================ + RESPONSIVE + ============================================ */ + +@media (max-width: 768px) { + .post-grid { + grid-template-columns: 1fr; + } + + .home-title { + font-size: 2rem; + } + + .post-title { + font-size: 1.75rem; + } + + .post-content { + font-size: 1rem; + } +} From ffd2af77fff05ec56e90e16d270299a603b333f4 Mon Sep 17 00:00:00 2001 From: mgoin Date: Tue, 25 Nov 2025 16:35:48 -0500 Subject: [PATCH 3/3] Custom theme Signed-off-by: mgoin --- _config.yml | 60 +--- _includes/custom-head.html | 17 +- _layouts/default.html | 49 +++ _layouts/home.html | 46 ++- _layouts/post.html | 25 +- _sass/minima/custom-styles.scss | 2 - assets/css/{custom.css => style.css} | 505 ++++++++++++++++----------- 7 files changed, 391 insertions(+), 313 deletions(-) create mode 100644 _layouts/default.html delete mode 100644 _sass/minima/custom-styles.scss rename assets/css/{custom.css => style.css} (52%) diff --git a/_config.yml b/_config.yml index 7c6f808..fd45ff0 100644 --- a/_config.yml +++ b/_config.yml @@ -5,64 +5,26 @@ google_analytics: G-9C5R3JR3QS url: https://blog.vllm.ai logo: /assets/logos/vllm-logo-only-light.png -# The `>` after `description:` means to ignore line-breaks until next key. -# If you want to omit the line-break after the end of text, use `>-` instead. description: > vLLM is a fast and easy-to-use library for LLM inference and serving. # Build settings - -remote_theme: jekyll/minima@5ce4006d175e6e5278bb63a0aad1a85e3bf2370b - plugins: - jekyll-feed - jekyll-seo-tag - jekyll-gfm-admonitions -# Theme-specific settings - -minima: - skin: auto - - # Minima date format. - # Refer to https://shopify.github.io/liquid/filters/date/ if you want to customize this. - # - # date_format: "%b %-d, %Y" - - # Generate social links in footer. - # - social_links: - - title: vLLM repository on GitHub - icon: github - url: "https://github.com/vllm-project/vllm" - - title: vLLM on X (formerly Twitter) - icon: x-twitter - url: "https://x.com/vllm_project" - - title: vLLM on LinkedIn - icon: linkedin - url: "https://www.linkedin.com/company/vllm-project" - # - { platform: devto, user_url: "https://dev.to/jekyll" } - # - { platform: dribbble, user_url: "https://dribbble.com/jekyll" } - # - { platform: facebook, user_url: "https://www.facebook.com/jekyll" } - # - { platform: flickr, user_url: "https://www.flickr.com/photos/jekyll" } - # - { platform: google_scholar, user_url: "https://scholar.google.com/citations?user=qc6CJjYAAAAJ" } - # - { platform: instagram, user_url: "https://www.instagram.com/jekyll" } - # - { platform: keybase, user_url: "https://keybase.io/jekyll" } - # - { platform: microdotblog, user_url: "https://micro.blog/jekyll" } - # - { platform: pinterest, user_url: "https://www.pinterest.com/jekyll" } - # - { platform: stackoverflow, user_url: "https://stackoverflow.com/users/1234567/jekyll" } - # - { platform: telegram, user_url: "https://t.me/jekyll" } - # - { platform: twitter, user_url: "https://twitter.com/jekyllrb" } - # - { platform: youtube, user_url: "https://www.youtube.com/jekyll" } - -# If you want to link only specific pages in your header, uncomment this and add the path to the pages in -# order as they should show up. -# -header_pages: - - index.md - -# Show excerpts on the homepage -show_excerpts: true +# Social links for footer +social_links: + - title: GitHub + url: "https://github.com/vllm-project/vllm" + icon: github + - title: X + url: "https://x.com/vllm_project" + icon: x + - title: LinkedIn + url: "https://www.linkedin.com/company/vllm-project" + icon: linkedin # Excerpt settings excerpt_separator: diff --git a/_includes/custom-head.html b/_includes/custom-head.html index 28b74bf..70ca0a5 100644 --- a/_includes/custom-head.html +++ b/_includes/custom-head.html @@ -1,14 +1,11 @@ - - {% if page.math %} - + {% endif %} diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..5b8fc4e --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,49 @@ + + + + + + {% seo %} + + + {% if site.google_analytics %} + + + {% endif %} + {% include custom-head.html %} + + +
+
+ + +
+
+ +
+ {{ content }} +
+ +
+
+
+ {% for link in site.social_links %} + {{ link.title }} + {% endfor %} +
+

{{ site.author.name }}

+
+
+ + diff --git a/_layouts/home.html b/_layouts/home.html index 9682805..4fdba5a 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -4,42 +4,38 @@
-

{{ site.title | escape }}

-

{{ site.description | escape }}

+

{{ site.title }}

+

{{ site.description }}

- {%- if site.posts.size > 0 -%} + {% if site.posts.size > 0 %}
- {%- for post in site.posts -%} + {% for post in site.posts %}
-
- {%- if post.image -%} +
+ {% if post.image %} - {%- else -%} - - - + {% else %} + + + - {%- endif -%} + {% endif %}
-
+

{{ post.title | escape }}

-
- {%- if post.author -%} - {{ post.author }} - {%- endif -%} - -
- {%- if post.excerpt -%} -

{{ post.excerpt | strip_html | truncatewords: 25 }}

- {%- endif -%} +

+ {% if post.author %}{{ post.author }}{% endif %} + +

+ {% if post.excerpt %} +

{{ post.excerpt | strip_html | truncatewords: 24 }}

+ {% endif %}
- {%- endfor -%} + {% endfor %}
- {%- endif -%} + {% endif %}
diff --git a/_layouts/post.html b/_layouts/post.html index 782fa3e..fc7b38d 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,27 +2,16 @@ layout: default --- -
+
-

{{ page.title | escape }}

-
- {%- if page.author -%} - - · - {%- endif -%} - -
+

{{ page.title | escape }}

+

+ {% if page.author %}{{ page.author }} · {% endif %} + +

-
+
{{ content }}
- -
diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss deleted file mode 100644 index 5ec7bdf..0000000 --- a/_sass/minima/custom-styles.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Custom styles are in /assets/css/custom.css -// This file is kept for minima theme compatibility diff --git a/assets/css/custom.css b/assets/css/style.css similarity index 52% rename from assets/css/custom.css rename to assets/css/style.css index 683af47..0bef048 100644 --- a/assets/css/custom.css +++ b/assets/css/style.css @@ -1,49 +1,168 @@ -/* vLLM Blog Custom Styles */ +--- +--- +/* vLLM Blog - Clean Themeless Styles */ :root { --vllm-amber: #E5A733; --vllm-blue: #6FA8DC; --vllm-amber-dark: #C48F2A; --vllm-blue-dark: #4A7DAD; - --bg-light: #fdfdfd; - --bg-dark: #1a1a2e; - --text-light: #111; - --text-dark: #e0e0e0; - --border-light: rgba(0,0,0,0.08); - --border-dark: rgba(255,255,255,0.1); + + --text: #1a1a1a; + --text-secondary: #555; + --text-muted: #777; + --bg: #fff; + --bg-secondary: #f8f9fa; + --border: #e5e5e5; + --code-bg: #1e1e2e; + --code-text: #cdd6f4; +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #e8e8e8; + --text-secondary: #b0b0b0; + --text-muted: #888; + --bg: #0d1117; + --bg-secondary: #161b22; + --border: #30363d; + } +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + line-height: 1.6; + color: var(--text); + background: var(--bg); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +a { + color: var(--vllm-blue-dark); + text-decoration: none; +} + +a:hover { + color: var(--vllm-amber-dark); +} + +@media (prefers-color-scheme: dark) { + a { color: var(--vllm-blue); } + a:hover { color: var(--vllm-amber); } +} + +img { + max-width: 100%; + height: auto; } /* ============================================ - HOME PAGE STYLES + SITE HEADER + ============================================ */ + +.site-header { + border-top: 3px solid var(--vllm-blue); + border-bottom: 1px solid var(--border); + padding: 16px 24px; + background: var(--bg); + position: sticky; + top: 0; + z-index: 100; +} + +.header-content { + max-width: 1100px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.site-logo { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; +} + +.site-logo img { + width: 36px; + height: 36px; +} + +.site-title { + font-size: 1.25rem; + font-weight: 700; + color: var(--text); + letter-spacing: -0.02em; +} + +.site-nav { + display: flex; + gap: 24px; +} + +.site-nav a { + font-size: 0.9rem; + font-weight: 500; + color: var(--text-secondary); +} + +.site-nav a:hover { + color: var(--vllm-blue); +} + +/* ============================================ + MAIN CONTENT + ============================================ */ + +.site-main { + flex: 1; + padding: 0 24px; +} + +/* ============================================ + HOME PAGE ============================================ */ .home { max-width: 1100px; margin: 0 auto; - padding: 0 20px; } .home-header { text-align: center; - padding: 40px 0 48px; - margin-bottom: 40px; + padding: 48px 0; border-bottom: 2px solid var(--vllm-blue); - background: linear-gradient(180deg, transparent 0%, rgba(111, 168, 220, 0.03) 100%); + margin-bottom: 40px; } .home-title { font-size: 2.5rem; font-weight: 700; - margin: 0 0 12px; letter-spacing: -0.03em; + margin-bottom: 12px; } .home-description { font-size: 1.1rem; - opacity: 0.7; - max-width: 500px; + color: var(--text-secondary); + max-width: 480px; margin: 0 auto; - line-height: 1.5; } /* Post Grid */ @@ -54,95 +173,97 @@ padding-bottom: 60px; } -/* Post Card */ .post-card { - background: #fff; - border-radius: 12px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: 10px; overflow: hidden; - border: 1px solid var(--border-light); - transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; + transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .post-card:hover { - transform: translateY(-4px); - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: var(--vllm-blue); } +@media (prefers-color-scheme: dark) { + .post-card:hover { + box-shadow: 0 8px 24px rgba(0,0,0,0.3); + } +} + .post-card-link { display: block; - text-decoration: none; color: inherit; } .post-card-image { aspect-ratio: 16 / 9; overflow: hidden; - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - position: relative; + background: var(--bg-secondary); } .post-card-image img { width: 100%; height: 100%; object-fit: cover; - transition: transform 0.3s ease; + transition: transform 0.2s ease; } .post-card:hover .post-card-image img { - transform: scale(1.05); + transform: scale(1.03); } -.post-card-image-placeholder { +.post-card-placeholder { display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, rgba(229, 167, 51, 0.08) 0%, rgba(111, 168, 220, 0.12) 100%); + background: linear-gradient(135deg, rgba(229,167,51,0.1), rgba(111,168,220,0.15)); } -.post-card-image-placeholder svg { - width: 80px; - height: 64px; - opacity: 0.5; +.post-card-placeholder svg { + width: 64px; + height: 52px; + opacity: 0.6; } -.post-card-content { +.post-card-body { padding: 20px; } .post-card-title { font-size: 1.1rem; font-weight: 600; - line-height: 1.4; - margin: 0 0 12px; - color: #1a1a1a; - letter-spacing: -0.01em; + line-height: 1.35; + margin-bottom: 8px; + color: var(--text); } .post-card:hover .post-card-title { color: var(--vllm-blue-dark); } +@media (prefers-color-scheme: dark) { + .post-card:hover .post-card-title { + color: var(--vllm-blue); + } +} + .post-card-meta { - display: flex; - flex-wrap: wrap; - align-items: center; font-size: 0.8rem; - color: #666; + color: var(--text-muted); margin-bottom: 10px; - gap: 4px; } .post-card-author::after { - content: "·"; - margin-left: 6px; + content: " · "; } .post-card-excerpt { font-size: 0.875rem; - line-height: 1.55; - color: #555; - margin: 0; + color: var(--text-secondary); + line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -150,76 +271,64 @@ } /* ============================================ - POST PAGE STYLES + POST PAGE ============================================ */ .post { - max-width: 760px; + max-width: 720px; margin: 0 auto; - padding: 0 20px; + padding: 40px 0 80px; } .post-header { - padding: 32px 0 24px; margin-bottom: 32px; - border-bottom: 1px solid #e5e5e5; + padding-bottom: 24px; + border-bottom: 1px solid var(--border); position: relative; } .post-header::before { content: ""; position: absolute; - top: 0; + top: -40px; left: 0; right: 0; height: 4px; - background: linear-gradient(90deg, var(--vllm-amber) 0%, var(--vllm-blue) 100%); + background: linear-gradient(90deg, var(--vllm-amber), var(--vllm-blue)); border-radius: 2px; } .post-title { - font-size: 2.25rem; + font-size: 2rem; font-weight: 700; - line-height: 1.2; - margin: 0 0 16px; + line-height: 1.25; letter-spacing: -0.02em; - color: #111; + margin-bottom: 12px; } .post-meta { + color: var(--text-muted); font-size: 0.95rem; - color: #666; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; -} - -.post-meta-sep { - color: #999; } .post-author { + color: var(--text-secondary); font-weight: 500; - color: #444; } /* Post Content */ .post-content { font-size: 1.0625rem; line-height: 1.8; - color: #333; } -.post-content h1, .post-content h2, .post-content h3, .post-content h4 { - margin-top: 2.5rem; - margin-bottom: 1rem; font-weight: 600; - color: #111; letter-spacing: -0.01em; + margin-top: 2.5rem; + margin-bottom: 1rem; } .post-content h2 { @@ -232,36 +341,39 @@ font-size: 1.25rem; } +.post-content h4 { + font-size: 1.1rem; +} + .post-content p { margin-bottom: 1.25rem; } .post-content a { - color: var(--vllm-blue-dark); text-decoration: underline; - text-decoration-thickness: 1px; - text-underline-offset: 3px; - transition: color 0.15s ease; -} - -.post-content a:hover { - color: var(--vllm-amber-dark); + text-underline-offset: 2px; } /* Code */ .post-content code { - font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; + font-family: "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 0.875em; - background: rgba(111, 168, 220, 0.1); + background: rgba(111,168,220,0.12); padding: 2px 6px; border-radius: 4px; } +@media (prefers-color-scheme: dark) { + .post-content code { + background: rgba(111,168,220,0.2); + } +} + .post-content pre { - background: #1e1e2e; - color: #cdd6f4; + background: var(--code-bg); + color: var(--code-text); padding: 20px 24px; - border-radius: 10px; + border-radius: 8px; overflow-x: auto; margin: 24px 0; border-left: 4px solid var(--vllm-blue); @@ -279,12 +391,10 @@ /* Blockquotes */ .post-content blockquote { margin: 24px 0; - padding: 16px 24px; + padding: 16px 20px; border-left: 4px solid var(--vllm-amber); - background: rgba(229, 167, 51, 0.06); - border-radius: 0 8px 8px 0; - font-style: italic; - color: #555; + background: rgba(229,167,51,0.08); + border-radius: 0 6px 6px 0; } .post-content blockquote p:last-child { @@ -293,12 +403,14 @@ /* Images */ .post-content img { - max-width: 100%; - height: auto; - border-radius: 8px; + border-radius: 6px; margin: 24px 0; } +.post-content p img { + margin: 0; +} + /* Tables */ .post-content table { width: 100%; @@ -311,17 +423,18 @@ .post-content td { padding: 12px 16px; text-align: left; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid var(--border); } .post-content th { font-weight: 600; - background: rgba(111, 168, 220, 0.08); - color: #333; + background: rgba(111,168,220,0.08); } -.post-content tr:hover td { - background: rgba(229, 167, 51, 0.04); +@media (prefers-color-scheme: dark) { + .post-content th { + background: rgba(111,168,220,0.12); + } } /* Lists */ @@ -333,7 +446,6 @@ .post-content li { margin-bottom: 8px; - line-height: 1.6; } .post-content li::marker { @@ -348,40 +460,14 @@ margin: 48px 0; } -/* Post Footer */ -.post-footer { - margin-top: 48px; - padding-top: 24px; - border-top: 1px solid #e5e5e5; -} - /* ============================================ - HEADER & FOOTER - ============================================ */ - -.site-header { - border-top: 3px solid var(--vllm-blue) !important; - border-bottom: 1px solid #e5e5e5 !important; -} - -.site-title { - font-weight: 700 !important; - letter-spacing: -0.01em; -} - -.site-footer { - border-top: 1px solid #e5e5e5; - background: #fafafa; -} - -/* ============================================ - ADMONITIONS + ADMONITIONS (GitHub-style notes/warnings) ============================================ */ .markdown-alert { padding: 16px 20px; margin: 24px 0; - border-radius: 8px; + border-radius: 6px; border-left: 4px solid; } @@ -390,7 +476,7 @@ margin-bottom: 8px; display: flex; align-items: center; - gap: 8px; + gap: 6px; } .markdown-alert p:last-child { @@ -398,7 +484,7 @@ } .markdown-alert-note { - background: rgba(111, 168, 220, 0.1); + background: rgba(111,168,220,0.1); border-color: var(--vllm-blue); } @@ -406,8 +492,14 @@ color: var(--vllm-blue-dark); } +@media (prefers-color-scheme: dark) { + .markdown-alert-note .markdown-alert-title { + color: var(--vllm-blue); + } +} + .markdown-alert-warning { - background: rgba(229, 167, 51, 0.1); + background: rgba(229,167,51,0.1); border-color: var(--vllm-amber); } @@ -415,117 +507,112 @@ color: var(--vllm-amber-dark); } -/* ============================================ - DARK MODE - ============================================ */ - @media (prefers-color-scheme: dark) { - .post-card { - background: #252536; - border-color: var(--border-dark); - } - - .post-card:hover { - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); - } - - .post-card-title { - color: #e8e8e8; + .markdown-alert-warning .markdown-alert-title { + color: var(--vllm-amber); } +} - .post-card-meta { - color: #999; - } +.markdown-alert-tip { + background: rgba(46,160,67,0.1); + border-color: #2ea043; +} - .post-card-excerpt { - color: #aaa; - } +.markdown-alert-important { + background: rgba(130,80,223,0.1); + border-color: #8250df; +} - .post-card-image { - background: linear-gradient(135deg, #2a2a3d 0%, #1e1e2e 100%); - } +.markdown-alert-caution { + background: rgba(218,54,51,0.1); + border-color: #da3633; +} - .post-title { - color: #f0f0f0; - } +/* ============================================ + FOOTER + ============================================ */ - .post-meta { - color: #999; - } +.site-footer { + border-top: 1px solid var(--border); + padding: 32px 24px; + background: var(--bg-secondary); + margin-top: auto; +} - .post-author { - color: #bbb; - } +.footer-content { + max-width: 1100px; + margin: 0 auto; + text-align: center; +} - .post-content { - color: #d0d0d0; - } +.footer-links { + display: flex; + justify-content: center; + gap: 24px; + margin-bottom: 16px; +} - .post-content h1, - .post-content h2, - .post-content h3, - .post-content h4 { - color: #f0f0f0; - } +.footer-links a { + font-size: 0.9rem; + color: var(--text-secondary); +} - .post-content a { - color: var(--vllm-blue); - } +.footer-links a:hover { + color: var(--vllm-blue); +} - .post-content a:hover { - color: var(--vllm-amber); - } +.footer-copyright { + font-size: 0.85rem; + color: var(--text-muted); +} - .post-content code { - background: rgba(111, 168, 220, 0.15); - } +/* ============================================ + RESPONSIVE + ============================================ */ - .post-content blockquote { - background: rgba(229, 167, 51, 0.1); - color: #bbb; +@media (max-width: 768px) { + .site-header { + padding: 12px 16px; } - .post-content th, - .post-content td { - border-color: #3a3a4a; + .site-nav { + gap: 16px; } - .post-content th { - background: rgba(111, 168, 220, 0.12); - color: #e0e0e0; + .site-main { + padding: 0 16px; } .home-header { - background: linear-gradient(180deg, transparent 0%, rgba(111, 168, 220, 0.05) 100%); + padding: 32px 0; } - .site-footer { - background: #1a1a2e; - } - - .post-header { - border-color: #3a3a4a; + .home-title { + font-size: 2rem; } -} -/* ============================================ - RESPONSIVE - ============================================ */ - -@media (max-width: 768px) { .post-grid { grid-template-columns: 1fr; } - .home-title { - font-size: 2rem; + .post { + padding: 24px 0 60px; } .post-title { - font-size: 1.75rem; + font-size: 1.6rem; + } + + .post-header::before { + top: -24px; } .post-content { font-size: 1rem; } + + .footer-links { + flex-wrap: wrap; + gap: 16px; + } }