diff --git a/playground/fonts/OFL-BeVietnamPro.txt b/playground/fonts/OFL-BeVietnamPro.txt new file mode 100644 index 0000000..9e2c117 --- /dev/null +++ b/playground/fonts/OFL-BeVietnamPro.txt @@ -0,0 +1,93 @@ +Copyright 2021 The Be Vietnam Pro Project Authors (https://github.com/bettergui/BeVietnamPro), + +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/playground/fonts/OFL-JetBrainsMono.txt b/playground/fonts/OFL-JetBrainsMono.txt new file mode 100644 index 0000000..821a3da --- /dev/null +++ b/playground/fonts/OFL-JetBrainsMono.txt @@ -0,0 +1,93 @@ +Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +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: https://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/playground/fonts/be-vietnam-pro-latin-400.woff2 b/playground/fonts/be-vietnam-pro-latin-400.woff2 new file mode 100644 index 0000000..14b6b60 Binary files /dev/null and b/playground/fonts/be-vietnam-pro-latin-400.woff2 differ diff --git a/playground/fonts/be-vietnam-pro-latin-500.woff2 b/playground/fonts/be-vietnam-pro-latin-500.woff2 new file mode 100644 index 0000000..dcac95d Binary files /dev/null and b/playground/fonts/be-vietnam-pro-latin-500.woff2 differ diff --git a/playground/fonts/be-vietnam-pro-latin-600.woff2 b/playground/fonts/be-vietnam-pro-latin-600.woff2 new file mode 100644 index 0000000..4ee217b Binary files /dev/null and b/playground/fonts/be-vietnam-pro-latin-600.woff2 differ diff --git a/playground/fonts/be-vietnam-pro-latin-700.woff2 b/playground/fonts/be-vietnam-pro-latin-700.woff2 new file mode 100644 index 0000000..803d5a5 Binary files /dev/null and b/playground/fonts/be-vietnam-pro-latin-700.woff2 differ diff --git a/playground/fonts/be-vietnam-pro-latin-800.woff2 b/playground/fonts/be-vietnam-pro-latin-800.woff2 new file mode 100644 index 0000000..6a9fe32 Binary files /dev/null and b/playground/fonts/be-vietnam-pro-latin-800.woff2 differ diff --git a/playground/fonts/jetbrains-mono-latin.woff2 b/playground/fonts/jetbrains-mono-latin.woff2 new file mode 100644 index 0000000..8b9bcef Binary files /dev/null and b/playground/fonts/jetbrains-mono-latin.woff2 differ diff --git a/playground/index.html b/playground/index.html index 376bd65..ae699de 100644 --- a/playground/index.html +++ b/playground/index.html @@ -13,18 +13,36 @@ -
+ +
-

repokeeper playground

+

repokeeper playground

Say what the repository is and how much of the standard you want. You get the .repokeeper.yml and the command that applies it. Nothing leaves this page.

-
diff --git a/playground/style.css b/playground/style.css index a7cdd67..05d41ef 100644 --- a/playground/style.css +++ b/playground/style.css @@ -1,28 +1,82 @@ +/* The fonts are served from ./fonts (SIL OFL 1.1), so the page loads nothing remote. */ +@font-face { + font-family: "Be Vietnam Pro"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(./fonts/be-vietnam-pro-latin-400.woff2) format("woff2"); +} + +@font-face { + font-family: "Be Vietnam Pro"; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url(./fonts/be-vietnam-pro-latin-500.woff2) format("woff2"); +} + +@font-face { + font-family: "Be Vietnam Pro"; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url(./fonts/be-vietnam-pro-latin-600.woff2) format("woff2"); +} + +@font-face { + font-family: "Be Vietnam Pro"; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url(./fonts/be-vietnam-pro-latin-700.woff2) format("woff2"); +} + +@font-face { + font-family: "Be Vietnam Pro"; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(./fonts/be-vietnam-pro-latin-800.woff2) format("woff2"); +} + +@font-face { + font-family: "JetBrains Mono"; + font-style: normal; + font-weight: 400 600; + font-display: swap; + src: url(./fonts/jetbrains-mono-latin.woff2) format("woff2"); +} + :root { color-scheme: light dark; - --bg: #f6f7f9; + --bg: #f7f8fc; --panel: #ffffff; - --text: #1b1f24; - --muted: #5b6470; - --line: #d9dee5; + --text: #0f172a; + --muted: #55607a; + --line: #dde2ee; --accent: #0b6bcb; + --accent-2: #0d9488; --accent-soft: #e6f0fb; - --code-bg: #10151c; - --code-text: #e6edf3; + --code-bg: #0f172a; + --code-text: #e2e8f0; + --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06); --warn: #8a5a00; --warn-bg: #fff4d6; } @media (prefers-color-scheme: dark) { :root { - --bg: #0e1116; - --panel: #171b22; - --text: #e6edf3; - --muted: #9aa5b1; - --line: #2b323c; + --bg: #0b1020; + --panel: #121a2e; + --text: #e7ecf6; + --muted: #9aa6c2; + --line: #26324d; --accent: #6cb2ff; + --accent-2: #2dd4bf; --accent-soft: #14273d; - --code-bg: #0a0d12; + --code-bg: #070b16; + --code-text: #dbe4f5; + --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25); --warn: #f2cc60; --warn-bg: #2d2408; } @@ -36,8 +90,11 @@ body { margin: 0; background: var(--bg); color: var(--text); + -webkit-font-smoothing: antialiased; + accent-color: var(--accent); font: - 15px / 1.5 system-ui, + 15px / 1.55 "Be Vietnam Pro", + system-ui, -apple-system, "Segoe UI", Roboto, @@ -46,53 +103,103 @@ body { code, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-variant-ligatures: none; font-size: 13px; } -.top { +a { + color: var(--accent); +} + +.topbar { + position: sticky; + top: 0; + z-index: 10; + border-bottom: 1px solid var(--line); + background: color-mix(in srgb, var(--bg) 82%, transparent); + backdrop-filter: saturate(160%) blur(10px); +} + +.topbar .bar { display: flex; - flex-wrap: wrap; - gap: 12px 32px; - align-items: flex-end; - justify-content: space-between; + gap: 16px; + align-items: center; max-width: 1180px; + min-height: 60px; margin: 0 auto; - padding: 28px 16px 8px; + padding: 0 16px; } -.top h1 { - margin: 0 0 4px; - font-size: 24px; +.brand { + display: flex; + gap: 10px; + align-items: center; + color: var(--text); + font-weight: 800; + text-decoration: none; } -.top .sub { - color: var(--muted); - font-weight: 400; +.logo { + display: grid; + place-items: center; + width: 30px; + height: 30px; + border-radius: 8px; + background: var(--accent); } -.top p { - max-width: 62ch; - margin: 0; +.navlinks { + display: flex; + gap: 18px; + margin-left: auto; + font-size: 14px; + font-weight: 500; +} + +.navlinks a { color: var(--muted); + text-decoration: none; } -.top nav { - display: flex; - gap: 16px; +.navlinks a:hover { + color: var(--text); } -a { - color: var(--accent); +.top { + max-width: 1180px; + margin: 0 auto; + padding: 32px 16px 8px; +} + +.top h1 { + margin: 0 0 8px; + font-size: clamp(26px, 4vw, 34px); + font-weight: 800; + letter-spacing: -0.03em; + line-height: 1.15; +} + +.grad { + background: linear-gradient(90deg, var(--accent), var(--accent-2)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.top p { + max-width: 62ch; + margin: 0; + color: var(--muted); } input[type="text"], input[type="number"], select { width: 100%; - padding: 6px 8px; + padding: 7px 10px; border: 1px solid var(--line); - border-radius: 6px; + border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; @@ -110,18 +217,20 @@ button:focus-visible { } button { - padding: 4px 10px; - border: 1px solid #3a4452; - border-radius: 6px; - background: #1f2732; - color: #e6edf3; + padding: 5px 12px; + border: 1px solid #334155; + border-radius: 10px; + background: #1e293b; + color: #e2e8f0; font: inherit; font-size: 13px; + font-weight: 600; cursor: pointer; } button:hover { - background: #2a3442; + border-color: var(--accent); + background: #273449; } main { @@ -143,15 +252,16 @@ main { fieldset { min-width: 0; margin: 0 0 16px; - padding: 14px 16px 16px; + padding: 16px 18px 18px; border: 1px solid var(--line); - border-radius: 10px; + border-radius: 14px; background: var(--panel); + box-shadow: var(--shadow); } legend { padding: 0 6px; - font-weight: 600; + font-weight: 700; } .hint { @@ -177,7 +287,7 @@ fieldset > .hint:first-of-type { align-items: flex-start; padding: 8px 12px; border: 1px solid var(--line); - border-radius: 8px; + border-radius: 10px; cursor: pointer; } @@ -277,7 +387,7 @@ fieldset > .hint:first-of-type { .result { position: sticky; - top: 16px; + top: 76px; min-width: 0; } @@ -289,7 +399,9 @@ fieldset > .hint:first-of-type { .result h2 { margin: 18px 0 8px; - font-size: 16px; + font-size: 17px; + font-weight: 800; + letter-spacing: -0.02em; } .result > div:first-child h2, @@ -301,8 +413,10 @@ fieldset > .hint:first-of-type { display: flex; flex-direction: column; color-scheme: dark; - border-radius: 10px; + border: 1px solid color-mix(in srgb, var(--code-text) 14%, transparent); + border-radius: 14px; background: var(--code-bg); + box-shadow: var(--shadow); } .code pre { @@ -325,7 +439,7 @@ fieldset > .hint:first-of-type { .problems { margin: 0 0 8px; padding: 10px 14px 10px 30px; - border-radius: 8px; + border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13px;