recreate page

src/templates/page.css

@@ -10,61 +10,74 @@
 }
 
 body {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    width: 50%;
     background-color: var(--bg1);
-    margin: auto;
-    margin-top: 10px;
-    margin-bottom: 50px;
-    color: lightgray;
-}
-
-body * {
-    width: 100%;
-}
-
-.picture-container {
-    margin-top: 10px;
-}
-
-.picture-container-element {
-    margin-top: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 15% 15%;
+    margin-top: 5%;
+    height: auto;
 }
 
 .readme {
-    border: 1px solid;
     background-color: var(--bg2);
 }
 
-.readme-content {
-    margin: 30px;
-}
-
-.export,
-.next {
-    margin-top: 0px;
-    display: block;
-    text-align: right;
-}
-
-.download {
-    margin-top: 10px;
+.picture-container {
     background-color: var(--bg2);
-    text-align: center;
-    padding-bottom: 30px;
+    padding: 10px;
 }
 
-.navigation,
-.meta-picture {
+.picture-container-item {
+    padding: 5px;
+    background-color: var(--content1);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+.meta-picture, .navigation {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    width: 100%;
+}
+
+.profile {
+    text-align: right;
 }
 
 a {
     color: white;
     text-decoration: none;
     font-size: 1.5rem;
+  }
+
+@media screen and (max-width:767px) {
+    body {
+        margin: 0% 0%;
+    }
+}
+
+.exif, .readme {
+    width: 100%;
+    display: block;
+}
+
+.download {
+    width: 100%;
+    background-color: var(--bg2);
+    text-align: center;
+}
+
+.exif summary {
+    text-align: center;
+}
+
+.exif details {
+    display: flex;
+    justify-content: center;
+    background-color: var(--bg2);
 }