├── layouts ├── partials │ ├── foot_custom.html │ ├── head_custom.html │ ├── footer.html │ └── header.html ├── robots.txt ├── 404.html └── _default │ ├── terms.html │ ├── list.html │ └── single.html ├── .gitignore ├── exampleSite ├── static │ ├── css │ │ └── theme-override.css │ └── images │ │ ├── tn.png │ │ ├── favicon.ico │ │ ├── grayf0x.jpg │ │ ├── screenshot.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── partywizard.gif │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ └── android-chrome-512x512.png ├── content │ ├── post │ │ ├── 2012-01-23-juicy-code.md │ │ ├── 2012-04-23-hacker-with-horn.md │ │ ├── 2015-07-23-command-line-awesomeness.md │ │ └── 2018-08-30-markdown-guide.md │ └── _index.md └── hugo.toml ├── images ├── tn.png ├── dark.png ├── light.png └── screenshot.png ├── archetypes └── default.md ├── theme.toml ├── static └── css │ ├── fonts.css │ └── style.css ├── LICENSE.md └── README.md /layouts/partials/foot_custom.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/partials/head_custom.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.swp 3 | -------------------------------------------------------------------------------- /exampleSite/static/css/theme-override.css: -------------------------------------------------------------------------------- 1 | footer { font-size: 90%; } 2 | -------------------------------------------------------------------------------- /images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/images/tn.png -------------------------------------------------------------------------------- /images/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/images/dark.png -------------------------------------------------------------------------------- /layouts/robots.txt: -------------------------------------------------------------------------------- 1 | # robots.txt 2 | User-agent: * 3 | Disallow: 4 | Disallow: /cgi-bin/ -------------------------------------------------------------------------------- /images/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/images/light.png -------------------------------------------------------------------------------- /archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '' 3 | date: '' 4 | description: '' 5 | author: '' 6 | --- 7 | -------------------------------------------------------------------------------- /images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/images/screenshot.png -------------------------------------------------------------------------------- /exampleSite/static/images/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/tn.png -------------------------------------------------------------------------------- /exampleSite/static/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/favicon.ico -------------------------------------------------------------------------------- /exampleSite/static/images/grayf0x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/grayf0x.jpg -------------------------------------------------------------------------------- /exampleSite/static/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/screenshot.png -------------------------------------------------------------------------------- /exampleSite/static/images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/favicon-16x16.png -------------------------------------------------------------------------------- /exampleSite/static/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/favicon-32x32.png -------------------------------------------------------------------------------- /exampleSite/static/images/partywizard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/partywizard.gif -------------------------------------------------------------------------------- /layouts/404.html: -------------------------------------------------------------------------------- 1 | {{ partial "header.html" . }} 2 | 3 | 404 - You once were found. But now you're lost. 4 | 5 | {{ partial "footer.html" . }} 6 | -------------------------------------------------------------------------------- /exampleSite/static/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/apple-touch-icon.png -------------------------------------------------------------------------------- /exampleSite/static/images/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/android-chrome-192x192.png -------------------------------------------------------------------------------- /exampleSite/static/images/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goodroot/hugo-classic/HEAD/exampleSite/static/images/android-chrome-512x512.png -------------------------------------------------------------------------------- /layouts/_default/terms.html: -------------------------------------------------------------------------------- 1 | {{ partial "header.html" . }} 2 | 3 |

{{ .Title }}

4 | 5 | 12 | 13 | {{ partial "footer.html" . }} 14 | -------------------------------------------------------------------------------- /layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | {{ partial "header.html" . }} 2 | 3 |
4 | {{if not .IsHome }} 5 |

{{ .Title | markdownify }}

6 | {{ end }} 7 | 8 | {{ .Content }} 9 | 10 | 20 |
21 | {{ partial "footer.html" . }} 22 | -------------------------------------------------------------------------------- /theme.toml: -------------------------------------------------------------------------------- 1 | description = "A minimal blog theme, for those who love text. Based off the eXtremely minimal theme by Yihui Xui." 2 | features = ["blog"] 3 | homepage = "https://goodroot.ca" 4 | license = "MIT" 5 | licenselink = "https://github.com/goodroot/hugo-classic/blob/master/LICENSE.md" 6 | min_version = "0.18" 7 | name = "Hugo - Classic" 8 | tags = ["minimal", "blog", "personal", "simple", "clean", "starter", "minimalist", "darkmode"] 9 | 10 | [author] 11 | homepage = "https://goodroot.ca" 12 | name = "Kellen Evan Person" 13 | 14 | [original] 15 | author = "Yihui Xui" 16 | homepage = "https://xmin.yihui.name/" 17 | repo = "https://github.com/yihui/hugo-xmin" 18 | -------------------------------------------------------------------------------- /exampleSite/content/post/2012-01-23-juicy-code.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Juicy Code 3 | author: Open Source 4 | date: '2012-01-23' 5 | categories: 6 | - Code 7 | tags: 8 | - Juicy 9 | slug: juicy-code 10 | --- 11 | 12 | Check out this JUICY! code: 13 | 14 | ~~~ruby 15 | def with_value_from_database(value) 16 | self.class.from_database(name, value, type) 17 | end 18 | 19 | def with_cast_value(value) 20 | self.class.with_cast_value(name, value, type) 21 | end 22 | 23 | def with_type(type) 24 | if changed_in_place? 25 | with_value_from_user(value).with_type(type) 26 | else 27 | self.class.new(name, value_before_type_cast, type, original_attribute) 28 | end 29 | end 30 | ~~~ 31 | -------------------------------------------------------------------------------- /exampleSite/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home 3 | description: "The personal writings and expressions of Grayfox, otherwise known as you too and everyone else. It is a loving and silly place." 4 | --- 5 | A foxy face 9 | 10 | ## Welcome, friend 11 | 12 | ### :purple_heart: :earth_africa: :purple_heart: 13 | 14 | Born in [The Abyss](https://en.wikipedia.org/wiki/Edmonton), **Grayfox** - also known as Zerkle Snorp - has spent over two decades fiddling with things on the Internet. Today he does nothing, so stop asking. 15 | 16 | Their greatest joys are darkness and its quietudes. 17 | 18 | 19 | 20 | --- 21 | 22 | ## Musings -------------------------------------------------------------------------------- /static/css/fonts.css: -------------------------------------------------------------------------------- 1 | @import url('https://rsms.me/inter/inter.css'); 2 | html { font-family: 3 | 'Inter', 4 | sans-serif, 5 | 'Apple Color Emoji', 6 | 'Segoe UI Emoji', 7 | 'Segoe UI Symbol'; 8 | } 9 | @supports (font-variation-settings: normal) { 10 | html { font-family: 11 | 'Inter var', 12 | sans-serif, 13 | 'Apple Color Emoji', 14 | 'Segoe UI Emoji', 15 | 'Segoe UI Symbol'; 16 | } 17 | } 18 | 19 | code { 20 | font-family: 21 | -apple-system, 22 | BlinkMacSystemFont, 23 | "Segoe UI", 24 | Helvetica, 25 | Arial, 26 | sans-serif, 27 | "Apple Color Emoji", 28 | "Segoe UI Emoji", 29 | "Segoe UI Symbol"; 30 | font-size: 85%; 31 | } 32 | -------------------------------------------------------------------------------- /layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ partial "header.html" . }} 2 |
3 |

{{ .Title | markdownify }}

4 | {{ with .Params.author }}

{{ . }}

{{ end }} 5 | {{ if .Params.date }}

{{ .Date.Format "2006/01/02" }}

{{ end }} 6 |

7 | {{ range $i := (slice "categories" "tags") }} 8 | {{ with ($.Param $i) }} 9 | {{ $i | title }}: {{ range $k := . }}{{$k}} {{ end }} 10 | {{ end }} 11 | {{ end }} 12 |

13 |
14 | 15 | {{ if .Params.toc }} 16 | {{ with .TableOfContents }} 17 |
18 |

Table of Contents

19 | {{ . | safeHTML }} 20 |
21 | {{ end }} 22 | {{ end }} 23 | 24 |
25 |
26 | {{ .Content }} 27 | >> Home 28 |
29 |
30 | {{ partial "footer.html" . }} 31 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so, 8 | subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 19 | -------------------------------------------------------------------------------- /exampleSite/hugo.toml: -------------------------------------------------------------------------------- 1 | baseurl = "https://example.com" 2 | enableEmoji = true 3 | footnotereturnlinkcontents = "↩" 4 | googleAnalytics = "" 5 | ignoreFiles = ["\\.Rmd$", "_files$", "_cache$"] 6 | languageCode = "en-us" 7 | theme = "hugo-classic" 8 | title = "Classic" 9 | 10 | [markup.goldmark.renderer] 11 | unsafe = true 12 | 13 | [markup.highlight] 14 | anchorLineNos = false 15 | codeFences = true 16 | guessSyntax = false 17 | hl_Lines = "" 18 | lineAnchors = "" 19 | lineNoStart = 1 20 | lineNos = false 21 | lineNumbersInTable = true 22 | noClasses = true 23 | style = "monokai" 24 | tabWidth = 4 25 | 26 | [permalinks] 27 | post = "/post/:year/:month/:day/:slug/" 28 | 29 | [[menu.main]] 30 | name = "Categories" 31 | url = "/categories/" 32 | weight = 1 33 | [[menu.main]] 34 | name = "Tags" 35 | url = "/tags/" 36 | weight = 2 37 | [[menu.feed]] 38 | name = "Subscribe" 39 | url = "/index.xml" 40 | 41 | [params] 42 | custom_css = ["css/theme-override.css"] 43 | description = "A simple, minimal blog for those who love text." 44 | footer = "Open-Source | [Github](https://github.com/goodroot/hugo-classic) | [Keybase](https://keybase.io/goodroot)" 45 | -------------------------------------------------------------------------------- /exampleSite/content/post/2012-04-23-hacker-with-horn.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hacker with Bullhorn 3 | author: Open-Source 4 | date: '2012-04-23' 5 | categories: 6 | - Bullhorn 7 | - Example 8 | slug: hacker-with-horn 9 | --- 10 | 11 | Hacker with bullhorn: "Save your money! Accept one of our free tanks! It is invulnerable, and can drive across rocks and swamps at ninety miles an hour while getting a hundred miles to the gallon!" 12 | 13 | Prospective station wagon buyer: "I know what you say is true...but...er...I don't know how to maintain a tank!" 14 | 15 | Bullhorn: "You don't know how to maintain a station wagon either!" 16 | 17 | Buyer: "But this dealership has mechanics on staff. If something goes wrong with my station wagon, I can take a day off work, bring it here, and pay them to work on it while I sit in the waiting room for hours, listening to elevator music." 18 | 19 | Bullhorn: "But if you accept one of our free tanks we will send volunteers to your house to fix it for free while you sleep!" 20 | 21 | Buyer: "Stay away from my house, you freak!" 22 | 23 | Bullhorn: "But..." 24 | 25 | Buyer: "Can't you see that everyone is buying station wagons?" 26 | -------------------------------------------------------------------------------- /layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /exampleSite/content/post/2015-07-23-command-line-awesomeness.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Command Line Awesomeness" 3 | date: '2012-03-12' 4 | categories: 5 | - Blog 6 | tags: 7 | - HTML 8 | --- 9 | 10 | This crud is called HTML (HyperText Markup Language) and it is basically a very simple programming language instructing your web browser how to draw a page on a screen. Anyone can learn HTML and many people do. The important thing is that no matter what splendid multimedia web pages they might represent, HTML files are just telegrams. 11 | 12 | > When Ronald Reagan was a radio announcer, he used to call baseball games by reading the terse descriptions that trickled in over the telegraph wire and were printed out on a paper tape. He would sit there, all by himself in a padded room with a microphone, and the paper tape would eke out of the machine and crawl over the palm of his hand printed with cryptic abbreviations. If the count went to three and two, Reagan would describe the scene as he saw it in his mind's eye: "The brawny left-hander steps out of the batter's box to wipe the sweat from his brow. The umpire steps forward to sweep the dirt from home plate." and so on. When the cryptogram on the paper tape announced a base hit, he would whack the edge of the table with a pencil, creating a little sound effect, and describe the arc of the ball as if he could actually see it. His listeners, many of whom presumably thought that Reagan was actually at the ballpark watching the game, would reconstruct the scene in their minds according to his descriptions. 13 | 14 | This is exactly how the World Wide Web works: the HTML files are the pithy description on the paper tape, and your Web browser is Ronald Reagan. The same is true of Graphical User Interfaces in general. 15 | -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{ .Title }} | {{ .Site.Title }} 14 | 15 | 16 | {{ range .Site.Params.custom_css -}} 17 | 18 | {{- end }} 19 | {{ partial "head_custom.html" . }} 20 | 21 | 22 | 23 |
24 | 47 |
48 | 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hugo.io - Classic Theme 2 | 3 | Classic is a stylized fork of the **XMin** theme, written by [Yihui Xie](https://yihui.name). 4 | 5 | Provides `highlight.js` for syntax highlighting, emoji support, Inter and optional **_darkmode_**. 6 | 7 | [**View live demo**](https://goodroot.ca) 8 | 9 | ### Instructions 10 | 11 | 1: Install Hugo. 12 | 13 | ``` 14 | brew install hugo 15 | ``` 16 | 17 | 2: Create a new site. 18 | 19 | ``` 20 | hugo new site classic 21 | ``` 22 | 23 | 3: Change to themes dir. 24 | 25 | ``` 26 | cd classic/themes 27 | ``` 28 | 29 | 4: Clone the repo 30 | 31 | ``` 32 | git clone git@github.com:goodroot/hugo-classic.git 33 | ``` 34 | 35 | 5: Copy files within the `exampleSite` directory 36 | 37 | ``` 38 | cp -a hugo-classic/exampleSite/. ../ 39 | ``` 40 | 41 | 6: Run `hugo server` within `classic/` 42 | 43 | ``` 44 | cd .. && hugo server 45 | ``` 46 | 47 | ### New Posts 48 | 49 | Make new posts: 50 | 51 | ``` 52 | hugo new post/good-to-great.md 53 | ``` 54 | 55 | ### Header Colour 56 | 57 | Adjust header colour within `static/css/style.css` 58 | 59 | ``` 60 | header { 61 | background: #613DC1; 62 | } 63 | ``` 64 | 65 | ... `background:` to any colour value you'd like! 66 | 67 | For header font: 68 | 69 | ``` 70 | header a { 71 | color: #fff; 72 | } 73 | ``` 74 | 75 | Change `color:` to a nice matching colour. 76 | 77 | ### Darkmode 78 | 79 | Match or over-ride system-wide dark/light settings 80 | 81 | 1. Open `static/css/style.css` 82 | 83 | 2. Edit the following attributes to match light/dark 84 | 85 | ```css 86 | /* darkmode */ 87 | @media (prefers-color-scheme: dark) { 88 | ... 89 | } 90 | 91 | /* lightmode */ 92 | @media (prefers-color-scheme: light) { 93 | ... 94 | } 95 | ``` 96 | 97 | #### Screenshot 98 | 99 | ![Hugo Classic dark mode](/images/dark.png) 100 | ![Hugo Classic light mode](/images/light.png) 101 | 102 | ## Blog Posts 103 | 104 | hugo-classic has appeared in... 105 | 106 | [15 Hugo Framework blog themes](https://terrty.net/2018/15-hugo-framework-blog-themes/) by [paskal](https://github.com/paskal) 107 | -------------------------------------------------------------------------------- /exampleSite/content/post/2018-08-30-markdown-guide.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown Guide (modified) 3 | author: Open Source 4 | date: '2018-08-30' 5 | categories: 6 | - Example 7 | tags: 8 | - Markdown 9 | --- 10 | 11 | An h1 header 12 | ============ 13 | 14 | Paragraphs are separated by a blank line. 15 | 16 | 2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists 17 | look like: 18 | 19 | * this one 20 | * that one 21 | * the other one 22 | 23 | Note that --- not considering the asterisk --- the actual text 24 | content starts at 4-columns in. 25 | 26 | > Block quotes are 27 | > written like so. 28 | > 29 | > They can span multiple paragraphs, 30 | > if you like. 31 | 32 | Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all 33 | in chapters 12--14"). Three dots ... will be converted to an ellipsis. 34 | Unicode is supported. ☺ 35 | 36 | 37 | 38 | An h2 header 39 | ------------ 40 | 41 | Here's a numbered list: 42 | 43 | 1. first item 44 | 2. second item 45 | 3. third item 46 | 47 | Note again how the actual text starts at 4 columns in (4 characters 48 | from the left side). Here's a code sample: 49 | 50 | # Let me re-iterate ... 51 | for i in 1 .. 10 { do-something(i) } 52 | 53 | As you probably guessed, indented 4 spaces. By the way, instead of 54 | indenting the block, you can use delimited blocks, if you like: 55 | 56 | ~~~ 57 | define foobar() { 58 | print "Welcome to flavor country!"; 59 | } 60 | ~~~ 61 | 62 | (which makes copying & pasting easier). You can optionally mark the 63 | delimited block for Pandoc to syntax highlight it: 64 | 65 | ~~~python 66 | import time 67 | # Quick, count to ten! 68 | for i in range(10): 69 | # (but not *too* quick) 70 | time.sleep(0.5) 71 | print i 72 | ~~~ 73 | 74 | 75 | 76 | ### An h3 header ### 77 | 78 | Now a nested list: 79 | 80 | 1. First, get these ingredients: 81 | 82 | * carrots 83 | * celery 84 | * lentils 85 | 86 | 2. Boil some water. 87 | 88 | 3. Dump everything in the pot and follow 89 | this algorithm: 90 | 91 | find wooden spoon 92 | uncover pot 93 | stir 94 | cover pot 95 | balance wooden spoon precariously on pot handle 96 | wait 10 minutes 97 | goto first step (or shut off burner when done) 98 | 99 | Do not bump wooden spoon or it will fall. 100 | 101 | Notice again how text always lines up on 4-space indents (including 102 | that last line which continues item 3 above). 103 | 104 | Here's a link to [a website](http://foo.bar), to a [local 105 | doc](local-doc.html), and to a [section heading in the current 106 | doc](#an-h2-header). Here's a footnote [^1]. 107 | 108 | [^1]: Footnote text goes here. 109 | 110 | Tables can look like this: 111 | 112 | size|material |color 113 | ----|------------|------------ 114 | 9 |leather |brown 115 | 10 |hemp canvas |natural 116 | 11 |glass |transparent 117 | 118 | Table: Shoes, their sizes, and what they're made of 119 | 120 | (The above is the caption for the table.) 121 | 122 | A horizontal rule follows. 123 | 124 | *** 125 | 126 | Here's a definition list: 127 | 128 | apples 129 | : Good for making applesauce. 130 | 131 | oranges 132 | : Citrus! 133 | 134 | tomatoes 135 | : There's no "e" in tomatoe. 136 | 137 | (Put a blank line between each term/definition pair to spread 138 | things out more.) 139 | 140 | and images can be specified like so: 141 | 142 | ![example image](/images/partywizard.gif "An exemplary image") 143 | 144 | Inline math equations go in like so: \\(\omega = d\phi / dt\\). 145 | Display math should get its own line and be put in in 146 | double-dollarsigns: 147 | 148 | $$I = \int \rho R^{2} dV$$ 149 | 150 | And note that you can backslash-escape any punctuation characters 151 | which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc. 152 | 153 | #### Images auto center: 154 | 155 | ![Party](http://emojis.slackmojis.com/emojis/images/1475875185/1223/party-dinosaur.gif?1475875185) 156 | -------------------------------------------------------------------------------- /static/css/style.css: -------------------------------------------------------------------------------- 1 | /* Dark mode */ 2 | @media (prefers-color-scheme: dark) { 3 | body { 4 | background-color: #393E41; 5 | color: white; 6 | } 7 | 8 | blockquote { 9 | background: #393E41; 10 | } 11 | 12 | a { 13 | color: #EBC3DB; 14 | } 15 | 16 | header { 17 | background: #393E41; 18 | border-bottom: 2px dotted #EBC3DB; 19 | 20 | } 21 | 22 | .article-meta, .menu a { 23 | background: #393E41; 24 | color: white; 25 | } 26 | 27 | table { 28 | margin: auto; 29 | border-top: 1px solid #666; 30 | border-bottom: 1px solid #666; 31 | } 32 | table thead th { border-bottom: 1px solid #666; } 33 | th, td { padding: 5px; } 34 | tr:nth-child(even) { background: #666 } 35 | 36 | } 37 | 38 | 39 | /* Light mode */ 40 | @media (prefers-color-scheme: light) { 41 | blockquote { 42 | background: #f9f9f9; 43 | } 44 | 45 | a { 46 | color: #613DC1; 47 | } 48 | 49 | header { 50 | background: #613DC1; 51 | } 52 | 53 | .article-meta, .menu a { 54 | background: #E8DBC5; 55 | color: #000; 56 | } 57 | 58 | table { 59 | margin: auto; 60 | border-top: 1px solid #666; 61 | border-bottom: 1px solid #666; 62 | } 63 | table thead th { border-bottom: 1px solid #ddd; } 64 | th, td { padding: 5px; } 65 | tr:nth-child(even) { background: #eee } 66 | 67 | } 68 | 69 | 70 | body { 71 | max-width: 800px; 72 | margin: auto; 73 | padding: .2em; 74 | line-height: 1.5em; 75 | } 76 | 77 | h1 { 78 | line-height: 1.5em; 79 | } 80 | 81 | /* Table of Contents, if wanted 82 | 83 | Add to yaml: 84 | 85 | output: 86 | blogdown::html_page: 87 | toc: true 88 | 89 | */ 90 | 91 | #TableOfContents, #TOC { 92 | border: 1px solid #eee; 93 | border-radius: 5px; 94 | } 95 | 96 | /* Header and Footer */ 97 | .menu li { display: inline-block; } 98 | .article-meta, .menu a { 99 | text-decoration: none; 100 | padding: 5px; 101 | border-radius: 5px; 102 | border-style: dotted; 103 | border-width: 1px; 104 | margin: 20px 0px 20px 0px; 105 | } 106 | 107 | .terms { font-size: .9em; } 108 | .menu, .article-meta, footer { text-align: center; } 109 | .title { font-size: 1.1em; } 110 | footer a { text-decoration: none; } 111 | 112 | .pull-left { 113 | float: left 114 | } 115 | .pull-right { 116 | float: right 117 | } 118 | 119 | a { 120 | text-decoration: none; 121 | } 122 | 123 | a:hover { 124 | text-decoration: underline; 125 | } 126 | 127 | /* Adjust background at your leisure! */ 128 | header { 129 | position: relative; 130 | width: 100%; 131 | height: 1.75rem; 132 | font-size: 1rem; 133 | } 134 | 135 | header ul, 136 | header ol { 137 | margin: 0; 138 | padding: 0; 139 | list-style: none 140 | } 141 | header nav { 142 | padding: 0 0.5rem 143 | } 144 | 145 | header a { 146 | color: #fff; 147 | line-height: 1.75rem; 148 | padding: 0 0.5rem 149 | } 150 | header a:hover, 151 | header .current a { 152 | color: #fff 153 | } 154 | 155 | /* Code Boxes */ 156 | pre { 157 | border: 2px solid #EBC3DB; 158 | padding: 1em; 159 | overflow-x: auto; 160 | } 161 | pre code { background: none; } 162 | 163 | code { 164 | background-color: light-dark(#D6D6D6, #888); 165 | border-radius: 3px; 166 | padding: 0.2em; 167 | overflow-x: auto; 168 | } 169 | 170 | /* Images, tables, misc. */ 171 | img, iframe, video { 172 | max-width: 100%; 173 | height: auto; 174 | display: block; 175 | margin-left: auto; 176 | margin-right: auto; 177 | } 178 | 179 | main { 180 | hyphens: auto; 181 | max-width: 650px; 182 | margin-left: auto; 183 | margin-right: auto; 184 | line-height: 1.7em; 185 | hyphens: auto; 186 | display: block; 187 | font-size: 1.1em; 188 | } 189 | main a { 190 | font-weight: bold; 191 | } 192 | 193 | blockquote { 194 | 195 | border-left: 5px solid #ccc; 196 | padding: 3px 1em 3px; 197 | } 198 | 199 | .content-wrapper { 200 | padding: 0px 12px 0px 12px; 201 | } 202 | #foxy { 203 | min-width: 40px; 204 | float: right; 205 | padding: 10px; 206 | display: block; 207 | } 208 | 209 | 210 | #table-of-contents { 211 | } 212 | 213 | /* Small devices, phones */ 214 | @media only screen and (min-width : 480px) { 215 | #foxy { 216 | min-width: 40px; 217 | float: center; 218 | padding: 10px 10px 10px 20px; 219 | display: block; 220 | } 221 | 222 | } 223 | 224 | /* 在大屏幕上应用特定样式 */ 225 | @media screen and (min-width: 768px) { 226 | #table-of-contents { 227 | position: fixed; /* 固定定位，使其悬浮在页面上 */ 228 | top: 50%; /* 上边距为50% */ 229 | right: 15px; /* 右边距为0，将其放在右侧 */ 230 | transform: translateY(-50%); /* 使用transform来垂直居中 */ 231 | background-color: #f0f0f0; /* 设置背景颜色 */ 232 | padding: 10px; /* 添加一些内边距以增加可读性 */ 233 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */ 234 | width: 250px; /* 设置宽度 */ 235 | max-height: 70vh; /* 设置最大高度为视口的70% */ 236 | overflow-y: auto; /* 添加垂直滚动条 */ 237 | } 238 | } 239 | 240 | --------------------------------------------------------------------------------