Poprawki Notion w JustZix — szersze strony, fonty i tryb skupienia
Notion jest elastyczny w treści, ale sztywny w wyglądzie. Wąska kolumna tekstu, jeden font, brak trybu skupienia, bazy danych zlewające się w jedną szarą plamę. Tego nie zmienisz w ustawieniach — ale możesz to zmienić jedną regułą CSS w JustZix. Ten poradnik pokazuje sześć poprawek, które realnie zmieniają codzienną pracę w Notion, każda jako gotowy do wklejenia fragment.
Dlaczego CSS, a nie ustawienia Notion
Notion celowo trzyma wygląd pod kontrolą — chce, by każda strona wyglądała tak samo na każdym urządzeniu. To rozsądne dla zespołu, ale frustrujące, gdy masz monitor 27 cali i tekst zajmuje jedną trzecią ekranu. JustZix nakłada twój CSS na notion.so po stronie przeglądarki: Notion nic nie wie o zmianie, a ty widzisz swój układ. Reguła jest ograniczona do domeny, więc działa wszędzie — w prywatnym workspace i firmowym — bez dotykania konta.
Szersze strony i pełna szerokość
Notion ma przełącznik „pełna szerokość” na poziomie strony, ale trzeba go włączać ręcznie na każdej. Reguła CSS robi to globalnie i pozwala dobrać własną maksymalną szerokość:
/* Szersza kolumna treści na każdej stronie Notion */
.notion-page-content {
max-width: 1100px !important;
width: 100% !important;
}
/* Nagłówek (cover, tytuł) równa się z treścią */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
max-width: 1100px !important;
}Ustaw max-width na to, co pasuje do twojego monitora — 900 px to wygodne czytanie, 1300 px to wariant tabelaryczny. Selektor .notion-page-content obejmuje zarówno zwykłe strony, jak i strony bazy danych otwarte jako rekord.
Tryb skupienia — ukryj sidebar i topbar
Gdy piszesz dłuższy dokument, lewy panel i górna belka tylko rozpraszają. Tryb skupienia chowa oba elementy i daje treści cały ekran:
/* Tryb skupienia: chowa nawigację boczną i górną belkę */
.notion-sidebar-container {
display: none !important;
}
.notion-topbar {
opacity: 0;
transition: opacity .2s ease;
}
.notion-topbar:hover {
opacity: 1;
}
/* Treść przejmuje miejsce po ukrytym sidebarze */
.notion-frame {
margin-left: 0 !important;
}Górna belka nie znika całkowicie — robi się przezroczysta i wraca, gdy najedziesz myszą, więc nadal masz dostęp do menu „Share” czy historii. Trzymaj tę poprawkę jako osobną regułę i przełączaj ją z paska akcji, gdy chcesz wrócić do pełnej nawigacji.
Własny font i interlinia
Notion oferuje trzy fonty. Jeśli wolisz konkretny krój systemowy albo po prostu większą interlinię do długiego czytania, nadpisz to bezpośrednio:
/* Własny font i luźniejsza interlinia w treści */
.notion-page-content,
.notion-page-content [placeholder] {
font-family: "Charter", "Iowan Old Style", Georgia, serif !important;
line-height: 1.7 !important;
font-size: 17px !important;
}
/* Nagłówki zostają bezszeryfowe dla kontrastu */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
font-family: "Inter", system-ui, sans-serif !important;
}Ostylowane bloki callout i cytaty
Domyślne calloutu i cytaty w Notion są dyskretne aż do niewidzialności. Wzmocnij je, by realnie przyciągały wzrok:
/* Wyrazistsze bloki callout */
.notion-callout-block {
border-left: 4px solid #2f6fed !important;
border-radius: 6px;
background: rgba(47,111,237,.07) !important;
}
/* Cytaty z większym, miękkim akcentem */
.notion-quote-block {
border-left: 4px solid #888 !important;
font-style: italic;
padding-left: 16px !important;
}
/* Bloki toggle z czytelniejszym trójkątem */
.notion-toggle-block > div:first-child {
font-weight: 600;
}Bazy danych — zebra i lepkie nagłówki
Długie tabele baz danych trudno śledzić wzrokiem. Naprzemienne paski na wierszach i przyklejony nagłówek przy przewijaniu rozwiązują oba problemy:
/* Paski zebra w widoku tabeli */
.notion-collection-item:nth-child(even) {
background: rgba(0,0,0,.035) !important;
}
/* Lepki nagłówek tabeli przy przewijaniu */
.notion-table-view-header-row,
.notion-collection-view-header {
position: sticky !important;
top: 0;
z-index: 5;
background: var(--bg, #fff) !important;
}
/* Wyraźniejsza linia pod nagłówkiem */
.notion-table-view-header-row {
border-bottom: 2px solid #ccc !important;
}Ukrywanie komentarzy i poprawki bloków kodu
Wątki komentarzy bywają przydatne, ale na stronie referencyjnej tylko zaśmiecają margines. Bloki kodu z kolei zyskują na większym, monospaceowym kroju:
/* Ukryj wątki komentarzy na marginesie */
.notion-discussion,
[class*="comment-thread"] {
display: none !important;
}
/* Czytelniejsze bloki kodu */
.notion-code-block {
font-family: "JetBrains Mono", "Fira Code", monospace !important;
font-size: 14px !important;
border-radius: 8px;
background: #1e1e2e !important;
}
.notion-code-block code {
line-height: 1.55 !important;
}Jeśli wolisz tylko zwinąć komentarze zamiast je ukrywać, zamień regułę JS, która na document_idle klika przyciski zwijania — ale dla większości stron statyczne display: none wystarczy.
Łączenie poprawek w zestaw
Każda poprawka powyżej działa samodzielnie, ale prawdziwa wygoda to trzymanie ich jako osobnych, nazwanych reguł: „Notion — szerokie strony”, „Notion — tryb skupienia”, „Notion — zebra w bazach”. Wtedy z paska akcji włączasz dokładnie to, czego potrzebujesz na danej stronie, a tryb skupienia wyłączasz jednym kliknięciem, gdy chcesz wrócić do nawigacji.
Gotowe reguły dla Notion znajdziesz w naszym katalogu — zobacz przykłady dla notion.so, skopiuj to, co ci pasuje, i dostrój pod swój monitor. Pobierz JustZix i przebuduj Notion pod siebie w kilka minut.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.