style.scssā¢6.08 kB
---
---
@import "{{ site.theme }}";
/* Custom color scheme for softer, eye-friendly appearance */
:root {
--bg-primary: #2E2E2E; /* Your preferred soft dark gray */
--bg-secondary: #3A3A3A; /* Slightly lighter for contrast */
--text-primary: #E8E8E8; /* Soft light gray for main text */
--text-secondary: #C0C0C0; /* Medium gray for secondary text */
--accent-primary: #B0B9F9; /* Soft lavender blue - excellent contrast */
--accent-secondary: #9BA7F5; /* Slightly deeper lavender for variety */
--code-bg: #3A3A3A; /* Soft dark for code blocks */
--border-color: #4A4A4A; /* Subtle borders */
}
/* Override the harsh black background */
body {
background-color: var(--bg-primary) !important;
color: var(--text-primary) !important;
}
/* Header styling with softer colors */
header {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
}
/* Replace the bright green with muted burgundy */
h1, h2, h3, h4, h5, h6 {
color: var(--accent-primary) !important;
}
/* Softer link colors instead of bright green */
a {
color: var(--accent-secondary) !important;
}
a:hover {
color: var(--accent-primary) !important;
text-decoration: underline;
}
/* Enhanced Code blocks with copy functionality */
.code-block-enhanced {
position: relative;
margin: 1rem 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border-color);
background-color: var(--code-bg);
transition: box-shadow 0.2s ease;
}
.code-block-enhanced:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.code-block-enhanced pre {
background-color: var(--code-bg) !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 1rem 3rem 1rem 1rem !important;
overflow-x: auto;
line-height: 1.4;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
font-size: 0.9em;
}
.code-block-enhanced code {
background-color: transparent !important;
color: var(--text-primary) !important;
padding: 0 !important;
border-radius: 0 !important;
font-family: inherit !important;
}
/* Copy button styling */
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: var(--accent-primary);
color: var(--bg-primary);
border: none;
border-radius: 4px;
padding: 6px 10px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.2s ease;
z-index: 10;
opacity: 0.8;
}
.copy-btn:hover {
opacity: 1;
background: var(--accent-secondary);
transform: translateY(-1px);
}
.copy-btn:active {
transform: translateY(0);
}
.copy-btn.copied {
background: #4CAF50 !important;
color: white !important;
}
.copy-btn.error {
background: #f44336 !important;
color: white !important;
}
.copy-btn svg {
flex-shrink: 0;
}
/* Language label styling */
.language-label {
position: absolute;
top: 8px;
left: 8px;
background: var(--bg-secondary);
color: var(--accent-primary);
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 5;
opacity: 0.8;
}
/* Fallback for regular code blocks (inline) */
code {
background-color: var(--code-bg) !important;
color: var(--text-primary) !important;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.9em;
}
/* Legacy pre blocks that aren't enhanced yet */
pre:not(.code-block-enhanced pre) {
background-color: var(--code-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px;
padding: 1rem !important;
overflow-x: auto;
line-height: 1.4;
}
/* Mobile optimization */
@media (max-width: 768px) {
.code-block-enhanced pre {
padding: 0.8rem 2.5rem 0.8rem 0.8rem !important;
font-size: 0.85em;
}
.copy-btn {
top: 6px;
right: 6px;
padding: 5px 8px;
font-size: 11px;
}
.language-label {
top: 6px;
left: 6px;
font-size: 9px;
padding: 2px 5px;
}
}
/* Table styling for better readability */
table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
th, td {
border: 1px solid var(--border-color);
padding: 8px 12px;
text-align: left;
}
th {
background-color: var(--bg-secondary);
color: var(--accent-primary);
font-weight: bold;
}
/* Blockquote styling */
blockquote {
border-left: 4px solid var(--accent-primary);
background-color: var(--bg-secondary);
margin: 1rem 0;
padding: 1rem;
border-radius: 0 4px 4px 0;
}
/* Download buttons with softer styling */
.btn {
background-color: var(--accent-primary) !important;
border: 1px solid var(--accent-secondary) !important;
color: var(--text-primary) !important;
text-decoration: none !important;
padding: 8px 16px;
border-radius: 4px;
display: inline-block;
margin: 4px;
transition: all 0.2s ease;
}
.btn:hover {
background-color: var(--accent-secondary) !important;
transform: translateY(-1px);
}
/* Navigation and inline text styling */
strong, b {
color: var(--text-primary);
font-weight: bold;
}
/* Horizontal rules */
hr {
border: none;
border-top: 1px solid var(--border-color);
margin: 2rem 0;
}
/* Syntax highlighting adjustments */
.highlight {
background: var(--code-bg) !important;
border-radius: 4px;
border: 1px solid var(--border-color);
}
/* Syntax highlighting with lavender theme */
.highlight .nf { color: var(--accent-secondary) !important; } /* Function names */
.highlight .s { color: #C8E6C8 !important; } /* Strings - soft green */
.highlight .k { color: var(--accent-primary) !important; } /* Keywords */
.highlight .c { color: var(--text-secondary) !important; } /* Comments */
.highlight .nb { color: #A8C8E8 !important; } /* Built-ins - soft blue */
/* ASCII art and monospace improvements */
pre code {
background: none !important;
color: var(--text-primary) !important;
font-family: 'Courier New', Courier, monospace;
line-height: 1.2;
}