Done with the samples, and can be released as first version!

static/css/main.css

@@ -151,9 +151,12 @@ body {
 }
 
 .main .card img {
-    width: 100%;
-    height: 150px;
-    object-fit: cover;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+    max-height: 150px;
+    max-width: 100%;
+    object-fit: contain;
     border-radius: 8px;
     margin-bottom: 10px;
 }
@@ -220,4 +223,53 @@ body {
 
 .footer a:hover {
     text-decoration: underline;
-}
+}
+
+.card-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 15px;
+    height: fit-content;
+}
+
+.card-buttons .btn {
+    padding: 12px 24px;
+    font-size: 1rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-transform: uppercase;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.3s ease, background 0.3s ease;
+    width: 100%;
+    max-width: 160px;
+    height: 100%;
+}
+
+.card-buttons .btn {
+    background: linear-gradient(to right, #5a0fb8, #1f65d6);
+}
+
+.card-buttons .btn:hover {
+    background: linear-gradient(to right, #1f65d6, #5a0fb8);
+    transform: scale(1.05);
+}
+
+.card .topics {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin: 5px;
+}
+
+.card .topics .topic {
+    font-size: 0.85em;
+    color: #777;
+    background-color: #efefef;
+    border-radius: 16px;
+    padding: 4px 10px;
+    height: fit-content;
+}

static/css/post.css

@@ -40,16 +40,6 @@ a:hover {
     color: #ff5733;
 }
 
-img {
-    width: 30%;
-    min-height: 30%;
-    height: auto;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    margin-bottom: 20px;
-    float: right;
-    margin-left: 20px;
-}
 
 .step {
     margin-bottom: 2em;
@@ -58,20 +48,33 @@ img {
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     display: flex;
-    align-items: center;
+    align-items: center; /* This will center the image vertically */
     gap: 20px;
+    justify-content: flex-start; /* Ensure the content is aligned at the start horizontally */
 }
 
 .step img {
-    max-width: 40%;
-    margin: 0;
+    width: 30%;
+    min-height: 30%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    margin: auto;
+    float: none; 
 }
 
 .step-content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 20px;
+    overflow: hidden;
 }
 
 .step pre {
+    margin: auto;
+    text-align: left;
     background: rgba(30, 30, 30, 1);
     color: #cfcfcf;
     font-family: 'Courier New', Courier, monospace;
@@ -80,12 +83,41 @@ img {
     border: 1px solid #444;
     border-radius: 10px;
     overflow-x: auto;
+    width: fit-content;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: auto;
+    position: relative; /* Needed for positioning the button */
+    word-wrap: break-word;
+    white-space: pre-wrap;
 }
 
+.copy-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #1f65d6;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.copy-btn:hover {
+    background-color: #5a0fb8;
+}
+
+.copy-btn:focus {
+    outline: none;
+}
+
+
 .button {
     display: inline-block;
     padding: 10px 20px;
-    margin-top: 10px;
     background: linear-gradient(to right, #5a0fb8, #1f65d6);
     color: white;
     border-radius: 5px;
@@ -93,6 +125,8 @@ img {
     text-decoration: none;
     text-shadow: none;
     transition: background 0.3s;
+    width: fit-content;
+    margin: 0px auto;
 }
 
 .button:hover {
@@ -100,15 +134,6 @@ img {
     color: white;
 }
 
-pre{
-    max-width: 100%;
-    width: fit-content;
-    align-content: left;
-    text-align: left;
-    margin: auto;
-    overflow-x: auto;
-}
-
 @media (max-width: 768px) {
     img {
         float: none;
@@ -120,11 +145,11 @@ pre{
     .step {
         flex-direction: column;
         text-align: center;
+        max-width: 100%;
+        width: 100%;
     }
+}
 
-    pre, code {
-        margin: 10px auto;
-
-        max-width: 90%;
-    }
+article p{
+    text-align: justify;
 }

static/script/image_viewer.js

@@ -0,0 +1,69 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const images = Array.from(document.getElementsByTagName('img'));
+
+    images.forEach(image => {
+        image.style.cursor = 'pointer';
+        image.addEventListener("click", function (){
+            const fullScreenDiv = document.createElement("div");
+            fullScreenDiv.style.position = "fixed";
+            fullScreenDiv.style.top = 0;
+            fullScreenDiv.style.left = 0;
+            fullScreenDiv.style.width = "100%";
+            fullScreenDiv.style.height = "100%";
+            fullScreenDiv.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
+            fullScreenDiv.style.display = "flex";
+            fullScreenDiv.style.justifyContent = "center";
+            fullScreenDiv.style.alignItems = "center";
+            fullScreenDiv.style.zIndex = 1000;
+
+            const fullScreenImage = document.createElement("img");
+            fullScreenImage.src = image.src;
+            fullScreenImage.style.maxWidth = "90%";
+            fullScreenImage.style.maxHeight = "90%";
+            fullScreenImage.style.boxShadow = "0 4px 10px rgba(0, 0, 0, 0.5)";
+            fullScreenImage.style.borderRadius = "10px";
+            fullScreenImage.style.cursor = 'pointer';
+
+            fullScreenDiv.appendChild(fullScreenImage);
+
+
+            fullScreenDiv.addEventListener("click", () => {
+                document.body.removeChild(fullScreenDiv);
+            });
+
+            document.body.appendChild(fullScreenDiv);
+        });
+    });
+});
+
+function copyToClipboard(button) {
+    // Find the <pre> block (the parent of the button)
+    const preBlock = button.closest('pre');
+    
+    // Get the text content of the <code> inside the <pre> block
+    const codeContent = preBlock.querySelector('code').innerText;
+    
+    // Create a temporary textarea to copy the content
+    const tempTextArea = document.createElement('textarea');
+    tempTextArea.value = codeContent;
+    
+    // Append the textarea to the document (it needs to be in the DOM to work)
+    document.body.appendChild(tempTextArea);
+    
+    // Select the text inside the textarea
+    tempTextArea.select();
+    
+    // Execute the copy command
+    document.execCommand('copy');
+    
+    // Remove the temporary textarea from the document
+    document.body.removeChild(tempTextArea);
+    
+    // Optionally: Provide feedback to the user (e.g., change button text)
+    button.innerText = "Copied!";
+    
+    // Reset the button text after 2 seconds
+    setTimeout(() => {
+        button.innerText = "Copy";
+    }, 2000);
+}