/ content / assets / stylesheets / extra.css
extra.css
 1  :root {
 2    /* Modern Grayscale Color Variables */
 3    --md-primary-fg-color:        #000000;
 4    --md-primary-fg-color--light: #333333;
 5    --md-primary-fg-color--dark:  #000000;
 6    --md-accent-fg-color:         #000000;
 7    
 8    /* Typography improvements */
 9    --md-text-font-family: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
10    --md-code-font-family: "JetBrains Mono", "Fira Code", monospace;
11  }
12  
13  /* Light Mode Specifics */
14  [data-md-color-scheme="default"] {
15    --md-primary-fg-color: #2e3440; /* Dark Gray */
16    --md-accent-fg-color: #4c566a;  /* Medium Gray */
17  }
18  
19  /* Dark Mode Specifics */
20  [data-md-color-scheme="slate"] {
21    --md-primary-fg-color: #eceff4; /* Off-white */
22    --md-accent-fg-color: #d8dee9;  /* Light Gray */
23    --md-default-bg-color: #1a1a1a; /* Darker background for better contrast */
24  }
25  
26  /* Modern UI Tweaks */
27  .md-header {
28    background-color: var(--md-default-bg-color);
29    border-bottom: 1px solid var(--md-default-fg-color--lightest);
30    box-shadow: none;
31  }
32  
33  .md-tabs {
34    background-color: var(--md-default-bg-color);
35    border-bottom: 1px solid var(--md-default-fg-color--lightest);
36  }
37  
38  /* Clean up links */
39  a {
40    text-decoration: none;
41    transition: opacity 0.2s ease;
42  }
43  
44  a:hover {
45    opacity: 0.7;
46  }
47  
48  /* Improve table styling */
49  .md-typeset table:not([class]) {
50    border-radius: 4px;
51    overflow: hidden;
52    box-shadow: 0 0 0 1px var(--md-default-fg-color--lightest);
53  }
54  
55  /* Minimalist button styles */
56  .md-button {
57    border-radius: 4px;
58    font-weight: 500;
59    letter-spacing: 0.5px;
60  }
61