etl/hugo/assets/css/custom.css
John Wellbelove bebf98800c Fixed formatting on the home page markdown
Modified light amd dark code formatting
2026-03-30 08:08:12 +01:00

367 lines
7.7 KiB
CSS

/* Definitions for light mode */
html:not(.dark) .highlight .chroma .c1
{
color: forestgreen !important;
}
html:not(.dark) .highlight .chroma .cp,
html:not(.dark) .highlight .chroma .cpf {
color: mediumslateblue !important;
}
html:not(.dark) h1 {
color: coral !important;
}
html:not(.dark) h2 {
color: royalblue !important;
border-bottom: 3px solid black !important;
}
html:not(.dark) h3,
html:not(.dark) h4
{
color: rgb(29, 172, 29) !important;
border-bottom: 1px solid darkgrey !important;
}
html:not(.dark) p {
color: black !important;
}
html:not(.dark) dl,
html:not(.dark) dl dt code,
html:not(.dark) dl dd {
color: black !important;
background-color: #eeeeee !important;
}
html:not(.dark) code,
html:not(.dark) pre,
html:not(.dark) pre code {
color: black !important;
background-color: #eeeeee !important;
}
html:not(.dark) hr {
background-color: darkgrey !important;
}
html:not(.dark) .hx\:font-extrabold {
font-family: Roboto, sans-serif !important;
font-size: 1.6rem !important;
color: royalblue !important;
}
/* inactive */
html:not(.dark) .hx\:text-gray-500 {
color: black !important;
}
/* active */
html:not(.dark) .hextra-sidebar-active-item {
color: black !important;
}
html:not(.dark) .content p.red-text {
color: red !important;
}
/* Regular item hover */
html:not(.dark) .hextra-sidebar-item a:hover,
html:not(.dark) .hextra-sidebar-item a:hover span {
background-color: rgb(250, 195, 175) !important;
color: black !important;
}
/* Active item default + hover - must come AFTER regular hover */
html:not(.dark) .hextra-sidebar-item[data-active="true"] a,
html:not(.dark) .hextra-sidebar-item[data-active="true"] a span,
html:not(.dark) .hextra-sidebar-item[data-active="true"] a:hover,
html:not(.dark) .hextra-sidebar-item[data-active="true"] a:hover span {
background-color: coral !important;
color: white !important;
}
/* Definitions for dark mode */
html.dark .highlight .chroma .c1
{
color: lightgreen !important;
}
html.dark .highlight .chroma .cp,
html.dark.highlight .chroma .cpf {
color: lightsteelblue !important;
}
html.dark body {
background-color: #1e1e1e !important;
}
html.dark main {
background-color: #252525 !important;
}
html.dark .hx\:dark\:shadow-\[0_-12px_16px_\#111\] {
box-shadow: 0 -12px 16px #1e1e1e !important;
}
html.dark .hx\:dark\:bg-dark {
background-color: #1e1e1e !important;
border-color: grey !important;
}
html.dark h1
{
color: coral !important;
}
html.dark h2 {
color: #7099c7 !important;
border-bottom: 3px solid #f0f0f0 !important;
}
html.dark h3,
html.dark h4 {
color: lightgreen !important;
border-bottom: 1px solid rgb(76, 76, 76) !important;
}
html.dark p {
color: #c0c0c0 !important;
}
html.dark p strong {
color: #c4c3a6;
}
html.dark dl,
html.dark dl dt code,
html.dark dl dd {
color: #c0c0c0 !important;
background-color: #444444 !important;
}
html.dark code,
html.dark pre,
html.dark pre code {
color: #c0c0c0 !important;
background-color: #444444 !important;
}
html.dark hr {
background-color: #505050 !important;
}
html.dark .hx\:font-extrabold {
font-family: Roboto, sans-serif !important;
font-size: 1.6rem !important;
color: #7099c7 !important;
}
/* inactive */
html.dark .hx\:text-gray-500 {
color: #c0c0c0 !important;
}
/* active */
html.dark .hextra-sidebar-active-item {
color: #c0c0c0 !important;
}
html.dark .hextra-code-block .highlight .chroma span.p {
color: #c0c0c0;
}
html.dark .content p.red-text {
color: salmon !important;
}
/* Regular item hover */
html.dark .hextra-sidebar-item a:hover,
html.dark .hextra-sidebar-item a:hover span {
background-color: rgb(250, 195, 175) !important;
color: black !important;
}
/* Active item default + hover - must come AFTER regular hover */
html.dark .hextra-sidebar-item[data-active="true"] a,
html.dark .hextra-sidebar-item[data-active="true"] a span,
html.dark .hextra-sidebar-item[data-active="true"] a:hover,
html.dark .hextra-sidebar-item[data-active="true"] a:hover span {
background-color: rgb(177, 87, 54) !important;
color: #e0e0e0 !important;
}
/* Common definitions */
@font-face {
font-family: Roboto;
src: url('/fonts/roboto-v51-latin-regular.woff2') format('woff2');
font-weight:500;
font-style: normal;
}
@font-face {
font-family: 'Roboto Mono';
src: url('/fonts/roboto-mono-v31-latin-500.woff2') format('woff2');
font-weight: nornal;
font-style: normal;
}
.highlight .chroma .k,
.highlight .chroma .kc,
.highlight .chroma .kd,
.highlight .chroma .kn,
.highlight .chroma .kp,
.highlight .chroma .kr,
.highlight .chroma .kt,
.highlight .chroma .nc,
.highlight .chroma .nf,
.highlight .chroma .cp,
.highlight .chroma .cpf {
font-weight: normal;
font-style: normal;
}
/* .highlight .chroma .c1
{
color: forestgreen !important;
}
.highlight .chroma .cp,
.highlight .chroma .cpf {
color: mediumslateblue !important;
} */
html.dark .hextra-code-block .highlight .chroma .cs,
html.dark .hextra-code-block .highlight .chroma .cp,
html.dark .hextra-code-block .highlight .chroma .cpf {
font-weight: normal;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-start;
margin-top: 1rem;
}
.badges p {
display: contents;
margin: 0;
}
.content ul li {
font-family: Roboto, sans-serif !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 110% !important;
}
h1 {
font-family: Roboto, sans-serif !important;
font-style: i !important;
font-weight: 500 !important;
margin-top: 0.5em !important;
margin-bottom: 0.0em !important;
}
h2 {
font-family: Roboto, sans-serif !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 150% !important;
margin-top: 1.0em !important;
margin-bottom: 0.5em !important;
}
h3 {
font-family: Roboto, sans-serif !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 130% !important;
margin-top: 0.5em !important;
margin-bottom: 0.5em !important;
}
h4 {
font-family: Roboto, sans-serif !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 110% !important;
margin-top: 0.5em !important;
margin-bottom: 0.5em !important;
}
dl {
font-family: 'Roboto Mono', monospace !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 1rem !important;
}
dl dt code {
font-family: 'Roboto Mono', monospace !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 1rem !important;
}
dl dd {
font-family: Roboto, sans-serif !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 1rem !important;
}
code {
font-family: 'Roboto Mono', monospace !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 0.9rem !important;
border: none !important;
border-radius: 2px !important;
}
pre code {
font-family: 'Roboto Mono', monospace !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 0.9rem !important;
padding-left: 0 !important;
margin-left: 0 !important;
border: none !important;
}
pre {
font-family: 'Roboto Mono', monospace !important;
font-size: 0.9rem !important;
margin-top: 2em !important;
margin-bottom: 0em !important;
padding-top: 0.5em !important;
padding-bottom: 0.5em !important;
padding-left: 0.5em !important;
border: none !important;
border-radius: 2px !important;
}
hr {
height: 2px !important;
border: none !important;
margin-top: 10px !important;
margin-bottom: 1px !important;
}
p {
font-family: Roboto, sans-serif !important;
font-style: normal !important;
font-weight: normal !important;
font-size: 110% !important;
margin-top: 1em !important;
}