From 2b35d10d52fcfefd31744c5a087ab6545f8d06e8 Mon Sep 17 00:00:00 2001
From: ProgramistaZpolski <piotrbadelek@protonmail.com>
Date: Wed, 14 Aug 2024 08:09:43 +0200
Subject: [PATCH] Improve blog post layout

Text is easier to read when a max-length is set, to avoid very long lines. Centered images improve aesthetics.
---
 blog/beta-1-released.html         |  2 +-
 blog/beta-2-released.html         |  9 +++++----
 blog/czy-aktywowac-eduvulcan.html | 10 ++++++----
 style.css                         |  7 +++++++
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/blog/beta-1-released.html b/blog/beta-1-released.html
index 68f6b30..c06fb4e 100644
--- a/blog/beta-1-released.html
+++ b/blog/beta-1-released.html
@@ -28,7 +28,7 @@
 		<a href="/"><h1>Dzienniczek<br>Wezuwiusz</h1></a>
 	</div>
 </header>
-<main>
+<main class="blog-post">
 	<h2>Dzienniczek Wezuwiusz Beta 1 - wydana!</h2>
 	<p>
 		Wydaliśmy pierwszą oficjalną Betę Dzienniczka Wezuwiusz! 🎉
diff --git a/blog/beta-2-released.html b/blog/beta-2-released.html
index d47294e..b6f3d67 100644
--- a/blog/beta-2-released.html
+++ b/blog/beta-2-released.html
@@ -28,7 +28,7 @@
 		<a href="/"><h1>Dzienniczek<br>Wezuwiusz</h1></a>
 	</div>
 </header>
-<main>
+<main class="blog-post">
 	<h2>Dzienniczek Wezuwiusz Beta 2 - już dostępna!</h2>
 	<p>
 		Druga beta Dzienniczka Wezuwiusz jest kolejną sporą aktualizacją do naszej aplikacji. W tym wydaniu
@@ -77,7 +77,7 @@
 	<a href="/img/blog/beta-2-released/tablet_view.webp">
 		<img src="/img/blog/beta-2-released/tablet_view.webp"
 			 alt="Zdjęcie tabletu, pokazującego widok ocen, ze średnią po prawej stronie oraz Navigation Rail zamiast Navbara w trybie tabletu."
-			 width="720">
+			 width="720" class="fixed-image">
 	</a>
 	<p>
 		Dzienniczek Wezuwiusz teraz pokazuje średnią po prawej stronie oraz posiada Navigation Rail w trybie
@@ -90,7 +90,7 @@
 	<a href="/img/blog/beta-2-released/haiku_error.webp">
 		<img src="/img/blog/beta-2-released/haiku_error.webp"
 			 alt="Błąd w aplikacji, nad treścią samego błędu ale pod tytułem okna Haiku opisujące błąd."
-			 height="720">
+			 height="720" class="fixed-image">
 	</a>
 	<p>
 		Ekran błędu został udoskonalony. Można już go scrollować zarówno wertykalnie, jak i horyzontalnie. Do tej pory
@@ -101,7 +101,8 @@
 	<h3>Kalkulator przyszłej średniej</h3>
 	<a href="/img/blog/beta-2-released/gpa_calculator.webp">
 		<img src="/img/blog/beta-2-released/gpa_calculator.webp"
-			 alt="Dialog, który pozwala obliczyć jaką średnią będziemy mieć po dodaniu oceny do naszego dziennika.">
+			 alt="Dialog, który pozwala obliczyć jaką średnią będziemy mieć po dodaniu oceny do naszego dziennika."
+			 class="fixed-image">
 	</a>
 	<p>W zakładce z ocenami można dodana zostałą funkcja policzenia sobie średniej z dowolnego przedmiotu, po dodaniu
 		oceny. Przydatne, jeżeli chcemy przewidzieć, jaką będziemy mieć średnią.</p>
diff --git a/blog/czy-aktywowac-eduvulcan.html b/blog/czy-aktywowac-eduvulcan.html
index ffa83b2..7f5f551 100644
--- a/blog/czy-aktywowac-eduvulcan.html
+++ b/blog/czy-aktywowac-eduvulcan.html
@@ -30,7 +30,7 @@
 		<a href="/"><h1>Dzienniczek<br>Wezuwiusz</h1></a>
 	</div>
 </header>
-<main>
+<main class="blog-post">
 	<img src="/img/blog/czy-aktywowac-eduvulcan/ogheader.webp" alt="Czy warto aktywować konto eduVULCAN?"
 		 aria-hidden="true" class="fixed-image">
 	<h2>Czy warto aktywować konto eduVULCAN, czy lepiej pozostać przy koncie zwykłym?</h2>
@@ -49,9 +49,11 @@
 	<p>Na <a href="https://dziennik.vulcan.edu.pl/kev/">oficjalnej stronie VULCAN'a</a> oraz w regulaminie, możemy
 		znaleźć informację, iż <b>niektóre funkcje oficjalnej aplikacji mobilnej będą płatne</b>, w tym sprawdzanie
 		frekwencji, czy odczytywanie wiadomości.</p>
-	<img src="/img/blog/czy-aktywowac-eduvulcan/paid_app.webp"
-		 alt="Wykres przedstawiające płatne funkcje aplikacji mobilnej eduVULCAN" class="fixed-image" loading="lazy"
-		 decoding="async">
+	<a href="/img/blog/czy-aktywowac-eduvulcan/paid_app.webp">
+		<img src="/img/blog/czy-aktywowac-eduvulcan/paid_app.webp"
+			 alt="Wykres przedstawiające płatne funkcje aplikacji mobilnej eduVULCAN" class="fixed-image" loading="lazy"
+			 decoding="async">
+	</a>
 	<p>Regulamin usługi jest jeszcze bardziej problematyczny - jest on dosyć ogólnikowo napisany, a on jest
 		najważniejszym dokumentem. Z treści da się wywnioskować, że firma VULCAN w darmowej wersji mogłaby ograniczyć
 		zarówno stronę internetową, jak i aplikację mobilną do co najwyżej odczytywania informacji. Wysyłanie wiadomości
diff --git a/style.css b/style.css
index 2ad0a57..7002647 100644
--- a/style.css
+++ b/style.css
@@ -241,6 +241,13 @@ button, .button {
 
 .fixed-image {
 	max-width: 100%;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.blog-post {
+	max-width: 1200px;
 }
 
 @media (prefers-color-scheme: dark) {