Tags: code
Experimenting with CSS styles optimized for βIBM Plex Monoβ fonts. Includes layout and typographic tweaks for improved readability and aesthetics. The styles are designed to be responsive and adapt to different screen sizes. Also includes a dark mode variant for better visibility in low-light conditions. The styles are structured to be easily maintainable and extendable.
body {
font-family: 'IBM Plex Mono', monospace;
/* Typographic improvements */
font-size: 1.1rem; /* Slightly larger for mono fonts */
line-height: 1.35; /* Slightly denser than 1.6 for compact layout */
letter-spacing: 0.005em; /* Slight tightening */
/* Layout improvements */
max-width: 700px; /* A bit wider to suit mono fonts */
margin: auto;
padding: 2rem 1.5rem;
/* Colors */
background-color: #ffffff;
color: #1a1a1a;
/* Optional: Smoother text rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: #0066cc;
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
}
a:hover {
text-decoration: underline;
}
table {
margin: 1.5em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums; /* Improves numeric alignment */
}
table caption {
margin-bottom: 0.75em;
font-weight: bold;
text-align: left;
color: #444;
}
thead th {
border-bottom: 2px solid #ccc;
text-align: left;
padding: 0.5em;
background-color: #f9f9f9;
}
tbody {
border-top: 1px solid #e0e0e0;
}
th,
td {
padding: 0.5em;
}
blockquote {
margin: 1.5em 0;
padding-left: 1em;
border-left: 2px solid #ddd;
color: #555;
font-style: italic;
}
blockquote p {
margin: 0;
}
.dropcap {
color: #800000;
float: left;
font-size: 3.2em;
line-height: 1;
padding-right: 0.15em;
font-weight: 600;
font-family: Palatino, serif;
}
#footer {
padding-top: 2em;
font-size: 0.875em;
color: #777;
text-align: center;
}
.page-container {
display: flex;
justify-content: space-between;
gap: 2rem;
}
.main-content {
flex: 7;
}
.tag-cloud {
flex: 4;
text-align: right;
}
@media (max-width: 600px) {
.page-container {
flex-direction: column;
gap: 1rem; /* Adds spacing between stacked elements */
}
.tag-cloud {
margin-left: 0;
text-align: left;
margin-top: 2rem;
}
body {
padding: 1rem;
font-size: 1rem; /* Adjust font size for smaller screens */
line-height: 1.6; /* Slightly looser for small-screen readability */
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
a {
color: #66ccff;
}
table {
color: #e0e0e0;
border-collapse: collapse; /* Reaffirm collapse for dark mode */
}
thead th {
background-color: #1e1e1e;
border-bottom: 2px solid #444;
}
tbody {
border-color: #444;
}
th,
td {
border-color: #444;
background-color: #1a1a1a; /* Reduces contrast for eye comfort */
}
blockquote {
border-left: 2px solid #444;
color: #aaa;
background-color: #1a1a1a;
padding-left: 1rem;
margin-left: 0;
}
#footer {
color: #999;
}
.dropcap {
color: #c96;
}
}
img {
max-width: 100%;
width: 500px;
height: auto;
}