Created
November 26, 2025 01:52
-
-
Save qzi/02cc3f84889fb49bd510e7ab13ac27f5 to your computer and use it in GitHub Desktop.
styles.styl for Hexo Next
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Custom Styles for Hexo NexT */ | |
| /* Image Alignment: Mobile Center, Desktop Left */ | |
| .post-body img { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* Desktop (min-width 768px is standard for tablets/desktop in NexT) */ | |
| @media (min-width: 768px) { | |
| .post-body img { | |
| margin-left: 0; | |
| margin-right: auto; | |
| } | |
| } | |
| /* Mermaid Diagram Alignment: Mobile Center, Desktop Left */ | |
| .post-body .mermaid { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| text-align: center; | |
| } | |
| /* Desktop (min-width 768px) */ | |
| @media (min-width: 768px) { | |
| .post-body .mermaid { | |
| margin-left: 0; | |
| margin-right: auto; | |
| text-align: left; | |
| } | |
| } | |
| /* Vercel-like List Styling (Geist Design inspired) */ | |
| /* Matches the screenshot: Grey bullets, underlined links with offset, clean spacing. */ | |
| .post-body ul { | |
| list-style-type: disc; | |
| padding-left: 1.5em; | |
| margin-bottom: 1.5em; | |
| } | |
| .post-body ol { | |
| padding-left: 1.5em; | |
| margin-bottom: 1.5em; | |
| } | |
| /* Style the bullets (markers) to be light grey like Vercel docs */ | |
| .post-body ul li::marker { | |
| color: #a1a1a1; | |
| font-size: 1em; | |
| } | |
| .post-body li { | |
| margin-bottom: 0.5em; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| position: relative; | |
| } | |
| /* Link Styling in Lists */ | |
| /* The key Vercel look: Underlined with offset, grey underline by default, blue on hover. */ | |
| .post-body li a { | |
| color: inherit; | |
| text-decoration: underline; | |
| text-decoration-color: #e1e1e1; | |
| /* Very subtle grey underline initially */ | |
| text-underline-offset: 4px; | |
| /* The signature offset */ | |
| text-decoration-thickness: 1px; | |
| transition: all 0.2s ease; | |
| } | |
| .post-body li a:hover { | |
| color: #0070f3; | |
| /* Vercel Blue */ | |
| text-decoration-color: #0070f3; | |
| background-color: rgba(0, 112, 243, 0.05); | |
| /* Subtle background highlight on hover */ | |
| border-radius: 3px; | |
| } | |
| /* Ensure bold text inside links inherits the style correctly */ | |
| .post-body li a strong { | |
| color: inherit; | |
| text-decoration: inherit; | |
| } | |
| /* Remove default margin for paragraphs inside lists */ | |
| .post-body li p { | |
| margin: 0; | |
| display: inline; | |
| } | |
| /* Nested lists spacing */ | |
| .post-body ul ul, | |
| .post-body ol ul, | |
| .post-body ul ol, | |
| .post-body ol ol { | |
| margin-top: 0.5em; | |
| margin-bottom: 0.5em; | |
| } | |
| /* Custom Scrollbar Styling for Code Blocks */ | |
| /* Notion-style: Hide scrollbar completely (like Notion does) */ | |
| /* Base settings - all code blocks scrollable */ | |
| .post-body pre, | |
| .post-body code, | |
| .highlight, | |
| figure.highlight, | |
| .highlight table { | |
| overflow-x: auto; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; | |
| /* Hide scrollbar completely for all browsers */ | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| &::-webkit-scrollbar { | |
| display: none !important; | |
| width: 0 !important; | |
| height: 0 !important; | |
| } | |
| } | |
| /* disable scrollbar for table-container */ | |
| .table-container { | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| &::-webkit-scrollbar { | |
| display: none; | |
| } | |
| } | |
| /* Ensure table triggers horizontal scroll */ | |
| figure.highlight table { | |
| display: table; | |
| width: max-content; | |
| min-width: 100%; | |
| } | |
| figure.highlight .gutter { | |
| width: 2.5em; | |
| } | |
| /* Safari-specific: Use thin scrollbar for table-container */ | |
| @supports (-webkit-hyphens:none) { | |
| .table-container { | |
| scrollbar-width: none; | |
| } | |
| } | |
| /* Dark mode */ | |
| @media (prefers-color-scheme: dark) { | |
| .post-body pre::-webkit-scrollbar-track, | |
| .post-body code::-webkit-scrollbar-track, | |
| .highlight::-webkit-scrollbar-track, | |
| figure.highlight::-webkit-scrollbar-track, | |
| .highlight table::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .post-body pre::-webkit-scrollbar-thumb, | |
| .post-body code::-webkit-scrollbar-thumb, | |
| .highlight::-webkit-scrollbar-thumb, | |
| figure.highlight::-webkit-scrollbar-thumb, | |
| .highlight table::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| .post-body pre::-webkit-scrollbar-thumb:hover, | |
| .post-body code::-webkit-scrollbar-thumb:hover, | |
| .highlight::-webkit-scrollbar-thumb:hover, | |
| figure.highlight::-webkit-scrollbar-thumb:hover, | |
| .highlight table::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .post-body pre, | |
| .post-body code, | |
| .highlight, | |
| figure.highlight, | |
| .highlight table { | |
| scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05); | |
| } | |
| } | |
| /* Table Styling: Prevent tables from being too wide on desktop */ | |
| /* Exclude tables inside code blocks */ | |
| .post-body table:not(.highlight table):not(pre table) { | |
| max-width: 100%; | |
| margin: 1.5em 0; | |
| display: table; | |
| /* Default table display */ | |
| } | |
| /* Mobile: Enable horizontal scrolling */ | |
| @media (max-width: 767px) { | |
| .post-body table:not(.highlight table):not(pre table) { | |
| display: block; | |
| overflow-x: auto; | |
| } | |
| } | |
| /* Desktop: Limit table width based on content */ | |
| @media (min-width: 768px) { | |
| .post-body table:not(.highlight table):not(pre table) { | |
| width: auto; | |
| /* Allow table to size based on content */ | |
| max-width: 700px; | |
| /* But don't exceed this width */ | |
| } | |
| } | |
| /* Softer border colors for better integration with background */ | |
| .post-body table:not(.highlight table):not(pre table) th, | |
| .post-body table:not(.highlight table):not(pre table) td { | |
| border: 1px solid rgba(0, 0, 0, 0.08); | |
| /* Very subtle border */ | |
| padding: 0.5em 1.2em; | |
| /* Increased horizontal padding for better spacing */ | |
| } | |
| /* Dark mode support */ | |
| @media (prefers-color-scheme: dark) { | |
| .post-body table:not(.highlight table):not(pre table) th, | |
| .post-body table:not(.highlight table):not(pre table) td { | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| /* Subtle border for dark mode */ | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment