main.py

@@ -31,6 +31,10 @@ def index():
 def all_posts():
     return render_template("posts.html", posts=posts)
 
+@app.route("/about")
+def about():
+    return render_template("about.html")
+
 @app.route("/posts/<alias>")
 def post(alias):
     post_info = next((p for p in posts if p['alias'] == alias), None)

static/css/main.css

@@ -153,7 +153,7 @@ nav .dropdown a::before {
 
 /* Content Section */
 .content {
-    padding: 30px;
+    padding: 50px;
 }
 
 h2 {
@@ -165,14 +165,18 @@ h2 {
 .latest-posts-container {
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
 }
 
 .featured-post,
 .latest-post {
-    padding: 0 20px;
+    padding: 20px 40px;
     box-sizing: border-box;
     margin-bottom: 20px;
     text-align: center;
+    background-color: #2c2c2c;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .featured-post a,
@@ -191,6 +195,7 @@ h2 {
 .latest-post img {
     margin-bottom: 10px;
     flex-shrink: 0;
+    border-radius: 6px;
 }
 
 .featured-post a::before,
@@ -211,8 +216,10 @@ h2 {
     width: 100%;
 }
 
-.featured-posts h3, .latest-posts h3 {
+.featured-posts h3, 
+.latest-posts h3 {
     margin: 0.25rem;
+    font-size: 18px;
 }
 
 /* Footer */
@@ -354,24 +361,12 @@ i.far.fa-comment {
     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;
+    max-width: 1400px;
     margin: 0 auto;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
     grid-gap: 20px;
 }
 

static/js/main.js

@@ -9,7 +9,7 @@ document.addEventListener("DOMContentLoaded", function() {
     });
   
     gif.addEventListener("click", function() {
-      var gameUrl = "https://gitea.rkg.lv/elukjanovica/Picture-Puzzle-website.git";
+      var gameUrl = "https://gitea.rkg.lv/elukjanovica/Picture_Puzzle.git";
   
       navigator.clipboard.writeText(gameUrl).then(function() {
         notification.textContent = "Link copied!";

templates/about.html

@@ -0,0 +1,20 @@
+{% extends 'base.html' %}
+
+{% block title %}
+    About the game
+{% endblock %}
+
+{% block content %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/posts.css') }}">
+    <section class="content">
+        <h1>About 'Picture Puzzle Remake'</h1>
+        <img src="{{ url_for('static', filename='images/icon.png') }}" alt="Icon" width="100" height="100">
+        <p class="text"></br></br>The <i>Picture Puzzle Remake</i> game was created in 2024 to revive one of the many at the time popular gadgets of the Windows 7 and Vista era. This reimagined version includes many improvements and features such as:</br></br>
+            - different modes</br>
+            - automatic saving</br>
+            - selection of ablums and images</br>
+            - 3 types of window sizes and styles</br>
+            - ability to set music and sound, choose a version</br>
+            - puzzle types: 3x3 and 4x4</p>
+    </section>
+{% endblock %}

templates/base.html

@@ -19,12 +19,12 @@
         </div>
         <ul>
             <li><a class="link" href="{{ url_for('all_posts') }}">Posts</a></li>
-            <li><a class="link" href="#">About</a></li>
+            <li><a class="link" href="{{ url_for('about') }}">About</a></li>
             <li class="dropdown">
                 <a href="#" class="dropbtn">Docs</a>
                 <div class="dropdown-content">
+                    <a href="https://gitea.rkg.lv/elukjanovica/Picture_Puzzle">Source page</a>
                     <a href="#">Documentation</a>
-                    <a href="#">API Reference</a>
                     <a href="#">Tutorials</a>
                 </div>
             </li>
@@ -32,8 +32,8 @@
                 <a href="#" class="dropbtn">Community</a>
                 <div class="dropdown-content">
                     <a href="#">Forums</a>
-                    <a href="#">Events</a>
+                    <a href="#">Updates</a>
-                    <a href="#">Blog</a>
+                    <a href="#">Gallery</a>
                 </div>
             </li>
             <li class="dropdown pull-left">
@@ -57,9 +57,7 @@
         <ul>
             <li><a href="#">Privacy and Cookies</a></li>
             <li><a href="#">Terms of Use</a></li>
-            <li><a href="#">Feedback</a></li>
+            <li><a href="https://gitea.rkg.lv/elukjanovica/Picture_Puzzle/issues">Known Issues</a></li>
-            <li><a href="#">Known Issues</a></li>
-            <li><a href="#">Bug Report</a></li>
         </ul>
         <p>&copy; 2024 Picture Puzzle. All rights reserved.</p>
     </footer>

templates/index.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     <section class="simple-text">
-        <p>Welcome to 'Picture Puzzle remake' website! Here you can see all game updates, articles, and more. If you want to download the latest version of game, just ask that bird on top :)</p>
+        <p>Welcome to 'Picture Puzzle remake' website! Here you can see all game updates, articles, and more. If you want to download the latest version of game, just ask that bird on top :)</p></br>
     </section>
 
     <section class="featured-posts">
@@ -28,6 +28,12 @@
                     <h3>How the 'Picture Puzzle remake' was made</h3>
                 </a>
             </div>
+            <div class="featured-post">
+                <a href="{{ url_for('post', alias='history') }}">
+                    <img src="{{ url_for('static', filename='images/picture-puzzle.png') }}" alt="Another Featured Post" width="500" height="350">
+                    <h3>Picture Puzzle history</h3>
+                </a>
+            </div>
         </div>
     </section>
 

templates/posts.html

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