Differences

This shows you the differences between two versions of the page.

--- courses:ast100:3 [2026/01/12 03:20] – asad
+++ courses:ast100:3 [2026/03/22 02:11] (current) – asad
@@ Line 1: / Line 1: @@
 ====== 3. Stellar Age ======
-===== - Birth and Death Rates =====
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stellar Age Table</title>
+</head>
+<body>
-{{:bn:courses:ast100:sfr-bhar.webp?nolink&500|}}
+<div id="doku-cosmic-light">
+    <style>
+        /* Container ID: #doku-cosmic-light
+           Theme: Minimal Modern Elegant - Collapsible Table Version
+        */
+        #doku-cosmic-light {
+            /* Elegant Theme Variables */
+            --bg: #ffffff;
+            --text-main: #1a202c;
+            --text-muted: #4a5568;
+            --border: #e2e8f0;
+            --hover: #f8fafc;
+            --accent: #2b6cb0;
+            --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+            /* Typography & Layout */
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: transparent;
+            max-width: 950px;
+            margin: 40px auto;
+            padding: 0 15px;
+        }
+        #doku-cosmic-light * {
+            box-sizing: border-box;
+        }
-{{youtube>DbqcrW2OFF8?large}}
+        /* Table Architecture */
-\\
+        #doku-cosmic-light .timeline-table {
+            width: 100%;
+            background: var(--bg);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
+            overflow: hidden;
+        }
+        #doku-cosmic-light .t-row {
+            border-bottom: 1px solid var(--border);
+        }
+        #doku-cosmic-light .t-row:last-child {
+            border-bottom: none;
+        }
-===== - Stellar Classification =====
+        /* Collapsible Header (The "Row") */
+        #doku-cosmic-light .t-header {
+            display: flex;
+            padding: 22px 30px;
+            cursor: pointer;
+            align-items: center;
+            background: var(--bg);
+            transition: var(--transition);
+        }
+        #doku-cosmic-light .t-header:hover {
+            background: var(--hover);
+        }
-{{:bn:courses:ast100:star-types.jpg?nolink|}}
+        #doku-cosmic-light .col-time {
+            flex: 0 0 150px;
+            font-weight: 700;
+            font-size: 0.95rem;
+            color: var(--accent);
+            letter-spacing: 0.5px;
+        }
+        #doku-cosmic-light .col-title {
+            flex: 1 1 auto;
+            font-weight: 600;
+            font-size: 1.15rem;
+            color: var(--text-main);
+            padding-right: 20px;
+            line-height: 1.4;
+        }
+        /* Chevron Icon */
+        #doku-cosmic-light .col-toggle {
+            flex: 0 0 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #edf2f7;
+            color: var(--text-muted);
+            transition: var(--transition);
+        }
-===== - Birth of Stars =====
+        #doku-cosmic-light .col-toggle svg {
+            width: 16px;
+            height: 16px;
+            transition: var(--transition);
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 2.5;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+        }
-{{:bn:courses:ast100:star-formation.webp?nolink|}}
+        /* Active State */
+        #doku-cosmic-light .t-row.active .t-header {
+            background: var(--hover);
+        }
+        #doku-cosmic-light .t-row.active .col-toggle {
+            transform: rotate(180deg);
+            background: var(--accent);
+            color: var(--bg);
+        }
+        /* Expanded Content */
+        #doku-cosmic-light .t-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            background: var(--hover);
+        }
-{{youtube>Q7MG-LahuX4?large}}
+        #doku-cosmic-light .t-content-inner {
-\\
+            padding: 0 30px 30px 180px; /* Aligns with the title text (150 width + 30 padding) */
+            font-size: 1.05rem;
+            line-height: 1.75;
+            color: var(--text-muted);
+            text-align: justify;
+        }
+        /* Mobile Optimization */
+        @media (max-width: 768px) {
+            #doku-cosmic-light .t-header {
+                flex-wrap: wrap;
+                padding: 18px 20px;
+            }
+            #doku-cosmic-light .col-time {
+                flex: 1 1 100%;
+                margin-bottom: 6px;
+                font-size: 0.85rem;
+            }
+            #doku-cosmic-light .col-title {
+                font-size: 1.05rem;
+                padding-right: 15px;
+            }
+            #doku-cosmic-light .t-content-inner {
+                padding: 0 20px 24px 20px;
+            }
+        }
+    </style>
-{{:bn:courses:ast100:star-structure.webp?nolink&600|}}
+    <div class="timeline-table">
+        <!-- Row 1 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">4 Gy</div>
+                <div class="col-title">Formation of the Milky Way's Thin Disk</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Following the emergence of the spherical Galactic halo, the Milky Way's rotating gas and dust gradually flattened into a thin disk. While older, metal-poor Population II stars maintained random orbits in the ancient halo, the new disk became the primary site of star formation. This monumental structural change coincided with the birth of metal-rich Population I stars, which contained heavy elements produced by earlier generations of stars. Formed from interstellar material enriched by these cosmic predecessors, these younger stars inherited the disk's spin, moving in highly ordered, circular orbits around the Galactic center. This stabilization established the organized, spiraling architecture of the Milky Way that we observe today, setting the stage for future planetary formation.
+                </div>
+            </div>
+        </div>
+        <!-- Row 2 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">4 – 5 Gy</div>
+                <div class="col-title">Peak Star Formation Rate</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Roughly 10 billion years ago, the universe experienced its maximum rate of star formation as galaxies rapidly consumed their abundant gas. During this incredibly active epoch, countless massive stars acted as powerful "nuclear forges," aggressively fusing primordial hydrogen and helium into heavier elements. Within their blindingly hot and dense cores, they synthesized vital building blocks like carbon, oxygen, neon, and iron. Their exceptionally rapid lifecycles meant that these stellar giants quickly exhausted their fuel supplies and died in spectacular fashion. These ongoing deaths continuously seeded the surrounding cosmos with the diverse chemical ingredients necessary for future planetary systems, fundamentally transforming the universe from a simple landscape of light gases into a chemically rich and complex environment.
+                </div>
+            </div>
+        </div>
+        <!-- Row 3 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">6 Gy</div>
+                <div class="col-title">Emergence of the Galactic Habitable Zone</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Around 8 billion years ago, a specialized "galactic habitable zone" emerged within the Milky Way, offering the ideal conditions necessary for the development of complex life. Located safely between the radiation-intense inner bulge and the barren, unpopulated outer edges, this annular region possessed a crucial balance. By this time, stellar nucleosynthesis had successfully spread sufficient heavy elements (metallicity) outward to enable the formation of terrestrial, rocky planets. Simultaneously, the frequency of sterilizing supernovae—which were common and devastating in the crowded inner galaxy—had decreased enough in this middle zone to ensure a stable, safe environment. This delicate equilibrium provided a protected sanctuary where delicate planetary atmospheres and early biological chemistry could eventually evolve undisturbed.
+                </div>
+            </div>
+        </div>
+        <!-- Row 4 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">Ongoing (4 – 9 Gy)</div>
+                <div class="col-title">Stellar Nucleosynthesis</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Stellar nucleosynthesis is the ongoing, foundational process by which stars forge the chemical complexity required for planets and life. Throughout their long main-sequence lifetimes, stars maintain hydrostatic equilibrium by stably fusing hydrogen into helium. As massive stars exhaust their core hydrogen, they contract, heat up, and initiate successive, more intense fusion stages. They develop an onion-like layered internal structure, sequentially fusing heavier elements like helium, carbon, neon, oxygen, and silicon. This relentless nuclear progression continues until a highly stable, but energy-depleted, iron core accumulates at the star's center. This process acts as the engine of cosmic chemistry, transforming the simple, uniform matter of the early universe into the diverse array of elements that comprise the periodic table.
+                </div>
+            </div>
+        </div>
-===== - Life of Stars =====
+        <!-- Row 5 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">Ongoing (4 – 9 Gy)</div>
+                <div class="col-title">Supernova Enrichment</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Because fusing iron yields no outward energy to counteract gravity, the massive iron cores of evolved stars inevitably collapse under their own weight, triggering catastrophic Type II supernovae. During these violent explosions, temperatures soar to billions of degrees, allowing for a process called rapid neutron capture (the r-process). This extreme environment successfully synthesizes elements much heavier than iron, such as gold, silver, and uranium. The phenomenal force of the blast tears the star apart, violently scattering this highly enriched material deep into the interstellar medium. These ongoing explosions act as cosmic distribution systems, fertilizing galactic clouds with the precious stardust and heavy elements that are absolutely essential for forming rocky planets and the building blocks of biological life.
+                </div>
+            </div>
+        </div>
+        <!-- Row 6 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">7 Gy</div>
+                <div class="col-title">Acceleration of Cosmic Expansion</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    Although the immense gravity of all cosmic matter initially slowed the universe's expansion, a fundamental and surprising transition occurred roughly 7 billion years after the Big Bang. The expansion of the universe began to accelerate due to the repulsive push of a mysterious and pervasive force known as "dark energy." As the universe expanded and the overall density of matter diluted, dark energy eventually overpowered gravity on the largest cosmic scales. This profound shift marked the definitive end of the matter-dominated era and the beginning of the dark-energy-dominated era. This acceleration continues to stretch the fabric of space at an increasing rate, profoundly influencing the long-term evolution and ultimate fate of large-scale cosmic structures.
+                </div>
+            </div>
+        </div>
-{{:bn:courses:ast100:hr-tracks.webp?nolink|}}
+        <!-- Row 7 -->
+        <div class="t-row">
+            <div class="t-header" onclick="toggleRow(this)">
+                <div class="col-time">9 Gy</div>
+                <div class="col-title">Solar Nebula Collapse</div>
+                <div class="col-toggle">
+                    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                </div>
+            </div>
+            <div class="t-content">
+                <div class="t-content-inner">
+                    For our local cosmic neighborhood, the Stellar Age culminated approximately 4.6 billion years ago when a chemically enriched interstellar cloud collapsed under its own gravity. Likely triggered by the powerful shock wave of a nearby supernova, this specific solar nebula shrank, began to spin, and rapidly flattened into a rotating protoplanetary disk. As material plunged inward, the center grew intensely hot and dense enough to ignite sustained nuclear fusion, officially birthing our Sun. Meanwhile, the surrounding disk debris, rich with the heavy elements forged by previous generations of stars, began to accrete. This pivotal event concluded the broader Stellar Age and initiated the formation of the planets, moons, and asteroids of our Solar System.
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        function toggleRow(element) {
+            const row = element.parentElement;
+            const content = row.querySelector('.t-content');
+            const inner = row.querySelector('.t-content-inner');
+            // Toggle the active class for styling and rotation
+            row.classList.toggle('active');
+            // Calculate and set the max-height to smoothly animate the opening
+            if (row.classList.contains('active')) {
+                content.style.maxHeight = inner.scrollHeight + "px";
+            } else {
+                content.style.maxHeight = "0px";
+            }
+        }
+        // Ensure heights are recalculated if the window is resized to prevent content clipping
+        window.addEventListener('resize', () => {
+            document.querySelectorAll('.t-row.active .t-content').forEach(content => {
+                const inner = content.querySelector('.t-content-inner');
+                content.style.maxHeight = inner.scrollHeight + "px";
+            });
+        });
+    </script>
+</div>
-{{:bn:courses:ast100:evolution-small.webp?nolink|}}
+</body>
+</html>
-{{:bn:courses:ast100:evolution-big.webp?nolink|}}
-===== - Death of Stars =====
-==== - White Dwarf ====
-{{:bn:courses:ast100:white-dwarf.webp?nolink&650|}}
-==== - Neutron Stars ====
-{{https://upload.wikimedia.org/wikipedia/commons/4/4d/Lightsmall-optimised.gif?nolink&500}}
-==== - Black Hole ====
-{{:bn:courses:ast100:black-hole-anatomy.webp?nolink|}}