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

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;
 }