courses:ast100:1
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revision | |||
| courses:ast100:1 [2026/02/24 06:33] – asad | courses:ast100:1 [2026/03/22 02:16] (current) – asad | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== 1. Particle Age ====== | ====== 1. Particle Age ====== | ||
| - | ===== - Event highlights ===== | ||
| < | < | ||
| < | < | ||
| <meta charset=" | <meta charset=" | ||
| <meta name=" | <meta name=" | ||
| - | < | + | < |
| </ | </ | ||
| < | < | ||
| Line 13: | Line 12: | ||
| < | < | ||
| /* Container ID: # | /* Container ID: # | ||
| - | | + | |
| */ | */ | ||
| # | # | ||
| - | /* Elegant | + | /* 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 */ | /* Typography & Layout */ | ||
| font-family: | font-family: | ||
| - | background-color: | + | background-color: |
| - | color: var(--text-primary); | + | max-width: |
| - | line-height: | + | margin: |
| - | width: 100%; | + | padding: |
| - | max-width: | + | |
| - | display: block; | + | |
| - | margin: | + | |
| - | padding: | + | |
| } | } | ||
| Line 42: | Line 37: | ||
| } | } | ||
| - | /* Timeline Styling | + | /* Table Architecture |
| - | # | + | # |
| - | | + | |
| - | | + | |
| - | | + | |
| + | border-radius: | ||
| + | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); | ||
| + | overflow: hidden; | ||
| } | } | ||
| - | | + | # |
| - | | + | |
| - | | + | |
| - | position: absolute; | + | |
| - | left: 24px; | + | |
| - | top: 0; | + | |
| - | | + | |
| - | width: 2px; | + | |
| - | background: | + | |
| } | } | ||
| - | # | + | # |
| - | | + | |
| - | margin-bottom: | + | |
| } | } | ||
| - | # | + | |
| - | | + | |
| + | display: flex; | ||
| + | padding: 22px 30px; | ||
| + | cursor: pointer; | ||
| + | align-items: center; | ||
| + | | ||
| + | transition: var(--transition); | ||
| } | } | ||
| - | | + | # |
| - | | + | background: var(--hover); |
| - | position: absolute; | + | |
| - | left: -32px; | + | |
| - | top: 8px; | + | |
| - | width: 16px; | + | |
| - | height: 16px; | + | |
| - | border-radius: | + | |
| - | background-color: #fff; | + | |
| - | border: 3px solid var(--accent-color); | + | |
| - | z-index: 2; | + | |
| } | } | ||
| - | # | + | # |
| - | | + | |
| - | font-size: 0.85rem; | + | |
| font-weight: | font-weight: | ||
| - | | + | |
| - | margin-bottom: 10px; | + | |
| - | | + | |
| - | padding: 4px 12px; | + | |
| - | border-radius: 20px; | + | |
| - | text-transform: uppercase; | + | |
| letter-spacing: | letter-spacing: | ||
| } | } | ||
| - | # | + | # |
| - | font-size: 1.3rem; | + | flex: 1 1 auto; |
| - | | + | font-weight: 600; |
| - | color: | + | |
| - | | + | color: |
| - | line-height: | + | |
| + | line-height: | ||
| } | } | ||
| - | # | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| - | | + | |
| + | | ||
| + | width: 32px; | ||
| + | | ||
| + | border-radius: | ||
| + | background: #edf2f7; | ||
| + | color: var(--text-muted); | ||
| + | transition: var(--transition); | ||
| } | } | ||
| - | /* Math Superscripts | + | |
| - | # | + | width: 16px; |
| - | | + | height: 16px; |
| - | | + | transition: var(--transition); |
| - | line-height: | + | fill: none; |
| + | stroke: currentColor; | ||
| + | stroke-width: | ||
| + | stroke-linecap: | ||
| + | stroke-linejoin: | ||
| + | } | ||
| + | |||
| + | | ||
| + | # | ||
| + | | ||
| + | } | ||
| + | |||
| + | # | ||
| + | transform: rotate(180deg); | ||
| + | background: var(--accent); | ||
| + | color: var(--bg); | ||
| + | } | ||
| + | |||
| + | /* Expanded Content */ | ||
| + | # | ||
| + | max-height: 0; | ||
| + | overflow: hidden; | ||
| + | transition: max-height 0.4s cubic-bezier(0.4, | ||
| + | | ||
| + | } | ||
| + | |||
| + | # | ||
| + | padding: 0 30px 30px 180px; /* Aligns with the title text (150 width + 30 padding) */ | ||
| + | font-size: 1.05rem; | ||
| + | line-height: | ||
| + | color: var(--text-muted); | ||
| + | text-align: justify; | ||
| } | } | ||
| /* Mobile Optimization */ | /* Mobile Optimization */ | ||
| - | @media (max-width: | + | @media (max-width: |
| - | # | + | # |
| - | # | + | flex-wrap: wrap; |
| - | #doku-cosmic-light .timeline::before { left: 19px; } | + | |
| - | # | + | |
| - | # | + | # |
| + | flex: 1 1 100%; | ||
| + | | ||
| + | font-size: 0.85rem; | ||
| + | | ||
| + | # | ||
| + | font-size: 1.05rem; | ||
| + | padding-right: 15px; | ||
| + | | ||
| + | # | ||
| + | padding: 0 20px 24px 20px; | ||
| + | | ||
| } | } | ||
| </ | </ | ||
| - | <div class=" | + | <div class=" |
| - | < | + | |
| - | <div class=" | + | < |
| - | <span class=" | + | <div class=" |
| - | <h3 class=" | + | <div class=" |
| - | <p class=" | + | <div class=" |
| - | | + | <div class=" |
| + | <div class=" | ||
| + | <svg viewBox=" | ||
| + | </div> | ||
| + | </div> | ||
| + | < | ||
| + | <div class=" | ||
| + | | ||
| + | | ||
| + | </ | ||
| </ | </ | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <span class=" | + | <div class=" |
| - | <h3 class=" | + | <div class=" |
| - | <p class=" | + | <div class=" |
| - | | + | <div class=" |
| + | <svg viewBox=" | ||
| + | </div> | ||
| + | </div> | ||
| + | < | ||
| + | <div class=" | ||
| + | Almost instantly following the initial singularity, in the fleeting blink of an eye between 10< | ||
| + | | ||
| + | </ | ||
| </ | </ | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <span class=" | + | <div class=" |
| - | <h3 class=" | + | <div class=" |
| - | <p class=" | + | <div class=" |
| - | | + | <div class=" |
| + | <svg viewBox=" | ||
| + | </div> | ||
| + | </div> | ||
| + | < | ||
| + | <div class=" | ||
| + | | ||
| + | | ||
| + | </ | ||
| </ | </ | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <span class=" | + | <div class=" |
| - | <h3 class=" | + | <div class=" |
| - | <p class=" | + | <div class=" |
| - | | + | <div class=" |
| + | <svg viewBox=" | ||
| + | </div> | ||
| + | </div> | ||
| + | < | ||
| + | <div class="t-content-inner"> | ||
| + | During the turbulent first full second of existence, the incredibly hot universe functioned as a colossal, high-energy furnace where pure radiant energy was constantly transforming into physical substance. In this dynamic era of Particle Creation and Annihilation, | ||
| + | | ||
| + | </ | ||
| </ | </ | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <span class=" | + | <div class=" |
| - | <h3 class=" | + | <div class=" |
| - | <p class=" | + | <div class=" |
| - | | + | <div class=" |
| + | | ||
| + | </ | ||
| + | </ | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | By the time the universe was exactly three minutes old, it entered a crucial, transformative phase of " | ||
| + | | ||
| + | </ | ||
| </ | </ | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <span class=" | + | <div class=" |
| - | <h3 class=" | + | <div class=" |
| - | <p class=" | + | <div class=" |
| - | | + | <div class=" |
| + | <svg viewBox=" | ||
| + | </div> | ||
| + | </div> | ||
| + | < | ||
| + | <div class=" | ||
| + | Following the initial frenzy of particle creation and rapid nuclear fusion, the cosmos continued to expand in total, featureless darkness for many thousands of years until it reached a profound, pivotal turning point known as Matter Domination. At this critical stage, occurring roughly 50,000 years after the Big Bang, the universe experienced a fundamental | ||
| + | | ||
| + | </ | ||
| </ | </ | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <span class=" | + | <div class=" |
| - | <h3 class=" | + | <div class=" |
| - | <p class=" | + | <div class=" |
| - | | + | <div class=" |
| + | <svg viewBox=" | ||
| + | </div> | ||
| + | </div> | ||
| + | < | ||
| + | <div class=" | ||
| + | Finally, in a momentous epoch spanning between 300,000 and 380,000 years after the Big Bang, the expanding universe cooled sufficiently for slow-moving electrons | ||
| + | | ||
| + | </ | ||
| </ | </ | ||
| + | |||
| </ | </ | ||
| + | |||
| + | < | ||
| + | function toggleRow(element) { | ||
| + | const row = element.parentElement; | ||
| + | const content = row.querySelector(' | ||
| + | const inner = row.querySelector(' | ||
| + | | ||
| + | // Toggle the active class for styling and rotation | ||
| + | row.classList.toggle(' | ||
| + | | ||
| + | // Calculate and set the max-height to smoothly animate the opening | ||
| + | if (row.classList.contains(' | ||
| + | content.style.maxHeight = inner.scrollHeight + " | ||
| + | } else { | ||
| + | content.style.maxHeight = " | ||
| + | } | ||
| + | } | ||
| + | | ||
| + | // Ensure heights are recalculated if the window is resized to prevent content clipping | ||
| + | window.addEventListener(' | ||
| + | document.querySelectorAll(' | ||
| + | const inner = content.querySelector(' | ||
| + | content.style.maxHeight = inner.scrollHeight + " | ||
| + | }); | ||
| + | }); | ||
| + | </ | ||
| </ | </ | ||
| </ | </ | ||
| </ | </ | ||
| - | |||
| - | ===== - Event details ===== | ||
| - | |||
| - | {{: | ||
| - | |||
| - | 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 " | ||
| - | |||
| - | Almost instantly, in the blink of an eye between $10^{-35}$ and $10^{-32}$ seconds, the infant universe experienced a period of breath-taking growth known as Cosmic Inflation. In this fleeting moment, the fabric of space stretched by a staggering factor, expanding exponentially. This rapid transformation was vital for the future of the cosmos, as it smoothed out the early chaos and ensured that energy was distributed evenly enough to eventually allow for a stable and balanced universe. | ||
| - | |||
| - | As the intense heat of the beginning began to fade within the first fraction of a second, the fundamental rules of nature started to take shape through the Separation of Forces. Initially, all of nature’s energy was bound together in a single " | ||
| - | |||
| - | During the first full second of existence, the universe functioned as a colossal, high-energy furnace where light was constantly transforming into substance. In this era of Particle Creation and Annihilation, | ||
| - | |||
| - | By the time the universe was three minutes old, it entered a crucial phase of " | ||
| - | |||
| - | Following this initial frenzy, the universe expanded in total darkness for many thousands of years until it reached a pivotal turning point known as Matter Domination. At this stage, roughly 50,000 years after the start, the influence of matter finally became stronger than the influence of radiation. This shift was a defining moment in cosmic history; it allowed gravity to finally begin pulling matter together into the first large-scale structures, creating the invisible scaffolding upon which the first galaxies would eventually grow. | ||
| - | |||
| - | Finally, between 300,000 and 380,000 years after the Big Bang, the universe cooled enough for electrons to settle into orbits around nuclei, forming the very first neutral atoms. This event, known as Recombination, | ||
| - | |||
courses/ast100/1.1771940012.txt.gz · Last modified: by asad