docs: upload netgrimoire-card-grid.html
This commit is contained in:
Administrator
John Smith
parent
9773b65e0c
commit
04c462693e
1 changed files with 157 additions and 0 deletions
157
netgrimoire-card-grid.html
Normal file
157
netgrimoire-card-grid.html
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<!-- ============================================================
|
||||||
|
NETGRIMOIRE — Quick Navigation Card Grid
|
||||||
|
Replace your existing Quick Navigation table with this block.
|
||||||
|
Inject via Wiki.js page editor → Insert → Code Block (HTML)
|
||||||
|
============================================================ -->
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Raleway:wght@300;400&display=swap');
|
||||||
|
|
||||||
|
.ng-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin: 1.5em 0 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-card {
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(135deg, #0d1117 0%, #0a0f14 100%);
|
||||||
|
border: 1px solid rgba(0, 229, 204, 0.18);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.4em 1.6em;
|
||||||
|
text-decoration: none !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1em;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corner glow accent */
|
||||||
|
.ng-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; right: 0;
|
||||||
|
width: 80px; height: 80px;
|
||||||
|
background: radial-gradient(circle at top right, rgba(0,229,204,0.08) 0%, transparent 70%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-card:hover {
|
||||||
|
border-color: rgba(0, 229, 204, 0.55);
|
||||||
|
box-shadow: 0 0 24px rgba(0, 229, 204, 0.15), 0 4px 20px rgba(0,0,0,0.5);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-card:hover .ng-icon {
|
||||||
|
text-shadow: 0 0 14px rgba(0,229,204,0.6);
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-icon {
|
||||||
|
font-size: 1.8em;
|
||||||
|
line-height: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 2px;
|
||||||
|
transition: transform 0.25s, text-shadow 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-body {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-title {
|
||||||
|
font-family: 'Cinzel', serif;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #00e5cc;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0 0 0.35em 0;
|
||||||
|
text-shadow: 0 0 10px rgba(0,229,204,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-desc {
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #7aaaa5;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bottom scan-line shimmer on hover */
|
||||||
|
@keyframes scanline {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0; left: 0;
|
||||||
|
width: 100%; height: 1px;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(0,229,204,0.4), transparent);
|
||||||
|
transform: translateX(-100%);
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ng-card:hover::after {
|
||||||
|
animation: scanline 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="ng-grid">
|
||||||
|
|
||||||
|
<a class="ng-card" href="/runbooks">
|
||||||
|
<div class="ng-icon">📕</div>
|
||||||
|
<div class="ng-body">
|
||||||
|
<div class="ng-title">Runbooks</div>
|
||||||
|
<p class="ng-desc">Break-glass procedures, recovery, and operational standards</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="ng-card" href="/services">
|
||||||
|
<div class="ng-icon">🔴</div>
|
||||||
|
<div class="ng-body">
|
||||||
|
<div class="ng-title">Services</div>
|
||||||
|
<p class="ng-desc">Docker stacks, configs, and CI/CD notes</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="ng-card" href="/infrastructure">
|
||||||
|
<div class="ng-icon">🖥️</div>
|
||||||
|
<div class="ng-body">
|
||||||
|
<div class="ng-title">Infrastructure / Hosts</div>
|
||||||
|
<p class="ng-desc">Nodes, labels, hardware specs, and rebuild procedures</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="ng-card" href="/network">
|
||||||
|
<div class="ng-icon">🌐</div>
|
||||||
|
<div class="ng-body">
|
||||||
|
<div class="ng-title">Network</div>
|
||||||
|
<p class="ng-desc">VLANs, trunks, STP, and switch configurations</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="ng-card" href="/storage">
|
||||||
|
<div class="ng-icon">🗄️</div>
|
||||||
|
<div class="ng-body">
|
||||||
|
<div class="ng-title">Storage</div>
|
||||||
|
<p class="ng-desc">ZFS, NFS, SMB, and migration procedures</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="ng-card" href="/diagrams">
|
||||||
|
<div class="ng-icon">🔀</div>
|
||||||
|
<div class="ng-body">
|
||||||
|
<div class="ng-title">Diagrams</div>
|
||||||
|
<p class="ng-desc">Draw.io topology and infrastructure flow diagrams</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue