Improve blog post layout

Text is easier to read when a max-length is set, to avoid very long lines. Centered images improve aesthetics.
This commit is contained in:
ProgramistaZpolski 2024-08-14 08:09:43 +02:00
parent a43f42b7a9
commit 2b35d10d52
4 changed files with 19 additions and 9 deletions

View file

@ -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! 🎉

View file

@ -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>

View file

@ -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

View file

@ -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) {