add code block styling

This commit is contained in:
Phil 2025-01-08 15:18:31 -07:00
parent 56b86c9a6a
commit 0963c24be2

View File

@ -94,6 +94,37 @@ article.h-entry .e-content {
line-height: 1.8;
}
/* Code Block Styling */
pre {
background-color: #f4f4f4; /* Light gray background */
border: 1px solid #ddd; /* Subtle border */
border-radius: 5px; /* Rounded corners */
padding: 15px; /* Inner padding */
overflow-x: auto; /* Horizontal scrolling for long lines */
font-family: 'Courier New', monospace; /* Monospace font for readability */
font-size: 0.9rem; /* Slightly smaller font size */
line-height: 1.6;
color: #333; /* Dark text */
margin: 20px 0; /* Space around the block */
}
code {
font-family: 'Courier New', monospace; /* Monospace font for inline code */
font-size: 0.9rem;
background-color: #f4f4f4; /* Same background as pre blocks */
padding: 2px 4px; /* Small padding for inline code */
border-radius: 3px; /* Rounded corners */
color: #c7254e; /* Distinct color for code text */
}
/* Optional: Highlight Inline Code */
article h-entry code {
background-color: #fffbdd; /* Light yellow background for inline code */
color: #d6336c; /* Reddish text for contrast */
font-weight: bold;
}
/* Photos Section */
.photo-grid {
display: grid;