diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c0c7e051..475a091c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -42,7 +42,7 @@ jobs: # that are expected to exist by the manifest.json view test. - run: | mkdir yarrharr/static - touch yarrharr/static/{icon,logotype,lettertype}-xyz.{ico,png,svg} + touch yarrharr/static/icon-xyz.{ico,png,svg} touch yarrharr/static/{normalize,main,fonts}-xyz.css touch yarrharr/static/{runtime,vendor,main}-xyz.js diff --git a/bin/compile-static.py b/bin/compile-static.py index eb6b87be..b89d95d8 100755 --- a/bin/compile-static.py +++ b/bin/compile-static.py @@ -337,6 +337,11 @@ async def process_fonts(root_dir: Path, w: Writer) -> None: ic_var_name = hashname("inconsolata", "ttf", ic_var) w.add_file_bytes(ic_var_name, ic_var) + montez_base = root_dir / "vendor" / "montez" + montez = (montez_base / "Montez-Regular.ttf").read_bytes() + montez_name = hashname("montez", "ttf", montez) + w.add_file_bytes(montez_name, montez) + css = ( f"""\ @font-face {{ @@ -362,6 +367,14 @@ async def process_fonts(root_dir: Path, w: Writer) -> None: font-stretch: normal; src: url('{ic_var_name}'); }} + +@font-face {{ + font-family: 'Montez'; + font-weight: 400; + font-style: normal; + font-stretch: normal; + src: url('{montez_name}'); +}} """ ).encode() w.add_file_bytes(hashname("fonts", "css", css), css) @@ -378,8 +391,6 @@ async def _main(build_dir: Path, out_dir: Path, compress: bool) -> None: await asyncio.gather( process_svg(icon, w), rasterize_favicon(icon, build_dir, w), - process_svg(repo_root / "img" / "lettertype.svg", w), - process_svg(repo_root / "img" / "logotype.svg", w), process_glob((repo_root / "vendor" / "normalize.css").glob("normalize-*.css"), w), process_css(repo_root / "css" / "main.css", w), process_fonts(repo_root, w), diff --git a/bin/iterstatic.sh b/bin/iterstatic.sh deleted file mode 100755 index 960504a4..00000000 --- a/bin/iterstatic.sh +++ /dev/null @@ -1,12 +0,0 @@ -#!/bin/bash - -tox -e static --notest - -exec watchexec \ - --watch less \ - --watch img \ - --watch vendor \ - --on-busy-update=queue \ - --shell=none \ - -- \ - .tox/static/bin/python bin/compile-static.py --no-compress diff --git a/css/GlobalBar.css b/css/GlobalBar.css index 4a08fa30..3e9cb070 100644 --- a/css/GlobalBar.css +++ b/css/GlobalBar.css @@ -1,27 +1,50 @@ -.yarrharr-masthead { +#global-nav { + display: flex; + justify-content: space-between; + background: var(--footer-background-color); + + --focus-offset: calc(2 * var(--focus-offset-in)); /* Don't clip focus ring. */ + + & > a[href], + & > button { + background: transparent; + border: none; + } + + & > * { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + } + + & > * > .icon { + display: block; + font-size: var(--icon-size); + } + + & > .square { + flex: 0 0 var(--bar-height); + } +} + + +#masthead { display: flex; flex: 0 0 auto; + font: 1.5rem Montez, sans-serif; + padding: 0 0.5rem; - img { - flex: 1 1 auto; - width: auto; - height: auto; - max-height: 100%; - filter: var(--logo-filter); + &:link { + text-decoration: none; } .logotype { display: block; - width: 10rem; - } - .lettertype { - display: none; - width: 3rem; } @media (max-width: 30rem) { .logotype { display: none; } - .lettertype { display: block; } } } @@ -29,11 +52,34 @@ flex: 1 1 100%; display: flex; } + .global-link { - flex: 0 1 auto; - display: flex; - align-items: center; - justify-content: center; --focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */ padding: 1rem; /* Ensure spacing between */ + font-variant: small-caps; + font-variation-settings: "opsz" 25; + + .icon { + --icon-color: var(--selected-color); + } + + span { + padding: 0 0 0 0.25rem; + } + + @media (max-width: 30rem) { + display: flex; + padding: 0.25rem; + flex-flow: column nowrap; + align-items: center; + + &.secondary { + display: none; + } + + span { + padding: 0.25rem 0 0 0; + font-size: smaller; + } + } } diff --git a/css/icons.css b/css/icons.css index caa664e6..684b552b 100644 --- a/css/icons.css +++ b/css/icons.css @@ -5,6 +5,7 @@ /* Icons have this class by default, which makes them a generic gray. */ .icon { color: var(--icon-color); + transform: translateY(0.075em); } .icon-heart { diff --git a/css/inventory.css b/css/inventory.css index 11250f67..fca07ef9 100644 --- a/css/inventory.css +++ b/css/inventory.css @@ -7,8 +7,7 @@ display: grid; grid-template-columns: 1fr min-content; align-items: center; - max-width: var(--layout-max-width); - margin: 0 auto; + padding: 0 0.5rem; } @@ -77,7 +76,7 @@ } .feed-list-item-header { - text-transform: uppercase; + font-variant: small-caps; font-size: smaller; } @@ -201,7 +200,7 @@ } .label-list-item-header { - text-transform: uppercase; + font-variant: small-caps; font-size: smaller; } diff --git a/css/main.css b/css/main.css index 93f68644..373e4da8 100644 --- a/css/main.css +++ b/css/main.css @@ -15,8 +15,6 @@ --icon-color: #666; --icon-color-off: var(--border-color); - --logo-filter: none; - --heart-color: #c92ccc; --check-color: #39cc5c; --selected-color: hsl(24.1, 100%, 49.2%); @@ -54,11 +52,6 @@ --icon-color: #eee; --icon-color-off: #666; - /* Invert the logo image so that it is legible in the dark theme. We - * don't go 100% because it is pretty bold. - */ - --logo-filter: invert(90%); - --font-weight-mono: 300; scrollbar-color: var(--quiet-text-color) var(--background-color); @@ -263,40 +256,6 @@ select[multiple] { } } -.bar { - display: flex; - justify-content: space-between; - height: var(--bar-height); - max-width: var(--layout-max-width); - margin: 0 auto; - line-height: var(--bar-line-height); - contain: size layout; - - --focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */ - - & > a[href], - & > button { - background: transparent; - border: none; - } - - & > * { - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - } - - & > * > .icon { - display: block; - font-size: var(--icon-size); - } - - & > .square { - flex: 0 0 var(--bar-height); - } -} - /* Mostly used for the login page. */ form.small-form { display: block; @@ -323,6 +282,8 @@ form.small-form { padding: 1rem 1rem 0 0; flex: 100 1 auto; + font: 3.5rem Montez, sans-serif; + text-align: center; img { diff --git a/img/icon.svg b/img/icon.svg index 1de5d05a..d2b1a04d 100644 --- a/img/icon.svg +++ b/img/icon.svg @@ -2,23 +2,23 @@ diff --git a/img/lettertype.svg b/img/lettertype.svg deleted file mode 100644 index 88b647cd..00000000 --- a/img/lettertype.svg +++ /dev/null @@ -1,283 +0,0 @@ - - - - diff --git a/img/logotype.svg b/img/logotype.svg deleted file mode 100644 index 148a74ff..00000000 --- a/img/logotype.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - diff --git a/justfile b/justfile index e1288f51..64dd0399 100644 --- a/justfile +++ b/justfile @@ -29,6 +29,33 @@ release: git push origin "$tag" git push origin trunk +iterstatic: + #!/bin/bash + tox -e static --notest + exec watchexec \ + --watch css \ + --watch img \ + --watch vendor \ + --watch bin \ + --on-busy-update=queue \ + --shell=none \ + -- \ + .tox/static/bin/python bin/compile-static.py --no-compress + +itertests +args='yarrharr': + #!/bin/bash + tox -e test --develop --notest + export YARRHARR_CONF=./yarrharr/tests/dev.ini + export YARRHARR_TESTING=yes + export DJANGO_SETTINGS_MODULE=yarrharr.settings + export PYTHONDONTWRITEBYTECODE=yes + exec watchexec \ + --watch yarrharr \ + --on-busy-update=queue \ + --shell=none \ + -- \ + .tox/test/bin/pytest -vvv ./yarrharr "$@" + devserver: _static tox -e run -- django-admin migrate tox -e run -- django-admin updatehtml diff --git a/vendor/montez/LICENSE.txt b/vendor/montez/LICENSE.txt new file mode 100644 index 00000000..75b52484 --- /dev/null +++ b/vendor/montez/LICENSE.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/vendor/montez/Montez-Regular.ttf b/vendor/montez/Montez-Regular.ttf new file mode 100644 index 00000000..f277b420 Binary files /dev/null and b/vendor/montez/Montez-Regular.ttf differ diff --git a/yarrharr/templates/all_header.html b/yarrharr/templates/all_header.html index bb7f3891..91b31a5b 100644 --- a/yarrharr/templates/all_header.html +++ b/yarrharr/templates/all_header.html @@ -2,7 +2,9 @@