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> <a href="/"><h1>Dzienniczek<br>Wezuwiusz</h1></a>
</div> </div>
</header> </header>
<main> <main class="blog-post">
<h2>Dzienniczek Wezuwiusz Beta 1 - wydana!</h2> <h2>Dzienniczek Wezuwiusz Beta 1 - wydana!</h2>
<p> <p>
Wydaliśmy pierwszą oficjalną Betę Dzienniczka Wezuwiusz! 🎉 Wydaliśmy pierwszą oficjalną Betę Dzienniczka Wezuwiusz! 🎉

View file

@ -28,7 +28,7 @@
<a href="/"><h1>Dzienniczek<br>Wezuwiusz</h1></a> <a href="/"><h1>Dzienniczek<br>Wezuwiusz</h1></a>
</div> </div>
</header> </header>
<main> <main class="blog-post">
<h2>Dzienniczek Wezuwiusz Beta 2 - już dostępna!</h2> <h2>Dzienniczek Wezuwiusz Beta 2 - już dostępna!</h2>
<p> <p>
Druga beta Dzienniczka Wezuwiusz jest kolejną sporą aktualizacją do naszej aplikacji. W tym wydaniu 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"> <a href="/img/blog/beta-2-released/tablet_view.webp">
<img src="/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." 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> </a>
<p> <p>
Dzienniczek Wezuwiusz teraz pokazuje średnią po prawej stronie oraz posiada Navigation Rail w trybie 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"> <a href="/img/blog/beta-2-released/haiku_error.webp">
<img src="/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." 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> </a>
<p> <p>
Ekran błędu został udoskonalony. Można już go scrollować zarówno wertykalnie, jak i horyzontalnie. Do tej pory 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> <h3>Kalkulator przyszłej średniej</h3>
<a href="/img/blog/beta-2-released/gpa_calculator.webp"> <a href="/img/blog/beta-2-released/gpa_calculator.webp">
<img src="/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> </a>
<p>W zakładce z ocenami można dodana zostałą funkcja policzenia sobie średniej z dowolnego przedmiotu, po dodaniu <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> 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> <a href="/"><h1>Dzienniczek<br>Wezuwiusz</h1></a>
</div> </div>
</header> </header>
<main> <main class="blog-post">
<img src="/img/blog/czy-aktywowac-eduvulcan/ogheader.webp" alt="Czy warto aktywować konto eduVULCAN?" <img src="/img/blog/czy-aktywowac-eduvulcan/ogheader.webp" alt="Czy warto aktywować konto eduVULCAN?"
aria-hidden="true" class="fixed-image"> aria-hidden="true" class="fixed-image">
<h2>Czy warto aktywować konto eduVULCAN, czy lepiej pozostać przy koncie zwykłym?</h2> <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 <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 znaleźć informację, iż <b>niektóre funkcje oficjalnej aplikacji mobilnej będą płatne</b>, w tym sprawdzanie
frekwencji, czy odczytywanie wiadomości.</p> frekwencji, czy odczytywanie wiadomości.</p>
<img src="/img/blog/czy-aktywowac-eduvulcan/paid_app.webp" <a href="/img/blog/czy-aktywowac-eduvulcan/paid_app.webp">
alt="Wykres przedstawiające płatne funkcje aplikacji mobilnej eduVULCAN" class="fixed-image" loading="lazy" <img src="/img/blog/czy-aktywowac-eduvulcan/paid_app.webp"
decoding="async"> 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 <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ć 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 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 { .fixed-image {
max-width: 100%; max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
.blog-post {
max-width: 1200px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {