[Style] centering the content, margin on cover photo

This commit is contained in:
2025-10-22 20:29:04 +02:00
parent c5561e8723
commit dda015450b
3 changed files with 9 additions and 4 deletions

View File

@@ -29,7 +29,7 @@ def main():
templateEN = fTempEN.read() templateEN = fTempEN.read()
for page in PAGES: for page in PAGES:
with open(f'pages/sr/{page["name"]}.html') as f: with open(f'pages/sr/{page["name"]}.html') as f:
pageHtml = "<div><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div>" pageHtml = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div>"
pageHtml += f.read() pageHtml += f.read()
html = buildPage(page['name'], page['titleSR'], pageHtml, page['style'], templateSR) html = buildPage(page['name'], page['titleSR'], pageHtml, page['style'], templateSR)
f = open(f'site/{page["name"]}.html', 'w') f = open(f'site/{page["name"]}.html', 'w')

View File

@@ -45,7 +45,7 @@
<a class="lang" hreflang="en" href="/en/deconference">EN</a> <a class="lang" hreflang="en" href="/en/deconference">EN</a>
</header> </header>
<main> <main>
<div><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div><h1>Dekonferencija</h1> <div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div><h1>Dekonferencija</h1>
<h2 id="program"><a href="#program">Program</a></h2> <h2 id="program"><a href="#program">Program</a></h2>
<p>11:00 Otvaranje<p> <p>11:00 Otvaranje<p>

View File

@@ -67,6 +67,7 @@ main {
line-height: 2rem; line-height: 2rem;
max-width: 120ch; max-width: 120ch;
overflow: auto; overflow: auto;
margin: 0 auto;
} }
main h1 { main h1 {
@@ -136,11 +137,11 @@ a:focus {
gap: 2rem; gap: 2rem;
} }
.links > a { .links>a {
border-radius: 100%; border-radius: 100%;
} }
.links > a > img { .links>a>img {
display: block; display: block;
} }
@@ -166,6 +167,10 @@ button {
cursor: pointer; cursor: pointer;
} }
.cover-wrap {
margin-bottom: 3rem;
}
@media screen and (max-height: 860px), @media screen and (max-height: 860px),
screen and (max-width: 1500px) { screen and (max-width: 1500px) {
#mesh { #mesh {