Skip to content

Minimal automatic light/dark theme. #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
schmaeke wants to merge 2 commits into from
Closed

Minimal automatic light/dark theme. #24

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b8bda0
Added minimal automatic light/dark theme.
schmaeke Feb 26, 2025
786a466
Removed some closing tags with no counterpart.
schmaeke Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 28 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
<meta charset="UTF-8">
<title>tinygrad: A simple and powerful neural network framework</title>
<style>
:root { --fg: #111; --bg: white; --border: #dddddd; --logo: black; --link: #0000EE; --visited: #551A8B; --pro: black; }
body {
font-family:'Lucida Console', monospace;
font-size: 18px;
color: #111;
background-color: white;
color: var(--fg);
background-color: var(--bg);
max-width: 1280px;
margin: 0 auto;
padding: 0 50px;
Expand All @@ -25,40 +26,45 @@
svg { width: 100%; height: auto; }
.svg-container { width: 100%; max-width: 400px; display: inline-block; }
.separator { letter-spacing: -9px; }
hr { border: none; height: 2px; background-color: lightgrey; width: 100%; margin: 30px auto; }
hr { border: none; height: 2px; background-color: var(--border); width: 100%; margin: 30px auto; }
table { border-collapse: collapse; text-align: center; width: 100%; }
td {
padding: 5px 20px;
border: 1px solid #dddddd;
border: 1px solid var(--border);
}
a { color: var(--link); }
a:visited { color: var(--visited); }
.quiet, .links-container a { color: inherit; }
.links-container { font-size: 24px; margin: 20px; }
.links-container a { text-decoration: none; margin: 0 10px; }
.product-photo { display: block; max-height: 640px; width: 100%; margin: 0 auto; }
.faqtable dt { margin-bottom: 0.75em; font-style: italic; }
.faqtable dd { margin-left: 0; margin-bottom: 2em; }
@media (prefers-color-scheme: dark) {
:root{ --fg: #eee; --bg: black; --border: #333333; --logo: white; --link: #69f; --visited: #a7e; --pro: white; }
}
</style>
</head>
<body>
<div class="landing">
<div class="svg-container">
<svg viewBox="0 0 130 50" xmlns="http://www.w3.org/2000/svg">
<!-- t -->
<rect x="10" y="0" width="10" height="40" fill="#000000" />
<rect x="0" y="10" width="30" height="10" fill="#000000" />
<rect x="10" y="30" width="20" height="10" fill="#000000" />
<rect x="10" y="0" width="10" height="40" fill=var(--logo) />
<rect x="0" y="10" width="30" height="10" fill=var(--logo) />
<rect x="10" y="30" width="20" height="10" fill=var(--logo) />
<!-- i -->
<rect x="40" y="0" width="10" height="10" fill="#000000" />
<rect x="40" y="20" width="10" height="20" fill="#000000" />
<rect x="40" y="0" width="10" height="10" fill=var(--logo) />
<rect x="40" y="20" width="10" height="20" fill=var(--logo) />
<!-- n -->
<rect x="60" y="10" width="10" height="30" fill="#000000" />
<rect x="60" y="10" width="20" height="10" fill="#000000" />
<rect x="80" y="20" width="10" height="20" fill="#000000" />
<rect x="60" y="10" width="10" height="30" fill=var(--logo) />
<rect x="60" y="10" width="20" height="10" fill=var(--logo) />
<rect x="80" y="20" width="10" height="20" fill=var(--logo) />
<!-- y -->
<rect x="100" y="10" width="10" height="20" fill="#000000" />
<rect x="100" y="20" width="30" height="10" fill="#000000" />
<rect x="120" y="10" width="10" height="30" fill="#000000" />
<rect x="100" y="40" width="20" height="10" fill="#000000" />
<rect x="100" y="10" width="10" height="20" fill=var(--logo) />
<rect x="100" y="20" width="30" height="10" fill=var(--logo) />
<rect x="120" y="10" width="10" height="30" fill=var(--logo) />
<rect x="100" y="40" width="20" height="10" fill=var(--logo) />
</svg>
</div>
<div class="links-container">
Expand Down Expand Up @@ -105,10 +111,10 @@ <h2 id="tinybox">tinybox <span style="color:orange">(now shipping)</span></h2>
<img class="product-photo" src="assets/tinypro.jpg">
</td></tr></table>
<p>We sell a computer called the tinybox. It comes in two colors + pro.</p>
<p>tinybox <b style="color:red">red</b> and <b style="color:green">green</b> are for people looking for a quiet home/office machine.<br/>tinybox <b style="color:black">pro</b> is for people looking for a loud compact rack machine.</p>
<p>tinybox <b style="color:red">red</b> and <b style="color:green">green</b> are for people looking for a quiet home/office machine.<br/>tinybox <b style="color:var(--pro)">pro</b> is for people looking for a loud compact rack machine.</p>
<table>
<tr><td></td></td><td><b style="color:red">red</b></td><td><b style="color:green">green</b></td><td><b style="color:black">pro</b></td></tr>
<tr><td>FLOPS</td></td><td>738 FP16 TFLOPS</td><td>991 FP16 TFLOPS</td><td>1.36 FP16 PFLOPS</td></tr>
<tr><td></td><td><b style="color:red">red</b></td><td><b style="color:green">green</b></td><td><b style="color:var(--pro)">pro</b></td></tr>
<tr><td>FLOPS</td><td>738 FP16 TFLOPS</td><td>991 FP16 TFLOPS</td><td>1.36 FP16 PFLOPS</td></tr>
<tr><td>GPU Model</td><td>6x 7900XTX</td><td>6x 4090</td><td>8x 4090</td></tr>
<tr><td>GPU RAM</td><td colspan="2">144 GB</td><td>192 GB</td></tr>
<tr><td>GPU RAM bandwidth</td><td>5760 GB/s</td><td>6050 GB/s</td><td>8064 GB/s</td></tr>
Expand All @@ -125,8 +131,8 @@ <h2 id="tinybox">tinybox <span style="color:orange">(now shipping)</span></h2>
<tr><td>Operating System</td><td colspan="3">Ubuntu 22.04</td></tr>
<tr><td>Dimensions</td><td colspan="2">12U, 16.25" deep, 90 lbs</td><td>4U, 31" D, 88 lbs</td></tr>
<tr><td>Rack?</td><td colspan="2">Freestanding or rack <a class="quiet" href="https://rackmountmart.store.turbify.net/26slidrailfo.html">mount</a></td><td>Supermicro rails</td></tr>
<tr><td>Driver Quality</td></td><td>Mediocre</td><td colspan="2">Great</td></tr>
<tr><td>SHIPPING</td></td><td><a href="https://tinycorp.myshopify.com/products/tinybox-red">BUY NOW FOR $15,000</a></td><td><a href="https://tinycorp.myshopify.com/products/tinybox-green">OUT OF STOCK $25,000</a></td><td><a href="https://tinycorp.myshopify.com/products/tinybox-pro-1">OUT OF STOCK $40,000</a></td></tr>
<tr><td>Driver Quality</td><td>Mediocre</td><td colspan="2">Great</td></tr>
<tr><td>SHIPPING</td><td><a href="https://tinycorp.myshopify.com/products/tinybox-red">BUY NOW FOR $15,000</a></td><td><a href="https://tinycorp.myshopify.com/products/tinybox-green">OUT OF STOCK $25,000</a></td><td><a href="https://tinycorp.myshopify.com/products/tinybox-pro-1">OUT OF STOCK $40,000</a></td></tr>
</table>
<br/>
<center>
Expand Down Expand Up @@ -168,7 +174,7 @@ <h2 id="faq">FAQ</h2>

<dt>How can the tiny corp work for me?</dt>
<dd>Email me, [email protected]. We are looking for contracts and sponsorships to improve various aspects of
tinygrad.</a></dd>
tinygrad.</dd>

<dt>How can I work for the tiny corp?</dt>
<dd>See <b>hiring</b> above. Contributions to <a href="https://github.com/tinygrad/tinygrad">tinygrad</a> on GitHub
Expand Down