drawers

Author: Aditya Putatunda

.DS_Store

@@ -46,7 +46,6 @@
       {
         "title": "Multiferroics & Magnetism",
         "pitch": "How magnetic order emerges, competes, and can be tuned in materials where magnetism and electrical polarization coexist.",
-        "image": "images/dw_structure_vortex.svg",
         "tags": ["magnetism", "multiferroics", "transport"],
         "projects": [
           {
@@ -280,7 +279,7 @@
       { "date": "Jan 2024", "title": "Workshop on Twistronics and Moiré Materials", "venue": "ICTP, Trieste" },
       { "date": "Mar 2023", "title": "DPG Spring Meeting", "venue": "Berlin", "type": "talk" },
       { "date": "Aug 2022", "title": "Twisted CrI₃ bilayer", "venue": "Psi-K Conference, Lausanne", "type": "poster" },
-      { "date": "Jul 2022", "title": "Strongly Correlated Electron Systems 2022", "venue": "Amsterdam" },
+      { "date": "Jul 2022", "title": "SCES 2022", "venue": "Amsterdam" },
       { "date": "Mar 2020", "title": "APS March Meeting", "venue": "Denver — canceled (COVID-19)", "type": "talk" },
       { "date": "Mar 2019", "title": "Lorenz number estimates from the Seebeck coefficient", "venue": "APS March Meeting, Boston", "type": "talk" },
       { "date": "Mar 2018", "title": "Thermoelectric properties of NaSbSe₂", "venue": "APS March Meeting, Los Angeles", "type": "talk" },

content.json

@@ -48,7 +48,7 @@
   .hero-links { display: flex; gap: 1rem; flex-wrap: wrap; }
   .hero-links a { font-size: 0.78rem; font-weight: 600; color: var(--accent); text-decoration: none; padding: 0.45rem 1rem; border: 1.5px solid var(--accent); border-radius: 3px; transition: all 0.2s; letter-spacing: 0.01em; }
   .hero-links a:hover { background: var(--accent); color: #fff; }
-  .hero-aside { background: var(--accent-light); border-radius: 6px; padding: 1.375rem; display: flex; align-items: center; justify-content: center; }
+  .hero-aside { background: var(--accent-light); border-radius: 6px; padding: 1.25rem; display: flex; align-items: center; justify-content: center; }
   .hero-photo { width: 100%; height: auto; display: block; border-radius: 3px; }
   .news-strip { max-width: 1400px; margin: 0 auto; padding: 0 3rem 4rem; }
   .news-strip-label { font-size: 0.72rem; font-weight: 600; color: var(--text-light); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); }
@@ -84,9 +84,9 @@
   .section-panel:hover .panel-expand-hint { gap: 0.5rem; }
   .panel-expand-hint .arrow { transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); font-size: 0.65rem; display: inline-block; }
   .section-panel.active .panel-expand-hint .arrow { transform: rotate(90deg); }
-  .section-drawer { max-width: 1400px; margin: 0 auto; overflow: hidden; max-height: 0; transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+  .section-drawer { grid-column: 1 / -1; overflow: hidden; max-height: 0; transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   .section-drawer.open { max-height: 2000px; }
-  .drawer-inner { padding: 1.5rem 3rem 2rem; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; }
+  .drawer-inner { padding: 1.5rem 0 2rem; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; }
   .section-drawer.open .drawer-inner { opacity: 1; transform: translateY(0); }
   .project-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
   .project-row:last-of-type { border-bottom: none; }
@@ -173,11 +173,14 @@
     .news-items { grid-template-columns: 1fr; }
     .sections-overview { grid-template-columns: 1fr; gap: 0; }
     .section-panel { border-top-width: 1px; }
+    #panel-0 { order: 1; } #drawer-0 { order: 2; }
+    #panel-1 { order: 3; } #drawer-1 { order: 4; }
+    #panel-2 { order: 5; } #drawer-2 { order: 6; }
     .about-content { grid-template-columns: 1fr; gap: 2rem; }
     .contact-content { grid-template-columns: 1fr; gap: 2rem; }
     .talk-item { grid-template-columns: 1fr; gap: 0.3rem; }
     .page-intro h1 { font-size: 1.8rem; }
-    .nav-inner, .page-intro, .sections-overview, .drawer-inner, .publications-list, .talks-list, .about-content, .contact-content, .news-strip, .home-hero, footer { padding-left: 1.5rem; padding-right: 1.5rem; }
+    .nav-inner, .page-intro, .sections-overview, .publications-list, .talks-list, .about-content, .contact-content, .news-strip, .home-hero, footer { padding-left: 1.5rem; padding-right: 1.5rem; }
     .project-row { flex-direction: column; gap: 0.25rem; }
     .project-row-tags { margin-left: 0; }
   }
@@ -303,7 +306,7 @@ <h2>${sec.title}</h2>
 
   $('#tab-research').innerHTML = `
     <div class="page-intro"><h1>Research</h1><p>${D.research.intro}</p></div>
-    <div class="sections-overview">${panels}</div>${drawers}`;
+    <div class="sections-overview">${panels}${drawers}</div>`;
 
   // PUBLICATIONS
   $('#tab-publications').innerHTML = `