main.py

@@ -8,8 +8,15 @@ users = {
 }
 
 posts = [
-    {"alias": "update-1", "title": "Game 'Picture Puzzle remake' update 1.0", "image": "picture-puzzle.png"},
-    {"alias": "how-it-was-made", "title": "Picture Puzzle remake - How it was made", "image": "coding.png"}
+    {"alias": "history", "title": "Picture Puzzle history", "image": "picture-puzzle.png"},
+    {"alias": "update-1", "title": "Game 'Picture Puzzle remake' update 1.0", "image": "baobab.png"},
+    {"alias": "how-it-was-made", "title": "Picture Puzzle remake - How it was made", "image": "coding.png"},
+    {"alias": "difficulties", "title": "Difficulties while making game", "image": "staircase-fail.png"},
+    {"alias": "how-it-was-made", "title": "ChasGPT as code helper", "image": "gpt-meme.png"},
+    {"alias": "update-1-1", "title": "Game 'Picture Puzzle remake' update 1.1", "image": "skeleton.png"},
+    {"alias": "how-it-was-made", "title": "Game expectations vs. reality", "image": "developers-be-like.png"},
+    {"alias": "how-it-was-made", "title": "Design and music", "image": "baobab.png"},
+    {"alias": "how-it-was-made", "title": "Advices for game developers", "image": "advice.png"}
 ]
 
 def fetch_latest_posts():

static/css/posts.css

@@ -1,13 +1,14 @@
 body {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+    text-align: center;
+}
+
+.text {
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 25px; 
 }
 
 h1 {
-    margin:100px;
-}
-
-p {
-    font-size: 20px;
+    font-size: 35px;
 }

templates/update-1.html

@@ -5,14 +5,16 @@
 {% endblock %}
 
 {% block content %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/posts.css') }}">
     <section class="content">
         <h1>Game "Picture Puzzle remake" update 1.0</h1>
         <img src="{{ url_for('static', filename='images/picture-puzzle.png') }}" alt="Picture Puzzle original" width="800" height="500">
-        <p>Added:</p>
-        <ul>
-            <li>Game itself</li>
-            <li>New stuff</li>
-            <li>And more...</li>
-        </ul>
+        <p class="text"></br>Added:</br></br>
+            - fixed image loading from last album</br>
+            - fixed image choosing</br>
+            - added proper image loading from storage</br>
+            - optimized code</br>
+            - added sounds for pieces</br>
+            - added more music</br></p>
     </section>
 {% endblock %}