that immediately follows it.
* Using "!important" is a good practice here to ensure we override any
* inline styles or plugin styles.
*/
/* .math-captcha-form br,
.math-captcha-form br + span {
display: none !important;
} */
/* ===================================================================
8. Social Share Icons Styling
=================================================================== */
/* --- Floating Sidebar Icons --- */
.hg-floating-share {
/* Existing styles from before */
display: none;
}
@media (min-width: 1024px) {
.hg-floating-share {
display: flex;
flex-direction: column;
gap: 1rem;
position: sticky;
top: 120px;
align-self: start;
}
}
.hg-share-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: #fff;
text-decoration: none;
font-size: 1.2rem;
transition: all 0.2s ease;
}
.hg-share-link:hover {
transform: scale(1.15) rotate(5deg);
box-shadow: var(--hg-shadow-md);
color: #fff;
}
/* Social Brand Colors */
.hg-share-twitter {
background-color: #1da1f2;
}
.hg-share-facebook {
background-color: #1877f2;
}
.hg-share-linkedin {
background-color: #0a66c2;
}
/* --- Inline Share Buttons --- */
.hg-inline-share {
text-align: center;
margin: 3rem 0;
border-bottom: 1px solid #eef;
padding-bottom: 2rem;
}
.hg-inline-share-wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1.5rem;
}
.hg-inline-share-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
border-radius: 50px; /* Pill shape */
color: #fff;
font-family: var(--font-heading);
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.hg-inline-share-button:hover {
transform: translateY(-3px);
box-shadow: var(--hg-shadow-lg);
color: #fff;
}
.hg-inline-share-button i {
font-size: 1.1em;
}
/* ===================================================================
9. Author Box Responsive Fix
=================================================================== */
/* --- Mobile-First Default Styles (Stacked Layout) --- */
.hg-author-box {
display: flex;
flex-direction: column; /* STACK the items vertically */
align-items: center; /* Center the avatar horizontally */
text-align: center; /* Center all the text below the avatar */
gap: 1.5rem;
background: var(--neutral-light);
padding: 2rem;
border-radius: var(--hg-border-radius);
margin: 3rem 0;
}
.hg-author-avatar img {
border-radius: 50%;
/* No extra styles needed, centering is handled by the parent */
}
.hg-author-name {
margin-top: 0;
margin-bottom: 0.5rem;
}
.hg-author-bio {
margin-top: 0.5rem;
max-width: 65ch; /* Improves readability */
}
/* --- Desktop Styles (Side-by-Side Layout) --- */
/* This media query applies only when the screen is 768px or wider */
@media (min-width: 768px) {
.hg-author-box {
flex-direction: row; /* Switch to side-by-side */
align-items: flex-start; /* Align to the top for a cleaner look */
text-align: left; /* Align all text to the left */
}
}
/* ===================================================================
10. Single Post Featured Image Styling
=================================================================== */
/* --- The Main Container Div --- */
.hg-single-featured-image {
/* Positioning & Sizing */
margin: -3rem auto 0;
max-width: 1200px;
position: relative; /* Needed for the overlay */
/* The CORE FIX: Forcing a widescreen aspect ratio */
aspect-ratio: 16 / 9;
/* Visual Polish */
border-radius: var(--hg-border-radius, 8px);
box-shadow: var(--hg-shadow-lg);
background-color: var(
--neutral-dark
); /* Shows a dark block while image loads */
overflow: hidden; /* CRITICAL: Clips the image to the container's shape and radius */
}
/* --- The Image Tag Itself --- */
.hg-single-featured-image img {
/* Make the image fill the container */
width: 100%;
height: 100%;
/* The MAGIC PROPERTY: Fills the container without stretching or distorting */
object-fit: cover;
object-position: center; /* Ensures the middle of the image is prioritized */
display: block; /* Removes any tiny space below the image */
/* Add a smooth transition for the hover effect */
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* --- Add a subtle zoom effect on hover --- */
.hg-single-featured-image:hover img {
transform: scale(1.03);
}
/* --- Optional: Add a subtle shadow overlay for depth --- */
.hg-single-featured-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Gradient from a semi-transparent dark at the bottom to fully transparent at the top */
background: linear-gradient(
to top,
rgba(26, 26, 46, 0.3) 0%,
rgba(26, 26, 46, 0) 50%
);
/* This prevents the overlay from interfering with mouse events */
pointer-events: none;
}
/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 767px) {
.hg-single-featured-image {
/* On mobile, an edge-to-edge image looks best */
border-radius: 0;
margin-top: -2rem; /* Reduce the overlap slightly */
}
}
/* ===================================================================
11. Single Post Meta - Responsive Fix
=================================================================== */
/* --- Mobile-First Base Styles (Wrapping Horizontal Layout) --- */
.hg-single-meta {
display: flex;
flex-wrap: wrap; /* CRITICAL: Allow items to wrap to the next line on mobile */
justify-content: center; /* Center the items/lines horizontally */
align-items: center; /* Vertically align all items */
gap: 0.75rem 1.5rem; /* Flexible gap: 0.75rem vertical, 1.5rem horizontal */
opacity: 0.9;
font-size: 0.9rem; /* A slightly smaller font is good for meta info */
line-height: 1.5;
}
/* --- Style for the author link container --- */
.hg-single-meta .hg-meta-author a {
display: inline-flex; /* Use inline-flex for better alignment within the line */
align-items: center;
gap: 0.75rem;
color: #fff;
text-decoration: none; /* Explicitly remove underline for a cleaner look */
}
/* --- Style for the avatar image --- */
.hg-single-meta img {
border-radius: 50%;
}
/* --- Add Separator Between Items (The Professional Touch) --- */
/* This adds a separator before every span EXCEPT the first one */
.hg-single-meta > span + span::before {
content: "";
opacity: 0.5; /* Make the separator subtle */
/* The 'gap' property handles the spacing, so no extra margin is needed */
}
/* --- Desktop Override (for larger screens) --- */
@media (min-width: 768px) {
.hg-single-meta {
flex-wrap: nowrap; /* On desktop, force everything onto a single line */
}
}
/* ===================================================================
12. YouTube Video Embed Styling
=================================================================== */
/* --- Wrapper for the responsive iframe --- */
.hg-video-embed-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
border-radius: var(--hg-border-radius, 8px);
margin: 2rem 0; /* Add space around the video */
box-shadow: var(--hg-shadow-md);
}
.hg-video-embed-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* --- Section for the final video embed at the end of the post --- */
.hg-final-video-section {
text-align: center;
/* margin: 3rem 0; */
/* padding: 2rem 0; */
/* border-top: 1px solid #eef; */
border-bottom: 1px solid #eef;
padding-bottom: 2rem !important;
}
/* --- "Watch on YouTube" Button --- */
.hg-youtube-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background-color: #ff0000; /* YouTube Red */
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-family: var(--font-heading);
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
margin-top: 1.5rem; /* Space between video and button */
}
.hg-youtube-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 0, 0, 0.3);
background-color: #cc0000;
color: #fff;
}
.hg-youtube-button i {
font-size: 1.3em;
}
/* ===================================================================
13. Default Entry Content Styling
=================================================================== */
/* --- General Typography & Spacing --- */
.entry-content {
font-size: 1.125rem;
line-height: 1.8;
color: var(--neutral-dark);
}
.entry-content p,
.entry-content ul,
.entry-content ol {
margin-bottom: 1.5rem;
max-width: 70ch; /* Optimal for readability */
}
/* --- Headings within the post --- */
.entry-content h2 {
font-size: 2rem;
font-weight: 700;
margin-top: 3rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid;
border-image: var(--gradient) 1;
}
.entry-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
/* --- Lists --- */
.entry-content ul {
list-style: none;
padding-left: 1rem;
}
.entry-content ul li {
padding-left: 1.5rem;
position: relative;
margin-bottom: 0.5rem;
}
.entry-content ul li::before {
content: "→"; /* A simple, clean marker */
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-weight: bold;
}
.entry-content ol {
padding-left: 2.5rem;
}
/* --- Links --- */
.entry-content a {
color: var(--primary);
text-decoration: none;
background-image: linear-gradient(var(--accent), var(--accent));
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size 0.3s;
}
.entry-content a:hover {
background-size: 100% 2px;
}
/* --- Blockquotes --- */
.entry-content blockquote {
margin: 2rem 0;
padding: 1.5rem 2rem;
border-left: 5px solid var(--accent);
background-color: var(--neutral-light);
font-size: 1.2rem;
font-style: italic;
color: var(--neutral-dark);
}
.entry-content blockquote p {
margin-bottom: 0;
}
/* ===================================================================
14. Code Block Styling (for enableCodeBlockCopy function)
=================================================================== */
/* --- Inline Code (e.g. `venv`) --- */
.entry-content code:not(pre code) {
background: rgba(0, 102, 255, 0.08);
color: var(--primary);
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.9em;
font-family: "Fira Code", "JetBrains Mono", monospace;
}
/* --- Code Blocks (``) --- */
/* This rule is now a basic container. Prism.js will do the heavy lifting. */
.entry-content pre {
position: relative;
margin: 2rem 0;
font-size: 0.95rem;
line-height: 1.6;
}
/* This targets the tag *inside* the tag, which Prism styles */
.entry-content pre[class*="language-"] {
padding: 2rem 1.5rem 1.5rem;
border-radius: var(--hg-border-radius, 8px);
border: 1px solid #444;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
max-width: 100%; /* Force it to stay within parent */
overflow-x: auto; /* Add scrollbar if content is too wide */
white-space: pre-wrap; /* Mandate wrapping (see next section) */
word-break: break-word; /* Ensure long words break */
}
/* Force Prism to wrap lines */
code[class*="language-"],
pre[class*="language-"] {
white-space: pre-wrap !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* MOBILE OVERRIDE: Scroll instead of wrap on screens smaller than 768px */
@media (max-width: 768px) {
.entry-content pre[class*="language-"] {
max-width: 100%;
overflow-x: auto;
}
code[class*="language-"],
pre[class*="language-"] {
white-space: pre !important; /* Disable wrapping on mobile */
word-break: normal !important;
}
}
/* --- The Language Tag (Generated by JS) --- */
.entry-content pre[data-lang]::before {
content: attr(data-lang);
position: absolute;
top: 0;
left: 1.5rem;
background: var(--accent);
color: var(--neutral-dark);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
padding: 0.2rem 0.6rem;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
/* --- The Copy Button (Generated by JS) --- */
.copy-code-button {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding: 0.4rem 0.8rem;
font-family: var(--font-body);
font-size: 0.8rem;
cursor: pointer;
opacity: 0.5;
transition: all 0.2s ease;
}
.entry-content pre:hover .copy-code-button {
opacity: 1; /* Show button on hover of the code block */
}
.copy-code-button:hover {
background: rgba(255, 255, 255, 0.2);
}
/* --- The "Copied!" state --- */
.copy-code-button.copied {
background: var(--success, #10b981);
color: #fff;
border-color: transparent;
}
/* ===================================================================
15. Table of Contents (TOC) Styling
=================================================================== */
/* --- The Main TOC Container --- */
.hg-toc {
background-color: var(--neutral-light);
border-radius: var(--hg-border-radius, 8px);
border: 1px solid var(--border-color, #eef);
border-left: 5px solid var(--primary); /* Strong brand accent */
padding: 1.5rem 2rem;
margin-bottom: 2.5rem; /* Space between TOC and the first content paragraph */
box-shadow: var(--hg-shadow-sm);
}
/* --- The TOC Title (e.g., "In This Article") --- */
.hg-toc h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
color: var(--neutral-dark);
margin: 0 0 1rem 0; /* Reset margins and add space below */
}
/* --- The List Itself --- */
.hg-toc .toc-list {
list-style: none; /* Remove default bullets */
padding: 0;
margin: 0;
}
/* --- Main List Items (for H2s) --- */
.hg-toc .toc-list > li {
border-top: 1px solid var(--border-color, #eef); /* Separator line */
}
/* Remove the top border from the very first item */
.hg-toc .toc-list > li:first-child {
border-top: none;
}
/* --- The Clickable Links (Most Important) --- */
.hg-toc .toc-list a {
display: block; /* Makes the entire area clickable */
padding: 0.75rem 0.5rem;
color: var(--text-secondary, #555);
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.hg-toc .toc-list a:hover,
.hg-toc .toc-list a:focus {
color: var(--primary);
background-color: rgba(0, 102, 255, 0.05); /* A very subtle primary tint */
transform: translateX(5px); /* Adds a nice "push" effect */
}
/* --- Nested Lists (for H3s) --- */
.hg-toc .toc-list ul {
list-style: none;
padding-left: 1.5rem; /* Indent the nested items */
margin: 0.5rem 0;
}
/* --- Styling for the nested list items to show hierarchy --- */
.hg-toc .toc-list ul li a {
font-size: 0.9em; /* Make them slightly smaller */
padding-left: 2rem; /* Indent the text further */
position: relative;
font-weight: 500;
}
/* Add a visual marker for nested items */
.hg-toc .toc-list ul li a::before {
content: "└"; /* A character that implies hierarchy */
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
font-family: monospace;
color: var(--accent);
opacity: 0.7;
}
/* ===================================================================
16. Post Tags Styling
=================================================================== */
/* --- The main container for the tags section --- */
.hg-post-tags {
display: flex;
align-items: center;
flex-wrap: wrap; /* Allows tags to wrap on small screens */
gap: 1rem;
margin-top: 3rem; /* Space between content and tags */
padding-top: 2rem;
margin-bottom: 2rem;
border-top: 1px solid var(--border-color, #eef);
}
/* --- The "Tagged In:" label --- */
.hg-post-tags > span {
font-family: var(--font-heading);
font-weight: 600;
color: var(--neutral-dark);
font-size: 1rem;
}
/* --- The list that holds the tags --- */
.hg-post-tags .hg-tags-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.hg-post-tags .hg-tags-list li {
margin: 0;
}
/* --- The individual tag links (the most important part) --- */
.hg-post-tags .hg-tags-list li a {
display: inline-block;
background: var(--neutral-light);
border: 1px solid var(--border-color, #eef);
border-radius: 50px; /* Pill shape */
padding: 0.5rem 1.25rem;
color: var(--text-secondary, #555);
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.hg-post-tags .hg-tags-list li a:hover,
.hg-post-tags .hg-tags-list li a:focus {
transform: translateY(-2px);
color: var(--primary);
border-color: var(--primary);
box-shadow: var(--hg-shadow-sm);
background: #fff;
}
/* Add a hashtag icon for a modern touch */
.hg-post-tags .hg-tags-list li a::before {
content: "#";
margin-right: 0.25rem;
opacity: 0.6;
}
/* ===================================================================
18. Custom Scrollbar for Code Blocks
=================================================================== */
/* Target scrollbars within Prism.js code blocks */
.entry-content pre[class*="language-"]::-webkit-scrollbar {
height: 10px; /* Height of the horizontal scrollbar */
}
/* The track (the bar the scroller sits on) */
.entry-content pre[class*="language-"]::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
/* The draggable scrolling handle */
.entry-content pre[class*="language-"]::-webkit-scrollbar-thumb {
background: var(--accent, #00d4ff);
border-radius: 4px;
border: 2px solid transparent;
background-clip: content-box;
}
.entry-content pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
background: var(--primary, #0066ff);
background-clip: content-box;
}