diff options
| -rw-r--r-- | .forgejo/workflows/update-site.yml | 16 | ||||
| -rw-r--r-- | config.toml | 7 | ||||
| -rw-r--r-- | content/about/index.md | 5 | ||||
| -rw-r--r-- | content/blog/first.md | 34 | ||||
| -rw-r--r-- | sass/style.scss | 84 | ||||
| -rw-r--r-- | static/favicons.js | 91 | ||||
| -rw-r--r-- | templates/base.html | 22 | ||||
| -rw-r--r-- | templates/index.html | 8 |
8 files changed, 140 insertions, 127 deletions
diff --git a/.forgejo/workflows/update-site.yml b/.forgejo/workflows/update-site.yml index fbe28fb..85249ca 100644 --- a/.forgejo/workflows/update-site.yml +++ b/.forgejo/workflows/update-site.yml @@ -1,16 +1,16 @@ on: push: paths: - - 'static/**' - - 'content/**' - - 'templates/**' + - "static/**" + - "content/**" + - "templates/**" jobs: deploy: runs-on: self-hosted steps: - - id: step1 - run: | - cd /var/www/ - git pull - zola build + - id: step1 + run: | + cd /var/www/ + git pull + zola build diff --git a/config.toml b/config.toml index 1d1b419..7d41900 100644 --- a/config.toml +++ b/config.toml @@ -12,12 +12,15 @@ generate_feeds = true feed_limit = 15 feed_filenames = ["atom.xml", "rss.xml"] +[markdown.highlighting] +light_theme = "gruvbox-light-medium" +dark_theme = "gruvbox-dark-medium" + [markdown] # Whether to do syntax highlighting # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola -highlight_code = true insert_anchor_links = "heading" - +render_emoji = true [extra] # Put all your custom variables here diff --git a/content/about/index.md b/content/about/index.md deleted file mode 100644 index 5e2f6fe..0000000 --- a/content/about/index.md +++ /dev/null @@ -1,5 +0,0 @@ -+++ -title="About" -+++ - -hi diff --git a/content/blog/first.md b/content/blog/first.md deleted file mode 100644 index 816dec9..0000000 --- a/content/blog/first.md +++ /dev/null @@ -1,34 +0,0 @@ -+++ -title = "My first post" -date = 2025-12-05 -+++ - -> \> This is my first blog post. - -```js -console.log("hi"); -``` - -* The - * the - - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tristique a nulla et imperdiet. Proin facilisis ullamcorper quam. Nam nec commodo odio. Suspendisse sit amet orci leo. Nulla massa orci, fringilla vel quam id, viverra gravida risus. Phasellus quis neque varius, blandit sapien non, facilisis ipsum. Cras at egestas nulla. Quisque maximus et quam sit amet finibus. Nam quam metus, ornare sit amet diam sit amet, dapibus tincidunt lorem. Nam quis nisi at eros pellentesque viverra. Donec dictum tempor dui sed semper. - -Pellentesque lacus est, dignissim id mauris et, consectetur consequat nisi. Morbi hendrerit erat et justo cursus, ut molestie augue cursus. Aenean porttitor, nisl a eleifend gravida, risus metus iaculis elit, eu iaculis tortor elit eget sapien. Pellentesque sagittis felis vitae libero tempus placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus sagittis ex at elementum finibus. Ut at tellus sed sem gravida pellentesque. Quisque odio nisl, mollis at aliquam ut, sagittis sit amet neque. Nunc sed vulputate elit. Quisque et enim a ligula molestie pellentesque. Fusce mauris orci, condimentum non consectetur ut, placerat vitae ex. - -Nam magna lectus, tincidunt vitae quam et, malesuada consectetur quam. Nam sed augue in nibh ornare condimentum eget sit amet diam. Sed erat urna, sagittis quis enim sed, iaculis vestibulum dui. Cras tristique convallis tortor eget ullamcorper. Nulla risus ipsum, placerat eu bibendum tempus, venenatis sed turpis. Curabitur elit elit, luctus nec purus ac, consectetur placerat tellus. Vestibulum nec magna interdum, pharetra enim et, suscipit nunc. - -Maecenas ante elit, commodo sed quam at, ullamcorper porta purus. Sed et arcu ac purus viverra finibus quis sed mauris. Cras id felis ullamcorper, convallis orci sed, auctor elit. Fusce rhoncus lacinia risus. Nullam felis nibh, accumsan ullamcorper augue consectetur, blandit commodo tortor. Nulla mattis est non lorem hendrerit, ac bibendum magna tempor. Aenean ornare sollicitudin quam ut efficitur. Cras vestibulum sem ut ex accumsan maximus. Nulla ultricies erat ac sollicitudin vestibulum. - -Praesent ultrices velit at enim fermentum pulvinar. In volutpat ultrices aliquam. Nam convallis eget leo molestie rhoncus. Quisque ac aliquet nunc. Duis eu egestas arcu. Suspendisse ullamcorper eget felis eu blandit. Morbi commodo purus suscipit, eleifend tellus sed, fermentum lacus. Vestibulum sed tincidunt odio, pharetra pretium augue. Quisque porttitor vestibulum mi, a feugiat sapien placerat sit amet. Phasellus porta ullamcorper lectus eget volutpat. Sed tortor justo, aliquet vitae dui et, pellentesque maximus arcu. Morbi sem quam, tristique ac orci eu, tincidunt scelerisque quam. Aliquam gravida ornare quam, et accumsan nunc maximus sed. - -Phasellus at velit urna. Fusce consectetur tincidunt lorem id semper. Nam sit amet ultricies velit. Sed mauris metus, interdum gravida dignissim non, rutrum vehicula urna. Nam eleifend id mauris nec congue. Morbi id interdum massa. Cras in tincidunt lacus, sit amet iaculis nisi. Curabitur facilisis purus a nunc malesuada auctor. Curabitur bibendum tristique condimentum. Pellentesque neque libero, semper in nulla at, vehicula posuere neque. Nam massa dui, faucibus ut elementum cursus, hendrerit non sapien. Morbi congue eu nisl id efficitur. Mauris suscipit, quam sit amet hendrerit vulputate, eros sem suscipit nisl, id rutrum arcu turpis semper magna. Sed et est quis massa auctor vulputate nec sed odio. - -Donec a ligula et dui tristique imperdiet eget in lacus. Ut purus mi, ultrices a eros vitae, consectetur pellentesque justo. Fusce sed justo justo. Etiam augue enim, tempus in arcu vel, semper consectetur arcu. Donec ac purus ac nunc consequat ornare. Aenean vestibulum urna leo, ac mattis lorem gravida ut. Praesent quis ullamcorper diam, at tempor lorem. Nunc vitae leo nunc. Proin nec neque augue. Vestibulum tincidunt eros vel mi dignissim pulvinar. - -Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis velit interdum, faucibus felis non, aliquet nisl. Suspendisse vitae augue lobortis, ultricies dui nec, tincidunt mauris. Integer vel lacinia sem. Duis porttitor finibus dolor. Pellentesque bibendum pellentesque nisi ac ornare. Proin in aliquet orci. Cras suscipit libero eget mi tristique porta. Nam vulputate erat vel convallis convallis. Integer odio nisi, feugiat eu finibus vel, pharetra ac dui. Aenean egestas blandit fringilla. Sed convallis rutrum tincidunt. Curabitur tortor nulla, efficitur ultrices nisl nec, convallis imperdiet ante. Nullam dignissim lorem urna, in consequat felis tincidunt at. Vivamus et purus ut mauris finibus malesuada. Curabitur vel metus eu nisl hendrerit eleifend. - -Etiam luctus scelerisque lacus id sollicitudin. In ac neque libero. Mauris cursus purus quis tempor placerat. Suspendisse potenti. Aenean a felis velit. Quisque sed dolor sapien. Sed maximus, orci eu consectetur mattis, leo eros aliquam neque, non pellentesque diam velit vitae magna. Sed placerat mollis eros, in feugiat est. Aliquam consequat mi nulla. Cras condimentum massa non magna gravida interdum. Praesent aliquet commodo odio eget tempus. Pellentesque tempor diam ut neque tristique, id venenatis velit egestas. - -Mauris hendrerit lacus vel blandit lobortis. Duis eros turpis, vulputate sed enim non, sollicitudin bibendum urna. In eget varius risus. In vitae tempor odio. Nam congue iaculis eros non cursus. Fusce sit amet risus a neque efficitur imperdiet. Morbi cursus, dui eget vulputate dapibus, sapien mi commodo lacus, eu iaculis sem metus in leo. diff --git a/sass/style.scss b/sass/style.scss index 9cd9797..efb494d 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,8 +1,10 @@ html { - font-family:sans-serif + font-family: sans-serif; } -header,main,footer { +header, +main, +footer { max-width: 40em; margin: 0 auto; } @@ -11,49 +13,77 @@ footer { text-align: center; } -nav { - padding-bottom: 1.3rem; -} - time.right { float: right; } -nav .left { - float: left; - margin-right: 1rem; -} - -nav .right { - float: right; - margin-left: 1rem; +// blockquotes modified, from spacetchi (spacetchi.net) +blockquote, +blockquote a, +q { + margin-left: 0; + margin-right: 0; + padding: 0; + color: #79740e; + @media (prefers-color-scheme: dark) { + color: #98971a; + } } -blockquote { - color: lightgreen; +blockquote > *:before, +q:before { + content: ">"; + display: inline; } -ol,ul { - white-space: nowrap; - padding-left: 16px +ol, +ul { + white-space: nowrap; + padding-left: 16px; } li { - margin-bottom: 8px + margin-bottom: 8px; } a { text-decoration: underline; + padding: 5px; } -@media (prefers-color-scheme: dark) { - a { - color: white; +body, +a { + background-color: #fbf1c7; + color: #3c3836; + // a:visited { + // color: #076678; + // } + @media (prefers-color-scheme: dark) { + background-color: #282828; + color: #ebdbb2; } } -@media (prefers-color-scheme: light) { - a { - color: black; - } +// syntax highlighting +.giallo-l { + display: inline-block; + min-height: 1lh; + width: 100%; +} +.giallo-ln { + display: inline-block; + user-select: none; + margin-right: 0.4em; + padding: 0.4em; + min-width: 3ch; + text-align: right; + opacity: 0.8; +} + +header, +footer { + display: flex; + justify-content: space-between; + align-items: center; + max-height: 2em; } diff --git a/static/favicons.js b/static/favicons.js index 2eac641..382ee78 100644 --- a/static/favicons.js +++ b/static/favicons.js @@ -1,6 +1,6 @@ -// from sizeof.cat +// from sizeof.cat -function favicons () { +function favicons() { this.hidden = "hidden"; this.visibilityChange = "visibilitychange"; this.favicon = document.querySelector("[rel='shortcut icon']").href; @@ -13,40 +13,45 @@ function favicons () { let title = "Reddit - Dive into anything"; let favicon = "/img/favicons/reddit.ico"; return { - title, favicon - } + title, + favicon, + }; }, /* X, formerly known as Twitter */ x: () => { let title = "X. It's what's happening / X"; let favicon = "/img/favicons/x.ico"; return { - title, favicon - } + title, + favicon, + }; }, /* Bluesky */ bluesky: () => { let title = "Discover - Bluesky"; let favicon = "/img/favicons/bluesky.ico"; return { - title, favicon - } + title, + favicon, + }; }, /* Wikipedia */ wikipedia: () => { let title = "Wikipedia"; let favicon = "/img/favicons/wikipedia.ico"; return { - title, favicon - } + title, + favicon, + }; }, /* TikTok, where the hip kids are hanging out */ tiktok: () => { let title = "Explore - Find your favourite videos on TikTok"; let favicon = "/img/favicons/tiktok.ico"; return { - title, favicon - } + title, + favicon, + }; }, /* Facebook, your grandma is most likely here */ facebook: () => { @@ -55,8 +60,9 @@ function favicons () { let title = "(" + count + ") Facebook"; let favicon = "/img/favicons/facebook.ico"; return { - title, favicon - } + title, + favicon, + }; }, /* Instagram */ instagram: () => { @@ -65,38 +71,43 @@ function favicons () { let title = "(" + count + ") Instagram"; let favicon = "/img/favicons/instagram.ico"; return { - title, favicon - } - } - } + title, + favicon, + }; + }, + }; /* Those "services" are enabled, which means the web browser tab can change favicon/title using their data. */ this.enabledServices = [ - 'x', - 'reddit', - 'bluesky', - 'instagram', - 'tiktok', - 'facebook', - 'wikipedia' + "x", + "reddit", + "bluesky", + "instagram", + "tiktok", + "facebook", + "wikipedia", ]; /* Initialization function, checks if the web browser has the specified event listeners and binds a handler to the existing one. */ this.init = function () { - if (typeof document.mozHidden !== 'undefined') { + if (typeof document.mozHidden !== "undefined") { this.hidden = "mozHidden"; this.visibilityChange = "mozvisibilitychange"; - } else if (typeof document.msHidden !== 'undefined') { + } else if (typeof document.msHidden !== "undefined") { this.hidden = "msHidden"; this.visibilityChange = "msvisibilitychange"; - } else if (typeof document.webkitHidden !== 'undefined') { + } else if (typeof document.webkitHidden !== "undefined") { this.hidden = "webkitHidden"; this.visibilityChange = "webkitvisibilitychange"; } - document.addEventListener(this.visibilityChange, this.handler.bind(this), false); - } + document.addEventListener( + this.visibilityChange, + this.handler.bind(this), + false, + ); + }; /* The default function which returns the initial favicon/title pair of the page, so it can get swapped back upon tab activation. */ @@ -104,23 +115,27 @@ function favicons () { let title = this.title; let favicon = this.favicon; this.update({ - title, favicon + title, + favicon, }); - } + }; /* This function updates the favicon/title pair of the web browser tab when the tab is not focused (hidden from view). We're using a cache-busting technique so that the favicon is freshly loaded and not cached. */ this.update = function (data) { let cacheBuster = "?v=" + Math.round(Math.random() * 10000000); - let link = document.createElement('link'); + let link = document.createElement("link"); link.type = "image/x-icon"; link.rel = "shortcut icon"; link.href = data.favicon + cacheBuster; - document.getElementsByTagName("head")[0].querySelector("[rel='shortcut icon']").remove(); + document + .getElementsByTagName("head")[0] + .querySelector("[rel='shortcut icon']") + .remove(); document.getElementsByTagName("head")[0].appendChild(link); document.title = data.title; - } + }; /* The spoof() function randomizes the enabled "services" and picks one from them, updating the tab favicon and title. */ @@ -130,7 +145,7 @@ function favicons () { if (service && this.services[service]) { this.update(this.services[service]()); } - } + }; /* The default event handler which checks whether the current tab is hidden, and if it is then it swaps the favicon/title pair with one from the @@ -141,12 +156,12 @@ function favicons () { } else { this.default(); } - } + }; /* Autorun the initialization function. */ this.init(); } -document.addEventListener("DOMContentLoaded", function(event) { +document.addEventListener("DOMContentLoaded", function (event) { favicons(); }); diff --git a/templates/base.html b/templates/base.html index 83b5cc3..993350d 100644 --- a/templates/base.html +++ b/templates/base.html @@ -30,13 +30,15 @@ </script> <header> + <a href="/" + ><img + src="/favicon.ico" + alt="sakamoto" + style="width: 25px; height: 25px" + /></a> <nav> - <a class="left" href="/">sakamoto</a> - <a class="left" href="/about">about</a> - <a class="left" href="https://git.sakamoto.network">git</a> - <a class="left" href="/blog">blog</a> - <a class="right" href="/rss.xml">rss</a> - <a class="right" href="/atom.xml">atom</a> + <a href="https://git.sakamoto.network">git</a> + <a href="/blog">blog</a> </nav> </header> @@ -46,6 +48,12 @@ <hr /> - <footer>fish</footer> + <footer> + <p>No rights reserved. Birds aren't real.</p> + <nav> + <a href="/rss.xml">rss</a> + <a href="/atom.xml">atom</a> + </nav> + </footer> </body> </html> diff --git a/templates/index.html b/templates/index.html index a01d58f..49d1a78 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,8 +1,6 @@ {% extends "base.html" %} {% block title %} sakamoto.network {% endblock title %} {% block content %} -<h1>sakamoto.network</h1> - -<p>I host services for a few friends.</p> +<!-- <h1>sakamoto.network</h1> --> <h2>Services</h2> @@ -14,11 +12,9 @@ <li><a href="https://paste.sakamoto.network">rustypaste</a></li> </ul> -{% set blog = get_section(path="blog/_index.md") %} - +{% set blog = get_section(path="blog/_index.md") %} {% if blog.pages %} <h2>Recent posts</h2> -{% if blog.pages %} <ul> {% for post in blog.pages | slice(end=5) %} <li> |