Files
oss-vaja1/stylesheet.css
T
2026-11-01 14:29:49 +01:00

799 lines
16 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-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;
}
.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);
}
/* 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("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);
}
.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;
}
/* prilagotitev telefonom */
@media (max-width: 1000px) {
.nav_bar {
flex-direction: column;
gap: 0.5rem;
}
.main_menu {
justify-content: center;
}
.home_page .jedi_grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home_page .hero h1 {
font-size: 2.6rem;
}
}
@media (max-width: 600px) {
.main_menu {
gap: 0.15rem;
}
.main_menu a {
padding: 0.45rem;
font-size: 0.8rem;
}
.home_page .jedi_grid {
grid-template-columns: 1fr; /*da bojo v bistvu vsak v svoji vrst */
}
.home_page .hero {
min-height: 60vh;
padding: 2rem 1rem;
}
.home_page .hero h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.7rem;
}
}
/*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_kategorija {
margin-bottom: 4rem;
}
.jedilnik_kategorija h2,
.jedilnik_kategorija 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);
}
.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-besedilo-na-temnem);
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;
}
.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);
}
.opcije {
display: flex ;
flex-direction: row;
justify-content: space-between;
}
.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;
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
}
/* 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 {
position: center;
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;
}