/*---------------------------------------------- * Post Page Styles *----------------------------------------------*//* General styling for the post page background and text */.post-page { background-color: #f7f7f7; /* Light gray background */ color: #333; /* Dark text for contrast */}/* Wrapper for the entire post content */.post-page .post-wrapper { max-width: 900px; /* Set maximum width for readability */ margin: 40px auto; /* Center horizontally with top spacing */ margin-left: 70px; /* Shift right to align with sidebar spacing */ padding: 20px; /* Inner spacing for content */ background-color: #fff; /* White background for clarity */ border-radius: 8px; /* Smooth corner radius */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */}/* Styling for the main blog post content */.post-page .blog-post { padding: 20px; /* Inner spacing */ line-height: 1.8; /* Comfortable text spacing */ font-size: 1.1rem; /* Slightly larger font size for readability */}/* Meta information such as date, author, etc. */.post-page .post-meta { font-size: 0.9rem; /* Smaller font for meta details */ color: #666; /* Neutral gray color */ margin-bottom: 20px; /* Space below metadata */}.post-page .post-meta p { margin: 5px 0; /* Space between meta paragraphs */}.post-page .post-meta strong { color: #333; /* Darker text for emphasis */}/* Separator for meta sections */.post-page .meta-separator { border-top: 2px solid #e1e1e1; /* Light gray border */ margin: 20px 0; /* Space around separator */}/* Styling for the main post content area */.post-page .post-content { font-size: 1.1rem; /* Base font size */ color: #333; /* Standard text color */}.post-page .post-content p { margin-bottom: 1.5em; /* Space between paragraphs */}.post-page .post-content h3 { font-size: 1.4rem; /* Larger size for subheadings */ color: #005a8b; /* Blue for differentiation */ margin-top: 30px; /* Space above heading */ margin-bottom: 10px; /* Space below heading */ font-weight: bold; /* Emphasis for subheadings */}/* Ordered lists within the post content */.post-page .post-content ol { margin-left: 20px; /* Indentation for list items */}.post-page .post-content ol li { margin-bottom: 10px; /* Space between list items */}/* Styling for italic text */.post-page .post-content em { font-style: italic; /* Standard italic style */}/*---------------------------------------------- * MathJax Integration Styles *----------------------------------------------*//* General styling for MathJax-rendered content */.post-page .post-content .mjx-chtml { font-size: 1.2rem; /* Slightly larger for readability */ color: #333; /* Consistent text color */}.post-page .post-content .mjx-chtml .mjx-math { margin: 20px auto; /* Center alignment and spacing */ display: block; /* Display equations as block elements */}/*---------------------------------------------- * Bibliography Section *----------------------------------------------*//* Styling for ordered lists directly following a heading */.post-page .post-content h3 + ol { margin-top: 20px; /* Space above the list */ padding-left: 20px; /* Indentation for list items */}.post-page .post-content h3 + ol li { font-size: 0.95rem; /* Slightly smaller font for bibliography */ color: #555; /* Lighter text color for distinction */}/*---------------------------------------------- * Footer Styles *----------------------------------------------*//* Footer section styling */footer { text-align: center; /* Centered text */ padding: 10px 0; /* Vertical spacing */ background-color: #333; /* Dark background for contrast */ color: #fff; /* White text for readability */}footer p { font-size: 0.9rem; /* Smaller font for footer text */ margin: 0; /* Remove margin */}/*---------------------------------------------- * Dark Mode Styles for Post Page *----------------------------------------------*/ @media (prefers-color-scheme: dark) { /* General dark mode background and text color adjustments */ .post-page { background-color: #1e1e1e; /* Dark background for the page */ color: #e0e0e0; /* Light text color for readability */ } /* Wrapper styling adjustments for dark mode */ .post-page .post-wrapper { background-color: #2a2a2a; /* Slightly lighter dark background */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Softer shadow effect */ border: 1px solid #444; /* Subtle border for separation */ } /* Adjustments for the blog post content */ .post-page .blog-post { color: #dcdcdc; /* Softer light text */ } /* Meta information in dark mode */ .post-page .post-meta { color: #aaaaaa; /* Muted light gray for meta text */ } .post-page .post-meta strong { color: #ffffff; /* Bright white for emphasized meta details */ } /* Separator styling for dark mode */ .post-page .meta-separator { border-top: 2px solid #555; /* Darker gray separator */ } /* Adjustments for the main post content */ .post-page .post-content { color: #e0e0e0; /* Light text color */ } .post-page .post-content h3 { color: #4dabf7; /* Soft blue for headings */ } .post-page .post-content em { color: #cccccc; /* Slightly muted light gray for italic text */ } /* MathJax styling in dark mode */ .post-page .post-content .mjx-chtml { color: #e0e0e0; /* Light text color for equations */ } /* Bibliography section adjustments */ .post-page .post-content h3 + ol li { color: #bdbdbd; /* Muted light gray for bibliography items */ } /* Footer adjustments for dark mode */ footer { background-color: #111; /* Deep dark background for footer */ color: #888; /* Muted light gray text */ } footer p { color: #bbb; /* Slightly brighter light gray for footer text */ }}
/*----------------------------------------------
* Post Page Styles
*----------------------------------------------*/
/* General styling for the post page background and text */
.post-page {
background-color: #f7f7f7; /* Light gray background */
color: #333; /* Dark text for contrast */
}
/* Wrapper for the entire post content */
.post-page .post-wrapper {
max-width: 900px; /* Set maximum width for readability */
margin: 40px auto; /* Center horizontally with top spacing */
margin-left: 70px; /* Shift right to align with sidebar spacing */
padding: 20px; /* Inner spacing for content */
background-color: #fff; /* White background for clarity */
border-radius: 8px; /* Smooth corner radius */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
/* Styling for the main blog post content */
.post-page .blog-post {
padding: 20px; /* Inner spacing */
line-height: 1.8; /* Comfortable text spacing */
font-size: 1.1rem; /* Slightly larger font size for readability */
}
/* Meta information such as date, author, etc. */
.post-page .post-meta {
font-size: 0.9rem; /* Smaller font for meta details */
color: #666; /* Neutral gray color */
margin-bottom: 20px; /* Space below metadata */
}
.post-page .post-meta p {
margin: 5px 0; /* Space between meta paragraphs */
}
.post-page .post-meta strong {
color: #333; /* Darker text for emphasis */
}
/* Separator for meta sections */
.post-page .meta-separator {
border-top: 2px solid #e1e1e1; /* Light gray border */
margin: 20px 0; /* Space around separator */
}
/* Styling for the main post content area */
.post-page .post-content {
font-size: 1.1rem; /* Base font size */
color: #333; /* Standard text color */
}
.post-page .post-content p {
margin-bottom: 1.5em; /* Space between paragraphs */
}
.post-page .post-content h3 {
font-size: 1.4rem; /* Larger size for subheadings */
color: #005a8b; /* Blue for differentiation */
margin-top: 30px; /* Space above heading */
margin-bottom: 10px; /* Space below heading */
font-weight: bold; /* Emphasis for subheadings */
}
/* Ordered lists within the post content */
.post-page .post-content ol {
margin-left: 20px; /* Indentation for list items */
}
.post-page .post-content ol li {
margin-bottom: 10px; /* Space between list items */
}
/* Styling for italic text */
.post-page .post-content em {
font-style: italic; /* Standard italic style */
}
/*----------------------------------------------
* MathJax Integration Styles
*----------------------------------------------*/
/* General styling for MathJax-rendered content */
.post-page .post-content .mjx-chtml {
font-size: 1.2rem; /* Slightly larger for readability */
color: #333; /* Consistent text color */
}
.post-page .post-content .mjx-chtml .mjx-math {
margin: 20px auto; /* Center alignment and spacing */
display: block; /* Display equations as block elements */
}
/*----------------------------------------------
* Bibliography Section
*----------------------------------------------*/
/* Styling for ordered lists directly following a heading */
.post-page .post-content h3 + ol {
margin-top: 20px; /* Space above the list */
padding-left: 20px; /* Indentation for list items */
}
.post-page .post-content h3 + ol li {
font-size: 0.95rem; /* Slightly smaller font for bibliography */
color: #555; /* Lighter text color for distinction */
}
/*----------------------------------------------
* Footer Styles
*----------------------------------------------*/
/* Footer section styling */
footer {
text-align: center; /* Centered text */
padding: 10px 0; /* Vertical spacing */
background-color: #333; /* Dark background for contrast */
color: #fff; /* White text for readability */
}
footer p {
font-size: 0.9rem; /* Smaller font for footer text */
margin: 0; /* Remove margin */
}
/*----------------------------------------------
* Dark Mode Styles for Post Page
*----------------------------------------------*/
@media (prefers-color-scheme: dark) {
/* General dark mode background and text color adjustments */
.post-page {
background-color: #1e1e1e; /* Dark background for the page */
color: #e0e0e0; /* Light text color for readability */
}
/* Wrapper styling adjustments for dark mode */
.post-page .post-wrapper {
background-color: #2a2a2a; /* Slightly lighter dark background */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Softer shadow effect */
border: 1px solid #444; /* Subtle border for separation */
}
/* Adjustments for the blog post content */
.post-page .blog-post {
color: #dcdcdc; /* Softer light text */
}
/* Meta information in dark mode */
.post-page .post-meta {
color: #aaaaaa; /* Muted light gray for meta text */
}
.post-page .post-meta strong {
color: #ffffff; /* Bright white for emphasized meta details */
}
/* Separator styling for dark mode */
.post-page .meta-separator {
border-top: 2px solid #555; /* Darker gray separator */
}
/* Adjustments for the main post content */
.post-page .post-content {
color: #e0e0e0; /* Light text color */
}
.post-page .post-content h3 {
color: #4dabf7; /* Soft blue for headings */
}
.post-page .post-content em {
color: #cccccc; /* Slightly muted light gray for italic text */
}
/* MathJax styling in dark mode */
.post-page .post-content .mjx-chtml {
color: #e0e0e0; /* Light text color for equations */
}
/* Bibliography section adjustments */
.post-page .post-content h3 + ol li {
color: #bdbdbd; /* Muted light gray for bibliography items */
}
/* Footer adjustments for dark mode */
footer {
background-color: #111; /* Deep dark background for footer */
color: #888; /* Muted light gray text */
}
footer p {
color: #bbb; /* Slightly brighter light gray for footer text */
}
}