diff --git a/.hallmark/log.json b/.hallmark/log.json new file mode 100644 index 0000000..9b4e370 --- /dev/null +++ b/.hallmark/log.json @@ -0,0 +1,15 @@ +[ + { + "date": "2026-06-02", + "scope": "app", + "genre": "atmospheric", + "macrostructure": "Catalogue + Marquee Hero", + "theme": "Nightforge (custom dark)", + "theme_axes": "dark / geometric-sans / warm-gold", + "enrichment": "Tier-A CSS radial blooms", + "nav": "N5 floating pill", + "footer": "Ft5 statement", + "vibe": "playful WoW-modding code catalogue, dark gaming heritage", + "brief": "RochetCode \u2014 full Jekyll site redesign (home, downloads hub, project posts, contact, 404)" + } +] diff --git a/404.html b/404.html index f4d0591..1a0f52a 100644 --- a/404.html +++ b/404.html @@ -6,10 +6,10 @@ hide_header: true --- -
-

Page not found

+
+

404

The page you requested does not exist or may have moved.

-

+

Home · Downloads · Contact diff --git a/README.md b/README.md index ff5dd67..43a540b 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ CI runs `python script/generate_webp.py --check` to ensure WebP copies are prese ### CSS/JS cache busting -`_data/assets.yml` stores a content hash for `css/style.css`, `css/github_markdown.css`, and `js/gallery.js`. Layout templates append it as `?v=` on stylesheet and script URLs. The file must be in the repo because GitHub Pages runs its own Jekyll build. +`_data/assets.yml` stores a content hash for `tokens.css`, `css/style.css`, and `js/gallery.js`. Layout templates append it as `?v=` on stylesheet and script URLs. The file must be in the repo because GitHub Pages runs its own Jekyll build. On pull requests, CI runs `script/asset_version.py` and commits an updated `_data/assets.yml` to the PR branch when CSS or JS changed, so the hash is ready before you merge. diff --git a/_data/assets.yml b/_data/assets.yml index 62d4178..9b90bf7 100644 --- a/_data/assets.yml +++ b/_data/assets.yml @@ -1 +1 @@ -assets_version: "8a29461d" +assets_version: "e05870a5" diff --git a/_layouts/default.html b/_layouts/default.html index 224bb3b..4f95e81 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -44,8 +44,12 @@ + + + + {% assign assets_version = site.data.assets.assets_version | default: site.github.build_revision | default: 'dev' %} - + @@ -53,10 +57,17 @@

- +
@@ -104,6 +115,7 @@

{{ page.title }}

{% if project.downloads %}

Downloads

+
{% for download in project.downloads %} {% assign download_url = download.url %} {% unless download_url contains '://' %} @@ -114,6 +126,7 @@

Downloads

{% endunless %} {{ download.label }} {% endfor %} +
{% endif %} {% if page.videos %} @@ -131,10 +144,15 @@

Videos

diff --git a/css/github_markdown.css b/css/github_markdown.css deleted file mode 100644 index f23fe99..0000000 --- a/css/github_markdown.css +++ /dev/null @@ -1,643 +0,0 @@ -.markdown-body { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - font: 13px Helvetica, arial, freesans, clean, sans-serif; - line-height: 1.4; - color: #333333; - font-size: 15px; - line-height: 1.7; - overflow: hidden; - word-wrap: break-word; -} - -.markdown-body a { - background: transparent; -} - -.markdown-body a:active, -.markdown-body a:hover { - outline: 0; -} - -.markdown-body strong { - font-weight: bold; -} - -.markdown-body h1 { - font-size: 2em; - margin: 0.67em 0; -} - -.markdown-body img { - border: 0; -} - -.markdown-body hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -.markdown-body pre { - overflow: auto; -} - -.markdown-body code, -.markdown-body pre { - font-family: monospace, monospace; - font-size: 1em; -} - -.markdown-body table { - border-collapse: collapse; - border-spacing: 0; -} - -.markdown-body td, -.markdown-body th { - padding: 0; -} - -.markdown-body * { - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.markdown-body a { - color: #4183c4; - text-decoration: none; -} - -.markdown-body a:hover { - text-decoration: underline; -} - -.markdown-body a:focus, -.markdown-body a:active { - text-decoration: underline; -} - -.markdown-body hr { - height: 0; - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - border-bottom: 1px solid #ddd; -} - -.markdown-body hr:before, -.markdown-body hr:after { - content: " "; - display: table; -} - -.markdown-body hr:after { - clear: both; -} - -.markdown-body ol ol { - list-style-type: lower-roman; -} - -.markdown-body h1, -.markdown-body h2, -.markdown-body h3, -.markdown-body h4, -.markdown-body h5, -.markdown-body h6 { - margin-top: 15px; - margin-bottom: 15px; - line-height: 1.1; -} - -.markdown-body h1 { - font-size: 30px; -} - -.markdown-body h2 { - font-size: 21px; -} - -.markdown-body h3 { - font-size: 16px; -} - -.markdown-body h4 { - font-size: 14px; -} - -.markdown-body h5 { - font-size: 12px; -} - -.markdown-body h6 { - font-size: 11px; -} - -.markdown-body blockquote { - margin: 0; -} - -.markdown-body ul, -.markdown-body ol { - padding: 0; - margin-top: 0; - margin-bottom: 0; -} - -.markdown-body dd { - margin-left: 0; -} - -.markdown-body code, -.markdown-body pre { - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; -} - -.markdown-body pre { - margin-top: 0; - margin-bottom: 0; -} - -.markdown-body>*:first-child { - margin-top: 0 !important; -} - -.markdown-body>*:last-child { - margin-bottom: 0 !important; -} - -.markdown-body a.anchor { - display: block; - padding-right: 6px; - padding-left: 30px; - margin-left: -30px; - cursor: pointer; - position: absolute; - top: 0; - left: 0; - bottom: 0; -} - -.markdown-body a.anchor:focus { - outline: none; -} - -.markdown-body h1, -.markdown-body h2, -.markdown-body h3, -.markdown-body h4, -.markdown-body h5, -.markdown-body h6 { - margin: 1em 0 15px; - padding: 0; - font-weight: bold; - line-height: 1.7; - cursor: text; - position: relative; -} - -.markdown-body h1 { - font-size: 2.5em; - border-bottom: 1px solid #ddd; -} - -.markdown-body h2 { - font-size: 2em; - border-bottom: 1px solid #eee; -} - -.markdown-body h3 { - font-size: 1.5em; -} - -.markdown-body h4 { - font-size: 1.2em; -} - -.markdown-body h5 { - font-size: 1em; -} - -.markdown-body h6 { - color: #777; - font-size: 1em; -} - -.markdown-body p, -.markdown-body blockquote, -.markdown-body ul, -.markdown-body ol, -.markdown-body dl, -.markdown-body table, -.markdown-body pre { - margin: 15px 0; -} - -.markdown-body hr { - background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0; - border: 0 none; - color: #ccc; - height: 4px; - padding: 0; - margin: 15px 0; -} - -.markdown-body ul, -.markdown-body ol { - padding-left: 30px; -} - -.markdown-body ol ol, -.markdown-body ol ul { - margin-top: 0; - margin-bottom: 0; -} - -.markdown-body dl { - padding: 0; -} - -.markdown-body dl dt { - font-size: 14px; - font-weight: bold; - font-style: italic; - padding: 0; - margin-top: 15px; -} - -.markdown-body dl dd { - margin-bottom: 15px; - padding: 0 15px; -} - -.markdown-body blockquote { - border-left: 4px solid #DDD; - padding: 0 15px; - color: #777; -} - -.markdown-body blockquote>:first-child { - margin-top: 0px; -} - -.markdown-body blockquote>:last-child { - margin-bottom: 0px; -} - -.markdown-body table { - width: 100%; - overflow: auto; - display: block; -} - -.markdown-body table th { - font-weight: bold; -} - -.markdown-body table th, -.markdown-body table td { - border: 1px solid #ddd; - padding: 6px 13px; -} - -.markdown-body table tr { - border-top: 1px solid #ccc; - background-color: #fff; -} - -.markdown-body table tr:nth-child(2n) { - background-color: #f8f8f8; -} - -.markdown-body img { - max-width: 100%; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.markdown-body code { - margin: 0; - border: 1px solid #ddd; - background-color: #f8f8f8; - border-radius: 3px; - padding: 0; -} - -.markdown-body code:before, -.markdown-body code:after { - content: "\00a0"; - letter-spacing: -0.2em; -} - -.markdown-body pre>code { - margin: 0; - padding: 0; - white-space: pre; - border: none; - background: transparent; -} - -.markdown-body .highlight pre, -.markdown-body pre { - background-color: #f8f8f8; - border: 1px solid #ddd; - font-size: 13px; - line-height: 19px; - overflow: auto; - padding: 6px 10px; - border-radius: 3px; -} - -.markdown-body pre { - word-wrap: normal; -} - -.markdown-body pre code { - margin: 0; - padding: 0; - background-color: transparent; - border: none; - word-wrap: normal; - max-width: initial; - display: inline; - overflow: initial; - line-height: inherit; -} - -.markdown-body pre code:before, -.markdown-body pre code:after { - content: normal; -} - -.markdown-body .highlight { - background: #ffffff; -} - -.markdown-body .highlight .c { - color: #999988; - font-style: italic; -} - -.markdown-body .highlight .err { - color: #a61717; - background-color: #e3d2d2; -} - -.markdown-body .highlight .k { - font-weight: bold; -} - -.markdown-body .highlight .o { - font-weight: bold; -} - -.markdown-body .highlight .cm { - color: #999988; - font-style: italic; -} - -.markdown-body .highlight .cp { - color: #999999; - font-weight: bold; -} - -.markdown-body .highlight .c1 { - color: #999988; - font-style: italic; -} - -.markdown-body .highlight .cs { - color: #999999; - font-weight: bold; - font-style: italic; -} - -.markdown-body .highlight .gd { - color: #000000; - background-color: #ffdddd; -} - -.markdown-body .highlight .gd .x { - color: #000000; - background-color: #ffaaaa; -} - -.markdown-body .highlight .ge { - font-style: italic; -} - -.markdown-body .highlight .gr { - color: #aa0000; -} - -.markdown-body .highlight .gh { - color: #999999; -} - -.markdown-body .highlight .gi { - color: #000000; - background-color: #ddffdd; -} - -.markdown-body .highlight .gi .x { - color: #000000; - background-color: #aaffaa; -} - -.markdown-body .highlight .go { - color: #888888; -} - -.markdown-body .highlight .gp { - color: #555555; -} - -.markdown-body .highlight .gs { - font-weight: bold; -} - -.markdown-body .highlight .gu { - color: #800080; - font-weight: bold; -} - -.markdown-body .highlight .gt { - color: #aa0000; -} - -.markdown-body .highlight .kc { - font-weight: bold; -} - -.markdown-body .highlight .kd { - font-weight: bold; -} - -.markdown-body .highlight .kn { - font-weight: bold; -} - -.markdown-body .highlight .kp { - font-weight: bold; -} - -.markdown-body .highlight .kr { - font-weight: bold; -} - -.markdown-body .highlight .kt { - color: #445588; - font-weight: bold; -} - -.markdown-body .highlight .m { - color: #009999; -} - -.markdown-body .highlight .s { - color: #dd1144; -} - -.markdown-body .highlight .n { - color: #333333; -} - -.markdown-body .highlight .na { - color: teal; -} - -.markdown-body .highlight .nb { - color: #0086b3; -} - -.markdown-body .highlight .nc { - color: #445588; - font-weight: bold; -} - -.markdown-body .highlight .no { - color: teal; -} - -.markdown-body .highlight .ni { - color: purple; -} - -.markdown-body .highlight .ne { - color: #990000; - font-weight: bold; -} - -.markdown-body .highlight .nf { - color: #990000; - font-weight: bold; -} - -.markdown-body .highlight .nn { - color: #555555; -} - -.markdown-body .highlight .nt { - color: navy; -} - -.markdown-body .highlight .nv { - color: teal; -} - -.markdown-body .highlight .ow { - font-weight: bold; -} - -.markdown-body .highlight .w { - color: #bbbbbb; -} - -.markdown-body .highlight .mf { - color: #009999; -} - -.markdown-body .highlight .mh { - color: #009999; -} - -.markdown-body .highlight .mi { - color: #009999; -} - -.markdown-body .highlight .mo { - color: #009999; -} - -.markdown-body .highlight .sb { - color: #dd1144; -} - -.markdown-body .highlight .sc { - color: #dd1144; -} - -.markdown-body .highlight .sd { - color: #dd1144; -} - -.markdown-body .highlight .s2 { - color: #dd1144; -} - -.markdown-body .highlight .se { - color: #dd1144; -} - -.markdown-body .highlight .sh { - color: #dd1144; -} - -.markdown-body .highlight .si { - color: #dd1144; -} - -.markdown-body .highlight .sx { - color: #dd1144; -} - -.markdown-body .highlight .sr { - color: #009926; -} - -.markdown-body .highlight .s1 { - color: #dd1144; -} - -.markdown-body .highlight .ss { - color: #990073; -} - -.markdown-body .highlight .bp { - color: #999999; -} - -.markdown-body .highlight .vc { - color: teal; -} - -.markdown-body .highlight .vg { - color: teal; -} - -.markdown-body .highlight .vi { - color: teal; -} - -.markdown-body .highlight .il { - color: #009999; -} - -.markdown-body .highlight .gc { - color: #999; - background-color: #EAF2F5; -} diff --git a/css/style.css b/css/style.css index 48770e5..8b5b317 100644 --- a/css/style.css +++ b/css/style.css @@ -1,326 +1,428 @@ -* { - word-wrap: break-word; +/* Hallmark · genre: atmospheric · macrostructure: Catalogue + Marquee Hero · theme: Nightforge · design-system: design.md · designed-as-app · nav: N5 · footer: Ft5 */ +/* Tokens are defined in /tokens.css (linked before this file). */ + +* { box-sizing: border-box; } + +html { + overflow-x: clip; + scroll-behavior: smooth; } html, body { - font-family: "Segoe UI", Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; - font-size: 16px; - line-height: 1.6; - color: #222222; - background-color: #FFFFFF; - margin:0; - padding:0; - height:100%; + margin: 0; + padding: 0; + min-height: 100%; } -img { - border: none; +body { + overflow-x: clip; + font-family: var(--font-body); + font-size: var(--text-md); + line-height: 1.65; + color: var(--color-ink); + background-color: var(--color-paper); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + position: relative; + display: flex; + flex-direction: column; } -a, a * { - text-decoration: none; +/* Tier-A radial blooms — gold + violet, fixed on the dark canvas */ +body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background: + radial-gradient(42rem 32rem at 82% -10%, oklch(80% 0.13 80 / 0.15), transparent 60%), + radial-gradient(38rem 30rem at 4% 4%, oklch(73% 0.12 300 / 0.11), transparent 62%), + radial-gradient(54rem 42rem at 50% 118%, oklch(80% 0.13 80 / 0.06), transparent 60%); } -a { - color: #00A2C5; -} +img { border: none; max-width: 100%; } -a:hover, a:focus, a:active { +a { + color: var(--color-accent); text-decoration: none; + transition: color var(--dur) var(--ease-out); } -#container { - min-height: 100%; - position: relative; +a:hover, a:focus { color: var(--color-accent-strong); } + +:focus-visible { + outline: 2px solid var(--color-focus); + outline-offset: 3px; + border-radius: 4px; } -/*Remember to set line height of valign to same as height*/ -.valign { - text-align: center; +/* ---------- Layout shell ---------- */ +#container { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 100vh; } -.valign>span, -.valign>a { - display: inline-block; - vertical-align: middle; - line-height: normal; +#content { + flex: 1 1 auto; + width: 100%; + max-width: var(--maxw); + margin: 0 auto; + padding: var(--space-lg) clamp(1rem, 4vw, 1.5rem) var(--space-3xl); } +/* ---------- N5 Floating pill nav ---------- */ #topnav { - display: block; - text-align: center; - /*height: 100px;*/ - min-width: 160px; - /*padding-left: 120px;*/ - background-color: rgb(26, 26, 26); - /*background: url("../images/Rochet2_100.png") no-repeat scroll 20px center / auto 75% rgb(26, 26, 26);*/ + position: sticky; + top: var(--space-sm); + z-index: 50; + width: 100%; + max-width: var(--maxw); + margin: var(--space-sm) auto 0; + padding-inline: clamp(1rem, 4vw, 1.5rem); + background: none; } -#topnav>div{ - min-width: 320px; - display: inline-block; +.nav-pill { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: 0.5rem 0.6rem 0.5rem 0.9rem; + border: 1px solid var(--color-rule); + border-radius: var(--radius-pill); + background: oklch(19% 0.016 264 / 0.72); + -webkit-backdrop-filter: blur(14px) saturate(1.3); + backdrop-filter: blur(14px) saturate(1.3); + box-shadow: 0 8px 30px oklch(0% 0 0 / 0.4); } -#topnav a{ - transition: background-color 500ms, box-shadow 200ms; - -webkit-transition: background-color 500ms, box-shadow 200ms; - width: 160px; - height: 100px; - line-height: 100px; /*required for valign*/ - color: #FFFFFF; - display: inline-block; - margin: 0px; - padding: 0px; - border: none; - font-weight: bold; +.nav-brand { + display: inline-flex; + align-items: center; + gap: 0.55rem; + font-family: var(--font-display); + font-weight: 700; + letter-spacing: -0.02em; + color: var(--color-ink); + white-space: nowrap; } -#topnav a:hover{ - background-color: #00ADE6 !important; - box-shadow: inset 0px 0px 10px #000; -} +.nav-brand:hover { color: var(--color-ink); } +.nav-brand img { width: 30px; height: 30px; border-radius: 7px; display: block; } -#topnav a:focus-visible { - background-color: #00ADE6 !important; - outline: 2px solid #FFFFFF; - outline-offset: -4px; +.nav-links { + display: flex; + align-items: center; + gap: 0.25rem; + margin-left: auto; + flex-wrap: wrap; + justify-content: flex-end; } -a:focus-visible, -.download:focus-visible, -.blocklink:focus-visible { - outline: 2px solid #00ADE6; - outline-offset: 2px; +.nav-links a { + color: var(--color-ink-2); + padding: 0.45rem 0.85rem; + border-radius: var(--radius-pill); + font-weight: 500; + font-size: 0.95rem; + transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } -#content { - margin: 0 auto; - padding: 5px 15px; - max-width: 830px; - padding-bottom: 200px !important; /* Height of the footer + bottom margin between footer and content*/ +.nav-links a:hover { + color: var(--color-ink); + background: var(--color-paper-3); } -#content iframe{ - display: block; - margin-bottom: 10px; - width: 100%; - height: 360px; +.nav-cta { + font-weight: 600; + font-size: 0.95rem; + padding: 0.5rem 1rem !important; + background: var(--color-accent); + color: var(--color-accent-ink) !important; + transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out) !important; } -#content h1, #content h2, #content h3, #content h4 { - margin-top: 2.5rem; - line-height: 1.25; +.nav-cta:hover { + background: var(--color-accent-strong) !important; + transform: translateY(-1px); } -#description { - font-size: 1rem; - line-height: 1.7; +/* ---------- Buttons ---------- */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-family: var(--font-body); + font-weight: 600; + font-size: var(--text-md); + padding: 0.7rem 1.3rem; + border-radius: var(--radius-pill); + border: 1px solid transparent; + cursor: pointer; + transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } -#description.markdown-body, -.markdown-body { - font-size: 1rem; - line-height: 1.7; +#content a.btn:hover, #content a.blocklink:hover, #content a.download:hover { text-decoration: none; } + +#content .btn-primary, .btn-primary { background: var(--color-accent); color: var(--color-accent-ink) !important; } +#content .btn-primary:hover, .btn-primary:hover { background: var(--color-accent-strong); color: var(--color-accent-ink) !important; transform: translateY(-2px); } + +#content .btn-ghost, .btn-ghost { background: transparent; border-color: var(--color-rule); color: var(--color-ink) !important; } +#content .btn-ghost:hover, .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent) !important; transform: translateY(-2px); } + +/* ---------- Home / hero ---------- */ +.home-intro { + margin: clamp(2.5rem, 7vw, 5.5rem) 0 var(--space-2xl); + max-width: none; } -.project-header { - margin: 30px 20px; - display: flex; +.home-eyebrow { + font-family: var(--font-mono); + font-size: var(--text-sm); + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--color-accent); + display: inline-flex; align-items: center; - gap: 20px; + gap: 0.5rem; + margin-bottom: var(--space-md); } -.project-header-icon { - flex: 0 0 80px; - height: 80px; - width: 80px; +.home-eyebrow::before { + content: ""; + width: 1.6rem; + height: 1px; + background: var(--color-accent); + display: inline-block; } -.project-header-text { - flex: 1 1 auto; - min-width: 0; +#content .home-intro h1 { + font-family: var(--font-display); + font-weight: 700; + font-size: var(--text-display); + line-height: 1.04; + letter-spacing: -0.03em; + margin: 0 0 var(--space-md); + max-width: 16ch; + overflow-wrap: anywhere; } -#content .project-header-title { - margin: 0; - line-height: 1.25; - font-size: 2rem; +.home-intro h1 em { font-style: normal; color: var(--color-accent); } + +.home-lead { + font-size: var(--text-lg); + line-height: 1.55; + color: var(--color-ink-2); + max-width: 54ch; + margin: 0 0 var(--space-lg); } -.project-meta { +.home-actions { display: flex; flex-wrap: wrap; - align-items: center; - gap: 8px; - margin-top: 4px; + gap: var(--space-sm); + margin-bottom: var(--space-xl); } -.project-tag { - display: inline-block; - font-size: 0.8125rem; - line-height: 1.4; - padding: 2px 8px; - border-radius: 3px; - background-color: #EFEFEF; - color: #333333; +.home-points { + list-style: none; + padding: 0; + margin: 0 0 var(--space-lg); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); + gap: var(--space-sm); + max-width: 60rem; } -.home-intro { - text-align: center; - margin: 50px 0; - max-width: 640px; - margin-left: auto; - margin-right: auto; +.home-points li { + position: relative; + padding-left: 1.5rem; + color: var(--color-ink-2); + font-size: 0.98rem; } -.home-lead { - font-size: 1.125rem; - line-height: 1.7; - color: #444444; - margin: 1rem 0 1.5rem; +.home-points li::before { + content: "▸"; + position: absolute; + left: 0; + color: var(--color-accent); } -.home-cta { - display: inline-block; - padding: 12px 24px; - background-color: #1A1A1A !important; - color: #FFFFFF !important; - font-weight: bold; - transition: background-color 500ms; +.home-links { + font-family: var(--font-mono); + font-size: var(--text-sm); + color: var(--color-ink-3); } -.home-cta:hover, -.home-cta:focus-visible { - background-color: #00ADE6 !important; -} +.home-links a { color: var(--color-ink-2); } +.home-links a:hover { color: var(--color-accent); } -.home-points { - text-align: left; - display: inline-block; - margin: 2rem auto; - padding-left: 1.25rem; - color: #444444; +/* ---------- Section heads ---------- */ +.section-head { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: var(--space-md); + flex-wrap: wrap; + margin: var(--space-2xl) 0 var(--space-lg); } -.home-points li { - margin-bottom: 0.5rem; +#content .section-head h2 { + font-family: var(--font-display); + font-weight: 600; + font-size: var(--text-2xl); + letter-spacing: -0.02em; + margin: 0; } -.home-links { - margin-top: 2rem; +.section-head .section-meta { + font-family: var(--font-mono); + font-size: var(--text-sm); + color: var(--color-ink-3); } -.contact-page { - margin: 0 0 2rem; +/* ---------- Catalogue grid ---------- */ +.project-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); + gap: var(--space-md); + margin: var(--space-lg) 0; + text-align: left; } -.contact-intro { - color: #444444; - margin: 0 0 1.25rem; +#content .blocklink, .blocklink { + display: flex; + flex-direction: column; + gap: 0.7rem; + padding: var(--space-md); + background: var(--color-paper-2); + border: 1px solid var(--color-rule); + border-radius: var(--radius-card); + box-sizing: border-box; + width: auto; + height: auto; + text-align: left; + transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } -.contact-list { - list-style: none; - padding: 0; - margin: 0 0 1.5rem; +#content .blocklink:hover, .blocklink:hover { + background: var(--color-paper-2); + transform: translateY(-4px); + border-color: oklch(80% 0.13 80 / 0.5); + box-shadow: 0 12px 40px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(80% 0.13 80 / 0.12), 0 8px 50px oklch(80% 0.13 80 / 0.1); } -.contact-item { +.blocklink-top { display: flex; - align-items: baseline; - gap: 1rem; - margin-bottom: 0.625rem; + align-items: center; + gap: 0.8rem; } -.contact-item:last-child { - margin-bottom: 0; +.blocklink-top img, +.blocklink .projectlogo img { + width: 48px; + height: 48px; + max-width: 48px; + object-fit: contain; + display: block; } -.contact-label { - flex: 0 0 6rem; - font-weight: bold; - color: #444444; +.blocklink .projectlogo { + display: flex; + align-items: center; + width: auto; + flex: 0 0 auto; } -#content .contact-page h3 { - margin-top: 1.5rem; - margin-bottom: 0.75rem; +.blocklink .projecttitle, +.blocklink-title { + font-family: var(--font-display); + font-weight: 600; + font-size: var(--text-lg); + letter-spacing: -0.02em; + color: var(--color-ink); + line-height: 1.2; + width: auto; } -.contact-links { - line-height: 1.8; +.blocklink-blurb { margin: 0; + font-size: 0.96rem; + line-height: 1.55; + color: var(--color-ink-2); + flex: 1 1 auto; } -#footer { - position: absolute; - bottom: 0; - width: 100%; - color: rgb(200, 200, 200); - background-color: rgb(26, 26, 26); - height: 100px; /* Height of the footer */ - line-height: 100px; /*required for valign*/ -} +#description .blocklink img { max-width: 48px; } -.blocklink { - text-align: center; - width: 160px; - height: 142px; - display: inline-flex; - flex-direction: column; +/* ---------- Tags ---------- */ +.project-meta, +.tags { + display: flex; + flex-wrap: wrap; align-items: center; - justify-content: space-between; - vertical-align: top; - box-sizing: border-box; - padding: 10px 4px; -} - -.blocklink:hover { - background-color: #EFEFEF; + gap: 0.4rem; + margin-top: 0; } -.blocklink > .projecttitle { - width: 100%; - color: #333; - line-height: 1.2; - padding: 0; - flex: 0 0 auto; +.project-tag, +.tag { + display: inline-block; + font-family: var(--font-mono); + font-size: 0.72rem; + letter-spacing: 0.02em; + line-height: 1.4; + padding: 0.18rem 0.5rem; + border-radius: var(--radius-tag); + background: var(--color-paper-3); + color: var(--color-ink-2); + border: 1px solid var(--color-rule); } -.blocklink > .projectlogo { +/* ---------- Project header ---------- */ +.project-header { display: flex; align-items: center; - justify-content: center; - width: 100%; - flex: 1 1 auto; - padding: 0; - margin: 0; + gap: var(--space-md); + margin: var(--space-lg) 0 var(--space-lg); } -.blocklink > .projectlogo > img { - display: block; - height: 80px; - width: auto; - max-width: 100%; +.project-header-icon { + flex: 0 0 72px; + height: 72px; + width: 72px; + object-fit: contain; } -#description .blocklink img { - max-width: none; +.project-header-text { + flex: 1 1 auto; + min-width: 0; } -.project-grid { - text-align: center; - margin: 50px 0; +#content .project-header-title { + margin: 0 0 0.5rem; + line-height: 1.1; + font-family: var(--font-display); + font-weight: 700; + letter-spacing: -0.02em; + font-size: var(--text-2xl); + color: var(--color-ink); } +/* ---------- Gallery carousel ---------- */ .gallery-carousel { position: relative; overflow: hidden; - width: 98%; + width: 100%; + max-width: 960px; padding: 0; - margin: 40px 1%; - box-shadow: 0 0 10px 5px #000; - background-color: #333; + margin: var(--space-lg) auto var(--space-xl); + border: 1px solid var(--color-rule); + border-radius: var(--radius-card); + background: var(--color-paper-2); + box-shadow: 0 12px 50px oklch(0% 0 0 / 0.45); } .gallery-slides { @@ -333,16 +435,13 @@ a:focus-visible, .gallery-slide { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + inset: 0; margin: 0; padding: 0; opacity: 0; visibility: hidden; z-index: 0; - -webkit-backface-visibility: hidden; + transition: opacity var(--dur) var(--ease-out); backface-visibility: hidden; } @@ -352,11 +451,7 @@ a:focus-visible, z-index: 1; } -.gallery-slide picture { - display: block; - width: 100%; - height: 100%; -} +.gallery-slide picture { display: block; width: 100%; height: 100%; } .gallery-slide img { display: block; @@ -367,18 +462,385 @@ a:focus-visible, border: 0; } -.download{ - transition: background-color 500ms, box-shadow 200ms; - -webkit-transition: background-color 500ms, box-shadow 200ms; - width: 96%; - padding: 10px 2%; +.gallery-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 3; + width: 42px; + height: 42px; + display: grid; + place-items: center; + border: 1px solid var(--color-rule); + border-radius: var(--radius-pill); + background: oklch(15% 0.014 264 / 0.7); + -webkit-backdrop-filter: blur(8px); + backdrop-filter: blur(8px); + color: var(--color-ink); + font-size: 1.1rem; + line-height: 1; + cursor: pointer; + transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); +} + +.gallery-btn:hover { + background: var(--color-accent); + color: var(--color-accent-ink); + border-color: var(--color-accent); +} + +.gallery-prev { left: var(--space-sm); } +.gallery-next { right: var(--space-sm); } + +.gallery-dots { + position: absolute; + left: 0; + right: 0; + bottom: var(--space-sm); + z-index: 3; + display: flex; + justify-content: center; + gap: 0.45rem; +} + +.gallery-dot { + width: 8px; + height: 8px; + padding: 0; + border: none; + border-radius: var(--radius-pill); + background: oklch(96% 0.005 264 / 0.4); + cursor: pointer; + transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); +} + +.gallery-dot.is-active { + background: var(--color-accent); + transform: scale(1.3); +} + +/* ---------- Downloads / videos ---------- */ +#content h3#downloads, +#content h3#videos { + font-family: var(--font-display); + font-weight: 600; + font-size: var(--text-xl); + letter-spacing: -0.02em; + margin-top: var(--space-xl); +} + +.download-row { + display: flex; + flex-wrap: wrap; + gap: var(--space-sm); + margin: var(--space-md) 0; + max-width: none; +} + +.download.button { + display: inline-flex; + align-items: center; + gap: 0.5rem; + width: auto; + margin: 0; + padding: 0.65rem 1.1rem; + font-family: var(--font-mono); + font-size: 0.9rem; + font-weight: 500; + border-radius: var(--radius-input); + background: var(--color-paper-2); + border: 1px solid var(--color-rule); + color: var(--color-ink) !important; + transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); +} + +.download.button::before { + content: "↓"; + color: var(--color-accent); + font-family: var(--font-body); + font-weight: 700; +} + +.download.button:hover { + border-color: var(--color-accent); + background: var(--color-paper-3); + color: var(--color-ink) !important; + transform: translateY(-2px); +} + +#content iframe { display: block; - background-color: #1A1A1A; - color: #FFFFFF !important; - font-weight: bold; - margin: 2px 0; + margin: var(--space-md) 0; + width: 100%; + max-width: 720px; + height: 405px; + border: 1px solid var(--color-rule); + border-radius: var(--radius-card); + background: var(--color-paper-2); +} + +/* ---------- Contact ---------- */ +.contact-page { margin: var(--space-lg) 0 var(--space-2xl); max-width: var(--measure); } +.contact-intro { color: var(--color-ink-2); margin: 0 0 var(--space-md); font-size: var(--text-lg); } + +.contact-list { + list-style: none; + padding: 0; + margin: 0 0 var(--space-lg); +} + +.contact-item { + display: flex; + align-items: baseline; + gap: var(--space-sm); + padding: 0.65rem 0; + border-bottom: 1px solid var(--color-rule); +} + +.contact-item:last-child { border-bottom: none; } + +.contact-label { + flex: 0 0 6rem; + font-family: var(--font-mono); + font-size: var(--text-sm); + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--color-ink-3); +} + +#content .contact-page h3 { + font-family: var(--font-display); + font-weight: 600; + font-size: var(--text-xl); + letter-spacing: -0.02em; + margin: var(--space-lg) 0 var(--space-sm); +} + +.contact-links { line-height: 1.9; margin: 0; } + +/* ---------- 404 ---------- */ +.notfound { + text-align: center; + margin: clamp(3rem, 12vw, 8rem) 0; +} + +#content .notfound h1 { + font-family: var(--font-display); + font-weight: 700; + font-size: var(--text-display); + letter-spacing: -0.03em; + margin: 0 0 var(--space-sm); +} + +.notfound p { color: var(--color-ink-2); } +.notfound .home-links { margin-top: var(--space-md); } + +/* ---------- Ft5 Statement footer ---------- */ +#footer { + position: static; + width: 100%; + height: auto; + line-height: normal; + background: none; + color: var(--color-ink-2); + border-top: 1px solid var(--color-rule); + margin-top: var(--space-2xl); +} + +#footer footer { + max-width: var(--maxw); + margin: 0 auto; + padding: var(--space-2xl) clamp(1rem, 4vw, 1.5rem) var(--space-xl); +} + +.footer-statement { + font-family: var(--font-display); + font-weight: 600; + font-size: clamp(1.6rem, 3.5vw, 2.6rem); + letter-spacing: -0.02em; + line-height: 1.15; + color: var(--color-ink); + max-width: 20ch; + margin: 0 0 var(--space-xl); +} + +.footer-statement em { font-style: normal; color: var(--color-accent); } + +.footer-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-sm); + font-size: 0.9rem; + color: var(--color-ink-3); +} + +.footer-meta a { color: var(--color-ink-2); } +.footer-meta a:hover { color: var(--color-accent); } +.footer-dot { color: var(--color-rule); } + +/* ---------- Markdown body — dark overrides ---------- */ +#description, +#description.markdown-body, +.markdown-body { + font-family: var(--font-body); + font-size: var(--text-md); + line-height: 1.7; + color: var(--color-ink); + overflow: visible; + word-wrap: break-word; +} + +.markdown-body > *:first-child { margin-top: 0; } +.markdown-body > *:last-child { margin-bottom: 0; } +.markdown-body ul, .markdown-body ol { padding-left: 1.75rem; } +.markdown-body li + li { margin-top: 0.25rem; } + +/* Constrain prose to a comfortable measure, but let grids/heroes span full width */ +.markdown-body > p, +.markdown-body > ul, +.markdown-body > ol, +.markdown-body > dl, +.markdown-body > blockquote, +.markdown-body > pre, +.markdown-body > table, +.markdown-body > h1, +.markdown-body > h2, +.markdown-body > h3, +.markdown-body > h4, +.markdown-body > h5, +.markdown-body > h6 { + max-width: var(--measure); +} + +#content .markdown-body h1, +#content .markdown-body h2, +#content .markdown-body h3, +#content .markdown-body h4, +#content .markdown-body h5, +#content .markdown-body h6, +#content h1, #content h2, #content h3, #content h4 { + font-family: var(--font-display); + font-weight: 600; + letter-spacing: -0.02em; + color: var(--color-ink); + line-height: 1.2; + margin-top: var(--space-xl); + margin-bottom: var(--space-sm); +} + +.markdown-body h1 { border-bottom: 1px solid var(--color-rule); padding-bottom: 0.3em; } +.markdown-body h2 { border-bottom: 1px solid var(--color-rule); padding-bottom: 0.3em; } +.markdown-body h6 { color: var(--color-ink-3); } + +.markdown-body a { color: var(--color-accent); background: transparent; } +.markdown-body a:hover { color: var(--color-accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } + +.markdown-body strong { color: var(--color-ink); font-weight: 600; } + +.markdown-body code { + font-family: var(--font-mono); + font-size: 0.88em; + background: var(--color-paper-3); + border: 1px solid var(--color-rule); + border-radius: 5px; + padding: 0.12rem 0.4rem; + color: var(--color-accent); +} + +.markdown-body code:before, +.markdown-body code:after { content: normal; } + +.markdown-body .highlight pre, +.markdown-body pre { + background-color: oklch(12% 0.014 264); + border: 1px solid var(--color-rule); + border-radius: var(--radius-card); + color: var(--color-ink); + padding: var(--space-sm) var(--space-md); + line-height: 1.6; +} + +.markdown-body .highlight { background: transparent; } + +.markdown-body pre > code, +.markdown-body pre code { + background: transparent; + border: none; + color: var(--color-ink); + padding: 0; +} + +.markdown-body blockquote { + border-left: 3px solid var(--color-accent); + padding: 0.2rem 0 0.2rem var(--space-md); + margin: var(--space-md) 0; + color: var(--color-ink-2); +} + +.markdown-body hr { + background: var(--color-rule); + height: 1px; + border: 0; + margin: var(--space-lg) 0; +} + +.markdown-body table { + width: 100%; + border-collapse: collapse; + display: block; + overflow: auto; +} + +.markdown-body table th, +.markdown-body table td { + border: 1px solid var(--color-rule); + padding: 0.5rem 0.85rem; +} + +.markdown-body table th { font-weight: 600; color: var(--color-ink); background: var(--color-paper-3); } +.markdown-body table tr { background-color: var(--color-paper); border-top: 1px solid var(--color-rule); } +.markdown-body table tr:nth-child(2n) { background-color: var(--color-paper-2); } + +.markdown-body img { border-radius: 8px; } + +/* Code syntax — readable on dark */ +.markdown-body .highlight .c, .markdown-body .highlight .cm, .markdown-body .highlight .c1, .markdown-body .highlight .cs { color: var(--color-ink-3); font-style: italic; } +.markdown-body .highlight .k, .markdown-body .highlight .kc, .markdown-body .highlight .kd, .markdown-body .highlight .kn, .markdown-body .highlight .kp, .markdown-body .highlight .kr { color: var(--color-violet); font-weight: 600; } +.markdown-body .highlight .kt, .markdown-body .highlight .nc { color: oklch(80% 0.1 200); } +.markdown-body .highlight .s, .markdown-body .highlight .s1, .markdown-body .highlight .s2, .markdown-body .highlight .sb, .markdown-body .highlight .sc, .markdown-body .highlight .sd, .markdown-body .highlight .se, .markdown-body .highlight .sh, .markdown-body .highlight .si, .markdown-body .highlight .sx, .markdown-body .highlight .sr, .markdown-body .highlight .ss { color: oklch(82% 0.13 145); } +.markdown-body .highlight .m, .markdown-body .highlight .mf, .markdown-body .highlight .mh, .markdown-body .highlight .mi, .markdown-body .highlight .mo, .markdown-body .highlight .il { color: var(--color-accent); } +.markdown-body .highlight .nf, .markdown-body .highlight .nv, .markdown-body .highlight .na, .markdown-body .highlight .no, .markdown-body .highlight .nb { color: oklch(82% 0.11 230); } +.markdown-body .highlight .n { color: var(--color-ink); } + +/* ---------- Reveal on load ---------- */ +@keyframes hm-fade-in { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: none; } +} + +.home-intro, +.project-header, +.gallery-carousel, +#description > * { + animation: hm-fade-in 480ms var(--ease-out) both; +} + +/* ---------- Responsive ---------- */ +@media (max-width: 40rem) { + .nav-brand span { font-size: 0.95rem; } + .nav-links a { padding: 0.4rem 0.6rem; font-size: 0.9rem; } + .home-actions .btn { width: 100%; justify-content: center; } + .project-header-icon { flex-basis: 56px; width: 56px; height: 56px; } + .gallery-btn { width: 38px; height: 38px; } } -.download:hover{ - background-color: #00ADE6 !important; +/* ---------- Reduced motion ---------- */ +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } } diff --git a/design.md b/design.md new file mode 100644 index 0000000..3aac6b7 --- /dev/null +++ b/design.md @@ -0,0 +1,117 @@ +# Design — RochetCode + +A locked design system for this site. Every page reads this file before emitting +code. Do not regenerate per page — extend or amend this file when the system +needs to grow. Tokens live in [`tokens.css`](tokens.css); the page CSS +(`css/style.css`) references them by name and never inlines raw values. + +## Genre + +atmospheric (dark canvas) with a **playful** tone overlay — a WoW-modding code +catalogue that keeps the dark gaming heritage of the original site. + +## Macrostructure family + +- **Marketing pages** (`/`): Marquee Hero — compact left-biased hero that feeds a + featured-catalogue teaser. Varies only the hero copy. +- **Hub pages** (`/downloads`): Catalogue / Ecosystem Index — a responsive card + grid (icon · title · tags · blurb). The primary browse surface. +- **Content pages** (project posts, `/contact`, `404`): Long Document — project + header (icon + title + tags), optional gallery, prose at a ~72ch measure, + download chips. + +## Theme — Nightforge + +| Token | Value | +| --- | --- | +| `--color-paper` | `oklch(15% 0.014 264)` | +| `--color-paper-2` | `oklch(19% 0.016 264)` | +| `--color-paper-3` | `oklch(24% 0.018 264)` | +| `--color-ink` | `oklch(96% 0.005 264)` | +| `--color-ink-2` | `oklch(75% 0.012 264)` | +| `--color-ink-3` | `oklch(60% 0.012 264)` | +| `--color-rule` | `oklch(31% 0.014 264)` | +| `--color-accent` | `oklch(80% 0.13 80)` (WoW gold) | +| `--color-violet` | `oklch(73% 0.12 300)` (secondary, tags only) | +| `--color-focus` | `oklch(85% 0.14 85)` | + +Diversification axes: **paper-band** dark · **display-style** geometric-sans · +**accent-hue** warm (gold). + +## Typography + +- Display: `Space Grotesk`, weight 600–700, tracking `-0.02em`/`-0.03em`. +- Body: `Inter`, weight 400–500. +- Mono: `JetBrains Mono` — version tags, project tags, inline `code`, eyebrows. +- Hero display: `clamp(2.6rem, 5.5vw + 1rem, 5rem)`. +- Prose measure: `~72ch`. + +Fonts are loaded once in `_layouts/default.html` via Google Fonts. + +## Spacing + +4-point named scale in `tokens.css`. Pages use named tokens +(`var(--space-md)`), never raw values. + +## Motion + +- Easing: `--ease-out: cubic-bezier(0.16, 1, 0.3, 1)`. +- Reveal: fade-in only on load (atmospheric — no slide, no bounce). +- Card hover: 4px lift + soft warm glow shadow. +- Reduced-motion: all transitions/animations disabled; gallery autoplay off. + +## Microinteractions stance + +- Silent state changes; no celebratory toasts. +- Focus rings show instantly (never animated), `2px` at `--color-focus`. +- Gallery: autoplay (4s) that pauses on hover/focus; prev/next + dot controls. + +## CTA voice + +- Primary: gold pill fill (`--color-accent`) with dark ink text, lifts on hover. +- Secondary: ghost pill — `1px` rule border, fills to accent outline on hover. +- Download links: mono "↓" chips on `--color-paper-2`, border brightens on hover. + +## What pages MUST share + +- The `RochetCode` wordmark + logo in the floating-pill nav (N5). +- The gold accent and its restrained placement (small surfaces, never on display text as gradient). +- `Space Grotesk` + `Inter` + `JetBrains Mono`. +- The CTA voice (pill shape, radii, padding rhythm). +- The project-header rhythm (icon + title + mono tags). +- The Ft5 statement footer with muted meta row. + +## What pages MAY differ on + +- Hero copy on the marketing page. +- Presence of a gallery / videos / downloads on content pages. +- Number of cards in the catalogue grid. + +## Exports + +See [`tokens.css`](tokens.css) for the canonical token source. + +### tokens.css + +```css +:root { + --color-paper: oklch(15% 0.014 264); + --color-paper-2: oklch(19% 0.016 264); + --color-paper-3: oklch(24% 0.018 264); + --color-ink: oklch(96% 0.005 264); + --color-ink-2: oklch(75% 0.012 264); + --color-ink-3: oklch(60% 0.012 264); + --color-rule: oklch(31% 0.014 264); + --color-accent: oklch(80% 0.13 80); + --color-accent-ink: oklch(22% 0.05 80); + --color-violet: oklch(73% 0.12 300); + --color-focus: oklch(85% 0.14 85); + + --font-display: "Space Grotesk", system-ui, sans-serif; + --font-body: "Inter", system-ui, sans-serif; + --font-mono: "JetBrains Mono", ui-monospace, monospace; + + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --dur: 240ms; +} +``` diff --git a/downloads/index.html b/downloads/index.html index dd5c8fd..a272b33 100644 --- a/downloads/index.html +++ b/downloads/index.html @@ -3,15 +3,29 @@ description: Browse Rochet2 emulator mods and tools, including Eluna, Transmogrification, and Portal Master. --- -

Click a project below to read more about it and download it

+
+

The catalogue

+ {{ site.posts | size }} projects · TrinityCore · MaNGOS · Eluna +
{% for post in site.posts %} + {% assign project = site.data.projects[post.title] %} - diff --git a/index.html b/index.html index 8eb6d7b..4e20ecc 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,17 @@ ---
-

Welcome to RochetCode

-

Scripts and core modifications for open-source World of Warcraft emulators. Browse releases for TrinityCore, MaNGOS, Eluna, and more.

-

Browse projects

+ Since 6.7.2010 · open source +

Mods for World of Warcraft emulators.

+

Scripts and core modifications for TrinityCore, MaNGOS, and Eluna — teleports, transmog, scripting, vendors, trainers, and tools. SQL installs and source links, one click away.

+
+ Browse the catalogue → + View on GitHub +
    -
  • SQL installs, GitHub source links, and documentation per project
    • +
  • SQL installs, GitHub source links, and docs per project
  • Screenshots and videos where available
    • -
  • Mods for teleports, transmog, scripting, vendors, trainers, and tools
    • +
  • For teleports, transmog, scripting, vendors, trainers & tools

GitHub · diff --git a/js/gallery.js b/js/gallery.js index 54e8ef6..e748a69 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -1,4 +1,6 @@ (function () { + var reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; + document.querySelectorAll(".gallery-carousel").forEach(function (carousel) { var slides = carousel.querySelectorAll(".gallery-slide"); if (slides.length <= 1) { @@ -6,16 +8,76 @@ } var current = 0; + var timer = null; + + function show(index) { + index = (index + slides.length) % slides.length; + slides[current].classList.remove("is-active"); + dots[current].classList.remove("is-active"); + dots[current].setAttribute("aria-current", "false"); + slides[index].classList.add("is-active"); + dots[index].classList.add("is-active"); + dots[index].setAttribute("aria-current", "true"); + current = index; + } + + function next() { show(current + 1); } + function prev() { show(current - 1); } + + function start() { + if (reduceMotion || timer) { return; } + timer = window.setInterval(next, 4000); + } + function stop() { + if (timer) { window.clearInterval(timer); timer = null; } + } + function restart() { stop(); start(); } + var dotsWrap = document.createElement("div"); + dotsWrap.className = "gallery-dots"; + dotsWrap.setAttribute("role", "tablist"); + dotsWrap.setAttribute("aria-label", "Choose slide"); + + var dots = []; for (var i = 0; i < slides.length; i += 1) { - slides[i].classList.toggle("is-active", i === current); + (function (index) { + var dot = document.createElement("button"); + dot.type = "button"; + dot.className = "gallery-dot" + (index === 0 ? " is-active" : ""); + dot.setAttribute("aria-label", "Go to slide " + (index + 1)); + dot.addEventListener("click", function () { show(index); restart(); }); + dotsWrap.appendChild(dot); + dots.push(dot); + })(i); } - window.setInterval(function () { - var next = (current + 1) % slides.length; - slides[next].classList.add("is-active"); - slides[current].classList.remove("is-active"); - current = next; - }, 4000); + var prevBtn = document.createElement("button"); + prevBtn.type = "button"; + prevBtn.className = "gallery-btn gallery-prev"; + prevBtn.setAttribute("aria-label", "Previous slide"); + prevBtn.innerHTML = "\u2039"; + prevBtn.addEventListener("click", function () { prev(); restart(); }); + + var nextBtn = document.createElement("button"); + nextBtn.type = "button"; + nextBtn.className = "gallery-btn gallery-next"; + nextBtn.setAttribute("aria-label", "Next slide"); + nextBtn.innerHTML = "\u203a"; + nextBtn.addEventListener("click", function () { next(); restart(); }); + + carousel.appendChild(prevBtn); + carousel.appendChild(nextBtn); + carousel.appendChild(dotsWrap); + + carousel.addEventListener("mouseenter", stop); + carousel.addEventListener("mouseleave", start); + carousel.addEventListener("focusin", stop); + carousel.addEventListener("focusout", start); + + for (var s = 0; s < slides.length; s += 1) { + slides[s].classList.toggle("is-active", s === current); + } + + start(); }); })(); diff --git a/script/asset_version.py b/script/asset_version.py index 7c79bfa..81dbffb 100644 --- a/script/asset_version.py +++ b/script/asset_version.py @@ -10,8 +10,8 @@ from pathlib import Path ASSET_FILES = ( + Path("tokens.css"), Path("css/style.css"), - Path("css/github_markdown.css"), Path("js/gallery.js"), ) OUTPUT = Path("_data/assets.yml") diff --git a/tokens.css b/tokens.css new file mode 100644 index 0000000..f8861c2 --- /dev/null +++ b/tokens.css @@ -0,0 +1,55 @@ +/* Hallmark · Nightforge design tokens · genre: atmospheric · tone: playful + * paper-band: dark · display-style: geometric-sans · accent-hue: warm (gold) */ +:root { + /* Surfaces — near-black, faint cool tint */ + --color-paper: oklch(15% 0.014 264); + --color-paper-2: oklch(19% 0.016 264); + --color-paper-3: oklch(24% 0.018 264); + + /* Ink */ + --color-ink: oklch(96% 0.005 264); + --color-ink-2: oklch(75% 0.012 264); + --color-ink-3: oklch(60% 0.012 264); + + /* Rules / borders */ + --color-rule: oklch(31% 0.014 264); + + /* Accent — WoW gold (warm) + arcane-violet secondary */ + --color-accent: oklch(80% 0.13 80); + --color-accent-strong: oklch(85% 0.15 84); + --color-accent-ink: oklch(22% 0.05 80); + --color-accent-soft: oklch(80% 0.13 80 / 0.12); + --color-violet: oklch(73% 0.12 300); + + --color-focus: oklch(85% 0.14 85); + + /* Type */ + --font-display: "Space Grotesk", system-ui, "Segoe UI", sans-serif; + --font-body: "Inter", system-ui, "Segoe UI", sans-serif; + --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; + + /* 4-pt spacing scale */ + --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; + --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; + --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem; + + /* Type scale */ + --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 1.0625rem; + --text-lg: 1.3rem; --text-xl: 1.7rem; --text-2xl: 2.3rem; + --text-display: clamp(2.6rem, 5.5vw + 1rem, 5rem); + + /* Motion */ + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --dur: 240ms; + + /* Radii */ + --radius-card: 14px; + --radius-pill: 999px; + --radius-tag: 6px; + --radius-input: 10px; + + /* Layout */ + --maxw: 1120px; + --measure: 72ch; +}