/* ========================================================================== Base Styles ========================================================================== */ /** * 1. Temeljni stili za celotno stran (box-sizing, osnovna pisava, barve). * 2. Definicija glavnega `.container` razreda za omejitev širine vsebine. * 3. Pravilo za preprečevanje drsenja strani, ko je mobilni meni odprt. */ /* 1. Temeljni stili */ /* NOVO: Globalno pravilo za box-sizing. To je ključno za preprečevanje težav s postavitvijo in horizontalnim drsenjem. Vsem elementom naroči, naj padding in border vključijo v svojo končno širino. */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { /* * POMEMBNO: Ta selektor naj ostane brez `overflow` pravil. * `overflow-x: hidden` na `` ali `` elementu preprečuje * pravilno delovanje `position: sticky`, ki ga uporablja stranska * vrstica v člankih. */ } body { font-family: 'Inter', sans-serif; margin: 0; background-color: #FFFFFF; color: #101828; /* `overflow-x: hidden;` je bil odstranjen, da omogoči pravilno delovanje `position: sticky`. */ } /* Pravilo za preprečevanje drsenja, ko je mobilni meni odprt. To je pravilno in ostane. */ html.nav-open, html.nav-open body { overflow: hidden; } /* 2. Glavni container */ .container { max-width: 1280px; /* Uporabi max-width namesto fiksne širine za boljšo odzivnost. */ width: 100%; /* Zagotovi, da vsebnik zavzame razpoložljivo širino do svoje maksimalne meje. */ margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 32px; /* box-sizing: border-box; -- to pravilo je zdaj globalno in ni več potrebno tukaj */ } /* ========================================================================== Mobile Base Styles ========================================================================== */ @media (max-width: 768px) { body { /* Odmik na vrhu telesa strani zaradi fiksne glave na mobilnih napravah. Ta stil je tukaj, ker vpliva na celotno stran. */ padding-top: 60px; } .container { width: 100%; padding: 0 24px; } }