Skip to content

Commit 3f01504

Browse files
0xferit0xferit
committed
Remove How It Works section from landing page
1 parent 4315179 commit 3f01504

File tree

1 file changed

+0
-115
lines changed

1 file changed

+0
-115
lines changed

‎index.html‎

Lines changed: 0 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -94,51 +94,6 @@
9494
.footer p { font-size: 0.85rem; color: var(--fg-2); }
9595
.footer a { color: var(--fg-2); } .footer a:hover { color: var(--accent); }
9696

97-
/* ── How It Works: Steps ── */
98-
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
99-
.step { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
100-
.step:hover { transform: translateY(-2px); border-color: var(--border-focus); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
101-
.step:nth-child(1) { border-top: 2px solid var(--accent); }
102-
.step:nth-child(2) { border-top: 2px solid var(--green); }
103-
.step:nth-child(3) { border-top: 2px solid var(--amber); }
104-
.step-num { font-family: 'Azeret Mono', monospace; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
105-
.step:nth-child(1) .step-num { color: var(--accent); }
106-
.step:nth-child(2) .step-num { color: var(--green); }
107-
.step:nth-child(3) .step-num { color: var(--amber); }
108-
.step-title { font-size: 1.05rem; font-weight: 700; color: var(--fg-0); margin-bottom: 18px; }
109-
.step-visual { margin-bottom: 18px; }
110-
.step-desc { font-size: 0.85rem; color: var(--fg-1); line-height: 1.6; }
111-
112-
/* Step 1: Bit-shift diagram */
113-
.bd-label { font-family: 'Azeret Mono', monospace; font-size: 0.65rem; color: var(--fg-2); margin-bottom: 4px; }
114-
.bd-row { display: flex; height: 28px; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
115-
.bd-seg { display: flex; align-items: center; justify-content: center; font-family: 'Azeret Mono', monospace; font-size: 0.58rem; font-weight: 600; min-width: 0; }
116-
.bd-seg.kept { background: rgba(52,211,153,0.18); color: var(--green); border: 1px solid rgba(52,211,153,0.12); }
117-
.bd-seg.disc { background: rgba(251,113,133,0.1); color: var(--red); border: 1px solid rgba(251,113,133,0.1); }
118-
.bd-op { font-family: 'Azeret Mono', monospace; font-size: 0.82rem; font-weight: 700; color: var(--accent); text-align: center; margin: 5px 0; }
119-
120-
/* Step 2: Struct slots */
121-
.sl-label { font-size: 0.62rem; font-weight: 600; color: var(--fg-2); margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
122-
.sl-row { display: flex; height: 26px; border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
123-
.sl-f { display: flex; align-items: center; justify-content: center; font-family: 'Azeret Mono', monospace; font-size: 0.52rem; font-weight: 600; color: var(--bg-0); min-width: 0; padding: 0 2px; white-space: nowrap; overflow: hidden; }
124-
.sl-f.amt { background: var(--green); }
125-
.sl-f.tm { background: var(--accent); }
126-
.sl-f.fl { background: var(--violet); }
127-
.sl-f.wst { background: var(--bg-3); color: var(--fg-2); }
128-
.sl-f.free { background: transparent; border: 1px dashed var(--border); color: var(--fg-2); }
129-
.sl-arrow { text-align: center; color: var(--green); font-size: 0.8rem; margin: 6px 0; }
130-
131-
/* Step 3: Gas bars */
132-
.gb-wrap { display: flex; justify-content: center; gap: 28px; margin-bottom: 8px; }
133-
.gb-col { display: flex; flex-direction: column; align-items: center; }
134-
.gb-bar-box { width: 48px; height: 96px; display: flex; align-items: flex-end; }
135-
.gb-bar { width: 100%; border-radius: 4px 4px 0 0; }
136-
.gb-bar.raw { height: 100%; background: linear-gradient(180deg, var(--red) 0%, rgba(251,113,133,0.5) 100%); }
137-
.gb-bar.qnt { height: 67%; background: linear-gradient(180deg, var(--green) 0%, rgba(52,211,153,0.5) 100%); }
138-
.gb-num { font-family: 'Azeret Mono', monospace; font-size: 0.68rem; font-weight: 700; color: var(--fg-0); margin-top: 6px; }
139-
.gb-lbl { font-size: 0.62rem; color: var(--fg-2); margin-top: 2px; }
140-
.gb-saving { font-family: 'Azeret Mono', monospace; font-size: 1.5rem; font-weight: 800; color: var(--green); text-align: center; margin-top: 6px; }
141-
14297
/* ── Scroll reveal ── */
14398
.sr { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
14499
.sr.visible { opacity: 1; transform: translateY(0); }
@@ -147,7 +102,6 @@
147102
@media (max-width: 640px) {
148103
.hero { padding: 64px 0 48px; }
149104
.section { padding: 48px 0; }
150-
.steps { grid-template-columns: 1fr; }
151105
.api-item { flex-direction: column; gap: 4px; }
152106
.api-desc { text-align: left; }
153107
.nav-links { gap: 16px; }
@@ -187,75 +141,6 @@ <h1>Stop paying for precision you don't need.</h1>
187141
</div>
188142
</section>
189143

190-
<section class="section">
191-
<h2 class="section-title sr">How It Works</h2>
192-
<div class="steps">
193-
<div class="step sr" style="transition-delay:0.1s">
194-
<div class="step-num">01 &mdash; Quantize</div>
195-
<div class="step-title">Discard Excess Bits</div>
196-
<div class="step-visual">
197-
<div class="bd-label">uint128 amount</div>
198-
<div class="bd-row">
199-
<div class="bd-seg kept" style="flex:112">112 bits kept</div>
200-
<div class="bd-seg disc" style="flex:16">16</div>
201-
</div>
202-
<div class="bd-op">&gt;&gt; 16</div>
203-
<div class="bd-label">uint96 encoded</div>
204-
<div class="bd-row">
205-
<div class="bd-seg kept" style="flex:1">96 bits</div>
206-
</div>
207-
</div>
208-
<p class="step-desc">Right-shift discards low-order bits that don't materially affect your value. A 32 ETH stake loses sub-wei dust.</p>
209-
</div>
210-
<div class="step sr" style="transition-delay:0.2s">
211-
<div class="step-num">02 &mdash; Pack</div>
212-
<div class="step-title">Fit More Per Slot</div>
213-
<div class="step-visual">
214-
<div class="sl-label">Before: 2 storage slots</div>
215-
<div class="sl-row">
216-
<div class="sl-f amt" style="flex:128">u128</div>
217-
<div class="sl-f tm" style="flex:64">u64</div>
218-
<div class="sl-f tm" style="flex:64">u64</div>
219-
</div>
220-
<div class="sl-row">
221-
<div class="sl-f fl" style="flex:8">bool</div>
222-
<div class="sl-f wst" style="flex:248">248 wasted</div>
223-
</div>
224-
<div class="sl-arrow">&darr;</div>
225-
<div class="sl-label">After: 1 storage slot</div>
226-
<div class="sl-row">
227-
<div class="sl-f amt" style="flex:96">u96</div>
228-
<div class="sl-f tm" style="flex:64">u64</div>
229-
<div class="sl-f tm" style="flex:64">u64</div>
230-
<div class="sl-f fl" style="flex:8">b</div>
231-
<div class="sl-f free" style="flex:24">24</div>
232-
</div>
233-
</div>
234-
<p class="step-desc">Smaller types let the Solidity compiler pack more fields into a single 256-bit storage slot.</p>
235-
</div>
236-
<div class="step sr" style="transition-delay:0.3s">
237-
<div class="step-num">03 &mdash; Save</div>
238-
<div class="step-title">Pay Less Gas</div>
239-
<div class="step-visual">
240-
<div class="gb-wrap">
241-
<div class="gb-col">
242-
<div class="gb-bar-box"><div class="gb-bar raw"></div></div>
243-
<div class="gb-num">65,921</div>
244-
<div class="gb-lbl">Raw</div>
245-
</div>
246-
<div class="gb-col">
247-
<div class="gb-bar-box"><div class="gb-bar qnt"></div></div>
248-
<div class="gb-num">44,045</div>
249-
<div class="gb-lbl">Quantized</div>
250-
</div>
251-
</div>
252-
<div class="gb-saving">-33% gas</div>
253-
</div>
254-
<p class="step-desc">Eliminating a storage write (SSTORE) saves thousands of gas per transaction.</p>
255-
</div>
256-
</div>
257-
</section>
258-
259144
<section class="section">
260145
<h2 class="section-title sr">Quick Start</h2>
261146
<div class="code-block sr" style="transition-delay:0.1s">

0 commit comments

Comments
 (0)