Differences

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

--- courses:ast100:3 [2026/02/24 08:07] – [3. Stars and humans: birth and death] asad
+++ courses:ast100:3 [2026/03/22 02:11] (current) – asad
@@ Line 1: / Line 1: @@
 ====== 3. Stellar Age ======
-===== - Event highlights =====
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Stellar Age Timeline</title>
+    <title>Stellar Age Table</title>
 </head>
 <body>
@@ Line 13: / Line 12: @@
     <style>
         /* Container ID: #doku-cosmic-light
-           Theme: Elegant Light - Static Stellar Version
+           Theme: Minimal Modern Elegant - Collapsible Table Version
         */
         #doku-cosmic-light {
-            /* Elegant Light Theme Variables */
+            /* Elegant Theme Variables */
-            --bg-color: #ffffff;
+            --bg: #ffffff;
-            --panel-bg: #f8f9fa;
+            --text-main: #1a202c;
-            --text-primary: #2d3748;
+            --text-muted: #4a5568;
-            --text-secondary: #718096;
+            --border: #e2e8f0;
-            --accent-color: #4a5568;
+            --hover: #f8fafc;
-            --border-color: #e2e8f0;
+            --accent: #2b6cb0;
-            --line-color: #cbd5e0;
+            --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: var(--bg-color);
+            background-color: transparent;
-            color: var(--text-primary);
+            max-width: 950px;
-            line-height: 1.6;
+            margin: 40px auto;
-            width: 100%;
+            padding: 0 15px;
-            max-width: 850px;
-            display: block;
-            margin: 20px auto;
-            padding: 20px;
         }
@@ Line 42: / Line 37: @@
         }
-        /* Timeline Styling */
+        /* Table Architecture */
-        #doku-cosmic-light .timeline {
+        #doku-cosmic-light .timeline-table {
-            position: relative;
+            width: 100%;
-            padding: 20px 20px 20px 50px;
+            background: var(--bg);
-            margin: 0 auto;
+            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;
         }
-        /* Vertical Line */
+        #doku-cosmic-light .t-row {
-        #doku-cosmic-light .timeline::before {
+            border-bottom: 1px solid var(--border);
-            content: '';
-            position: absolute;
-            left: 24px;
-            top: 0;
-            bottom: 0;
-            width: 2px;
-            background: var(--line-color);
         }
-        #doku-cosmic-light .event-item {
+        #doku-cosmic-light .t-row:last-child {
-            position: relative;
+            border-bottom: none;
-            margin-bottom: 50px;
         }
-        #doku-cosmic-light .event-item:last-child {
+        /* Collapsible Header (The "Row") */
-            margin-bottom: 0;
+        #doku-cosmic-light .t-header {
+            display: flex;
+            padding: 22px 30px;
+            cursor: pointer;
+            align-items: center;
+            background: var(--bg);
+            transition: var(--transition);
         }
-        /* Timeline Dot */
+        #doku-cosmic-light .t-header:hover {
-        #doku-cosmic-light .event-dot {
+            background: var(--hover);
-            position: absolute;
-            left: -32px;
-            top: 8px;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background-color: #fff;
-            border: 3px solid var(--accent-color);
-            z-index: 2;
         }
-        #doku-cosmic-light .time-badge {
+        #doku-cosmic-light .col-time {
-            display: inline-block;
+            flex: 0 0 150px;
-            font-size: 0.85rem;
             font-weight: 700;
-            color: #4a5568;
+            font-size: 0.95rem;
-            margin-bottom: 10px;
+            color: var(--accent);
-            background: #e2e8f0;
-            padding: 4px 12px;
-            border-radius: 20px;
-            text-transform: uppercase;
             letter-spacing: 0.5px;
         }
-        #doku-cosmic-light .event-title {
+        #doku-cosmic-light .col-title {
-            font-size: 1.3rem;
+            flex: 1 1 auto;
-            margin: 0 0 12px 0;
+            font-weight: 600;
-            color: #1a202c;
+            font-size: 1.15rem;
-            font-weight: 700;
+            color: var(--text-main);
-            line-height: 1.3;
+            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);
+        }
+        #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;
+        }
+        /* 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);
         }
-        #doku-cosmic-light .event-desc {
+        #doku-cosmic-light .t-content-inner {
-            color: #4a5568;
+            padding: 0 30px 30px 180px; /* Aligns with the title text (150 width + 30 padding) */
             font-size: 1.05rem;
-            margin: 0;
+            line-height: 1.75;
-            line-height: 1.7;
+            color: var(--text-muted);
+            text-align: justify;
         }
         /* Mobile Optimization */
-        @media (max-width: 600px) {
+        @media (max-width: 768px) {
-            #doku-cosmic-light { padding: 15px; }
+            #doku-cosmic-light .t-header {
-            #doku-cosmic-light .timeline { padding: 10px 10px 10px 35px; }
+                flex-wrap: wrap;
-            #doku-cosmic-light .timeline::before { left: 19px; }
+                padding: 18px 20px;
-            #doku-cosmic-light .event-dot { left: -24px; width: 12px; height: 12px; top: 10px; }
+            }
-            #doku-cosmic-light .event-title { font-size: 1.15rem; }
+            #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>
-    <div class="timeline">
+    <div class="timeline-table">
-        <!-- Event 1 -->
-        <div class="event-item">
+        <!-- Row 1 -->
-            <span class="time-badge">4 Gy</span>
+        <div class="t-row">
-            <h3 class="event-title">Formation of the Milky Way's Thin Disk</h3>
+            <div class="t-header" onclick="toggleRow(this)">
-            <p class="event-desc">Following the earlier formation of the galactic halo, the Milky Way flattened into a thin disk. This structural change coincided with the birth of metal-rich Population I stars, which contained heavy elements produced by earlier generations of stars.</p>
+                <div class="col-time">4 Gy</div>
-            <div class="event-dot"></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>
-        <!-- Event 2 -->
+        <!-- Row 2 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">4 – 5 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Peak Star Formation Rate</h3>
+                <div class="col-time">4 – 5 Gy</div>
-            <p class="event-desc">The universe experienced its maximum rate of star formation. Massive stars fused hydrogen and helium into heavier elements like carbon, oxygen, and iron, acting as "nuclear forges" to create the building blocks of future complexity.</p>
+                <div class="col-title">Peak Star Formation Rate</div>
-            <div class="event-dot"></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>
-        <!-- Event 3 -->
+        <!-- Row 3 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">6 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Emergence of the Galactic Habitable Zone</h3>
+                <div class="col-time">6 Gy</div>
-            <p class="event-desc">A region within the galaxy emerged where conditions favored the development of complex life. By this time, metallicity (heavy element abundance) had spread outward, and the frequency of sterilizing supernovae in the inner galaxy had decreased sufficiently to allow safe orbits for planets.</p>
+                <div class="col-title">Emergence of the Galactic Habitable Zone</div>
-            <div class="event-dot"></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>
-        <!-- Event 4 -->
+        <!-- Row 4 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">Ongoing (4 – 9 Gy)</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Stellar Nucleosynthesis</h3>
+                <div class="col-time">Ongoing (4 – 9 Gy)</div>
-            <p class="event-desc">Main-sequence stars fused hydrogen into helium, while massive evolved stars fused helium into carbon, neon, oxygen, silicon, and finally iron in their cores. This process created the chemical complexity required for planetary bodies.</p>
+                <div class="col-title">Stellar Nucleosynthesis</div>
-            <div class="event-dot"></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>
-        <!-- Event 5 -->
+        <!-- Row 5 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">Ongoing (4 – 9 Gy)</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Supernova Enrichment</h3>
+                <div class="col-time">Ongoing (4 – 9 Gy)</div>
-            <p class="event-desc">Massive stars died in core-collapse explosions, scattering chemically enriched material into the interstellar medium. These explosions also synthesized elements heavier than iron (such as gold and uranium) via the r-process (rapid neutron capture).</p>
+                <div class="col-title">Supernova Enrichment</div>
-            <div class="event-dot"></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>
-        <!-- Event 6 -->
+        <!-- Row 6 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">7 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Acceleration of Cosmic Expansion</h3>
+                <div class="col-time">7 Gy</div>
-            <p class="event-desc">The expansion of the universe began to accelerate due to the influence of repulsive "dark energy." This marked the transition from a matter-dominated era to a dark-energy-dominated era, influencing the formation of large-scale structures.</p>
+                <div class="col-title">Acceleration of Cosmic Expansion</div>
-            <div class="event-dot"></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>
-        <!-- Event 7 -->
+        <!-- Row 7 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">9 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Solar Nebula Collapse</h3>
+                <div class="col-time">9 Gy</div>
-            <p class="event-desc">The Stellar Age concluded with the gravitational collapse of a chemically enriched interstellar cloud in our region of the Milky Way. Triggered perhaps by a nearby supernova, this event initiated the formation of the Sun and the Solar System about 4.6 billion years ago.</p>
+                <div class="col-title">Solar Nebula Collapse</div>
-            <div class="event-dot"></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>
 </body>
-</html>
-===== - Event details =====
-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 flattening coincided with the birth of metal-rich Population I stars, formed from interstellar material enriched by earlier generations. These younger stars inherited the disk's spin, moving in highly ordered, circular orbits around the Galactic center.
-Roughly 10 billion years ago, the universe reached its peak rate of star formation as galaxies rapidly consumed their abundant gas. During this epoch, countless massive stars acted as nuclear forges, fusing primordial hydrogen and helium into heavier elements. Within their dense cores, they synthesized vital building blocks like carbon, oxygen, neon, and iron. Their rapid lifecycles and deaths continuously seeded the cosmos with the chemical ingredients necessary for future planetary systems.
-Around 8 billion years ago, a "galactic habitable zone" emerged in the Milky Way, offering ideal conditions for complex life. Located between the radiation-intense inner bulge and the barren outer edges, this annular region possessed a crucial balance. Stellar nucleosynthesis had spread sufficient heavy elements here to form terrestrial planets, while the frequency of sterilizing supernovae—common in the inner galaxy—had decreased enough to ensure a stable environment.
-Stellar nucleosynthesis (to be detailed in the Chemical Age) is the process by which stars forge the chemical complexity required for planets and life. Throughout their 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 fusion stages. They develop an onion-like layered structure, sequentially fusing elements like helium, carbon, neon, oxygen, and silicon, until a highly stable iron core accumulates at the center.
-Because fusing iron yields no energy, these massive cores inevitably collapse under their own gravity, triggering Type II supernovae. During these catastrophic explosions, temperatures soar to billions of degrees, allowing rapid neutron capture (the r-process) to synthesize elements heavier than iron, such as gold, silver, and uranium. The blasts scatter this enriched material into the interstellar medium, fertilizing galactic clouds with the stardust essential for forming rocky planets.
-Although gravity initially slowed cosmic expansion, a fundamental transition occurred roughly 7 billion years after the Big Bang. The universe's expansion began to accelerate due to the repulsive push of a mysterious force known as 'dark energy'. As the universe expanded and matter density diluted, dark energy eventually overpowered gravity on the largest scales. This shift marked the end of the matter-dominated era and the beginning of the dark-energy-dominated era, profoundly influencing the evolution of large-scale cosmic structures.
-For our local cosmic neighborhood, the Stellar Age culminated 4.6 billion years ago when a chemically enriched interstellar cloud collapsed under its own gravity. Likely triggered by a nearby supernova shock wave, this solar nebula shrank, spun, and flattened into a rotating protoplanetary disk. As material plunged inward, the center grew hot and dense enough to ignite nuclear fusion, birthing our Sun. Meanwhile, the surrounding disk debris accreted to form the planets of our Solar System.
-===== - Stars and humans: birth and death =====
-{{:bn:courses:ast100:sfr-bhar.webp?nolink&500|}}
-<html>
-<iframe src="https://www.gapminder.org/tools/?embedded=true#$ui$chart$cursorMode=hand;;&model$markers$bubble$encoding$y$data$space@=geo&=time;;&scale$domain:null&zoomed@=45&=85;&type:null;;&x$data$concept=children_per_woman_total_fertility&space@=geo&=time;;&scale$domain:null&zoomed@:0.85&:4.92;&type:null;;&trail$data$filter$markers$bgd=2024;;;;;;;;&chart-type=bubbles&url=v2" style="width: 100%; height: 500px; margin: 0 0 0 0; border: 1px solid grey;" allowfullscreen></iframe>
 </html>