From 77469be23fe1777d776c0b0abd4c77f6e4080196 Mon Sep 17 00:00:00 2001 From: jaseg Date: Sun, 19 Mar 2023 15:27:45 +0100 Subject: Make site mobile-friendly, make code listings pretty --- content/projects/gerbolyze/README.rst | 2 +- deploy.py | 5 +- docutils.conf | 3 + hack/rst2html | 50 ++++++ themes/conspiracy/assets/css/style.css | 183 ++++++++++++++++++++- .../fonts/fira_code/FiraCode-VariableFont_wght.ttf | Bin 0 -> 259388 bytes themes/conspiracy/assets/fonts/fira_code/OFL.txt | 93 +++++++++++ .../conspiracy/assets/fonts/fira_code/README.txt | 67 ++++++++ .../fonts/fira_code/static/FiraCode-Bold.ttf | Bin 0 -> 188876 bytes .../fonts/fira_code/static/FiraCode-Light.ttf | Bin 0 -> 188468 bytes .../fonts/fira_code/static/FiraCode-Medium.ttf | Bin 0 -> 188244 bytes .../fonts/fira_code/static/FiraCode-Regular.ttf | Bin 0 -> 188252 bytes .../fonts/fira_code/static/FiraCode-SemiBold.ttf | Bin 0 -> 188604 bytes 13 files changed, 397 insertions(+), 6 deletions(-) create mode 100644 docutils.conf create mode 100755 hack/rst2html create mode 100644 themes/conspiracy/assets/fonts/fira_code/FiraCode-VariableFont_wght.ttf create mode 100644 themes/conspiracy/assets/fonts/fira_code/OFL.txt create mode 100644 themes/conspiracy/assets/fonts/fira_code/README.txt create mode 100644 themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Bold.ttf create mode 100644 themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Light.ttf create mode 100644 themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Medium.ttf create mode 100644 themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Regular.ttf create mode 100644 themes/conspiracy/assets/fonts/fira_code/static/FiraCode-SemiBold.ttf diff --git a/content/projects/gerbolyze/README.rst b/content/projects/gerbolyze/README.rst index cfa7673..0e8262b 100644 --- a/content/projects/gerbolyze/README.rst +++ b/content/projects/gerbolyze/README.rst @@ -99,7 +99,7 @@ environment variables. Build from source (any distro) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -.. code-block:: shell +.. code:: sh git clone --recurse-submodules https://git.jaseg.de/gerbolyze.git cd gerbolyze diff --git a/deploy.py b/deploy.py index b0e87ca..d8a99c1 100644 --- a/deploy.py +++ b/deploy.py @@ -1,5 +1,6 @@ #!/usr/bin/env python3 +import os import tempfile import subprocess from pathlib import Path @@ -13,7 +14,9 @@ if __name__ == '__main__': subprocess.run(['git', 'worktree', 'add', '--detach', tmpdir], check=True) try: - subprocess.run(['hugo'], cwd=tmpdir, check=True) + env = dict(os.environ()) + env['PATH'] = Path('hack').absolute() + ':' + env['PATH'] + subprocess.run(['hugo'], cwd=tmpdir, check=True, env=env) subprocess.run(['git', 'add', '--force', 'public'], cwd=tmpdir, check=True) write_tree = subprocess.run(['git', 'write-tree', '--prefix=public/'], cwd=tmpdir, check=True, capture_output=True) tree = write_tree.stdout.strip() diff --git a/docutils.conf b/docutils.conf new file mode 100644 index 0000000..308c0f7 --- /dev/null +++ b/docutils.conf @@ -0,0 +1,3 @@ +[restructuredtext parser] +syntax_highlight: short + diff --git a/hack/rst2html b/hack/rst2html new file mode 100755 index 0000000..e3a390d --- /dev/null +++ b/hack/rst2html @@ -0,0 +1,50 @@ +#!/usr/bin/env python3 +# https://gist.github.com/mastbaum/2655700 + +import sys +import re + +import docutils.core +from docutils.transforms import Transform +from docutils.nodes import TextElement, Inline, Text +from docutils.parsers.rst import Directive, directives +from docutils.writers.html4css1 import Writer, HTMLTranslator + + +class UnfuckedHTMLTranslator(HTMLTranslator): + def __init__(self, *args, **kwargs): + super().__init__(*args, **kwargs) + self.in_literal_block = False + + def visit_literal_block(self, node): + self.in_literal_block = True + self.body.append(self.starttag(node, 'pre', CLASS='literal-block')) + self.body.append('') + + def depart_literal_block(self, node): + self.in_literal_block = False + self.body.append('\n\n') + + def visit_Text(self, node): + if self.in_literal_block: + for match in re.finditer('([^\n]*)(\n|$)', node.astext()): + text, end = match.groups() + + if text: + super().visit_Text(Text(text)) + + if end == '\n': + if isinstance(node.parent, Inline): + self.depart_inline(node.parent) + self.body.append(f'\n') + if isinstance(node.parent, Inline): + self.visit_inline(node.parent) + + else: + super().visit_Text(node) + + +html_writer = Writer() +html_writer.translator_class = UnfuckedHTMLTranslator +docutils.core.publish_cmdline(writer=html_writer) + diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css index 9ab9203..c3afe86 100644 --- a/themes/conspiracy/assets/css/style.css +++ b/themes/conspiracy/assets/css/style.css @@ -16,6 +16,57 @@ font-style: italic; } +@font-face { + font-family: "Bodoni Moda"; + src: url("{{ (resources.Get "fonts/bodoni_moda/static/BodoniModa_18pt/BodoniModa_18pt-Medium.ttf").RelPermalink }}"); +} + +@font-face { + font-family: "Fira Code"; + src: url("{{ (resources.Get "fonts/fira_code/FiraCode-VariableFont_wght.ttf").RelPermalink }}") format("truetype-variations"); + font-weight: 300 400 500 600 700; +} + +html, body { + border: 0; + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + align-items: stretch; + font-family: "Roboto Slab"; + font-weight: 350; + color: #d0d0d0; + background-color: #0d1015; +} + +strong { + font-family: "Bodoni Moda"; + font-style: italic; +} + +a:hover, a:visited, a:active, a:link { + color: #ff9449; + text-decoration: none; +} + +a:hover { + background: #fc0daf; + color: #d0d0d0; +} + +nav { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + overflow-x: scroll; + background-color: #272c35; + box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.8); + padding: 0 10px 0 10px; +} html, body { border: 0; margin: 0; @@ -92,21 +143,33 @@ main { align-self: center; margin-top: -100px; padding: 100px 100px 40px 100px; - max-width: 40em; + max-width: min(100%, 60em); + box-sizing: border-box; background-color: #272c35; box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.5); text-align: justify; hyphens: auto; } +@media (max-width: 30em) { + main { + padding-left: 20px; + padding-right: 20px; + } +} + main > .intro { margin-top: 40px; } h1, h2, h3, h4, h5, h6 { - font-family: "Manuskript Gothisch"; margin-top: 50px; margin-bottom: 8px; + font-family: "Bodoni Moda"; +} + +h1 { + font-family: "Manuskript Gothisch"; } body > header { @@ -190,13 +253,13 @@ main.cards { } tt { - font-family: monospace; + font-family: "Fira Code"; font-weight: bold; font-size: 14px; } cite { - font-family: monospace; + font-family: "Fira Code"; font-weight: bold; font-size: 14px; font-style: normal; @@ -262,8 +325,120 @@ img { display: block; } +.code { + font-family: "Fira Code"; + font-size: 13px; + white-space: pre-wrap; + word-wrap: break-word; + overflow-x: auto; + display: grid; + align-items: start; + grid-template-columns: min-content 1fr; +} + +.code > .line { + padding-left: calc(2em + 5px); + text-indent: -2em; + padding-top: 2px; + min-width: 15em; +} + +/* Make individual syntax tokens wrap anywhere */ +.code > .line > span { + overflow-wrap: anywhere; + white-space: pre-wrap; +} + +.code > .lineno { + counter-increment: lineno; + word-break: keep-all; + margin: 0; + padding-left: 15px; + padding-right: 5px; + overflow: clip; + position: relative; + text-align: right; + color: #a0a0a0; + border-right: 1px solid #e0e0e0; + align-self: stretch; +} + +.code > .lineno::after { + position: absolute; + right: 5px; + content: "\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳\a↳"; + white-space: pre; + color: #a0a0a0; +} + +.code > .lineno::before { + content: counter(lineno); +} + +.code::before { + counter-reset: lineno; +} + footer { margin-top: 30px; align-self: center; margin-bottom: 10px; + text-align: center; } + +body .hll { background-color: #404040 } +body .c { color: #d0d0d0 } /* Comment */ +body .err { color: #ffffff } /* Error */ +body .k { color: #ffffff } /* Keyword */ +body .l { color: #ffffff } /* Literal */ +body .n { color: #d0d0d0 } /* Name */ +body .o { color: #d0d0d0 } /* Operator */ +body .cm { color: #d0d0d0 } /* Comment.Multiline */ +body .cp { color: #d0d0d0 } /* Comment.Preproc */ +body .c1 { color: #d0d0d0 } /* Comment.Single */ +body .cs { color: #d0d0d0 } /* Comment.Special */ +body .kc { color: #ffffff } /* Keyword.Constant */ +body .kd { color: #ffffff } /* Keyword.Declaration */ +body .kn { color: #ffffff } /* Keyword.Namespace */ +body .kp { color: #ffffff } /* Keyword.Pseudo */ +body .kr { color: #ffffff } /* Keyword.Reserved */ +body .kt { color: #ffffff } /* Keyword.Type */ +body .na { color: #ffffff } /* Name.Attribute */ +body .nb { color: #ffffff } /* Name.Builtin */ +body .nc { color: #ffffff } /* Name.Class */ +body .no { color: #ffffff } /* Name.Constant */ +body .nd { color: #d0d0d0 } /* Name.Decorator */ +body .ni { color: #ffffff } /* Name.Entity */ +body .ne { color: #ffffff } /* Name.Exception */ +body .nf { color: #ffffff } /* Name.Function */ +body .nl { color: #ffffff } /* Name.Label */ +body .nn { color: #d0d0d0 } /* Name.Namespace */ +body .nx { color: #ffffff } /* Name.Other */ +body .py { color: #ffffff } /* Name.Property */ +body .nt { color: #ffffff } /* Name.Tag */ +body .nv { color: #ffffff } /* Name.Variable */ +body .ow { color: #ffffff } /* Operator.Word */ +body .bp { color: #ffffff } /* Name.Builtin.Pseudo */ +body .vc { color: #d0d0d0 } /* Name.Variable.Class */ +body .vg { color: #d0d0d0 } /* Name.Variable.Global */ +body .vi { color: #d0d0d0 } /* Name.Variable.Instance */ +body .ld { color: #d0d0d0; font-weight: 600 } /* Literal.Date */ +body .m { color: #d0d0d0; font-weight: 600 } /* Literal.Number */ +body .s { color: #d0d0d0; font-weight: 600 } /* Literal.String */ +body .mb { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Bin */ +body .mf { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Float */ +body .mh { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Hex */ +body .mi { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Integer */ +body .mo { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Oct */ +body .sb { color: #d0d0d0; font-weight: 600 } /* Literal.String.Backtick */ +body .sc { color: #d0d0d0; font-weight: 600 } /* Literal.String.Char */ +body .sd { color: #d0d0d0; font-weight: 600 } /* Literal.String.Doc */ +body .s2 { color: #d0d0d0; font-weight: 600 } /* Literal.String.Double */ +body .se { color: #d0d0d0; font-weight: 600 } /* Literal.String.Escape */ +body .sh { color: #d0d0d0; font-weight: 600 } /* Literal.String.Heredoc */ +body .si { color: #d0d0d0; font-weight: 600 } /* Literal.String.Interpol */ +body .sx { color: #d0d0d0; font-weight: 600 } /* Literal.String.Other */ +body .sr { color: #d0d0d0; font-weight: 600 } /* Literal.String.Regex */ +body .s1 { color: #d0d0d0; font-weight: 600 } /* Literal.String.Single */ +body .ss { color: #d0d0d0; font-weight: 600 } /* Literal.String.Symbol */ +body .il { color: #d0d0d0; font-weight: 600 } /* Literal.Number.Integer.Long */ diff --git a/themes/conspiracy/assets/fonts/fira_code/FiraCode-VariableFont_wght.ttf b/themes/conspiracy/assets/fonts/fira_code/FiraCode-VariableFont_wght.ttf new file mode 100644 index 0000000..f75b2a2 Binary files /dev/null and b/themes/conspiracy/assets/fonts/fira_code/FiraCode-VariableFont_wght.ttf differ diff --git a/themes/conspiracy/assets/fonts/fira_code/OFL.txt b/themes/conspiracy/assets/fonts/fira_code/OFL.txt new file mode 100644 index 0000000..19f4298 --- /dev/null +++ b/themes/conspiracy/assets/fonts/fira_code/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2014-2020 The Fira Code Project Authors (https://github.com/tonsky/FiraCode) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/themes/conspiracy/assets/fonts/fira_code/README.txt b/themes/conspiracy/assets/fonts/fira_code/README.txt new file mode 100644 index 0000000..e70b485 --- /dev/null +++ b/themes/conspiracy/assets/fonts/fira_code/README.txt @@ -0,0 +1,67 @@ +Fira Code Variable Font +======================= + +This download contains Fira Code as both a variable font and static fonts. + +Fira Code is a variable font with this axis: + wght + +This means all the styles are contained in a single file: + FiraCode-VariableFont_wght.ttf + +If your app fully supports variable fonts, you can now pick intermediate styles +that aren’t available as static fonts. Not all apps support variable fonts, and +in those cases you can use the static font files for Fira Code: + static/FiraCode-Light.ttf + static/FiraCode-Regular.ttf + static/FiraCode-Medium.ttf + static/FiraCode-SemiBold.ttf + static/FiraCode-Bold.ttf + +Get started +----------- + +1. Install the font files you want to use + +2. Use your app's font picker to view the font family and all the +available styles + +Learn more about variable fonts +------------------------------- + + https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts + https://variablefonts.typenetwork.com + https://medium.com/variable-fonts + +In desktop apps + + https://theblog.adobe.com/can-variable-fonts-illustrator-cc + https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts + +Online + + https://developers.google.com/fonts/docs/getting_started + https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide + https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts + +Installing fonts + + MacOS: https://support.apple.com/en-us/HT201749 + Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux + Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows + +Android Apps + + https://developers.google.com/fonts/docs/android + https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts + +License +------- +Please read the full license text (OFL.txt) to understand the permissions, +restrictions and requirements for usage, redistribution, and modification. + +You can use them in your products & projects – print or digital, +commercial or otherwise. + +This isn't legal advice, please consider consulting a lawyer and see the full +license for all details. diff --git a/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Bold.ttf b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Bold.ttf new file mode 100644 index 0000000..c0aa0f5 Binary files /dev/null and b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Bold.ttf differ diff --git a/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Light.ttf b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Light.ttf new file mode 100644 index 0000000..84801e1 Binary files /dev/null and b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Light.ttf differ diff --git a/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Medium.ttf b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Medium.ttf new file mode 100644 index 0000000..570b4d1 Binary files /dev/null and b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Medium.ttf differ diff --git a/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Regular.ttf b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Regular.ttf new file mode 100644 index 0000000..82baafc Binary files /dev/null and b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-Regular.ttf differ diff --git a/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-SemiBold.ttf b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-SemiBold.ttf new file mode 100644 index 0000000..f3a34fa Binary files /dev/null and b/themes/conspiracy/assets/fonts/fira_code/static/FiraCode-SemiBold.ttf differ -- cgit