Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
| excursions [2026/09/26 00:52] – ayush | excursions [2026/09/27 17:30] (current) – ayush | ||
|---|---|---|---|
| Line 3: | Line 3: | ||
| ~~ | ~~ | ||
| - | <html> | + | <met text align=" |
| - | < | + | ===== External Research Stays ===== |
| - | <style> | + | </met> |
| - | :root { | + | |
| - | --card-gap: 28px; | + | |
| - | --card-image-height: | + | |
| - | --card-border-radius: | + | |
| - | --transition-smooth: | + | |
| - | } | + | |
| - | .research-container { | + | <met |
| - | | + | card-grid |
| - | | + | |
| - | | + | min-card-width=" |
| - | } | + | gap=" |
| + | sort=" | ||
| + | sort-by=" | ||
| + | sort-type=" | ||
| + | card-defaults=' | ||
| + | > | ||
| + | <met | ||
| + | | ||
| + | image=" | ||
| + | | ||
| + | title=" | ||
| + | subtitle=" | ||
| + | href=" | ||
| + | | ||
| + | > | ||
| + | <met card-section variant=" | ||
| + | Kochi University of Technology, Japan | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 16.06.2019 – 28.06.2019 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | .research-grid { | + | <met |
| - | | + | |
| - | | + | |
| - | | + | alt=" |
| - | align-items: start; | + | title=" |
| - | } | + | subtitle=" |
| + | | ||
| + | data-start-date=" | ||
| + | > | ||
| + | < | ||
| + | NASA Goddard Institute for Space Studies, New York, USA | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | Winter Term 2019/2020 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | .research-card { | + | <met |
| - | | + | |
| - | | + | |
| - | box-shadow: | + | alt=" |
| - | 0 1px 3px rgba(0, 0, 0, 0.02), | + | title=" |
| - | 0 3px 6px rgba(0, 0, 0, 0.03), | + | subtitle=" |
| - | 0 6px 12px rgba(0, 0, 0, 0.04), | + | |
| - | 0 12px 24px rgba(0, 0, 0, 0.04), | + | data-start-date=" |
| - | inset 0 0 0 1px rgba(255, 255, 255, 0.3); | + | > |
| + | <met card-section variant=" | ||
| + | École Polytechnique Fédérale de Lausanne | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 27.02.2023 – 27.03.2023 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | transition: | + | <met |
| - | | + | card |
| - | box-shadow 0.28s var(--transition-smooth), | + | image=" |
| - | | + | alt=" |
| + | | ||
| + | subtitle=" | ||
| + | | ||
| + | data-start-date=" | ||
| + | > | ||
| + | <met card-section variant=" | ||
| + | École Polytechnique Fédérale de Lausanne (EPFL), Switzerland | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 11.06.2023 – 30.06.2023 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | box-sizing: border-box; | + | <met |
| - | | + | card |
| - | | + | image=" |
| - | | + | |
| + | | ||
| + | | ||
| + | href=" | ||
| + | data-start-date=" | ||
| + | > | ||
| + | <met card-section variant=" | ||
| + | University of Oklahoma, USA | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 24.10.2023 – 08.11.2023 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | display: flex; | + | <met |
| - | | + | card |
| + | image=" | ||
| + | | ||
| + | title=" | ||
| + | subtitle=" | ||
| + | href=" | ||
| + | data-start-date=" | ||
| + | > | ||
| + | <met card-section variant=" | ||
| + | Ludwig-Maximilians-University of Munich (LMU), Germany | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 13.11.2023 – 17.11.2023 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | opacity: 0; | + | <met |
| - | | + | card |
| - | } | + | image=" |
| + | | ||
| + | title=" | ||
| + | subtitle=" | ||
| + | href=" | ||
| + | data-start-date=" | ||
| + | > | ||
| + | <met card-section variant=" | ||
| + | Deutscher Wetterdienst | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 21.10.2024 – 25.10.2024 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | .research-card.visible { | + | <met |
| - | | + | card |
| - | | + | image=" |
| - | } | + | |
| + | | ||
| + | subtitle=" | ||
| + | href=" | ||
| + | data-start-date=" | ||
| + | > | ||
| + | <met card-section variant=" | ||
| + | Johannes Gutenberg University of Mainz, Germany | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 28.07.2025 – 01.08.2025 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | .research-card:hover { | + | <met |
| - | | + | card |
| - | | + | image=" |
| - | 0 2px 4px rgba(0, 0, 0, 0.03), | + | |
| - | 0 4px 8px rgba(0, 0, 0, 0.04), | + | title=" |
| - | 0 8px 16px rgba(0, 0, 0, 0.05), | + | subtitle=" |
| - | 0 16px 32px rgba(0, 0, 0, 0.06), | + | |
| - | inset 0 0 0 1px rgba(255, 255, 255, 0.4); | + | |
| - | } | + | > |
| + | <met card-section variant=" | ||
| + | University of Helsinki, Finland | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 21.09.2025 – 19.10.2025 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | .research-card .img-wrapper { | + | <met |
| - | | + | card |
| - | | + | image=" |
| - | | + | alt=" |
| - | | + | |
| - | | + | |
| - | flex-shrink: 0; | + | |
| - | } | + | data-start-date=" |
| + | > | ||
| + | < | ||
| + | Ludwig-Maximilians-University of Munich (LMU), Germany | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | 13.07.2026 – 24.07.2026 | ||
| + | </ | ||
| + | <met card-section variant=" | ||
| + | PROM Network Funds | ||
| + | </ | ||
| + | </ | ||
| - | .research-card img { | + | </met> |
| - | width: 100%; | + | |
| - | height: 100%; | + | |
| - | object-fit: fill; | + | |
| - | margin: 0; | + | |
| - | display: block; | + | |
| - | transition: | + | |
| - | transform 0.32s var(--transition-smooth), | + | |
| - | opacity 0.3s ease-out; | + | |
| - | opacity: 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card img.loaded { | + | |
| - | opacity: 1; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .img-wrapper:: | + | |
| - | content: ''; | + | |
| - | position: absolute; | + | |
| - | inset: 0; | + | |
| - | background: linear-gradient( | + | |
| - | 90deg, | + | |
| - | rgba(255, 255, 255, 0) 0%, | + | |
| - | rgba(255, 255, 255, 0.3) 50%, | + | |
| - | rgba(255, 255, 255, 0) 100% | + | |
| - | ); | + | |
| - | animation: skeleton-loading 1.5s infinite; | + | |
| - | opacity: 1; | + | |
| - | transition: opacity 0.3s ease-out; | + | |
| - | pointer-events: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card img.loaded ~ .img-wrapper:: | + | |
| - | .research-card .img-wrapper.loaded:: | + | |
| - | opacity: 0; | + | |
| - | } | + | |
| - | + | ||
| - | @keyframes skeleton-loading { | + | |
| - | 0% { transform: translateX(-100%); | + | |
| - | 100% { transform: translateX(100%); | + | |
| - | } | + | |
| - | + | ||
| - | .research-card: | + | |
| - | transform: scale(1.012); | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-header { | + | |
| - | padding: 16px 20px; | + | |
| - | display: flex; | + | |
| - | flex-direction: | + | |
| - | gap: 2px; | + | |
| - | flex-shrink: | + | |
| - | min-height: 70px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .researcher-name { | + | |
| - | margin: 0; | + | |
| - | padding: 0; | + | |
| - | font-size: 1.08rem; | + | |
| - | line-height: | + | |
| - | font-weight: | + | |
| - | color: #0d1829; | + | |
| - | letter-spacing: | + | |
| - | transition: color 0.24s ease; | + | |
| - | word-break: break-word; | + | |
| - | display: inline; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation { | + | |
| - | margin: 0; | + | |
| - | padding: 0; | + | |
| - | font-size: 0.875rem; | + | |
| - | line-height: | + | |
| - | font-weight: | + | |
| - | font-style: normal; | + | |
| - | color: #0d1829; /* #4a5568 */ | + | |
| - | letter-spacing: | + | |
| - | word-break: break-word; | + | |
| - | display: inline; | + | |
| - | pointer-events: | + | |
| - | user-select: | + | |
| - | cursor: text; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation:: | + | |
| - | content: ' ('; | + | |
| - | opacity: 1; | + | |
| - | font-style: normal; | + | |
| - | pointer-events: | + | |
| - | user-select: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation:: | + | |
| - | content: ' | + | |
| - | opacity: 1; | + | |
| - | font-style: normal; | + | |
| - | pointer-events: | + | |
| - | user-select: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card a:hover .researcher-name { | + | |
| - | color: #2563eb; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card a:hover .affiliation { | + | |
| - | /*color: # | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-metadata { | + | |
| - | padding: 0 20px 18px 20px; | + | |
| - | display: flex; | + | |
| - | flex-direction: | + | |
| - | gap: 0; | + | |
| - | flex-shrink: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-row { | + | |
| - | display: grid; | + | |
| - | grid-template-columns: | + | |
| - | gap: 12px; | + | |
| - | align-items: | + | |
| - | margin: 0; | + | |
| - | padding: 6px 0; | + | |
| - | font-size: 0.875rem; | + | |
| - | line-height: | + | |
| - | letter-spacing: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-label { | + | |
| - | color: #0d1829; / | + | |
| - | font-weight: | + | |
| - | white-space: | + | |
| - | overflow: hidden; | + | |
| - | text-overflow: | + | |
| - | letter-spacing: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-value { | + | |
| - | color: #3d4756; | + | |
| - | font-weight: | + | |
| - | word-wrap: break-word; | + | |
| - | overflow-wrap: | + | |
| - | hyphens: auto; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card > a { | + | |
| - | text-decoration: | + | |
| - | color: inherit; | + | |
| - | display: contents; | + | |
| - | } | + | |
| - | + | ||
| - | /* Large desktops */ | + | |
| - | @media (min-width: 1601px) { | + | |
| - | .research-grid { | + | |
| - | grid-template-columns: | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Medium to large desktops */ | + | |
| - | @media (max-width: 1600px) and (min-width: 1281px) { | + | |
| - | .research-grid { | + | |
| - | grid-template-columns: | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Small desktops and large tablets landscape */ | + | |
| - | @media (max-width: 1280px) and (min-width: 1025px) { | + | |
| - | .research-grid { | + | |
| - | grid-template-columns: | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Tablets and small laptops */ | + | |
| - | @media (max-width: 1024px) and (min-width: 769px) { | + | |
| - | :root { | + | |
| - | --card-gap: 24px; | + | |
| - | --card-image-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-grid { | + | |
| - | grid-template-columns: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-header { | + | |
| - | padding: 15px 18px; | + | |
| - | min-height: 75px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .researcher-name { | + | |
| - | font-size: 1.04rem; | + | |
| - | line-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation { | + | |
| - | font-size: 0.78rem; | + | |
| - | line-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-row { | + | |
| - | grid-template-columns: | + | |
| - | gap: 10px; | + | |
| - | font-size: 0.865rem; | + | |
| - | padding: 5px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-metadata { | + | |
| - | padding: 0 18px 16px 18px; | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Mobile landscape and small tablets */ | + | |
| - | @media (max-width: 768px) and (min-width: 481px) { | + | |
| - | :root { | + | |
| - | --card-gap: 20px; | + | |
| - | --card-image-height: | + | |
| - | --card-border-radius: | + | |
| - | } | + | |
| - | + | ||
| - | .research-container { | + | |
| - | max-width: 95%; | + | |
| - | padding: 16px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-grid { | + | |
| - | grid-template-columns: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-header { | + | |
| - | padding: 14px 16px; | + | |
| - | min-height: auto; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .researcher-name { | + | |
| - | font-size: 1.02rem; | + | |
| - | line-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation { | + | |
| - | font-size: 0.76rem; | + | |
| - | line-height: | + | |
| - | color: #5a6575; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-row { | + | |
| - | grid-template-columns: | + | |
| - | gap: 10px; | + | |
| - | font-size: 0.85rem; | + | |
| - | padding: 5px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-metadata { | + | |
| - | padding: 0 16px 15px 16px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card: | + | |
| - | transform: translateY(-3px); | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Mobile portrait */ | + | |
| - | @media (max-width: 480px) { | + | |
| - | :root { | + | |
| - | --card-gap: 16px; | + | |
| - | --card-image-height: | + | |
| - | --card-border-radius: | + | |
| - | } | + | |
| - | + | ||
| - | .research-container { | + | |
| - | max-width: 96%; | + | |
| - | padding: 12px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-grid { | + | |
| - | grid-template-columns: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-header { | + | |
| - | padding: 12px 14px; | + | |
| - | min-height: auto; | + | |
| - | gap: 1px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .researcher-name { | + | |
| - | font-size: 0.98rem; | + | |
| - | line-height: | + | |
| - | letter-spacing: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation { | + | |
| - | font-size: 0.72rem; | + | |
| - | line-height: | + | |
| - | color: #5a6575; | + | |
| - | font-weight: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-row { | + | |
| - | grid-template-columns: | + | |
| - | gap: 8px; | + | |
| - | font-size: 0.825rem; | + | |
| - | padding: 4px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-label { | + | |
| - | font-size: 0.815rem; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-value { | + | |
| - | font-size: 0.815rem; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-metadata { | + | |
| - | padding: 0 14px 13px 14px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card: | + | |
| - | transform: translateY(-2px); | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Very small mobile devices */ | + | |
| - | @media (max-width: 360px) { | + | |
| - | :root { | + | |
| - | --card-gap: 14px; | + | |
| - | --card-image-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-container { | + | |
| - | max-width: 98%; | + | |
| - | padding: 10px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-header { | + | |
| - | padding: 11px 12px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .researcher-name { | + | |
| - | font-size: 0.94rem; | + | |
| - | line-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation { | + | |
| - | font-size: 0.70rem; | + | |
| - | line-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-row { | + | |
| - | grid-template-columns: | + | |
| - | gap: 7px; | + | |
| - | font-size: 0.80rem; | + | |
| - | padding: 4px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-label { | + | |
| - | font-size: 0.79rem; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-value { | + | |
| - | font-size: 0.79rem; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-metadata { | + | |
| - | padding: 0 12px 12px 12px; | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Accessibility: | + | |
| - | @media (prefers-reduced-motion: | + | |
| - | .research-card, | + | |
| - | .research-card img, | + | |
| - | .research-card .researcher-name, | + | |
| - | .research-card .affiliation, | + | |
| - | .research-card a, | + | |
| - | .research-card .img-wrapper:: | + | |
| - | transition: none; | + | |
| - | animation: none; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card: | + | |
| - | transform: none; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card: | + | |
| - | transform: none; | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Accessibility: | + | |
| - | @media (prefers-contrast: | + | |
| - | .research-card { | + | |
| - | border: 2px solid #475569; | + | |
| - | box-shadow: none; | + | |
| - | background: #e8eaed; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .researcher-name { | + | |
| - | color: #020617; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation { | + | |
| - | color: #1e293b; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation:: | + | |
| - | .research-card .affiliation:: | + | |
| - | opacity: 1; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-label { | + | |
| - | color: #334155; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-value { | + | |
| - | color: #1e293b; | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Touch device optimizations */ | + | |
| - | @media (hover: none) and (pointer: coarse) { | + | |
| - | .research-card { | + | |
| - | transition: | + | |
| - | box-shadow 0.28s var(--transition-smooth), | + | |
| - | opacity 0.4s ease-out; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card: | + | |
| - | box-shadow: | + | |
| - | 0 1px 2px rgba(0, 0, 0, 0.04), | + | |
| - | 0 2px 4px rgba(0, 0, 0, 0.05), | + | |
| - | 0 4px 8px rgba(0, 0, 0, 0.06), | + | |
| - | inset 0 0 0 1px rgba(255, 255, 255, 0.35); | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-header { | + | |
| - | padding: 15px; | + | |
| - | min-height: 44px; /* Minimum touch target size */ | + | |
| - | } | + | |
| - | + | ||
| - | .research-card > a { | + | |
| - | display: block; | + | |
| - | min-height: 44px; /* Ensure adequate touch target */ | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Landscape orientation on mobile */ | + | |
| - | @media (max-width: 768px) and (orientation: | + | |
| - | :root { | + | |
| - | --card-image-height: | + | |
| - | } | + | |
| - | + | ||
| - | .research-container { | + | |
| - | padding: 12px 0; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .card-header { | + | |
| - | padding: 12px 14px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .metadata-row { | + | |
| - | padding: 4px 0; | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | /* Print styles */ | + | |
| - | @media print { | + | |
| - | .research-container { | + | |
| - | max-width: 100%; | + | |
| - | } | + | |
| - | + | ||
| - | .research-grid { | + | |
| - | grid-template-columns: | + | |
| - | gap: 16px; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card { | + | |
| - | break-inside: | + | |
| - | box-shadow: none; | + | |
| - | border: 1px solid #ddd; | + | |
| - | page-break-inside: | + | |
| - | } | + | |
| - | + | ||
| - | .research-card: | + | |
| - | transform: none; | + | |
| - | box-shadow: none; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .researcher-name { | + | |
| - | color: #000; | + | |
| - | } | + | |
| - | + | ||
| - | .research-card .affiliation { | + | |
| - | color: #333; | + | |
| - | } | + | |
| - | } | + | |
| - | </ | + | |
| - | </ | + | |
| - | < | + | |
| - | <div class=" | + | |
| - | <h2 class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | <!-- Martin Radenz --> | + | |
| - | <div class=" | + | |
| - | <a href=" | + | |
| - | <div class=" | + | |
| - | <img | + | |
| - | data-src=" | + | |
| - | alt=" | + | |
| - | loading=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | <div class=" | + | |
| - | <span class=" | + | |
| - | <span class=" | + | |
| - | </ | + | |
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | </ | + | |
| - | </ | + | |
| - | + | ||
| - | < | + | |
| - | (function() { | + | |
| - | 'use strict'; | + | |
| - | + | ||
| - | class CardAlignmentController { | + | |
| - | constructor(gridSelector = ' | + | |
| - | this.grid = document.querySelector(gridSelector); | + | |
| - | if (!this.grid) { | + | |
| - | console.error(' | + | |
| - | return; | + | |
| - | } | + | |
| - | + | ||
| - | this.cards = Array.from(this.grid.querySelectorAll(' | + | |
| - | this.resizeObserver = null; | + | |
| - | this.resizeTimeout = null; | + | |
| - | + | ||
| - | this.init(); | + | |
| - | } | + | |
| - | + | ||
| - | init() { | + | |
| - | if (document.fonts && document.fonts.ready) { | + | |
| - | document.fonts.ready.then(() => this.alignCards()); | + | |
| - | } else { | + | |
| - | this.alignCards(); | + | |
| - | } | + | |
| - | + | ||
| - | if (' | + | |
| - | this.resizeObserver = new ResizeObserver(() => { | + | |
| - | clearTimeout(this.resizeTimeout); | + | |
| - | this.resizeTimeout = setTimeout(() => this.alignCards(), | + | |
| - | }); | + | |
| - | this.resizeObserver.observe(this.grid); | + | |
| - | } else { | + | |
| - | window.addEventListener(' | + | |
| - | clearTimeout(this.resizeTimeout); | + | |
| - | this.resizeTimeout = setTimeout(() => this.alignCards(), | + | |
| - | }); | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | getColumnCount() { | + | |
| - | const gridStyle = window.getComputedStyle(this.grid); | + | |
| - | const columns = gridStyle.gridTemplateColumns.split(' | + | |
| - | return columns; | + | |
| - | } | + | |
| - | + | ||
| - | groupCardsIntoRows(columnCount) { | + | |
| - | const rows = []; | + | |
| - | for (let i = 0; i < this.cards.length; | + | |
| - | rows.push(this.cards.slice(i, | + | |
| - | } | + | |
| - | return rows; | + | |
| - | } | + | |
| - | + | ||
| - | alignCards() { | + | |
| - | if (!this.cards.length) return; | + | |
| - | + | ||
| - | const columnCount = this.getColumnCount(); | + | |
| - | + | ||
| - | if (columnCount === 1) { | + | |
| - | this.cards.forEach(card => { | + | |
| - | card.style.minHeight = ''; | + | |
| - | const header = card.querySelector(' | + | |
| - | if (header) header.style.minHeight = ''; | + | |
| - | card.querySelectorAll(' | + | |
| - | row.style.minHeight = ''; | + | |
| - | }); | + | |
| - | }); | + | |
| - | return; | + | |
| - | } | + | |
| - | + | ||
| - | const rows = this.groupCardsIntoRows(columnCount); | + | |
| - | rows.forEach(rowCards => this.alignRow(rowCards)); | + | |
| - | } | + | |
| - | + | ||
| - | alignRow(rowCards) { | + | |
| - | rowCards.forEach(card => { | + | |
| - | card.style.minHeight = ''; | + | |
| - | const header = card.querySelector(' | + | |
| - | if (header) header.style.minHeight = ''; | + | |
| - | card.querySelectorAll(' | + | |
| - | row.style.minHeight = ''; | + | |
| - | }); | + | |
| - | }); | + | |
| - | + | ||
| - | void this.grid.offsetHeight; | + | |
| - | + | ||
| - | requestAnimationFrame(() => { | + | |
| - | const headers = rowCards.map(card => card.querySelector(' | + | |
| - | const headerHeights = headers.map(h => h ? h.getBoundingClientRect().height : 0); | + | |
| - | const maxHeaderHeight = Math.max(...headerHeights); | + | |
| - | + | ||
| - | headers.forEach(header => { | + | |
| - | if (header) header.style.minHeight = `${maxHeaderHeight}px`; | + | |
| - | }); | + | |
| - | + | ||
| - | requestAnimationFrame(() => { | + | |
| - | const metadataRowCount = 3; | + | |
| - | + | ||
| - | for (let rowIndex = 0; rowIndex < metadataRowCount; | + | |
| - | const metadataRows = rowCards.map(card => | + | |
| - | card.querySelector(`.metadata-row[data-row-index=" | + | |
| - | ); | + | |
| - | + | ||
| - | const rowHeights = metadataRows.map(row => | + | |
| - | row ? row.getBoundingClientRect().height : 0 | + | |
| - | ); | + | |
| - | const maxRowHeight = Math.max(...rowHeights); | + | |
| - | + | ||
| - | metadataRows.forEach(row => { | + | |
| - | if (row) row.style.minHeight = `${maxRowHeight}px`; | + | |
| - | }); | + | |
| - | } | + | |
| - | + | ||
| - | requestAnimationFrame(() => { | + | |
| - | const cardHeights = rowCards.map(card => | + | |
| - | card.getBoundingClientRect().height | + | |
| - | ); | + | |
| - | const maxCardHeight = Math.max(...cardHeights); | + | |
| - | + | ||
| - | rowCards.forEach(card => { | + | |
| - | card.style.minHeight = `${maxCardHeight}px`; | + | |
| - | }); | + | |
| - | }); | + | |
| - | }); | + | |
| - | }); | + | |
| - | } | + | |
| - | + | ||
| - | destroy() { | + | |
| - | if (this.resizeObserver) { | + | |
| - | this.resizeObserver.disconnect(); | + | |
| - | } | + | |
| - | clearTimeout(this.resizeTimeout); | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | const cardObserver = new IntersectionObserver((entries) => { | + | |
| - | entries.forEach((entry, | + | |
| - | if (entry.isIntersecting) { | + | |
| - | setTimeout(() => { | + | |
| - | entry.target.classList.add(' | + | |
| - | }, index * 40); | + | |
| - | cardObserver.unobserve(entry.target); | + | |
| - | } | + | |
| - | }); | + | |
| - | }, { | + | |
| - | threshold: 0.1, | + | |
| - | rootMargin: ' | + | |
| - | }); | + | |
| - | + | ||
| - | const imageObserver = new IntersectionObserver((entries) => { | + | |
| - | entries.forEach(entry => { | + | |
| - | if (entry.isIntersecting) { | + | |
| - | const img = entry.target; | + | |
| - | const wrapper = img.parentElement; | + | |
| - | + | ||
| - | img.src = img.dataset.src; | + | |
| - | + | ||
| - | img.addEventListener(' | + | |
| - | img.classList.add(' | + | |
| - | wrapper.classList.add(' | + | |
| - | + | ||
| - | if (window.cardAlignment) { | + | |
| - | window.cardAlignment.alignCards(); | + | |
| - | } | + | |
| - | }, { once: true }); | + | |
| - | + | ||
| - | img.addEventListener(' | + | |
| - | wrapper.classList.add(' | + | |
| - | console.warn(' | + | |
| - | }, { once: true }); | + | |
| - | + | ||
| - | imageObserver.unobserve(img); | + | |
| - | } | + | |
| - | }); | + | |
| - | }, { | + | |
| - | threshold: 0.01, | + | |
| - | rootMargin: ' | + | |
| - | }); | + | |
| - | + | ||
| - | function init() { | + | |
| - | window.cardAlignment = new CardAlignmentController(' | + | |
| - | + | ||
| - | const cards = document.querySelectorAll(' | + | |
| - | const images = document.querySelectorAll(' | + | |
| - | + | ||
| - | cards.forEach(card => cardObserver.observe(card)); | + | |
| - | images.forEach(img => imageObserver.observe(img)); | + | |
| - | } | + | |
| - | + | ||
| - | if (document.readyState === ' | + | |
| - | document.addEventListener(' | + | |
| - | } else { | + | |
| - | init(); | + | |
| - | } | + | |
| - | })(); | + | |
| - | </ | + | |
| - | </ | + | |
| - | </html> | + | |