iva/oss-vaja1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

urejeni jedilniki, navigacijska vrstia, spremenjeni columnsi (iz 2 ali 3 v 1); dodan tabela_scroll da se tabela samo scrolla stran pa je staticna, in dodan dark mode, nov logo za temen nacin in pa reduced motion dodano da se izklopijo dolocene nastavitve

Browse Source
This commit is contained in:
iva
2026-11-01 22:52:00 +01:00
parent 6fe3505016
commit 9d4a4eb10b
7 changed files with 205 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -1
View File
@@ -10,7 +10,8 @@
<header class="site_header">
<nav class="nav_bar">
<a class="logo" href="index.html">
<img src="logo.png" alt="Logotip restavracije" width="150"><br>
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
<span>Za prste obliznit</span>
</a>
<ul class="main_menu">
jedilnik.html
+10 -1
View File
@@ -10,7 +10,8 @@
<header class="site_header">
<nav class="nav_bar">
<a class="logo" href="index.html">
<img src="logo.png" alt="Logotip restavracije" width="150"><br>
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
<span>Za prste obliznit</span>
</a>
<ul class="main_menu">
@@ -32,6 +33,7 @@
</section>
<section class="jedilnik_kategorija">
<h2>Predjedi</h2>
<div class="tabela_scroll">
<table>
<caption>Predjedi</caption>
<thead>
@@ -93,9 +95,11 @@
</tr>
</tbody>
</table>
</div>
</section>
<section class="jedilnik_kategorija">
<h2>Glavne jedi</h2>
<div class="tabela_scroll">
<table>
<caption>Glavne jedi</caption>
<thead>
@@ -163,10 +167,12 @@
</tr>
</tbody>
</table>
</div>
</section>
<section class="jedilnik_kategorija">
<h2>Priloge</h2>
<p><b>Prilagodi si svoj krožnik! </b>Prilogo ob glavni jedi lahko zamenjate brez doplačila. Za dodatne priloge pa veljajo cene po ceniku.</p>
<div class="tabela_scroll">
<table>
<caption>Priloge</caption>
<thead>
@@ -204,9 +210,11 @@
</tr>
</tbody>
</table>
</div>
</section>
<section class="jedilnik_kategorija">
<h2>Sladice</h2>
<div class="tabela_scroll">
<table>
<caption>Sladice</caption>
<thead>
@@ -268,6 +276,7 @@
</tr>
</tbody>
</table>
</div>
</section>
<br><br>
</main>
logo_dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

o_nas.html
+2 -1
View File
@@ -11,7 +11,8 @@
<header class="site_header">
<nav class="nav_bar">
<a class="logo" href="index.html">
<img src="logo.png" alt="Logotip restavracije" width="150"><br>
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
<span>Za prste obliznit</span>
</a>
<ul class="main_menu">
recepti.html
+2 -1
View File
@@ -10,7 +10,8 @@
<header class="site_header">
<nav class="nav_bar">
<a class="logo" href="index.html">
<img src="logo.png" alt="Logotip restavracije" width="150"><br>
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
<span>Za prste obliznit</span>
</a>
<ul class="main_menu">
rezervacija.html
+2 -1
View File
@@ -11,7 +11,8 @@
<header class="site_header">
<nav class="nav_bar">
<a class="logo" href="index.html">
<img src="logo.png" alt="Logotip restavracije" width="150"><br>
<img src="logo.png" class="logo_light" alt="Logotip restavracije" width="150"><br>
<img src="logo_dark.png" class="logo_dark" alt="Logotio restavracije" width="150">
<span>Za prste obliznit</span>
</a>
<ul class="main_menu">
stylesheet.css
+168 -41
View File
@@ -125,6 +125,7 @@ footer .fa-solid {
.hamburger_meni {
display: none;
text-decoration: none;
}
.logo {
@@ -139,6 +140,10 @@ footer .fa-solid {
text-decoration: none;
}
.logo_dark {
display: none !important;
}
.logo br {
display: none; /* da slucajno nebi uničili vodoravne postavitve logotipa */
}
@@ -379,7 +384,7 @@ footer p {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 3rem, 1.5rem, 5rem;
padding: 3rem 1.5rem 5rem;
}
/*uvod */
@@ -411,6 +416,27 @@ footer p {
box-shadow: var(--barva-senca);
}
/* Preprečimo, da bi vsebina raztegnila stran */
.jedilnik_page,
.jedilnik_kategorija {
min-width: 0;
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;
@@ -646,6 +672,8 @@ footer p {
display: flex ;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap; /*da se ne raztezajo izven polja */
gap: 1rem;
}
.opcije_radio,
@@ -721,8 +749,7 @@ footer p {
}
.nasa_zgodba_grid img {
position: center;
padding:0,5rem;
padding:0.5rem;
border-radius: var(--zaobljenost);
}
@@ -756,70 +783,170 @@ footer p {
font-weight: 700;
}
/* prilagotitev tablica, telefon */
@media (max-width: 1000px) {
/*.nav_bar {
flex-direction: column;
gap: 0.5rem;
/* 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;
}*/
.main {
max-width: 600px;
}
.hamburger_meni {
display: none;
}
.home_page .jedi_grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr)); /*jedi samo v 2 stolpcih */
}
.home_page .hero h1 {
font-size: 2.6rem;
}
/*hamburger meni*/
.main_menu {
display: none;
}
.hamburger_meni {
display: flex;
align-items: center;
justify-content: flex-end;
.seznam_receptov {
flex-wrap: wrap;
text-decoration: none;
gap: 1rem; padding: 0;
}
}
@media (max-width: 600px) {
/* 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;
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 {
gap: 0.15rem;
display: none;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0.25rem;
}
.main_menu.odprt {
display: flex;
}
.main_menu li,
.main_menu a {
padding: 0.45rem;
font-size: 0.8rem;
width: 100%;
}
/* Jpriljubljene jedi kartice ena pod drugo. */
.home_page .jedi_grid {
grid-template-columns: 1fr; /*da bojo v bistvu vsak v svoji vrst */
grid-template-columns: 1fr;
}
.home_page .hero {
min-height: 60vh;
padding: 2rem 1rem;
min-height: 60vh; padding: 2rem 1rem;
}
.home_page .hero h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.7rem;
/* 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;
}
/* 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;
}
}
/* 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-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:hover { transform: none; }
}