|
|
@@ -30,8 +30,8 @@
|
|
|
--c-action: #10B981;
|
|
|
--c-heart: #FF6B9D;
|
|
|
}
|
|
|
- html.kb-page, .kb-page body { height: 100vh; overflow: hidden; }
|
|
|
- .kb-page body { display: flex; flex-direction: column; padding-top:64px; background: linear-gradient(135deg, #FAFBFC 0%, #F0F4F8 100%); }
|
|
|
+ html.kb-page { height: 100vh; overflow: hidden; }
|
|
|
+ .kb-page body { height: 100vh; overflow: hidden; box-sizing:border-box; display: flex; flex-direction: column; padding-top:64px; background: linear-gradient(135deg, #FAFBFC 0%, #F0F4F8 100%); }
|
|
|
|
|
|
.kb-main { flex:1; display:flex; flex-direction:column; max-width:1200px; width:100%; margin:0 auto; padding:0 var(--space-lg); overflow:hidden; position:relative; z-index:1; }
|
|
|
.kb-header { text-align:center; flex-shrink:0; padding:var(--space-lg) 0 var(--space-md); }
|
|
|
@@ -58,6 +58,11 @@
|
|
|
.kb-marker-card a .ma-arrow { flex-shrink:0; font-size:0.75rem; opacity:0.3; transition:transform var(--transition-fast); }
|
|
|
.kb-marker-card a:hover .ma-arrow { transform:translateX(3px); opacity:0.7; }
|
|
|
.kb-marker-card .ma-coming { opacity:0.5; cursor:default; pointer-events:none; font-size:0.75rem; padding:4px 0; }
|
|
|
+ .kb-marker-card .kb-more-wrap { position:relative; }
|
|
|
+ .kb-marker-card .kb-more-btn { display:block; text-align:center; font-size:0.875rem; font-weight:700; color:var(--m-color); padding:2px 0 0; cursor:pointer; opacity:0.5; transition:opacity .2s; letter-spacing:1px; user-select:none; }
|
|
|
+ .kb-marker-card .kb-more-btn:hover { opacity:1; }
|
|
|
+ .kb-marker-card .kb-hidden-items { max-height:0; overflow:hidden; transition:max-height .25s ease; }
|
|
|
+ .kb-marker-card .kb-more-wrap:hover .kb-hidden-items { max-height:300px; }
|
|
|
|
|
|
.kb-m-pos-brain { top:13%; left:56%; }
|
|
|
.kb-m-pos-heart { top:33%; right:54%; }
|
|
|
@@ -176,11 +181,11 @@
|
|
|
};
|
|
|
|
|
|
var MARKER_POS = {
|
|
|
- brain: { top:'11%', side:'left', offset:'55%' },
|
|
|
- heart: { top:'31%', side:'right', offset:'52%' },
|
|
|
- gut: { top:'46%', side:'left', offset:'53%' },
|
|
|
- hands: { top:'62%', side:'right', offset:'52%' },
|
|
|
- feet: { top:'81%', side:'left', offset:'53%' }
|
|
|
+ brain: { top:'1%', side:'left', offset:'55%' },
|
|
|
+ heart: { top:'21%', side:'right', offset:'52%' },
|
|
|
+ gut: { top:'36%', side:'left', offset:'53%' },
|
|
|
+ hands: { top:'52%', side:'right', offset:'52%' },
|
|
|
+ feet: { top:'71%', side:'left', offset:'53%' }
|
|
|
};
|
|
|
|
|
|
(function buildDesktop() {
|
|
|
@@ -198,8 +203,25 @@
|
|
|
hd.className = 'kb-marker-head';
|
|
|
hd.innerHTML = '<span class="kb-marker-label">'+d.label+' · '+d.subtitle+'</span>';
|
|
|
card.appendChild(hd);
|
|
|
+ var maxVis = 3;
|
|
|
for (var j = 0; j < arts.length; j++) {
|
|
|
- var a = arts[j], el;
|
|
|
+ if (j === maxVis && arts.length > maxVis) {
|
|
|
+ var moreWrap = document.createElement('div');
|
|
|
+ moreWrap.className = 'kb-more-wrap';
|
|
|
+ var btn = document.createElement('div');
|
|
|
+ btn.className = 'kb-more-btn';
|
|
|
+ btn.textContent = '>>';
|
|
|
+ moreWrap.appendChild(btn);
|
|
|
+ var hiddenDiv = document.createElement('div');
|
|
|
+ hiddenDiv.className = 'kb-hidden-items';
|
|
|
+ moreWrap.appendChild(hiddenDiv);
|
|
|
+ card.appendChild(moreWrap);
|
|
|
+ }
|
|
|
+ var a = arts[j], el, container = card;
|
|
|
+ if (j >= maxVis && arts.length > maxVis) {
|
|
|
+ var mw = card.querySelector('.kb-hidden-items');
|
|
|
+ if (mw) container = mw;
|
|
|
+ }
|
|
|
if (a.coming) {
|
|
|
el = document.createElement('div');
|
|
|
el.className = 'ma-coming';
|
|
|
@@ -207,9 +229,9 @@
|
|
|
} else {
|
|
|
el = document.createElement('a');
|
|
|
el.href = a.url;
|
|
|
- el.innerHTML = '<span class="ma-icon">'+a.icon+'</span><span class="ma-title">'+a.title+'</span><span class="ma-arrow">→</span>';
|
|
|
+ el.innerHTML = '<span class="ma-icon">'+a.icon+'</span><span class="ma-title">'+a.title+'</span><span class="ma-arrow">\u2192</span>';
|
|
|
}
|
|
|
- card.appendChild(el);
|
|
|
+ container.appendChild(el);
|
|
|
}
|
|
|
var dot = document.createElement('div');
|
|
|
dot.className = 'kb-marker-dot';
|