diff options
| -rw-r--r-- | _css/style.css | 296 | ||||
| -rw-r--r-- | _layout/head.html | 5 | ||||
| -rw-r--r-- | _layout/head_highlight.html | 1 | ||||
| -rw-r--r-- | _libs/highlight/github.min.css | 43 | ||||
| -rw-r--r-- | index.md | 2 |
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 |