Overhaul style sheets

5 files changed, 166 insertions, 181 deletions

diff --git a/_css/style.css b/_css/style.css
index 0e3fb5a..7397b4a 100644
--- a/_css/style.css
+++ b/_css/style.css
@@ -1,80 +1,110 @@
 /* Variables */
 :root {
-  --block-bg: #eeeeec;
-  --fade-fg: #888a85;
-  --link-fg: #436e58;
-  --text-fg: #2e3436;
+    --black: #1c1b19;
+    --red: #ef2f27;
+    --green: #519f50;
+    --yellow: #fbb829;
+    --blue: #2c78bf;
+    --magenta: #e02c6d;
+    --cyan: #0aaeb3;
+    --white: #d0bfa1;
+    --bright-black: #918175;
+    --bright-red: #f75341;
+    --bright-green: #98bc37;
+    --bright-yellow: #fed06e;
+    --bright-blue: #68a8e4;
+    --bright-magenta: #ff5c8f;
+    --bright-cyan: #53fde9;
+    --bright-white: #fce8c3;
+
+    --block-bg: var(--black);
+    --fade-fg: var(--bright-black);
+    --link-fg: var(--green);
+    --text-bg: #121212;
+    --text-fg: var(--bright-white);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --block-bg: #eeeeec;
+        --fade-fg: #888a85;
+        --link-fg: #436e58;
+        --text-bg: #ffffff;
+        --text-fg: #2e3436;
+    }
 }
 
 /* Default font and layout */
 html {
-  box-sizing: border-box;
-  color: var(--text-fg);
-  max-width: 36rem;
-  margin: auto;
-  padding: 1rem;
+    background-color: var(--text-bg);
+    box-sizing: border-box;
+    color: var(--text-fg);
+    margin: auto;
+    max-width: 36rem;
+    padding: 1rem;
+    scrollbar-color: var(--text-fg) var(--block-bg);
 }
 
 /* Keep minimum font size to the usual default of 16px */
 @media (min-width: 800px) {
-  html {
-    font-size: min(23px, 2vw);
-    margin-left: auto;
-    margin-right: auto;
-  }
+    html {
+        font-size: min(23px, 2vw);
+        margin-left: auto;
+        margin-right: auto;
+    }
 }
 
 .franklin-content .row { display: block }
 
 .franklin-content .left {
-  float: left;
-  margin-right: 1rem;
+    float: left;
+    margin-right: 1rem;
 }
 
 .franklin-content .right { float: right }
 
 .franklin-content .container img {
-  width: auto;
-  padding-left: 0;
+    width: auto;
+    padding-left: 0;
 }
 
 .franklin-content .footnote {
-  position: relative;
-  top: -0.5em;
-  font-size: 70%;
+    position: relative;
+    top: -0.5em;
+    font-size: 70%;
 }
 
 /* Foot/copyright */
 .franklin-content .page-foot a {
-  text-decoration: none;
-  color: var(--fade-fg);
-  text-decoration: underline;
+    text-decoration: none;
+    color: var(--fade-fg);
+    text-decoration: underline;
 }
 
 .page-foot {
-  font-size: 80%;
-  color: var(--fade-fg);
-  margin: 3rem 0;
+    font-size: 80%;
+    color: var(--fade-fg);
+    margin: 3rem 0;
 }
 
 /* Text geometry */
 .franklin-content p {
-  hyphens: auto;
-  line-height: 1.4rem;
-  text-align: justify;
+    hyphens: auto;
+    line-height: 1.4rem;
+    text-align: justify;
 }
 
 /* Titles */
 .franklin-content h1 {
-  padding-bottom: 0.5em;
-  border-bottom: 3px double lightgrey;
-  margin-top: 2em;
+    padding-bottom: 0.5rem;
+    border-bottom: 0.15rem solid var(--fade-fg);
+    margin-top: 2rem;
 }
 
 .franklin-content h2 {
-  padding-bottom: 0.3em;
-  border-bottom: 1px solid lightgrey;
-  margin-top: 2em;
+    padding-bottom: 0.3rem;
+    border-bottom: 0.08rem solid var(--fade-fg);
+    margin-top: 2rem;
 }
 
 .franklin-content h1 a,
@@ -83,7 +113,7 @@ html {
 .franklin-content h4 a,
 .franklin-content h5 a,
 .franklin-content h6 a {
-  color: var(--text-fg);
+    color: var(--text-fg);
 }
 
 .franklin-content h1 a:hover,
@@ -92,50 +122,34 @@ html {
 .franklin-content h4 a:hover,
 .franklin-content h5 a:hover,
 .franklin-content h6 a:hover {
-  text-decoration: none;
-}
-
-.franklin-content table {
-  margin-left: auto;
-  margin-right: auto;
-  border-collapse: collapse;
-  text-align: center;
+    text-decoration: none;
 }
 
 .franklin-toc ol ol {
-  list-style-type: lower-alpha;
-}
-
-.franklin-content th,
-td {
-  font-size: 75%;
-  padding: 10px;
-  border: 1px solid black;
+    list-style-type: lower-alpha;
 }
 
 .franklin-content blockquote {
-  background: var(--block-bg);
-  border-left: 0.25rem solid var(--fade-fg);
-  font-style: italic;
-  margin: 0;
-  padding: 0.5em 10px;
+    background: var(--block-bg);
+    border-left: 0.25rem solid var(--fade-fg);
+    font-style: italic;
+    margin: 0;
+    padding: 0.6rem 0.6rem;
 }
 
 .franklin-content blockquote p { display: inline }
 
 /* General formatting */
 /* Spacing between bullet points. */
-.franklin-content li p {
-  margin: 10px 0;
-}
+.franklin-content li p { margin: 0.6em 0 }
 
 .franklin-content a {
-  color: var(--link-fg);
-  text-decoration: none;
+    color: var(--link-fg);
+    text-decoration: none;
 }
 
 .franklin-content a:hover {
-  text-decoration: underline;
+    text-decoration: underline;
  }
 
 /* Hyperrefs and footnotes */
@@ -143,107 +157,95 @@ td {
 .franklin-content .bibref a { color: green; }
 
 .franklin-content sup {
-  font-size: 70%;
-  vertical-align: super;
+    font-size: 70%;
+    vertical-align: super;
 }
 
 .franklin-content table.fndef {
-  margin: 0;
-  margin-bottom: 10px;
+    margin: 0;
+    margin-bottom: 0.6em;
 }
 
-.franklin-content .fndef tr,
-td {
-  padding: 0;
-  border: 0;
-  text-align: left;
+.franklin-content .fndef tr, td {
+    padding: 0;
+    border: 0;
+    text-align: left;
 }
 
 .franklin-content .fndef tr {
-  border-left: 2px solid lightgray;
+    border-left: 0.1em solid var(--fade-fg);
 }
 
 .franklin-content .fndef td.fndef-backref {
-  vertical-align: top;
-  font-size: 70%;
-  padding-left: 5px;
+    vertical-align: top;
+    font-size: 70%;
+    padding-left: 0.04em;
 }
 
 .franklin-content .fndef td.fndef-content {
-  font-size: 80%;
-  padding-left: 10px;
-  width: 100%;
+    font-size: 80%;
+    padding-left: 0.6em;
+    width: 100%;
 }
 
 /* Images */
 .franklin-content img {
-  width: 100%;
+    width: 100%;
 }
 
 .franklin-content .img-small img {
-  width: 50%;
-  text-align: center;
-  padding-left: 20%;
+    width: 50%;
+    text-align: center;
+    padding-left: 20%;
 }
 
 /* KaTeX */
-body { counter-reset: eqnum; }
 .katex { font-size: 1em !important; }
 
 .katex-display .katex {
-  /* Overwrite KaTeX settings. */
-  display: inline-block;
+    /* Overwrite KaTeX settings. */
+    display: inline-block;
 
-  /* Allow display equations to wrap on small screens. */
-  white-space: normal;
+    /* Allow display equations to wrap on small screens. */
+    white-space: normal;
 }
 
 /*
  * No numbering, for now
+ * body { counter-reset: eqnum }
+ *
  * .katex-display::after {
- *   counter-increment: eqnum;
- *   content: "(" counter(eqnum) ")";
- *   position: relative;
- *   float: right;
- *   padding-right: 5px;
+ *     counter-increment: eqnum;
+ *     content: "(" counter(eqnum) ")";
+ *     position: relative;
+ *     float: right;
+ *     padding-right: 5px;
  * }
  */
 
-/* Code highlight */
-code, .hljs {
-  background-color: var(--block-bg);
-  padding: 0.1em 0.2em;
-  font-size: inherit;
-}
-
-.hljs-meta {
-  color: var(--link-fg);
-  font-weight: bold;
-}
-
 /* Boxes */
 .colbox-blue {
-  background-color: #729fcf42;
-  padding: 0.1rem 0.5rem;
-  border-left: 0.25rem solid #3465e4;
+    background-color: #51affe25;
+    padding: 0.1rem 0.5rem;
+    border-left: 0.25rem solid var(--blue);
 }
 
 /* Header */
 header {
-  margin: 2rem -0.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
+    margin: 2rem -0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
 }
 
 header a {
-  border-bottom: solid;
-  color: var(--link-fg);
-  font-weight: bold;
-  margin: 0 0.5rem;
-  text-decoration: none;
-  transition: color 0.3s ease;
+    border-bottom: solid;
+    color: var(--link-fg);
+    font-weight: bold;
+    margin: 0 0.5rem;
+    text-decoration: none;
+    transition: color 0.3s ease;
 }
 header a:hover { color: var(--text-fg) }
 
@@ -252,15 +254,45 @@ nav ul { margin: 0 }
 
 /* Table */
 table {
-  line-height: 1em;
-  margin-left: auto;
-  margin-right: auto;
-  border-collapse: collapse;
-  text-align: center;
-  margin-bottom: 1.5em;
-}
-
-tr, th, td, table tbody tr td { border: 0.1rem solid var(--fade-fg) }
-tr, th, td { padding: 0.69rem }
-tr:first-of-type { background: var(--block-bg); }
-tr:first-of-type > th { text-align: center }
+    border-bottom: 0.15em solid var(--text-fg);
+    border-collapse: collapse;
+    border-top: 0.15em solid var(--text-fg);
+    line-height: 1em;
+    margin-bottom: 1.5em;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+tr:first-of-type > th { border-bottom: 0.08em solid var(--text-fg) }
+tr, th, td { padding: 0.5em }
+
+/* highlight.js */
+code, .hljs {
+    background-color: var(--block-bg);
+    font-size: inherit;
+    padding: 0.1em 0.2em;
+}
+
+.hljs {
+    display: block;
+    line-height: 1.45em;
+    overflow-x: auto;
+}
+
+.hljs-built_in .hljs-name, .hljs-title, .hljs-type { color: var(--cyan) }
+.hljs-code, .hljs-selector-class { color: var(--bright-blue) }
+.hljs-comment, .hljs-deletion, .hljs-meta { color: var(--fade-fg) }
+.hljs-comment, .hljs-emphasis { font-style: italic; }
+.hljs-string { color: var(--bright-green) }
+.hljs-strong { font-weight: bold; }
+
+.hljs-bullet, .hljs-quote, .hljs-link, .hljs-number,
+.hljs-regexp, .hljs-literal { color: var(--bright-magenta) }
+
+.hljs-keyword, .hljs-selector-tag, .hljs-section,
+.hljs-attribute, .hljs-variable { color: var(--red) }
+
+.hljs-subst, .hljs-symbol, .hljs-selector-id, .hljs-selector-attr,
+.hljs-selector-pseudo, .hljs-template-tag, .hljs-template-variable,
+.hljs-addition { color: var(--red) }
diff --git a/_layout/head.html b/_layout/head.html
index 6a46812..da6421c 100644
--- a/_layout/head.html
+++ b/_layout/head.html
@@ -3,11 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  {{if hasmath}} {{insert head_katex.html }}     {{end}}
-  {{if hascode}} {{insert head_highlight.html }}   {{end}}
+  {{if hasmath}}{{insert head_katex.html}}{{end}}
   <link rel="stylesheet" href="/css/style.css">
   <link rel="icon" href="/assets/favicon.png">
-  {{isdef title}} <title>{{fill title}}</title>  {{end}}
+  {{isdef title}}<title>{{fill title}} - McSinyx</title>{{end}}
 </head>
 <body>
   {{insert header.html}}
diff --git a/_layout/head_highlight.html b/_layout/head_highlight.html
deleted file mode 100644
index b0b9142..0000000
--- a/_layout/head_highlight.html
+++ /dev/null
@@ -1 +0,0 @@
-<link rel="stylesheet" href="/libs/highlight/github.min.css">
diff --git a/_libs/highlight/github.min.css b/_libs/highlight/github.min.css
deleted file mode 100644
index 6bf39bd..0000000
--- a/_libs/highlight/github.min.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.hljs { display: block; font-size: 14px; line-height: 1.45em; overflow-x: auto; padding: 0.5em; color: var(--text-color); background: var(--block-background); }
-
-.hljs-comment,
-.hljs-quote { color: #998; font-style: italic; }
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst { color: var(--text-color); font-weight: 700; }
-
-.hljs-literal,
-.hljs-number,
-.hljs-tag .hljs-attr,
-.hljs-template-variable,
-.hljs-variable { color: teal; }
-
-.hljs-doctag,
-.hljs-string { color: #d14; }
-
-.hljs-section,
-.hljs-selector-id,
-.hljs-title { color: #900; font-weight: 700; }
-.hljs-subst { font-weight: 400; }
-
-.hljs-class .hljs-title,
-.hljs-type { color: #458; font-weight: 700; }
-
-.hljs-attribute,
-.hljs-name,
-.hljs-tag { color: navy; font-weight: 400; }
-
-.hljs-link,
-.hljs-regexp { color: #009926; }
-
-.hljs-bullet,
-.hljs-symbol { color: #990073; }
-
-.hljs-built_in,
-.hljs-builtin-name { color: #0086b3; }
-.hljs-meta { color: var(--text-color); font-weight: 700; }
-.hljs-deletion { background: #fdd; }
-.hljs-addition { background: #dfd; }
-.hljs-emphasis { font-style: italic; }
-.hljs-strong { font-weight: 700; }
diff --git a/index.md b/index.md
index 5b2b7a7..1057703 100644
--- a/index.md
+++ b/index.md
@@ -1,5 +1,3 @@
-@def title = "McSinyx"
-
 # About Me
 
 Hi!  [My name is][] Nguyễn Gia Phong.  I'm a Vietnamese undergrad student