Differences

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

--- courses:ast100:2 [2026/02/23 23:00] – asad
+++ courses:ast100:2 [2026/03/22 02:14] (current) – asad
@@ Line 1: / Line 1: @@
 ====== 2. Galactic age ======
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Galactic Age Timeline</title>
+    <title>Galactic Age Table</title>
 </head>
 <body>
@@ Line 11: / Line 12: @@
     <style>
         /* Container ID: #doku-cosmic-light
-           Theme: Elegant Light - Static Version (No Header)
+           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 40: / 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">300 ky – 200 My</span>
+        <div class="t-row">
-            <h3 class="event-title">The Cosmic Dark Ages</h3>
+            <div class="t-header" onclick="toggleRow(this)">
-            <p class="event-desc">Following recombination, the universe was filled with neutral hydrogen and helium but lacked luminous objects. Gravity slowly pulled matter into denser clumps within a dark, expanding cosmos.</p>
+                <div class="col-time">300 ky – 200 My</div>
-            <div class="event-dot"></div>
+                <div class="col-title">The Cosmic Dark Ages</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 epoch of recombination and photon decoupling that concluded the Particle Age, the universe transitioned into a prolonged period known as the Cosmic Dark Ages. During this era, spanning hundreds of millions of years, the cosmos was entirely electrically neutral and filled predominantly with a vast, expanding fog of hydrogen and helium atoms. Because the brilliant, initial flash of the Big Bang had faded into the deep infrared and microwave spectrum, and no stars had yet ignited, the universe was plunged into absolute darkness. However, this period was far from stagnant. In the pitch-black void, the invisible hand of gravity was relentlessly at work. It slowly began to pull vast quantities of neutral gas and invisible dark matter into increasingly dense, massive clumps. These hidden concentrations laid the crucial, unseen scaffolding for all future cosmic structures, patiently assembling the raw materials required to eventually spark the universe's first luminous objects and end the long cosmic night.
+                </div>
+            </div>
         </div>
-        <!-- Event 2 -->
+        <!-- Row 2 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">200 My</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Cosmic Dawn (Reionization)</h3>
+                <div class="col-time">200 My</div>
-            <p class="event-desc">The first massive stars and protogalaxies ignited. Their intense ultraviolet radiation re-ionized the surrounding neutral hydrogen, ending the Dark Ages and making the universe transparent to ultraviolet light.</p>
+                <div class="col-title">Cosmic Dawn (Reionization)</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">
+                    The prolonged obscurity of the Cosmic Dark Ages finally shattered roughly 200 million years after the Big Bang with the onset of the Cosmic Dawn. Deep within the densest, most gravitationally compressed pockets of primordial gas, the very first massive stars and nascent protogalaxies suddenly ignited. These pioneering stellar giants were vastly different from modern stars—they were monstrously huge, incredibly hot, and burned their fuel at a ferocious rate. Consequently, they emitted unimaginably intense floods of high-energy ultraviolet radiation into the surrounding cosmos. This fierce, energetic light was so powerful that it began to strike the ubiquitous neutral hydrogen gas, violently tearing electrons away from their atomic nuclei in a process known as cosmic reionization. This pivotal transformation fundamentally altered the physical state of the intergalactic medium. By clearing away the obscuring fog of neutral atoms, the universe was rendered completely transparent to ultraviolet light, allowing the brilliance of these early stars to travel across the cosmos and officially ending the dark ages.
+                </div>
+            </div>
         </div>
-        <!-- Event 3 -->
+        <!-- Row 3 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">500 My – 1 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Hierarchical Merging</h3>
+                <div class="col-time">500 My – 1 Gy</div>
-            <p class="event-desc">Small "pregalactic blobs" and dwarf galaxies collided and merged to build up larger galactic structures. This "bottom-up" process created the massive galaxies we see today, including the Milky Way's halo.</p>
+                <div class="col-title">Hierarchical Merging</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">
+                    As the universe continued to expand and evolve between 500 million and 1 billion years after the Big Bang, it was populated not by the grand spiral and elliptical galaxies we see today, but by countless small, irregular "pregalactic blobs" and dwarf galaxies. Guided by the underlying web of dark matter, a violent and chaotic "bottom-up" assembly process known as hierarchical merging began to dominate the cosmos. The immense gravitational pull between these smaller fragments caused them to continuously collide, interact, and amalgamate into progressively larger and more complex galactic structures. This relentless era of cosmic cannibalism and merging built the massive galaxies that now anchor the universe. In our own galactic neighborhood, profound evidence of these early, chaotic mergers remains visible today. The sprawling, spherical galactic halo of the Milky Way, populated by ancient stars and globular clusters locked in highly eccentric and randomly oriented orbits, serves as a permanent, fossilized record of the turbulent collisions that formed our galactic home.
+                </div>
+            </div>
         </div>
-        <!-- Event 4 -->
+        <!-- Row 4 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">1 – 2 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Rise of Supermassive Black Holes</h3>
+                <div class="col-time">1 – 2 Gy</div>
-            <p class="event-desc">Massive concentrations of matter collapsed in the centers of young galaxies to form black holes. The accretion of matter into these holes powered the first quasars, which shone with the brightness of a trillion suns.</p>
+                <div class="col-title">Rise of Supermassive Black Holes</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">
+                    As early protogalaxies collided and merged to form increasingly massive structures, tremendous quantities of gas, dust, and stars were driven toward their dense galactic centers. Under the overwhelming force of such extreme matter concentration, these central regions underwent catastrophic gravitational collapse, giving birth to the universe's first supermassive black holes. Boasting masses ranging from millions to billions of times that of our Sun, these gravitational behemoths became the anchors of young galaxies. Their immense pull triggered the violent accretion of surrounding material. As entire star systems and vast clouds of gas spiraled inward, they formed a superheated accretion disk around the black hole's event horizon. The incredible friction and gravitational forces within this swirling disk released staggering amounts of energy before the matter was swallowed entirely. This highly efficient, radiant mechanism powered the first quasars, turning the centers of these nascent galaxies into the most energetic and brilliantly luminous objects in the known universe, outshining the combined light of a trillion normal stars.
+                </div>
+            </div>
         </div>
-        <!-- Event 5 -->
+        <!-- Row 5 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">2 – 3 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Peak Quasar Epoch</h3>
+                <div class="col-time">2 – 3 Gy</div>
-            <p class="event-desc">The era of maximum activity for Active Galactic Nuclei (AGN; quasars). As galactic cores consumed their fuel supplies, this violent activity eventually subsided, leaving dormant supermassive black holes at the centers of most normal galaxies.</p>
+                <div class="col-title">Peak Quasar Epoch</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">
+                    The period spanning two to three billion years after the Big Bang represents the most explosive and energetic phase in the history of the cosmos, widely known as the Peak Quasar Epoch. During this turbulent era, the universe was significantly smaller and denser, making catastrophic collisions and mergers between gas-rich galaxies incredibly frequent. These constant cosmic pile-ups drove massive, unending torrents of fresh gas and stellar material directly into the cores of young galaxies, providing an abundant and continuous fuel supply to their central supermassive black holes. Consequently, this era saw the maximum activity of Active Galactic Nuclei (AGN), with countless quasars blazing brightly across the universe. However, this period of violent activity was ultimately unsustainable. As these galactic cores eventually consumed, expelled, or exhausted their available reservoirs of gas and dust, the intense feeding frenzy subsided. The once-brilliant quasars gradually faded into darkness, leaving behind the relatively dormant and quiet supermassive black holes that now lurk peacefully at the centers of most modern galaxies, including our own.
+                </div>
+            </div>
         </div>
-        <!-- Event 6 -->
+        <!-- Row 6 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">3 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Large-Scale Structure Formation</h3>
+                <div class="col-time">3 Gy</div>
-            <p class="event-desc">Galaxies organized themselves into vast sheets, filaments, and clusters (such as the Local Group), separated by immense voids, creating the "frothy" bubble-like architecture of the cosmic web.</p>
+                <div class="col-title">Large-Scale Structure Formation</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">
+                    By the time the universe reached three billion years of age, its grand macroscopic architecture had largely taken its final shape, sculpted by the persistent, unyielding influence of dark matter and gravity. Galaxies and massive galaxy clusters, such as our own Local Group, did not drift randomly or remain isolated in the expanding void. Instead, driven by the gravitational pathways laid down during the universe's earliest moments, they organized themselves into a vast, staggeringly complex, interconnected framework known as the cosmic web. This enormous, universe-spanning structure is characterized by sweeping, thread-like filaments and extensive, flat sheets of tightly packed galaxies. These luminous structures intersect at massive, hyper-dense superclusters, creating glowing cosmic nodes. In stark contrast, these densely populated regions surround and enclose immense, utterly unpopulated voids—vast stretches of empty space millions of light-years across. This unique distribution of matter gives the entire cosmos a distinctly "frothy," soap-bubble-like appearance when viewed on the absolute largest macroscopic scales.
+                </div>
+            </div>
         </div>
-        <!-- Event 7 -->
+        <!-- Row 7 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">4 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Birth of Population I Stars</h3>
+                <div class="col-time">4 Gy</div>
-            <p class="event-desc">Enrichment of the interstellar medium by earlier supernovae allowed the formation of metal-rich stars (Population I) in galactic disks. This marked the transition toward the Stellar Age and set the conditions for future planetary systems.</p>
+                <div class="col-title">Birth of Population I Stars</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">
+                    Throughout the Galactic Age, a continuous and violent cycle of stellar birth and explosive death slowly but fundamentally transformed the chemical composition of the cosmos. The universe's earliest massive stars—made almost entirely of pure hydrogen and helium—burned through their fuel rapidly and detonated as spectacular supernovae. These colossal explosions blasted newly forged, heavier elements like carbon, oxygen, nitrogen, and iron deep into the surrounding interstellar medium. Over billions of years, this steady chemical enrichment of galactic disks fundamentally altered the raw material available for new stars. By around 4 billion years after the Big Bang, this process had seeded the gas clouds sufficiently to allow for the widespread formation of metal-rich, second- and third-generation stars, formally known as Population I stars. The birth of these chemically complex stars, which includes our own future Sun, marked the universe's full transition into the Stellar Age. Crucially, it established the necessary heavy-element foundation required for the eventual formation of solid, rocky planets and the emergence of biological life.
+                </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>