feat: release meme protocol v1.1.0

Add one-click meme copying, complete viewer actions, fixed-footer pagination, protocol lore, and the Homo Reseticus download chooser.

Install dedicated social and favicon assets, expand local demo data, and synchronize the changelog, documentation, package, and OpenAPI release metadata.
This commit is contained in:
smileBeda committed 2026-08-14 18:54:37 -03:00
1 parent 0bf215555a
commit 48f05bcf8a
24 files changed
+702 -81

No files matched your search

+214 -11
View File
@@ -18,6 +18,7 @@
--error: #ffb4ab;
--gutter: 16px;
--desktop-margin: 32px;
--footer-height: 44px;
}
* {
@@ -29,6 +30,10 @@ body {
min-height: 100%;
}
html {
scroll-padding-bottom: calc(var(--footer-height) + 24px);
}
body {
margin: 0;
background: var(--void);
@@ -148,7 +153,7 @@ a {
.shell {
width: min(100%, 1440px);
margin: 0 auto;
padding: 96px var(--desktop-margin) 48px;
padding: 96px var(--desktop-margin) calc(var(--footer-height) + 16px + env(safe-area-inset-bottom));
}
.status-line {
@@ -162,6 +167,33 @@ a {
border-bottom: 1px solid var(--outline-variant);
}
.protocol-menu {
display: flex;
align-items: center;
gap: 16px;
}
.protocol-menu a,
.protocol-menu button {
appearance: none;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-decoration: none;
}
.protocol-menu a:hover,
.protocol-menu a:focus-visible,
.protocol-menu button:hover,
.protocol-menu button:focus-visible {
color: var(--primary-dim);
text-decoration: underline;
text-underline-offset: 3px;
}
.live {
display: inline-flex;
align-items: center;
@@ -379,14 +411,19 @@ a {
color: var(--primary);
}
.text-action:disabled {
cursor: wait;
opacity: 0.65;
}
.feed-loader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
min-height: 104px;
margin-top: 24px;
gap: 12px;
min-height: 64px;
margin-top: 16px;
color: var(--outline);
font-size: 10px;
font-weight: 600;
@@ -395,24 +432,31 @@ a {
}
.loader-ring {
display: none;
width: 32px;
height: 32px;
border: 2px solid transparent;
border-top-color: var(--primary);
border-radius: 9999px;
opacity: 0;
}
.feed-loader.is-spinning .loader-ring {
display: block;
animation: spin 850ms linear infinite;
opacity: 1;
}
.repo-footer {
position: fixed;
z-index: 20;
inset: auto 0 0;
display: flex;
min-height: calc(var(--footer-height) + env(safe-area-inset-bottom));
align-items: center;
justify-content: center;
margin-top: -8px;
padding-bottom: 8px;
padding: 0 16px env(safe-area-inset-bottom);
border-top: 1px solid var(--outline-variant);
background: var(--void);
backdrop-filter: blur(12px);
}
.repo-footer a {
@@ -535,6 +579,10 @@ dialog::backdrop {
width: min(640px, calc(100vw - 32px));
}
.pet-panel {
width: min(580px, calc(100vw - 32px));
}
.modal-header,
.lightbox-toolbar {
display: flex;
@@ -546,6 +594,15 @@ dialog::backdrop {
background: var(--surface);
}
.lightbox-toolbar > span {
min-width: 0;
overflow-wrap: anywhere;
}
.lightbox-toolbar .icon-action {
flex: 0 0 auto;
}
.modal-header h2 {
margin: 0;
font-family: Geist, Inter, system-ui, sans-serif;
@@ -642,6 +699,88 @@ dialog::backdrop {
color: var(--primary-dim);
}
.pet-downloads {
display: grid;
gap: 12px;
padding: 16px;
}
.pet-prompt {
margin: 0 0 4px;
color: var(--outline);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pet-footnote {
margin: 4px 0 0;
color: var(--outline);
font-size: 9px;
line-height: 1.5;
}
.pet-footnote a {
color: var(--muted);
text-underline-offset: 2px;
}
.pet-footnote a:hover,
.pet-footnote a:focus-visible {
color: var(--primary-dim);
}
.pet-download {
display: flex;
min-width: 0;
min-height: 72px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border: 1px solid var(--outline-variant);
background: var(--surface-lowest);
color: var(--muted);
text-decoration: none;
}
.pet-download:hover,
.pet-download:focus-visible {
border-color: var(--primary-dim);
background: var(--surface-high);
color: var(--primary-dim);
}
.pet-download > span:first-child {
display: grid;
min-width: 0;
gap: 6px;
}
.pet-download strong,
.pet-download small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pet-download strong {
font-size: 12px;
letter-spacing: 0.1em;
}
.pet-download small {
color: var(--outline);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
}
.pet-download > .material-symbols-outlined {
flex: 0 0 auto;
}
.modal-actions {
display: flex;
justify-content: flex-end;
@@ -697,11 +836,16 @@ dialog::backdrop {
box-shadow: 0 0 24px rgb(0 255 65 / 14%);
}
.lightbox[open] {
display: flex;
flex-direction: column;
}
.lightbox img {
display: block;
width: auto;
max-width: 100%;
max-height: calc(100vh - 144px);
max-height: calc(100vh - 176px);
margin: 0 auto;
object-fit: contain;
background: #000;
@@ -709,9 +853,68 @@ dialog::backdrop {
.lightbox-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 12px 12px 4px;
}
.lorebox {
width: min(760px, calc(100vw - 32px));
}
.lore-text {
min-height: 260px;
max-height: calc(100vh - 176px);
margin: 0;
overflow: auto;
padding: 24px;
background: #080808;
color: var(--text);
font: inherit;
font-size: 13px;
line-height: 1.7;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.lore-actions {
justify-content: flex-end;
gap: 8px;
margin: 12px;
}
.viewer-status {
min-height: 16px;
margin: 0 12px 8px;
color: var(--primary-dim);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.action-toast {
position: fixed;
z-index: 19;
right: 16px;
bottom: calc(var(--footer-height) + 12px + env(safe-area-inset-bottom));
max-width: calc(100vw - 32px);
margin: 0;
padding: 6px 8px;
background: var(--surface);
color: var(--primary-dim);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.action-toast:empty {
display: none;
}
.clipboard-fallback {
position: fixed;
inset: auto auto 0 -9999px;
}
.empty-state {