Differences

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

--- courses:ast100:4 [2026/03/18 07:26] – [2. Event details] asad
+++ courses:ast100:4 [2026/03/25 05:09] (current) – asad
@@ Line 1: / Line 1: @@
 ====== 4. Planetary Age ======
-===== - Event highlights =====
+===== - Timeline =====
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Planetary Age Timeline</title>
+    <title>Planetary Age Table</title>
 </head>
 <body>
@@ Line 13: / Line 14: @@
     <style>
         /* Container ID: #doku-cosmic-light
-           Theme: Elegant Light - Static Planetary 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 39: @@
         }
-        /* 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">9.1 Gy</span>
+        <div class="t-row">
-            <h3 class="event-title">Accretion of Planetesimals</h3>
+            <div class="t-header" onclick="toggleRow(this)">
-            <p class="event-desc">Following the solar nebula collapse, dust grains in the disk collided and stuck together via electrostatic forces and gravity to form "planetesimals." These kilometer-sized objects further coalesced to form the protoplanets of the inner and outer Solar System.</p>
+                <div class="col-time">9.1 Gy</div>
-            <div class="event-dot"></div>
+                <div class="col-title">Accretion of Planetesimals</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 gravitational collapse of the solar nebula, the newly formed protoplanetary disk became a busy theater of cosmic construction. Within this swirling disk, microscopic dust grains began to collide and stick together through electrostatic forces, gradually growing into larger clumps. As these clumps accumulated more mass, their gravitational pull increased, allowing them to rapidly accrete surrounding material to form kilometer-sized bodies known as planetesimals. These planetesimals continuously collided and merged over millions of years, eventually coalescing into the distinct protoplanets that would become the inner terrestrial and outer Jovian worlds of our Solar System.
+                </div>
+            </div>
         </div>
-        <!-- Event 2 -->
+        <!-- Row 2 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">9.1 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">The T-Tauri Solar Wind</h3>
+                <div class="col-time">9.1 Gy</div>
-            <p class="event-desc">The young Sun entered a highly active "T-Tauri" phase, generating intense solar winds. This stream of charged particles swept away the remaining nebular gas and dust, halting the growth of the Jovian planets and stripping the primordial atmospheres from the inner planets.</p>
+                <div class="col-title">The T-Tauri Solar Wind</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">
+                    During this critical period of planetary formation, the young Sun entered a highly erratic and energetic stage of its evolution known as the T-Tauri phase. Characterized by violent magnetic activity, the youthful star began to generate incredibly intense solar winds that radiated outward across the solar system. This relentless stream of charged particles effectively cleared the remaining primordial gas and dust from the protoplanetary disk. Consequently, this stellar clearing process halted the rapid gas accumulation of the massive Jovian planets and aggressively stripped away the delicate, primordial atmospheres of the inner terrestrial worlds.
+                </div>
+            </div>
         </div>
-        <!-- Event 3 -->
+        <!-- Row 3 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">9.2 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Planetary Differentiation</h3>
+                <div class="col-time">9.2 Gy</div>
-            <p class="event-desc">Intense heat from accretion and radioactive decay caused the early Earth to melt. Heavy elements like iron and nickel sank to the center to form the metallic core (generating the magnetic field), while lighter silicates rose to form the mantle and crust.</p>
+                <div class="col-title">Planetary Differentiation</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 early Earth continued to accrete mass, the immense kinetic energy from constant impacts, combined with the heat released from the decay of short-lived radioactive isotopes, caused the entire young planet to melt. This molten state allowed for a profound global reorganization known as planetary differentiation. Governed by gravity, heavy metallic elements, primarily iron and nickel, sank toward the center to form a dense, churning core, which would eventually generate the planet’s protective magnetic field. Simultaneously, lighter silicate minerals floated outward to form a thick, insulating mantle and a primitive, cooling crust.
+                </div>
+            </div>
         </div>
-        <!-- Event 4 -->
+        <!-- Row 4 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">9.2 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Formation of the Moon</h3>
+                <div class="col-time">9.2 Gy</div>
-            <p class="event-desc">A Mars-sized protoplanet collided with the newly differentiated Earth. The debris from this cataclysmic impact formed a ring around Earth, which rapidly accreted to form the Moon.</p>
+                <div class="col-title">Formation of the Moon</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">
+                    Amidst the chaotic environment of the early Solar System, the newly differentiated Earth experienced a cataclysmic collision that would forever alter its developmental trajectory. A rogue, Mars-sized protoplanet, often referred to as Theia, smashed into the young Earth with unimaginable force. The monumental impact liquefied the planet's surface once again and ejected a colossal volume of vaporized crust and mantle into orbit. This superheated debris rapidly formed a dense ring around the Earth, which soon accreted under its own gravity to form the Moon, establishing a crucial gravitational relationship that would later stabilize Earth's axial tilt.
+                </div>
+            </div>
         </div>
-        <!-- Event 5 -->
+        <!-- Row 5 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">9.4 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Formation of Atmosphere and Oceans</h3>
+                <div class="col-time">9.4 Gy</div>
-            <p class="event-desc">As Earth cooled, volcanic activity outgassed volatiles (water vapor, carbon dioxide) from the interior to form a secondary atmosphere. As temperatures dropped further, this water vapor condensed to form the first oceans, augmented by water delivered by comets.</p>
+                <div class="col-title">Formation of Atmosphere and Oceans</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 violently disrupted Earth gradually cooled, extensive volcanic activity dominated its recovering surface, initiating a massive outgassing of trapped interior volatiles. Endless eruptions expelled vast quantities of water vapor, carbon dioxide, and other gases, forming a dense secondary atmosphere to replace the one lost to early solar winds. As global temperatures continued to fall below the boiling point, this atmospheric water vapor finally condensed, unleashing torrential, planet-wide rains. Over millions of years, these deluges, augmented by the icy deliveries from continuous comet impacts, filled the low-lying impact basins to form the world's first primordial oceans.
+                </div>
+            </div>
         </div>
-        <!-- Event 6 -->
+        <!-- Row 6 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">9.6 Gy – 10 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Late Heavy Bombardment</h3>
+                <div class="col-time">9.6 Gy – 10 Gy</div>
-            <p class="event-desc">A period of intense asteroid and comet impacts scarred planetary surfaces and pulverized the early crust. This "cleaning up" of leftover solar system debris kept Earth's surface molten and hostile for millions of years.</p>
+                <div class="col-title">Late Heavy Bombardment</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">
+                    Despite the formation of early oceans, the inner Solar System remained an incredibly violent neighborhood. A prolonged period of catastrophic cosmic impacts, known as the Late Heavy Bombardment, subjected the terrestrial planets to a relentless barrage of leftover asteroids and comets. This intense storm of debris heavily scarred planetary surfaces, repeatedly pulverized Earth's fragile early crust, and routinely vaporized portions of the newly formed oceans. This chaotic "cleaning up" phase of solar system evolution ensured that the Earth's surface remained a hostile, largely molten battlefield for hundreds of millions of years.
+                </div>
+            </div>
         </div>
-        <!-- Event 7 -->
+        <!-- Row 7 -->
-        <div class="event-item">
+        <div class="t-row">
-            <span class="time-badge">10 Gy – 11 Gy</span>
+            <div class="t-header" onclick="toggleRow(this)">
-            <h3 class="event-title">Stabilization of the Lithosphere</h3>
+                <div class="col-time">10 Gy – 11 Gy</div>
-            <p class="event-desc">The Planetary Age concluded with the stabilization of Earth's solid crust and the formation of the first continents (such as the Vaalbara supercontinent). This transformed Earth from a chaotic, molten "battlefield" into a stable environment capable of sustaining complex chemical evolution.</p>
+                <div class="col-title">Stabilization of the Lithosphere</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">
+                    Eventually, the frequency of massive impacts subsided, allowing the Planetary Age to draw to a close through the gradual stabilization of Earth's solid lithosphere. The crust thickened and cooled sufficiently to support the formation of the first permanent continental landmasses, such as the ancient supercontinent Vaalbara. The establishment of a stable rock cycle and the persistent presence of liquid water oceans fundamentally transformed the Earth from a violent, hellish sphere into a relatively tranquil world. This newfound geological stability provided the crucial, protected environments required to ignite the complex chemical evolution that would soon follow.
+                </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>
@@ Line 182: / Line 307: @@
 </html>
-===== - Event details =====
+===== - Telescope =====
-Following the gravitational collapse of the solar nebula, the newly formed protoplanetary disk became a busy theater of cosmic construction. Within this swirling disk, microscopic dust grains began to collide and stick together through electrostatic forces, gradually growing into larger clumps. As these clumps accumulated more mass, their gravitational pull increased, allowing them to rapidly accrete surrounding material to form kilometer-sized bodies known as planetesimals. These planetesimals continuously collided and merged over millions of years, eventually coalescing into the distinct protoplanets that would become the inner terrestrial and outer Jovian worlds of our Solar System.
+{{youtube>srunrHV0HBk?large}}
+\\
-During this critical period of planetary formation, the young Sun entered a highly erratic and energetic stage of its evolution known as the T-Tauri phase. Characterized by violent magnetic activity, the youthful star began to generate incredibly intense solar winds that radiated outward across the solar system. This relentless stream of charged particles effectively cleared the remaining primordial gas and dust from the protoplanetary disk. Consequently, this stellar clearing process halted the rapid gas accumulation of the massive Jovian planets and aggressively stripped away the delicate, primordial atmospheres of the inner terrestrial worlds.
+The Kepler Space Telescope, the definitive instrument for the Planetary Age in the AST 100 curriculum, revolutionized our understanding of the cosmos by transitioning exoplanet study from theory to statistical reality. Launched in 2009, Kepler utilized a high-resolution photometer to monitor over 150,000 stars simultaneously in a fixed field of view within the Cygnus and Lyra constellations. By detecting the minute, periodic dimming of starlight caused by a planet crossing in front of its host star—a technique known as the transit method—Kepler proved that planets are ubiquitous throughout our galaxy.
-As the early Earth continued to accrete mass, the immense kinetic energy from constant impacts, combined with the heat released from the decay of short-lived radioactive isotopes, caused the entire young planet to melt. This molten state allowed for a profound global reorganization known as planetary differentiation. Governed by gravity, heavy metallic elements, primarily iron and nickel, sank toward the center to form a dense, churning core, which would eventually generate the planet’s protective magnetic field. Simultaneously, lighter silicate minerals floated outward to form a thick, insulating mantle and a primitive, cooling crust.
-Amidst the chaotic environment of the early Solar System, the newly differentiated Earth experienced a cataclysmic collision that would forever alter its developmental trajectory. A rogue, Mars-sized protoplanet, often referred to as Theia, smashed into the young Earth with unimaginable force. The monumental impact liquefied the planet's surface once again and ejected a colossal volume of vaporized crust and mantle into orbit. This superheated debris rapidly formed a dense ring around the Earth, which soon accreted under its own gravity to form the Moon, establishing a crucial gravitational relationship that would later stabilize Earth's axial tilt.
-As the violently disrupted Earth gradually cooled, extensive volcanic activity dominated its recovering surface, initiating a massive outgassing of trapped interior volatiles. Endless eruptions expelled vast quantities of water vapor, carbon dioxide, and other gases, forming a dense secondary atmosphere to replace the one lost to early solar winds. As global temperatures continued to fall below the boiling point, this atmospheric water vapor finally condensed, unleashing torrential, planet-wide rains. Over millions of years, these deluges, augmented by the icy deliveries from continuous comet impacts, filled the low-lying impact basins to form the world's first primordial oceans.
+Technologically, Kepler’s mission was defined by its incredible precision, capable of detecting brightness changes as small as twenty parts per million. This sensitivity allowed it to identify "Earth-size" planets orbiting within the habitable zones of Sun-like stars, where liquid water could potentially exist on the surface. The data history of the mission includes the discovery of over 2,700 confirmed exoplanets and thousands of additional candidates, revealing a startling diversity of worlds, from "Super-Earths" to "Hot Jupiters," that challenged existing models of solar system formation and paved the way for future atmospheric studies.
-Despite the formation of early oceans, the inner Solar System remained an incredibly violent neighborhood. A prolonged period of catastrophic cosmic impacts, known as the Late Heavy Bombardment, subjected the terrestrial planets to a relentless barrage of leftover asteroids and comets. This intense storm of debris heavily scarred planetary surfaces, repeatedly pulverized Earth's fragile early crust, and routinely vaporized portions of the newly formed oceans. This chaotic "cleaning up" phase of solar system evolution ensured that the Earth's surface remained a hostile, largely molten battlefield for hundreds of millions of years.
+In the broader context of cosmic history, Kepler’s legacy provides the essential bridge between the Stellar Age and the Chemical Age. By identifying the frequency of planetary systems, it shifted the scientific focus from how stars form to how frequently they produce environments capable of hosting complex chemistry. Although the primary mission ended in 2018, its vast archive of data continues to be mined by researchers and "citizens of the universe" alike. These discoveries ensure that the study of the Planetary Age remains a cornerstone of our efforts to map our place among the stars.
-Eventually, the frequency of massive impacts subsided, allowing the Planetary Age to draw to a close through the gradual stabilization of Earth's solid lithosphere. The crust thickened and cooled sufficiently to support the formation of the first permanent continental landmasses, such as the ancient supercontinent Vaalbara. The establishment of a stable rock cycle and the persistent presence of liquid water oceans fundamentally transformed the Earth from a violent, hellish sphere into a relatively tranquil world. This newfound geological stability provided the crucial, protected environments required to ignite the complex chemical evolution that would soon follow.