|
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>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YNL3KPNR37"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YNL3KPNR37');
</script>
<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: clamp(
220px,
calc((100vh - var(--top) - var(--bottom) - (2 * var(--gap))) / 3),
1000px
);
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);
}
.grid{
display: grid; /* ← REQUIRED */
gap: 12px; /* spacing between tiles */
grid-template-columns: repeat(5, 1fr); /* desktop default */
}
@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%; }
}
.grid{ display:grid !important; }
/* iPad-proof grid FORCE (put at very bottom) */
.grid{
display:grid !important;
gap:12px !important;
grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width:1200px){
.grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width:900px){
.grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width:620px){
.grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
/* prevents grid items from “blowing out” and stacking */
.tile{ min-width:0 !important; }
.hub-header {
display: flex;
align-items: center;
justify-content: center; /* centers title */
position: relative;
}
.go-back {
position: absolute;
left: 12px;
font-size: 16px; /* smaller */
font-weight: bold;
text-decoration: none;
color: gold;
}
.go-back:hover {
color: orange;
}
.hub-title {
font-size: 20px;
margin: 0;
text-align: center;
width: 100%;
background: linear-gradient(90deg, #ffd700, #f5c542, #e0a800);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
</style>
</head>
<body>
<div class="hub-header">
<a href="../index.html" class="go-back">↺ Go back to drsuper.com</a>
<h1 class="hub-title">
Adventures in Calculus & Mechanics for the Young and Curious Minds - Based on 3Blue1Brown: Calculus
</h1>
</div>
<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" alt="Adventure 1 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 1</p><p class="desc">Mesuring the World with a Stick</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">Rocket Launch.</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">Review of DiVA.</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 and the Age of the Earth.</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="ss_adventure_14_home.html" title="Adventure 14">
<div class="center"><div class="mat">
<img src="images/adventure_14_chart.png" alt="Adventure 14 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 14</p><p class="desc"> Gravity, Circular Motion, and the Moon’s Orbit</p>
</div></div>
</a>
<a class="tile" href="adventure_15_home.html" title="Adventure 15">
<div class="center"><div class="mat">
<img src="images/adventure_15_chart.png" alt="Adventure 15 thumbnail">
</div></div>
<div class="overlay"><div>
<p class="title">Adventure 15</p><p class="desc">The Sun Controls the Solar System</p>
</div></div>
</a>
</div>
<footer>
Dr. Super & Spark — Powered by ChatGPT - Piloted by Cyrus, Marc and Rooz 2025-2026
</footer>
</body>
</html>