/* =========================================================================== 09 — RESPONSYWNOŚĆ Progi dobrane do TREŚCI, nie do modeli urządzeń: 1100 px — siedem pozycji nawigacji przestaje mieścić się w jednym wierszu 900 px — sygnatura, menu górne i konto przestają mieścić się obok siebie 767 px — kolumny boczne tracą sens, wiersze dwukolumnowe też 420 px — duże stopnie pisma przestają się mieścić w wierszu ⚠ ŁADOWANY JAKO OSTATNI. Przy równej szczegółowości wygrywa późniejszy arkusz — gdyby responsywność szła przed warstwami treści, nadpisywałyby ją. =========================================================================== */ /* --- ≤ 1100 px ------------------------------------------------------------ */ @media (max-width: 1100px) { .eos_menu_gora { gap: var(--eos-odstep-20); font-size: var(--eos-pismo-11); } .eos_menu_glowne { gap: var(--eos-odstep-18); } .eos_hero_tytul { font-size: 52px; } } /* --- ≤ 992 px: kolumny boczne schodzą pod treść --------------------------- */ @media (max-width: 992px) { .eos_dwie_kolumny, .eos_uklad_hero, .eos_uklad_kontakt { grid-template-columns: minmax(0, 1fr); gap: var(--eos-odstep-40); } /* Kolumna boczna przestaje być „przyklejona" — na wąskim ekranie przyklejenie zasłaniałoby treść. */ .eos_bok { position: static; } .eos_hero_prawa { align-items: flex-start; } .eos_okladka_foto { margin: 0; } } /* --- ≤ 900 px: nagłówek układa się pionowo -------------------------------- */ @media (max-width: 900px) { :root { --eos-margines: var(--eos-odstep-24); } .eos_naglowek_tresc { row-gap: var(--eos-odstep-12); } /* ⚠ ŻADNEGO `order`. Wcześniej ta reguła przestawiała menu górne i konto, przez co fokus klawiatury wędrował inaczej, niż wodzi wzrok (WCAG 2.4.3). Zamiast tego menu górne bierze pełną szerokość i ZAWIJA SIĘ w naturalnej kolejności — układ ten sam, kolejność zgodna. */ .eos_nawigacja_gora { flex: 0 0 100%; margin-left: 0; } .eos_nawigacja_konto { margin-left: 0; } .eos_nawigacja_konto::before { display: none; } .eos_sygnatura_podtytul { white-space: normal; } } /* --- ≤ 767 px: telefon ---------------------------------------------------- */ @media (max-width: 767px) { :root { --eos-margines: var(--eos-odstep-18); } /* Sekcje: mniej powietrza, żeby strona nie stała się nieskończona. */ .eos_sekcja { padding-top: var(--eos-odstep-44); padding-bottom: var(--eos-odstep-44); } .eos_hero_tresc { padding-top: var(--eos-odstep-40); padding-bottom: var(--eos-odstep-40); } .page { padding-bottom: var(--eos-odstep-44); } /* ⚠ `max-width: 15ch` Z DESKTOPU MUSI ZNIKNĄĆ. Na 390 px kolumna ma ok. 22 znaki, więc ograniczenie do 15 łamało tytuł wcześniej, niż wymusza to szerokość ekranu — powstawały „schodki" z jednym słowem w wierszu. */ .eos_hero_tytul { font-size: 34px; max-width: none; } .eos_naglowek { font-size: 30px; margin-bottom: var(--eos-odstep-28); } .eos_artykul_tytul { font-size: 30px; } /* ⚠ OKŁADKA MUSI SIĘ ZMIEŚCIĆ W PIERWSZYM EKRANIE. Przy 240 px hero miało 941 px wysokości przy oknie 820 — okładka, czyli najmocniejszy znak rozpoznawczy czasopisma, zaczynała się 12 px PONIŻEJ krawędzi ekranu i użytkownik telefonu nigdy jej nie widział bez przewijania. Zmierzone. */ .eos_okladka_foto { max-width: 190px; gap: var(--eos-odstep-12); } /* Hero oddycha mniej: na telefonie liczy się, ile treści widać od razu. */ .eos_hero_tresc { padding-top: var(--eos-odstep-32); padding-bottom: var(--eos-odstep-32); } .eos_hero_lewa { gap: var(--eos-odstep-16); } .eos_uklad_hero { gap: var(--eos-odstep-24); } .eos_hero_opis { font-size: var(--eos-pismo-15); } .eos_hero_etykieta { font-size: var(--eos-pismo-10); letter-spacing: var(--eos-swiatlo-24); } /* Przyciski hero na pełną szerokość — łatwiejsze do trafienia palcem. */ .eos_hero_akcje { flex-direction: column; align-items: stretch; } .eos_hero_akcje > * { text-align: center; } /* ══ NAWIGACJA MOBILNA ═══════════════════════════════════════════════ Nagłówek zwija się do JEDNEGO rzędu: sygnatura + przycisk. Wszystkie trzy grupy odsyłaczy (nawigacja główna, About/Access/…, konto) przenosi do panelu skrypt — patrz `menuMobilne()` w js/eos.js. ⚠ POWÓD JEST MIERZALNY, NIE ESTETYCZNY: przy dwóch grupach zostawionych na stałe w nagłówku pasek przyklejony do góry ekranu miał 194 px, czyli jedną trzecią ekranu telefonu 820 px — i to ZANIM zaczynała się treść. */ /* ⚠ SYGNATURA NIE MOŻE ZAJĄĆ CAŁEGO WIERSZA. Podtytuł („Commentarii Societatis Philologae Polonorum") jest długi: przy 390 px zajmował 317 z 354 dostępnych pikseli, więc przycisk „Menu" (98 px) nie mieścił się obok i SPADAŁ DO DRUGIEGO WIERSZA — nagłówek rósł z ~70 do 111 px, a przycisk lądował niżej, niż wskazuje na niego wzrok. Ograniczenie do połowy wiersza zawija podtytuł, zamiast rozpychać sygnaturę. */ .eos_sygnatura { max-width: 50%; } .eos_sygnatura_podtytul { white-space: normal; } /* ⚠ DOLNE WYPEŁNIENIE NAGŁÓWKA TYLKO W TRYBIE PANELU. Poza telefonem odstęp pod sygnaturą wnosi drugi rząd nawigacji (pozycje mają `padding: 13px 0`), dlatego `.eos_naglowek_tresc` ma `padding-bottom: 0`. Gdy rząd przenosi się do panelu, nic tego nie kompensuje: nad sygnaturą było 18 px, a pod podtytułem — ZMIERZONE — 1 px, czyli dwuwierszowy podtytuł stykał się z krawędzią nagłówka. ⚠ REGUŁA MUSI STAĆ W PROGU 767 px, NIE 900 px. Między 768 a 900 px drugi rząd wciąż jest w nagłówku i to wypełnienie dokładało się POD NIM — nagłówek rósł tam z 291 do 311 px. Sprawdzone pomiarem, nie założone. 20 px, a nie 18: ostatni wiersz kapitalików ma pod sobą część interlinii, więc odstęp równy górnemu wygląda optycznie na mniejszy. */ .eos_naglowek_tresc { padding-bottom: var(--eos-odstep-20); } .pkp_site_nav_toggle { display: inline-flex; margin-left: auto; } /* Panel jest nakładką na całe okno, nie rozwijanym pasem. Rozwijany pas spychał treść w dół tak, że po otwarciu menu na ekranie nie było już nic poza menu — a mimo to wyglądało to na przewinięcie strony, nie na otwarty panel. */ .eos_naglowek_rzad2 { display: none; position: fixed; inset: 0; z-index: 60; margin: 0; /* ⚠ DOLNE WYPEŁNIENIE MA BYĆ WIDOCZNE. Wcześniej zawartość panelu miała 825 px przy oknie 820, więc z 28 px odstępu pod ostatnią pozycją zostawały 23 — i ostatni odsyłacz przyklejał się do krawędzi ekranu. Miejsce na ten odstęp odzyskujemy niżej: kreska pod ostatnią pozycją każdej grupy jest zbędna (grupy i tak rozdziela odstęp), a same grupy stoją bliżej siebie. */ padding: var(--eos-odstep-14) var(--eos-margines) var(--eos-odstep-32); background: var(--eos-tlo); border-top: 0; overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: 0; } /* Kreska rysowana pseudoelementem na 100vw nie ma sensu w nakładce. */ .eos_naglowek_rzad2::before { content: none; } .eos_naglowek_rzad2.eos_menu_otwarte { display: flex; } /* Blokada przewijania tła pod otwartym panelem. */ body.eos_bez_przewijania { overflow: hidden; } .eos_panel_pasek { display: flex; align-items: center; justify-content: space-between; gap: var(--eos-odstep-16); padding-bottom: var(--eos-odstep-14); border-bottom: var(--eos-linia) solid var(--eos-atrament-14); margin-bottom: var(--eos-odstep-16); } /* Wszystkie trzy menu w panelu wyglądają tak samo: pełna szerokość, pozycje rozdzielone kreską, wysokość pola dotykowego ≥ 44 px. */ .eos_naglowek_rzad2 .eos_menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .eos_naglowek_rzad2 .eos_menu > li { width: 100%; } /* ⚠ 11 px, NIE 14. Pozycja ma wtedy 45 px wysokości — nadal powyżej progu 44 px na pole dotykowe, a siedem pozycji nawigacji głównej oddaje 42 px, dzięki czemu CAŁY panel (z wyszukiwarką, trzema grupami i przyciskiem konta) mieści się w ekranie 820 px bez przewijania. Wcześniej „Login" wypadał poniżej krawędzi. */ .eos_naglowek_rzad2 .eos_menu > li > a { display: block; padding: 11px 0; border-bottom: var(--eos-linia) solid var(--eos-atrament-08); white-space: normal; } /* Nawigacja główna jest w panelu pierwsza i najważniejsza — większy stopień pisma niż grupy pomocnicze. */ .eos_menu_glowne { font-size: var(--eos-pismo-14); } .eos_menu_glowne > li > a { border-bottom-width: 0; border-bottom: var(--eos-linia) solid var(--eos-atrament-12); } /* Grupy przeniesione ze rzędu 1 tracą swoje desktopowe odsunięcia. */ /* ⚠ `flex-direction: column` JEST TU KONIECZNE. Oba `