@ -2,7 +2,7 @@
/ *
* Theme colors
* /
--main-color : # 1976d2 ;
--main-color : # 1870c9 ; /* Adjusted to ensure a 4.5:1 contrast ratio for accessibility */
--main-background-color : # fcfcfc ;
--alternate-text-color : # 145ca4 ;
--main-text-color : # 092949 ; /* 50% darker than main-color */
@ -29,9 +29,9 @@
/ *
* Fonts
* /
--default-font-list : "Source Serif Pro" ;
--default-font-list : "Source Serif Pro" , serif ;
--mono-font-list : "JetBrains Mono" , monospace ;
--sans-preferred-font-list : "Source Sans Pro" ;
--sans-preferred-font-list : "Source Sans Pro" , sans-serif ;
}
@ -45,6 +45,13 @@
url ( '/fonts/JetBrainsMono-Regular.ttf' ) format ( 'truetype' ) ;
font-weight : 400 ;
font-style : normal ;
/ *
* Core Web Vitals / Cumulative Layout Shift .
*
* Avoid showing invisible text while custom fonts load .
* /
font-display : swap ;
}
@ font-face {
@ -52,6 +59,13 @@
src : url ( '/fonts/SourceSerifPro-Regular.ttf' ) format ( 'truetype' ) ;
font-weight : 400 ;
font-style : normal ;
/ *
* Core Web Vitals / Cumulative Layout Shift .
*
* Avoid showing invisible text while custom fonts load .
* /
font-display : swap ;
}
@ font-face {
@ -59,32 +73,13 @@
src : url ( '/fonts/SourceSansPro-Regular.ttf' ) format ( 'truetype' ) ;
font-weight : 400 ;
font-style : normal ;
}
@ font-face {
font-family : 'Material Icons' ;
font-style : normal ;
font-weight : 400 ;
src : url ( '/fonts/material-icons.woff2' ) format ( 'woff2' ) ,
url ( '/fonts/material-icons.ttf' ) format ( 'truetype' ) ;
}
/ *
* The Google "Material Icons" font is used to render the tag icons , the
* "back to top" link , etc .
* Core Web Vitals / Cumulative Layout Shift .
*
* Avoid showing invisible text while custom fonts load .
* /
. material-icons {
font-family : 'Material Icons' ;
font-weight : normal ;
font-style : normal ;
letter-spacing : normal ;
text-transform : none ;
display : inline-block ;
white-space : nowrap ;
word-wrap : normal ;
direction : ltr ;
-moz-font-feature-settings : 'liga' ;
-moz-osx-font-smoothing : grayscale ;
font-display : swap ;
}
/ *
@ -260,6 +255,15 @@ pre {
/* Do not wrap lines of code */
overflow-x : hidden ;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style : none ; /* IE and Edge */
scrollbar-width : none ; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
pre :: -webkit-scrollbar {
display : none ;
}
/* Inline code (single backticks in markdown) */
@ -281,6 +285,30 @@ pre code {
padding : 0 ;
}
/ *
* Highlighted file has a wrapping div . Some properties are redefined for it
* and reset to their default value for its children .
* /
. highlightedFile {
background : var ( --codeblock-background-color ) ;
border-radius : 5px ;
}
. highlightedFile . filename {
border-bottom : 2px solid var ( --hover-menu-border-color ) ;
font-family : var ( --sans-preferred-font-list ) ! important ;
font-size : larger ;
padding : 12px 15px ;
}
. highlightedFile pre {
background : inherit ;
border-radius : inherit ;
padding : 12px 15px ;
margin : 0 ;
}
pre : hover {
/* Show the horizontal scroll bar when hovering code (if needed) */
overflow-x : auto ;
@ -290,7 +318,6 @@ pre:hover {
* i18n
* /
. tiny-flag {
height : 0 . 9rem ;
vertical-align : middle ;
margin-left : 5px ;
margin-right : 5px ;
@ -352,6 +379,7 @@ pre:hover {
vertical-align : sub ;
margin-right : 3px ;
margin-left : 5px ;
max-height : 1rem ;
}
. post-metadata time {
@ -387,7 +415,6 @@ article p {
article header {
padding-bottom : 30px ;
font-weight : 600 ;
font-style : normal ;
line-height : 1 . 5em ;
@ -612,7 +639,8 @@ article header h4 {
}
. actions . material-icons {
font-size : 2em ;
height : 2rem ;
width : auto ;
}
/ *
@ -740,10 +768,11 @@ mjx-container {
. menu . menu-content {
width : 300px ;
left : -300px ;
height : 100vh ;
background-color : var ( --main-background-color ) ;
position : fixed ;
transform : translate ( -300px , 0 ) ;
transform : none ;
transition : transform 0 . 2s linear ;
}
@ -769,7 +798,7 @@ mjx-container {
* the overlay that hides the article content .
* /
. menu input . hamburger-menu : checked ~ . menu-content {
transform : none ;
transform : translate ( 300px , 0 ) ;
}
. menu input . hamburger-menu : checked ~ . menu-overlay {
