main.py

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

static/css/main.css

@@ -340,3 +340,60 @@ i.far.fa-comment {
     font-size: 24px;
     transform: translateY(-2px);
 }
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.posts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-gap: 20px;
+}
+
+/* Posts page */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.posts {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 20px;
+}
+
+.post {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+}
+
+.post:hover {
+    transform: scale(1.05);
+}
+
+.post img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.post a {
+    text-decoration: none;
+    color: #fff;
+}
+
+.post h2 {
+    margin-top: 20px;
+}

templates/how-it-was-made.html

@@ -5,8 +5,9 @@
 {% endblock %}
 
 {% block content %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/posts.css') }}">
     <section class="content">
         <h1>"Picture Puzzle remake" - How it was made</h1>
         <img src="{{ url_for('static', filename='images/coding.png') }}" alt="Some intense coding" width="800" height="500">
-        <p>Somehow idk</p>
+        <p class="text"></br>Somehow idk</p>
 {% endblock %}

templates/index.html

@@ -17,15 +17,15 @@
         <h2>Featured Posts</h2>
         <div class="featured-posts-container">
             <div class="featured-post">
-                <a href="{{ url_for('post', alias='update-1') }}">
+                <a href="{{ url_for('post', alias='update-1-1') }}">
-                    <img src="{{ url_for('static', filename='images/picture-puzzle.png') }}" alt="Featured Post" width="500" height="350">
+                    <img src="{{ url_for('static', filename='images/skeleton.png') }}" alt="Featured Post" width="500" height="350">
-                    <h3>Game 'Picture Puzzle remake' update 1.0</h3>
+                    <h3>Game 'Picture Puzzle remake' update 1.1</h3>
                 </a>
             </div>
             <div class="featured-post">
                 <a href="{{ url_for('post', alias='how-it-was-made') }}">
                     <img src="{{ url_for('static', filename='images/coding.png') }}" alt="Another Featured Post" width="500" height="350">
-                    <h3>Picture Puzzle remake - How it was made</h3>
+                    <h3>How the 'Picture Puzzle remake' was made</h3>
                 </a>
             </div>
         </div>
@@ -34,7 +34,7 @@
     <section class="latest-posts">
         <h2>Latest Posts</h2>
         <div class="latest-posts-container">
-            {% for post in latest_posts %}
+            {% for post in latest_posts[:3] %}
                 <div class="latest-post">
                     <a href="{{ url_for('post', alias=post.alias) }}">
                         <img src="{{ url_for('static', filename='images/' + post.image) }}" alt="{{ post.title }}" width="500" height="350">

templates/posts.html

@@ -5,15 +5,17 @@
 {% endblock %}
 
 {% block content %}
-        <h2>All Posts</h2>
+<div class="container">
-        <div class="posts">
+    <h2>All Posts</h2>
-            {% for post in posts %}
+    <div class="posts">
-                <div class="post">
+        {% for post in posts %}
-                    <a href="{{ url_for('post', alias=post['alias']) }}">
+            <div class="post">
-                        <img src="{{ url_for('static', filename='images/' + post['image']) }}" alt="{{ post['title'] }}" width="500" height="300">
+                <a href="{{ url_for('post', alias=post['alias']) }}">
-                        <h2>{{ post['title'] }}</h2>
+                    <img src="{{ url_for('static', filename='images/' + post['image']) }}" alt="{{ post['title'] }}" width="500" height="300">
-                    </a>
+                    <h2>{{ post['title'] }}</h2>
-                </div>
+                </a>
-            {% endfor %}
+            </div>
-        </div>
+        {% endfor %}
+    </div>
+</div>
 {% endblock %}