diff --git a/stylesheet.css b/stylesheet.css index 315adb8..9f50d78 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -70,3 +70,85 @@ a:focus-visible { /*če klikneš Tab se okoli naslova pojavi obroč da veša kaj outline: 0.15rem solid var(--barva-dodatna); outline-offset: 0.2rem; } + +/* glava in navigacija */ + +.site_header { + position: sticky; /*da tudi ko scrollas dol ostane viden */ + top: 0; + z-index: 1000; /* element je čisto odspredaj, no je pred elementi >1000, če bi pa dala nekemu elementu index 1001 bi bil pa ta prikazan nad tem */ + + background-color: var(--barva-ozadje); + box-shadow: var(--senca-kartice); /*dodana senca za malo globine, bolj zaradi lepega kot karkoli drugega, no pa za to da se loči od ozadja kr sta iste barve */ +} + +.nav_bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + + width: 100%; + max-width: 1100px; + min-height: 6rem; + margin: 0 auto; + padding: 0.5rem 1rem; +} + +.logo { + display: flex; + align-items: center; + gap: 0.75rem; + + color: var(--barva-besedilo); + font-family: "Fraunces", serif; + font-size: 1.2rem; + font-weight: 700; + text-decoration: none; +} + +.logo br { + display: none; /* da slucajno nebi uničili vodoravne postavitve logotipa */ +} + +.logo img { + display: block; + width: 5rem; + height: auto; +} + +.main_menu { + display: flex; + align-items: center; + justify-content: flex-end; + flex-wrap: wrap; + gap: 0.35rem; + + margin: 0; + padding: 0; + list-style: none; +} + +.main_menu a { + display: block; + padding: 0.6rem 0.8rem; + border-radius: 0.4rem; + + color: var(--barva-besedilo); + font-size: 0.95rem; + font-weight: 600; + text-decoration: none; + + transition: background-color 0.2s ease; +} + +.main_menu a:hover { + background-color: var(--barva-dodatna); +} + +.main_menu a.active { + background-color: var(--barva-poudarek); + color: var(--barva-besedilo-na-temnem); +} + +