542f2ac04155
unify Kepr's vibrant palette around gold, amber and warm red (v3.1.18)
- time
- 2026-10-08 01:19 UTC · 5 days ago
- machine
- Junes-MacBook-Pro.local
- agent
- gpt-6
- session
- cohesive vibrant palette
- parent
- ca4c2b7759fa
↓ kepr-542f2ac0.tar.gzatlas at this save
files changed3 files
package.json+1 −1public/css/kepr.css+43 −30public/favicon.svg+2 −2package.json+1 −1
@@ -1,6 +1,6 @@11 {22 "name": "kepr",3- "version": "3.1.17",3+ "version": "3.1.18",44 "private": true,55 "type": "module",66 "scripts": {public/css/kepr.css+43 −30
@@ -1,4 +1,4 @@1-/* Kepr 3: Kepr 2's look (kepr.uk, gold theme), its palette made richer and more saturated (June, 2026-10-07), ported only as far as the pages that exist use it. */1+/* Amber carries the brand; neighbouring gold and warm red keep the palette cohesive. */22 33 :root {44 --bg: #0d0805;@@ -7,8 +7,8 @@77 --border: #3d2814;88 --text: #efe3d3;99 --text-secondary: #c9ab9c;10- --text-muted: #9a7d70;11- --text-faint: #6a4c40;10+ --text-muted: #ad9385;11+ --text-faint: #978779;1212 --text-heading: #fff4e8;1313 --accent: #ffad33;1414 --accent-bright: #ffd166;@@ -17,14 +17,28 @@1717 --accent-tint-04: rgba(255, 173, 51, 0.04);1818 --accent-tint-12: rgba(255, 173, 51, 0.12);1919 --sage: #9ad65f;20- --coral: #ff8a5c;21- --coral-dim: #a8502e;22- --rose: #ff8ab4;23- --lavender: #c9a0ff;20+ --syntax-red: #ff8f86;2421 --sans: "Quicksand", system-ui, sans-serif;2522 --mono: "Martian Mono", ui-monospace, monospace;23+ caret-color: var(--accent);24+ accent-color: var(--accent);2625 }2726 27+::selection {28+ background: var(--accent-bright);29+ color: var(--bg);30+}31+32+a:focus-visible,33+button:focus-visible,34+input:focus-visible,35+textarea:focus-visible,36+select:focus-visible,37+summary:focus-visible {38+ outline: 1px solid var(--accent);39+ outline-offset: 4px;40+}41+2842 * {2943 box-sizing: border-box;3044 scrollbar-width: thin;@@ -44,7 +58,7 @@4458 }4559 body {4660 background:47- radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 120, 30, 0.12), transparent 70%) fixed,61+ radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 173, 51, 0.12), transparent 70%) fixed,4862 var(--bg);4963 }5064 @@ -103,7 +117,7 @@103117 .tri-inner {104118 animation:105119 tri-cw 8s linear infinite,106- red-flash 11s ease-in-out infinite;120+ amber-flash 11s ease-in-out infinite;107121 }108122 @keyframes tri-ccw {109123 to {@@ -115,14 +129,14 @@115129 transform: rotate(360deg);116130 }117131 }118-@keyframes red-flash {132+@keyframes amber-flash {119133 0%,120134 90%,121135 100% {122136 color: var(--accent);123137 }124138 95% {125- color: var(--red);139+ color: var(--accent-bright);126140 }127141 }128142 .wordmark-by {@@ -292,11 +306,12 @@292306 .repo-contributor {293307 margin: 4px 0 0;294308 font-size: 0.8125rem;295- color: var(--coral);309+ color: var(--text-secondary);296310 animation: fadeUp 280ms 40ms ease both;297311 }298312 .repo-contributor a:hover {299- text-decoration-color: var(--coral);313+ color: var(--accent);314+ text-decoration-color: var(--accent);300315 }301316 .repo-desc,302317 .repo-homepage {@@ -1089,26 +1104,24 @@10891104 text-decoration: none;10901105 }10911106 1092-/* Shiki's CSS-variables theme roles in five colours: amber, red, green, rose and lavender. */1107+/* A gold-to-amber-to-red range keeps syntax vivid without colouring every identifier. */10931108 .tk-comment {10941109 color: var(--text-muted);10951110 font-style: italic;10961111 }1097-.tk-keyword {1112+.tk-keyword,1113+.tk-constant {10981114 color: var(--accent);10991115 }11001116 .tk-string,11011117 .tk-string-expression {1102- color: var(--sage);1118+ color: var(--accent-bright);11031119 }1104-.tk-constant {1105- color: var(--rose);1106-}11071120 .tk-function {1108- color: var(--red);1121+ color: var(--syntax-red);11091122 }11101123 .tk-parameter {1111- color: var(--lavender);1124+ color: var(--text);11121125 }11131126 .tk-punctuation {11141127 color: var(--text-secondary);@@ -1612,7 +1625,7 @@16121625 }16131626 .issue-reporter {16141627 font-size: 0.6875rem;1615- color: var(--coral);1628+ color: var(--text-secondary);16161629 overflow-wrap: anywhere;16171630 }16181631 .issues-filter {@@ -1629,7 +1642,7 @@16291642 background: var(--bg-surface);16301643 }16311644 .issue-post--operator {1632- border-color: var(--coral);1645+ border-color: var(--accent-dim);16331646 }16341647 .issue-post-head {16351648 display: flex;@@ -1638,10 +1651,10 @@16381651 margin: 0 0 8px;16391652 }16401653 .issue-author {1641- color: var(--coral);1654+ color: var(--text-secondary);16421655 }16431656 .issue-badge {1644- color: var(--coral);1657+ color: var(--accent-bright);16451658 text-transform: uppercase;16461659 letter-spacing: 0.08em;16471660 }@@ -2017,7 +2030,7 @@20172030 font-family: var(--mono);20182031 font-size: 13px;20192032 line-height: 16px;2020- color: var(--coral-dim);2033+ color: var(--accent-dim);20212034 }20222035 /* Characters top to bottom, columns right to left, each breathing on its own clock. */20232036 .hex-col {@@ -2031,7 +2044,7 @@20312044 text-shadow 1.6s ease;20322045 }20332046 .hex-col:nth-child(3n) {2034- color: var(--coral);2047+ color: var(--accent);20352048 animation-duration: 23s;20362049 animation-delay: -7s;20372050 }@@ -2048,7 +2061,7 @@20482061 }20492062 .hex-col.glow {20502063 color: var(--text-heading);2051- text-shadow: 0 0 6px rgba(255, 138, 92, 0.3);2064+ text-shadow: 0 0 6px rgba(255, 173, 51, 0.2);20522065 }20532066 @keyframes hex-breathe {20542067 0%,@@ -2085,7 +2098,7 @@20852098 line-height: 1;20862099 letter-spacing: -0.02em;20872100 text-transform: lowercase;2088- color: var(--coral);2101+ color: var(--text-heading);20892102 user-select: none;20902103 animation: fadeUp 500ms ease both;20912104 }@@ -2105,7 +2118,7 @@21052118 display: block;21062119 font-size: 0.6875rem;21072120 letter-spacing: 0.18em;2108- color: var(--coral);2121+ color: var(--accent-bright);21092122 }21102123 21112124 .profile-portrait-section {public/favicon.svg+2 −2
@@ -1,5 +1,5 @@11 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">22 <title>kepr</title>3- <polygon points="16,3 27,23 5,23" fill="none" stroke="#c89a5a" stroke-width="2" stroke-linejoin="round"/>4- <polygon points="16,10 22,21 10,21" fill="none" stroke="#c89a5a" stroke-width="1.5" stroke-linejoin="round"/>3+ <polygon points="16,3 27,23 5,23" fill="none" stroke="#ffad33" stroke-width="2" stroke-linejoin="round"/>4+ <polygon points="16,10 22,21 10,21" fill="none" stroke="#ffad33" stroke-width="1.5" stroke-linejoin="round"/>55 </svg>\ No newline at end of file