|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/drsuper/CalculusMechanics/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Adventures in Calculus & Mechanics for the Young and Curious Minds - Based on 3Blue1Brown: Calculus</title>
<style>
:root{
--bg:#0b0b0d;
--card:#141419;
--text:#f2f2f3;
--overlay:rgba(0,0,0,0.60);
--gold:#f2d86b;
--goldBorder:#e6c94d;
/* layout */
--gap:12px;
--radius:16px;
--top:46px;
--bottom:26px;
/* force 3 rows (desktop) */
--tileH: calc((100vh - var(--top) - var(--bottom) - (2 * var(--gap))) / 3);
}
body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:var(--bg);
color:var(--text);
}
header{
height: var(--top);
display:flex;
align-items:center;
justify-content:center;
padding:0 10px;
}
h1{
margin:0;
font-size:1.02rem;
font-weight:800;
letter-spacing:0.2px;
color:var(--gold);
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:98vw;
}
.grid{
max-width:1600px;
margin:0 auto;
padding:0 14px;
display:grid;
grid-template-columns: repeat(5, 1fr);
gap:var(--gap);
}
.tile{
position:relative;
background:var(--card);
border-radius:var(--radius);
height:var(--tileH);
overflow:hidden;
text-decoration:none;
color:inherit;
box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
/* Center area that holds the framed PNG */
.center{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:10px; /* breathing room inside the tile */
}
/* This "mat" hugs the rendered image size */
.mat{
display:inline-block;
background: var(--gold);
border: 2px solid var(--goldBorder);
border-radius: 18px;
padding: 10px; /* frame thickness */
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.mat img{
display:block;
/* The image scales down to fit the tile, but the mat still hugs it */
max-width: calc(100vw); /* harmless guard */
max-height: calc(var(--tileH) - 40px);
width:auto;
height:auto;
/* ensure no cropping */
object-fit: contain;
border-radius: 12px;
background: #111116; /* consistent behind transparent/letterbox */
}
.overlay{
position:absolute;
inset:0;
background: var(--overlay);
opacity:0;
transition: opacity .18s ease;
display:flex;
align-items:flex-end;
padding:10px 12px;
}
.tile:hover .overlay,
.tile:focus .overlay{
opacity:1;
}
.title{
margin:0;
font-size:0.92rem;
font-weight:800;
color: var(--gold);
}
.desc{
margin-top:4px;
font-size:0.78rem;
color:rgba(255,255,255,0.88);
line-height:1.15;
}
footer{
height:var(--bottom);
display:flex;
align-items:center;
justify-content:center;
font-size:0.78rem;
color:rgba(242,242,243,0.55);
}
@media (max-width:1200px){
.grid{ grid-template-columns: repeat(4,1fr); }
}
@media (max-width:900px){
.grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:620px){
:root{ --tileH:auto; }
h1{ white-space: normal; }
.grid{ grid-template-columns: repeat(2,1fr); }
.tile{ height:auto; aspect-ratio:3/4; }
.mat img{ max-height: none; max-width: 100%; }
}
</style>
</head>
<body>
<header>
<h1>Adventures in Calculus & Mechanics for the Young and Curious Minds - Based on 3Blue1Brown: Calculus</h1>
</header>
<div class="grid">
<a class="tile" href="adventure_1_home.html" title="Adventure 1">
<div class="center"><div class="mat">
<img src="images/adventure_1_image_1_solution.png"Adventure 1 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 1</p><p class="desc">Meet DiVA.</p>
</div></div>
</a>
<a class="tile" href="adventure_2_home.html" title="Adventure 2">
<div class="center"><div class="mat">
<img src="images/adventure_2_image_1_solution.png" alt="Adventure 2 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 2</p><p class="desc">Slope right now.</p>
</div></div>
</a>
<a class="tile" href="adventure_3_home.html" title="Adventure 3">
<div class="center"><div class="mat">
<img src="images/adventure_3_image_index.png" alt="Adventure 3 thumbnail">
</div></div> <div class="overlay"><div>
<p class="title">Adventure 3</p><p class="desc">Tiny changes.</p>
</div></div>
</a>
<a class="tile" href="adventure_4_home.html" title="Adventure 4">
<div class="center"><div class="mat">
<img src="images/adventure_4_chart.png" alt="Adventure 4 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 4</p><p class="desc">Free fall motion.</p>
</div></div>
</a>
<a class="tile" href="adventure_5_home.html" title="Adventure 5">
<div class="center"><div class="mat">
<img src="images/adventure_5_image_1.png" alt="Adventure 5 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 5</p><p class="desc">Drag racing.</p>
</div></div>
</a>
<a class="tile" href="adventure_6_home.html" title="Adventure 6">
<div class="center"><div class="mat">
<img src="images/adventure_6_chart.png" alt="Adventure 6 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 6</p><p class="desc">Changing acceleration.</p>
</div></div>
</a>
<a class="tile" href="adventure_7_home.html" title="Adventure 7">
<div class="center"><div class="mat">
<img src="images/adventure_7_chart_2.png" alt="Adventure 7 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 7</p><p class="desc">DiVA review.</p>
</div></div>
</a>
<a class="tile" href="adventure_8_home.html" title="Adventure 8">
<div class="center"><div class="mat">
<img src="images/adventure_8_activity_2_solution.png" alt="Adventure 8 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 8</p><p class="desc">Missing equations.</p>
</div></div>
</a>
<a class="tile" href="adventure_9_home.html" title="Adventure 9">
<div class="center"><div class="mat">
<img src="images/adventure_9_chart.png" alt="Adventure 9 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 9</p><p class="desc">Euler’s number.</p>
</div></div>
</a>
<a class="tile" href="adventure_10_home.html" title="Adventure 10">
<div class="center"><div class="mat">
<img src="images/adventure_10_image_index.png" alt="Adventure 10 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 10</p><p class="desc">Ratios & growth.</p>
</div></div>
</a>
<a class="tile" href="adventure_11_home.html" title="Adventure 11">
<div class="center"><div class="mat">
<img src="images/adventure_11_solution.png" alt="Adventure 11 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 11</p><p class="desc">Taylor Series</p>
</div></div>
</a>
<a class="tile" href="adventure_12_home.html" title="Adventure 12">
<div class="center"><div class="mat">
<img src="images/adventure_12_chart_1.png" alt="Adventure 12 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 12</p><p class="desc">Ball and CannonBall: Maximum Height.</p>
</div></div>
</a>
<a class="tile" href="adventure_13_home.html" title="Adventure 13">
<div class="center"><div class="mat">
<img src="images/adventure_13_chart_1.png" alt="Adventure 13 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 13</p><p class="desc">Drawing Curves: Critical Points - Max, Min, and Inflection Point</p>
</div></div>
</a>
<a class="tile" href="https://www.youtube.com/watch?v=WUvTyaaNkzM&list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr" title="Adventure 13">
<div class="center"><div class="mat">
<img src="images/adventure_14_image_index.png" alt="Adventure 14 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Essence of Calculus</p><p class="desc">3Blue1Brown</p>
</div></div>
</a>
</a>
<a class="tile" href="https://www.drsuper.com" title="Adventure 15">
<div class="center"><div class="mat">
<img src="images/suplogo_2x.gif" alt="Adventure 15 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Dr. Super's Scratch Projects</p><p class="desc">DrSuper</p>
</div></div>
</a>
</div>
<footer>
Dr. Super & Spark — Powered by ChatGPT
</footer>
</body>
</html>