GuilanCE/internet-engineering-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add teammate code presentation slides

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-18 21:43:20 +03:30
parent 3b84e1effc
commit 156ecf75d3
2 changed files with 334 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
docs/slides/styles.css
View File

@@ -93,7 +93,8 @@ body {
text-align: center;
}
.slide.active.protocol-slide,
.slide.active.image-slide {
.slide.active.image-slide,
.slide.active.code-slide {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
}
@@ -131,7 +132,8 @@ h2 { font-size: clamp(27px, calc(46px * var(--slide-scale)), 66px); }
letter-spacing: .01em;
}
.protocol-slide .subtitle,
.image-slide .subtitle {
.image-slide .subtitle,
.code-slide .subtitle {
margin-bottom: clamp(10px, calc(14px * var(--slide-scale)), 22px);
}
@@ -635,6 +637,89 @@ pre {
}
.ltr { direction: ltr; text-align: left; }
.code-window {
min-height: 0;
border-radius: clamp(10px, calc(14px * var(--slide-scale)), 18px);
background: #0d1117;
border: 1px solid rgba(255,255,255,.13);
box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
overflow: hidden;
direction: ltr;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.code-titlebar {
height: clamp(38px, calc(44px * var(--slide-scale)), 56px);
background: linear-gradient(180deg, #1f2430, #151a24);
border-bottom: 1px solid rgba(255,255,255,.09);
display: flex;
align-items: center;
gap: 8px;
padding: 0 clamp(14px, calc(18px * var(--slide-scale)), 26px);
}
.code-titlebar span {
width: clamp(10px, calc(12px * var(--slide-scale)), 15px);
height: clamp(10px, calc(12px * var(--slide-scale)), 15px);
border-radius: 50%;
display: block;
}
.code-titlebar span:nth-child(1) { background: #ff5f57; }
.code-titlebar span:nth-child(2) { background: #febc2e; }
.code-titlebar span:nth-child(3) { background: #28c840; }
.code-titlebar strong {
margin-left: 10px;
color: #c9d1d9;
font-family: "Cascadia Code", "Consolas", "SFMono-Regular", monospace;
font-size: clamp(12px, calc(14px * var(--slide-scale)), 19px);
font-weight: 600;
}
.code-window pre {
min-height: 0;
overflow: hidden;
background:
linear-gradient(90deg, rgba(125, 211, 252, .035), transparent 36%),
#0d1117;
border-radius: 0;
box-shadow: none;
padding: clamp(14px, calc(20px * var(--slide-scale)), 28px) 0;
white-space: pre;
font-size: clamp(11px, calc(14px * var(--slide-scale)), 19px);
line-height: 0;
}
.code-window code {
display: block;
background: transparent;
border-radius: 0;
color: #d6deeb;
padding: 0;
font-family: "Cascadia Code", "Consolas", "SFMono-Regular", monospace;
direction: ltr;
unicode-bidi: normal;
}
.code-window .line {
counter-increment: code-line;
display: block;
min-height: 1.55em;
line-height: 1.45;
padding: 0 clamp(18px, calc(28px * var(--slide-scale)), 42px) 0 0;
}
.code-window code {
counter-reset: code-line;
}
.code-window .line::before {
content: counter(code-line);
display: inline-block;
width: clamp(34px, calc(44px * var(--slide-scale)), 56px);
margin-right: clamp(12px, calc(18px * var(--slide-scale)), 26px);
color: #6e7681;
text-align: right;
user-select: none;
}
.code-window .kw { color: #ff7b72; }
.code-window .fn { color: #d2a8ff; }
.code-window .str { color: #a5d6ff; }
.code-window .num { color: #79c0ff; }
.version-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -1007,7 +1092,8 @@ code {
.subtitle { font-size: clamp(14px, 4vw, 18px); }
.kicker { font-size: clamp(12px, 3.7vw, 16px); }
.slide.active.protocol-slide,
.slide.active.image-slide { display: block; }
.slide.active.image-slide,
.slide.active.code-slide { display: block; }
.hero-grid, .split, .demo-layout, .version-row, .resource-grid, .mechanism-grid, .takeaway-grid { grid-template-columns: 1fr; }
.takeaway-grid { grid-template-rows: none; min-height: 0; }
.hero-grid, .split, .demo-layout, .mechanism-grid { gap: 18px; }
@@ -1047,6 +1133,19 @@ code {
.mini-points span { font-size: 12px; padding: 7px 10px; }
.quote { font-size: 15px; }
pre { font-size: clamp(10px, 2.8vw, 13px); padding: 14px; }
.code-window { display: block; }
.code-window pre {
overflow-x: auto;
font-size: clamp(10px, 2.7vw, 13px);
padding: 12px 0;
}
.code-window .line {
padding-right: 14px;
}
.code-window .line::before {
width: 32px;
margin-right: 12px;
}
ol { font-size: 14px; line-height: 1.9; }
.controls { left: 14px; bottom: 14px; }
.controls button { width: 36px; height: 36px; font-size: 24px; }