1096 lines
23 KiB
CSS
1096 lines
23 KiB
CSS
/* spetna pisava*/
|
|
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
|
|
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
|
|
|
|
/* CSS barve pa oblike ki se bojo ponavljale da mi jih ne bo treba vsakic znova definirt bojo tuki, pa ce bo reba kej spremenit bo tudi lazje, ker samo na enem mestu spremenis */
|
|
:root {
|
|
--barva-ozadje: #F0E5D2; /*vse barve so vzete iz logotipa*/
|
|
--barva-besedilo: #45220E;
|
|
--barva-poudarek: #60552C; /*ta je tista malo bolj zelena*/
|
|
--barva-dodatna: #CE9550;
|
|
--barva-dodatna2:#F3E0C8;
|
|
--barva-dodatna3:#F8EFE1;
|
|
--barva-gumb3-besedilo: #F0E5D2;
|
|
|
|
|
|
--barva-kartice: #FFF9F0;
|
|
--barva-besedilo-na-temnem: #F0E5D2;
|
|
--barva-hero-prekrivna: rgba(69, 34, 14, 0.55);
|
|
--barva-senca: rgba(69, 34, 14, 0.18); /* uporabljena vrednost rgba da lahko nastavim še prosojnost a- alpha chanell za prosojnost */
|
|
|
|
--senca-kartice: 0 0.25rem 0.8rem var(--barva-senca); /*rem- relative unit of measurement, lažje prilagajanje, var- pa predstavlja vrednost definirano v root-u */
|
|
--zaobljenost: 0.75rem;
|
|
}
|
|
|
|
/*osnovne nastavitve */
|
|
|
|
* {
|
|
box-sizing: border-box; /* zvezdica pomeni da velja za vse. borer-box pa racunalnik izracuna da je v sirino vkljucen padding in border */
|
|
}
|
|
|
|
html {
|
|
font-size: 100%;
|
|
scroll-behavior: smooth; /* men se je osebno samo lepše zdel da kamorkoli prideš da je vmes scroll transition da ne mors kr jumpat iz elementa na element */
|
|
scroll-padding-top: 7rem; /* ko bom pri receptih uporabljala sidra in skakanje po strani "nazaj na vrh" da mi naslova ne bo prekrila glava, da bo vmes 7rem prostora */
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--barva-ozadje);
|
|
color: var(--barva-besedilo);
|
|
font-family: "Montserrat", sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
color: var(--barva-besedilo);
|
|
font-family: "Fraunces", serif;
|
|
line-height: 1.25; /*koliko je razmoke med vrsticami, če bi bilo 0 bi se besedila prekrivala */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
a {
|
|
color: var(--barva-poudarek);
|
|
}
|
|
|
|
a:focus-visible { /*če klikneš Tab se okoli naslova pojavi obroč da veša kaj je izbrano*/
|
|
outline: 0.15rem solid var(--barva-dodatna);
|
|
outline-offset: 0.2rem;
|
|
}
|
|
|
|
/*font awsome */
|
|
|
|
.fa-solid {
|
|
color: var(--barva-poudarek);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
header .fa-solid {
|
|
color: var(--barva-besedilo);
|
|
font-size: 1.2rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
header .active .fa-solid {
|
|
color: var(--barva-besedilo-na-temnem);
|
|
font-size: 1.2rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
footer .fa-solid {
|
|
color: var(--barva-besedilo-na-temnem);
|
|
font-size: 1rem;
|
|
padding-right: 0.3rem;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.hamburger_meni {
|
|
display: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.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_dark {
|
|
display: none !important;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* glavna vsebina in noga, na splosno*/
|
|
|
|
main {
|
|
width: 100%;
|
|
max-width: 1100px; /* da lahko stran malo diha, da ne zasede celega zaslona */
|
|
margin: 0 auto;
|
|
padding: 3rem 1.5rem 5rem;
|
|
}
|
|
|
|
footer {
|
|
padding: 2.5rem 1rem;
|
|
background-color: var(--barva-besedilo);
|
|
color: var(--barva-ozadje);
|
|
text-align: center;
|
|
}
|
|
|
|
footer address {
|
|
margin-bottom: 1rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--barva-dodatna);
|
|
}
|
|
|
|
footer p {
|
|
margin-bottom: 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* hero naslov */
|
|
|
|
.home_page .hero {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
min-height: 70vh; /* 1vh - 1% višine vidnega mesta, in pač ker se to vidno mesto razlikuje, je ta enota bolj responsive */
|
|
margin-bottom: 3rem;
|
|
padding: 3rem 1.5rem;
|
|
|
|
background-image:
|
|
linear-gradient(
|
|
var(--barva-hero-prekrivna),
|
|
var(--barva-hero-prekrivna) /*da je zmanjšana prosojnost slike ozadja, da tekst bolj "pade v oči" */
|
|
),
|
|
url("../slike/restavracija.png");
|
|
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
border-radius: var(--zaobljenost);
|
|
text-align: center;
|
|
}
|
|
|
|
.home_page .hero_vsebina {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
color: var(--barva-besedilo-na-temnem);
|
|
}
|
|
|
|
.home_page .hero h1 {
|
|
margin-top: 0;
|
|
color: var(--barva-besedilo-na-temnem);
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.home_page .hero p {
|
|
margin-bottom: 2rem;
|
|
color: var(--barva-besedilo-na-temnem);
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.gumb_osnovni {
|
|
display: inline-block;
|
|
padding: 0.85rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
|
|
background-color: var(--barva-dodatna);
|
|
color: var(--barva-besedilo);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
|
|
transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
|
|
}
|
|
|
|
.gumb_osnovni:hover {
|
|
background-color: var(--barva-poudarek);
|
|
color: var(--barva-besedilo-na-temnem);
|
|
}
|
|
|
|
/* opis restavracije */
|
|
|
|
.home_page .o_restavraciji {
|
|
max-width: 850px;
|
|
margin: 0 auto 4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.home_page .o_restavraciji h2,
|
|
.home_page .priljubljene_jedi > h2 {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* kartice priljubjenih jedi */
|
|
|
|
.home_page .priljubljene_jedi {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.home_page .priljubljene_jedi h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
.home_page .jedi_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)); /* fr je enota ki ti pove kolkšen delež prostora zavzeme, fraction, pač da se lahko samodejno razporedijo brez definiceije procentov */
|
|
align-items: stretch;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.home_page .jedi_card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
|
|
background-color: var(--barva-kartice);
|
|
border-radius: var(--zaobljenost);
|
|
box-shadow: var(--senca-kartice);
|
|
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.home_page .jedi_card:hover {
|
|
transform: translateY(-5px) scale(1.03); /*kartico premakne za 5px navzgor in se poveca za 3% */
|
|
box-shadow: 0 0.8rem 1.8rem var(--barva-senca); /*senca se ne premakne levo ali desno (0), senca se premakne malce navzdol (0.8), bolj razprsena senca (1.8, vec kot je bolj razprsena je), in pa seveda barva sence*/
|
|
}
|
|
|
|
.home_page .card_slika {
|
|
position: relative;
|
|
|
|
height: 200px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
.home_page .card_slika img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.home_page .card_slika figcaption {
|
|
display: none; /* da se imena ne podvajajo ker je figcaption v mojem primeru enak h3 jedi*/
|
|
}
|
|
|
|
.home_page .card_vsebina {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.home_page .card_vsebina h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.home_page .card_vsebina p {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/*značka novo */
|
|
|
|
.home_page .znacka_novo {
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
z-index: 1; /* da je postavljena čisto odspredaj */
|
|
|
|
padding: 0.3rem 0.75rem;
|
|
border-radius: 999px;
|
|
|
|
background-color: var(--barva-dodatna);
|
|
color: var(--barva-besedilo);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
|
|
/*jedilnik*/
|
|
.jedilnik_page {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 3rem 1.5rem 5rem;
|
|
}
|
|
|
|
/*uvod */
|
|
.jedilnik_uvod {
|
|
max-width: 750px;
|
|
text-align: center;
|
|
margin: 0 auto 4rem;
|
|
}
|
|
|
|
/* kategorije jedilnika */
|
|
|
|
#jedilnik {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
#jedilnik h2,
|
|
#jedilnik p {
|
|
text-align: center;
|
|
}
|
|
|
|
/* tabele jedilniov */
|
|
|
|
.jedilnik_page table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background-color: var(--barva-kartice);
|
|
border-radius: var(--zaobljenost);
|
|
overflow: hidden;
|
|
box-shadow: var(--barva-senca);
|
|
}
|
|
|
|
/* Preprečimo, da bi vsebina raztegnila stran */
|
|
.jedilnik_page, #jedilnik {
|
|
min-width: 0;
|
|
}
|
|
|
|
.filtri_jedilnika { /*da se prikazejo v vrsti */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.filter_gumb {
|
|
padding: 0.85rem 1.5rem;
|
|
border-radius: var(--zaobljenost);
|
|
border: 0.15rem solid var(--barva-besedilo);
|
|
outline: none;
|
|
color: var(--barva-besedilo);
|
|
text-decoration: none;
|
|
background-color: var(--barva-ozadje);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
|
|
.filter_gumb:hover {
|
|
background-color:var(--barva-kartice);
|
|
}
|
|
|
|
.filter_gumb.aktiven {
|
|
background-color: var(--barva-poudarek);
|
|
color: var(--barva-besedilo-na-temnem);
|
|
outline-color: var(--barva-poudarek);
|
|
}
|
|
|
|
#jedilnik {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Samo ta element omogoča vodoravno drsenje */
|
|
.tabela_scroll {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Tabela je lahko širša od svojega vsebnika */
|
|
.jedilnik_page .tabela_scroll table {
|
|
width: 100%;
|
|
min-width: 550px;
|
|
}
|
|
|
|
|
|
.jedilnik_page caption {
|
|
display: none;
|
|
}
|
|
|
|
.jedilnik_page th,
|
|
.jedilnik_page td {
|
|
padding: 1.1rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
|
|
}
|
|
.jedilnik_page thead {
|
|
background-color: var(--barva-poudarek);
|
|
color: var(--barva-besedilo-na-temnem);
|
|
}
|
|
|
|
.jedilnik_page th {
|
|
font-size:0.8rem ;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.jedilnik_page tbody {
|
|
border-bottom: 1px solid var(--barva-ozadje);
|
|
}
|
|
|
|
.jedilnik_page tbody tr :last-child {
|
|
border-bottom: none ;
|
|
}
|
|
|
|
.jedilnik_page tbody tr:nth-child(even) {
|
|
background-color: var(--barva-dodatna3);
|
|
}
|
|
|
|
.jedilnik_page tbody tr:hover {
|
|
background-color: var(--barva-dodatna2);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
/*imena jedi*/
|
|
|
|
.jedilnik_page td:first-child {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/*cene jedi */
|
|
.jedilnik_page th:last-child,
|
|
.jedilnik_page td:last-child {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.jedilnik_page td:last-child {
|
|
font-weight: 700;
|
|
color: var(--barva-poudarek);
|
|
}
|
|
|
|
/*recepti page*/
|
|
.recepti_page {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 3rem 1.5rem 5rem;
|
|
}
|
|
|
|
.recepti_page h1 {
|
|
text-align: center;
|
|
}
|
|
/*menu receptov*/
|
|
|
|
.seznam_receptov {
|
|
display: flex;
|
|
max-width: 1100px;
|
|
justify-content: center;
|
|
gap: 3.5rem;
|
|
list-style: none;
|
|
margin-top: 3rem;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.gumb_2 {
|
|
padding: 0.85rem 1.5rem;
|
|
border-radius: var(--zaobljenost);
|
|
outline: 0.15rem solid var(--barva-besedilo);
|
|
color: var(--barva-besedilo);
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
.gumb_2:hover {
|
|
background-color:var(--barva-kartice);
|
|
transition:0.2s;
|
|
}
|
|
|
|
|
|
/* kartice receptov */
|
|
.recepti_jedi {
|
|
margin: 2rem;
|
|
padding: 1.5rem;
|
|
background-color: var(--barva-kartice);
|
|
border-radius:var(--zaobljenost);
|
|
box-shadow: var(--senca-kartice);
|
|
}
|
|
|
|
.recepti_jedi h2 {
|
|
text-align:center;
|
|
}
|
|
|
|
.recepti_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
align-items: stretch;
|
|
gap: 0.5rem;
|
|
|
|
}
|
|
|
|
.o_receptu {
|
|
display:flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.recepti_slika {
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
position:relative;
|
|
min-height: 350px;
|
|
flex-shrink: 0;
|
|
margin:0;
|
|
}
|
|
|
|
.recepti_slika img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.recepti_slika figcaption {
|
|
display:none;
|
|
}
|
|
|
|
.recepti_info ul {
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 0rem;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.recepti_info li {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
max-width: 10rem;
|
|
}
|
|
|
|
.gumb_3 {
|
|
display: inline-block;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: var(--zaobljenost);
|
|
color: var(--barva-gumb3-besedilo);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
background-color: var(--barva-besedilo);
|
|
}
|
|
|
|
|
|
.gumb_3:hover {
|
|
background-color: var(--barva-dodatna);
|
|
color: var(--barva-besedilo);
|
|
transition: 0.2s;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/*rezervacija- fieldseti */
|
|
|
|
.field_rezervacija {
|
|
background-color: var(--barva-kartice);
|
|
box-shadow: var(--senca-kartice);
|
|
border-radius: var(--zaobljenost);
|
|
border:none;
|
|
border-top:0.3rem solid var(--barva-poudarek);
|
|
display:grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap:1rem;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.field_rezervacija legend {
|
|
background-color: var(--barva-poudarek);
|
|
color: var(--barva-besedilo-na-temnem);
|
|
font-weight: 600;
|
|
font-family: "Fraunces", sans-serif;
|
|
border-radius: var(--zaobljenost);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.field_rezervacija input,
|
|
.field_rezervacija select,
|
|
.field_rezervacija textarea {
|
|
border-radius: var(--zaobljenost);
|
|
height: 2rem;
|
|
padding:0.5rem;
|
|
font-family: "Montserrat", sans-serif;
|
|
border: 0.1rem solid var(--barva-besedilo);
|
|
}
|
|
|
|
.field_rezervacija textarea {
|
|
height:6rem;
|
|
}
|
|
|
|
|
|
|
|
.field_rezervacija:focus-within {
|
|
border-top:0.3rem solid var(--barva-dodatna);
|
|
}
|
|
|
|
.field_rezervacija:focus-within legend {
|
|
background-color: var(--barva-dodatna);
|
|
color: var(--barva-besedilo);
|
|
}
|
|
|
|
/* Vnosno polje zavzame celotno širino */
|
|
.vnos_rezervacija input {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Sporočilo o napaki */
|
|
.sporocilo_napake {
|
|
color: #c62828;
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Rdeča obroba pri napačnem vnosu */
|
|
.field_rezervacija input.napacno {
|
|
border: 0.15rem solid #c62828;
|
|
}
|
|
|
|
|
|
.opcije {
|
|
display: flex ;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap; /*da se ne raztezajo izven polja */
|
|
gap: 1rem;
|
|
}
|
|
|
|
.opcije_radio,
|
|
.opcije_checkbox,
|
|
.pogoji_uporabe {
|
|
display:flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.gumb_manj{
|
|
display: inline-block;
|
|
padding: 0.85rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
border: 0.01rem solid var(--barva-besedilo);
|
|
background-color: var(--barva-ozadje);
|
|
color: var(--barva-besedilo);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
font-family: "Montserrat", sans-serif;
|
|
|
|
|
|
transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
|
|
}
|
|
|
|
.gumb_manj:hover {
|
|
background-color: var(--barva-dodatna3);
|
|
color: var(--barva-besedilo);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gumb_osnovni_obratno {
|
|
display: inline-block;
|
|
padding: 0.85rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
|
|
background-color: var(--barva-poudarek);
|
|
color: var(--barva-besedilo-na-temnem);
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
border: none;
|
|
|
|
transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
|
|
}
|
|
|
|
.gumb_osnovni_obratno:hover {
|
|
background-color: var(--barva-dodatna);
|
|
color: var(--barva-besedilo);
|
|
cursor: pointer
|
|
}
|
|
|
|
.potrditev_rezervacije:not([hidden]) {
|
|
background-color: var(--barva-kartice);
|
|
border-left: 0.3rem solid var(--barva-poudarek);
|
|
border-radius: var(--zaobljenost);
|
|
padding: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.potrditev_rezervacije[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* on nas, besedilo in slika restavracije*/
|
|
.nasa_zgodba_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2,minmax(0,1fr));
|
|
align-items: stretch;
|
|
gap: 0.5rem;
|
|
background-color: var(--barva-dodatna3);
|
|
border-radius: var(--zaobljenost);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.nasa_zgodba_txt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nasa_zgodba_grid figure {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.nasa_zgodba_grid img {
|
|
padding:0.5rem;
|
|
border-radius: var(--zaobljenost);
|
|
}
|
|
|
|
.nasa_zgodba_grid figcaption {
|
|
display: none;
|
|
}
|
|
|
|
.o_nas_page table {
|
|
width: 40%;
|
|
border-collapse: collapse;
|
|
background-color: var(--barva-kartice);
|
|
border-radius: var(--zaobljenost);
|
|
overflow: hidden;
|
|
box-shadow: var(--barva-senca);
|
|
}
|
|
|
|
.o_nas_page thead {
|
|
background-color: var(--barva-poudarek);
|
|
color: var(--barva-besedilo-na-temnem);
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
.o_nas_page td,
|
|
.o_nas_page th {
|
|
padding:0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.o_nas_page tbody tr:nth-child(2) {
|
|
background-color: var(--barva-dodatna3);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.zemljevid {
|
|
width: 400px;
|
|
max-width: 100%;
|
|
height: 350px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
/* tablica 600px do 1000px */
|
|
@media (min-width: 600px) and (max-width: 1000px) {
|
|
/* Navigacija ostane vidna in se po potrebi prelomi. */
|
|
.nav_bar {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.main_menu {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.hamburger_meni {
|
|
display: none;
|
|
}
|
|
.home_page .jedi_grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)); /*jedi samo v 2 stolpcih */
|
|
}
|
|
.home_page .hero h1 {
|
|
font-size: 2.6rem;
|
|
}
|
|
.seznam_receptov {
|
|
flex-wrap: wrap;
|
|
gap: 1rem; padding: 0;
|
|
}
|
|
|
|
/* Informacije o receptu na tablici */
|
|
.recepti_info ul {
|
|
display: flex;
|
|
flex-direction: row; /* Vse tri informacije v eno vrstico */
|
|
justify-content: center; /* Poravnava na sredino */
|
|
align-items: center;
|
|
flex-wrap: nowrap; /* Prepreči prelom v novo vrstico */
|
|
gap: 0.6rem; /* Manjši razmik */
|
|
padding: 0;
|
|
}
|
|
|
|
.recepti_info li {
|
|
font-size: 0.75rem; /* Manjša pisava */
|
|
text-align: center;
|
|
max-width: none;
|
|
}
|
|
|
|
.filtri_jedilnika {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.zemljevid {
|
|
width: calc(100% - 2rem);
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
/* telefon do 600px */
|
|
@media (max-width: 599px) {
|
|
|
|
main {
|
|
padding: 1.5rem 1rem 3rem;
|
|
}
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
h2 {
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
/* Logo in hamburger sta v prvi vrstici navigacija je pa pod njima */
|
|
.nav_bar {
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
.logo {
|
|
min-width: 0;
|
|
font-size: 1rem;
|
|
}
|
|
.logo img {
|
|
width: 3.5rem;
|
|
}
|
|
.hamburger_meni {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
width: 2.5rem; /* Fiksna širina gumba */
|
|
height: 2.5rem; /* Fiksna višina gumba */
|
|
padding: 0.6rem;
|
|
border: 0;
|
|
border-radius: 0.4rem;
|
|
background-color: var(--barva-poudarek);
|
|
color: var(--barva-besedilo-na-temnem);
|
|
cursor: pointer;
|
|
}
|
|
.hamburger_meni .fa-solid {
|
|
color: inherit;
|
|
padding: 0;
|
|
}
|
|
/* JavaScript bo ob kliku dodal ali odstranil razred odprt. */
|
|
.main_menu {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
gap: 0.25rem;
|
|
}
|
|
.main_menu.odprt {
|
|
display: flex;
|
|
}
|
|
.main_menu li,
|
|
.main_menu a {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Jpriljubljene jedi kartice ena pod drugo. */
|
|
.home_page .jedi_grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.home_page .hero {
|
|
min-height: 60vh; padding: 2rem 1rem;
|
|
}
|
|
.home_page .hero h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
/* ena kolona, oznaka nad poljem za vnos */
|
|
.field_rezervacija {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
padding: 1rem;
|
|
}
|
|
.opcije {
|
|
justify-content: flex-start;
|
|
}
|
|
.opcije_radio,
|
|
.opcije_checkbox,
|
|
.pogoji_uporabe {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/*gumbi za navigiranje pri receptih, da se ne overlappajo*/
|
|
|
|
.gumb_2 {
|
|
padding: 0.5rem 1.0rem;
|
|
}
|
|
|
|
/* Recept: slika, podatki/sestavine, nato priprava. */
|
|
.recepti_grid,
|
|
.nasa_zgodba_grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.recepti_jedi {
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
}
|
|
.recepti_slika {
|
|
min-height: 0;
|
|
}
|
|
.recepti_slika img {
|
|
height: auto;
|
|
}
|
|
.seznam_receptov {
|
|
flex-wrap: wrap;
|
|
gap: 1rem; padding: 0;
|
|
}
|
|
|
|
.recepti_info ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Elemente poravnamo na sredino */
|
|
gap: 0.5rem;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.recepti_info li {
|
|
text-align: center; /* Besedilo poravnamo na sredino */
|
|
max-width: none;
|
|
}
|
|
|
|
.filtri_jedilnika {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/* dark mode, samo spremenjene spremenljivke css */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--barva-ozadje: #211c18;
|
|
--barva-besedilo: #f4e9db;
|
|
--barva-poudarek: #514b36;
|
|
--barva-dodatna: #d6a56a;
|
|
--barva-dodatna2: #44372b;
|
|
--barva-dodatna3: #342c25;
|
|
--barva-kartice: #302821;
|
|
--barva-gumb3-besedilo: #211c18;
|
|
--barva-besedilo-na-temnem: #f4e9db;
|
|
--barva-hero-prekrivna: rgba(15, 12, 10, 0.72);
|
|
--barva-senca: rgba(0, 0, 0, 0.45);
|
|
--senca-kartice: 0 0.25rem 0.8rem var(--barva-senca);
|
|
--zaobljenost: 0.75rem;
|
|
}
|
|
/* Skrijemo logotip za svetlo ozadje */
|
|
.logo_light {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Prikažemo logotip za temno ozadje */
|
|
.logo_dark {
|
|
display: block !important;
|
|
}
|
|
|
|
}
|
|
|
|
/* omejeno gibanje: ni smooth scrolla in drugih animaciji */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
.home_page .jedi_card {
|
|
transition: none;
|
|
}
|
|
|
|
.home_page .jedi_card:hover {
|
|
transform: none;
|
|
}
|
|
} |