Differences

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

--- courses:ast100:1 [2026/01/27 11:31] – asad
+++ courses:ast100:1 [2026/02/24 06:33] (current) – asad
@@ Line 1: / Line 1: @@
 ====== 1. Particle Age ======
-^ Time ^ Event ^ Details ^
-| $0$ | **The Big Bang** | The singularity event marking the origin of space, time, energy and matter (STEM). The universe emerges as an unimaginably hot and dense "primeval fireball". |
-| $10^{-35}$ to $10^{-32}$ seconds | **Cosmic Inflation** | A brief, exponential expansion where the universe swells in size by a factor of roughly $10^{50}$. This process smoothed out initial irregularities. |
-| $10^{-43}$ to $10^{-10}$ seconds | **Separation of Forces** | As the universe cooled, the single unified "superforce" separated into the four fundamental forces (energies) of nature: gravity, the strong nuclear force, the weak nuclear force, and electromagnetism. |
-| $10^{-35}$ to 1 second | **Particle Creation & Annihilation** | Energy converted into matter via "pair production". Quarks and leptons (e.g., electrons) emerged. Matter and antimatter collided and annihilated, leaving a slight excess of ordinary matter. |
-| 3 minutes to 15 minutes | **Primordial Nucleosynthesis** | The universe cooled sufficiently (below $10^9$ K) for protons and neutrons to fuse. This "Nuclear Epoch" produced the first atomic nuclei: heavy hydrogen (deuterium), helium, and trace amounts of lithium. |
-| 50,000 years | **Matter Domination** | The "crossover point" where the energy density of matter finally exceeded that of radiation (or energy). This marked the end of the "Radiation Era" and the beginning of the "Matter Era," setting the stage for structure formation. |
-| 300,000 to 380,000 years | **Recombination & Decoupling** | Electrons combined with nuclei to form neutral atoms (recombination). This neutralized the charged fog, allowing photons to travel freely (decoupling), observable today as the Cosmic Microwave Background (CMB). |
+===== - Event highlights =====
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Particle Age Timeline</title>
+</head>
+<body>
+<div id="doku-cosmic-light">
+    <style>
+        /* Container ID: #doku-cosmic-light
+           Theme: Elegant Light - Static Particle Version
+        */
+        #doku-cosmic-light {
+            /* Elegant Light Theme Variables */
+            --bg-color: #ffffff;
+            --panel-bg: #f8f9fa;
+            --text-primary: #2d3748;
+            --text-secondary: #718096;
+            --accent-color: #4a5568;
+            --border-color: #e2e8f0;
+            --line-color: #cbd5e0;
+            /* Typography & Layout */
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            line-height: 1.6;
+            width: 100%;
+            max-width: 850px;
+            display: block;
+            margin: 20px auto;
+            padding: 20px;
+        }
+        #doku-cosmic-light * {
+            box-sizing: border-box;
+        }
+        /* Timeline Styling */
+        #doku-cosmic-light .timeline {
+            position: relative;
+            padding: 20px 20px 20px 50px;
+            margin: 0 auto;
+        }
+        /* Vertical Line */
+        #doku-cosmic-light .timeline::before {
+            content: '';
+            position: absolute;
+            left: 24px;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: var(--line-color);
+        }
+        #doku-cosmic-light .event-item {
+            position: relative;
+            margin-bottom: 50px;
+        }
+        #doku-cosmic-light .event-item:last-child {
+            margin-bottom: 0;
+        }
+        /* Timeline Dot */
+        #doku-cosmic-light .event-dot {
+            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 {
+            display: inline-block;
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: #4a5568;
+            margin-bottom: 10px;
+            background: #e2e8f0;
+            padding: 4px 12px;
+            border-radius: 20px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        #doku-cosmic-light .event-title {
+            font-size: 1.3rem;
+            margin: 0 0 12px 0;
+            color: #1a202c;
+            font-weight: 700;
+            line-height: 1.3;
+        }
+        #doku-cosmic-light .event-desc {
+            color: #4a5568;
+            font-size: 1.05rem;
+            margin: 0;
+            line-height: 1.7;
+        }
+        /* Math Superscripts */
+        #doku-cosmic-light sup {
+            font-size: 0.75em;
+            vertical-align: super;
+            line-height: 0;
+        }
+        /* Mobile Optimization */
+        @media (max-width: 600px) {
+            #doku-cosmic-light { padding: 15px; }
+            #doku-cosmic-light .timeline { padding: 10px 10px 10px 35px; }
+            #doku-cosmic-light .timeline::before { left: 19px; }
+            #doku-cosmic-light .event-dot { left: -24px; width: 12px; height: 12px; top: 10px; }
+            #doku-cosmic-light .event-title { font-size: 1.15rem; }
+        }
+    </style>
+    <div class="timeline">
+        <!-- Event 1 -->
+        <div class="event-item">
+            <span class="time-badge">0</span>
+            <h3 class="event-title">The Big Bang</h3>
+            <p class="event-desc">The singularity event marking the origin of space, time, energy and matter (STEM). The universe emerges as an unimaginably hot and dense "primeval fireball".</p>
+            <div class="event-dot"></div>
+        </div>
+        <!-- Event 2 -->
+        <div class="event-item">
+            <span class="time-badge">10<sup>-35</sup> to 10<sup>-32</sup> seconds</span>
+            <h3 class="event-title">Cosmic Inflation</h3>
+            <p class="event-desc">A brief, exponential expansion where the universe swells in size by a factor of roughly 10<sup>50</sup>. This process smoothed out initial irregularities.</p>
+            <div class="event-dot"></div>
+        </div>
+        <!-- Event 3 -->
+        <div class="event-item">
+            <span class="time-badge">10<sup>-43</sup> to 10<sup>-10</sup> seconds</span>
+            <h3 class="event-title">Separation of Forces</h3>
+            <p class="event-desc">As the universe cooled, the single unified "superforce" separated into the four fundamental forces (energies) of nature: gravity, the strong nuclear force, the weak nuclear force, and electromagnetism.</p>
+            <div class="event-dot"></div>
+        </div>
+        <!-- Event 4 -->
+        <div class="event-item">
+            <span class="time-badge">10<sup>-35</sup> to 1 second</span>
+            <h3 class="event-title">Particle Creation & Annihilation</h3>
+            <p class="event-desc">Energy converted into matter via "pair production". Quarks and leptons (e.g., electrons) emerged. Matter and antimatter collided and annihilated, leaving a slight excess of ordinary matter.</p>
+            <div class="event-dot"></div>
+        </div>
+        <!-- Event 5 -->
+        <div class="event-item">
+            <span class="time-badge">3 minutes to 15 minutes</span>
+            <h3 class="event-title">Primordial Nucleosynthesis</h3>
+            <p class="event-desc">The universe cooled sufficiently (below 10<sup>9</sup> K) for protons and neutrons to fuse. This "Nuclear Epoch" produced the first atomic nuclei: heavy hydrogen (deuterium), helium, and trace amounts of lithium.</p>
+            <div class="event-dot"></div>
+        </div>
+        <!-- Event 6 -->
+        <div class="event-item">
+            <span class="time-badge">50,000 years</span>
+            <h3 class="event-title">Matter Domination</h3>
+            <p class="event-desc">The "crossover point" where the energy density of matter finally exceeded that of radiation (or energy). This marked the end of the "Radiation Era" and the beginning of the "Matter Era," setting the stage for structure formation.</p>
+            <div class="event-dot"></div>
+        </div>
+        <!-- Event 7 -->
+        <div class="event-item">
+            <span class="time-badge">300,000 to 380,000 years</span>
+            <h3 class="event-title">Recombination & Decoupling</h3>
+            <p class="event-desc">Electrons combined with nuclei to form neutral atoms (recombination). This neutralized the charged fog, allowing photons to travel freely (decoupling), observable today as the Cosmic Microwave Background (CMB).</p>
+            <div class="event-dot"></div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
+===== - Event details =====
+{{:courses:ast100:particle-age.webp?nolink|}}
 The saga of our cosmos began at "time zero" with the Big Bang—a singular event that marked the simultaneous birth of space, time, energy, and matter. Emerging from a state of unimaginable density, the universe was not a traditional explosion bursting into an empty void; rather, it was a sudden eruption of space itself. This "primeval fireball" was so incredibly hot and compact that the standard laws of physics we rely on today simply did not yet exist.