Implement selecting template for collage

web/index.css

@@ -7,12 +7,13 @@
     background-color: lightgrey;
     display: flex;
     align-items: center;
-    justify-content: center;
-    flex: 30%;
+    justify-content: space-around;
+    flex-direction: column;
+    flex: 25%;
 }
 .imagebox {
     padding: 2rem;
-    flex: 70%;
+    flex: 75%;
 }
 
 .image-surface {
@@ -28,32 +29,32 @@
     font-size: 2rem;
 }
 
-// paper sizes
-.letter-portrait {
-    aspect-ratio: 85 / 110;
-}
-.letter-landscape {
-    aspect-ratio: 110 / 85;
-}
-.fiveseven-portrait {
-    aspect-ratio: 5 / 7;
-}
-.fiveseven-landscape {
-    aspect-ratio: 7 / 5;
-}
-.foursix-portrait {
-    aspect-ratio: 4 / 6;
-}
-.foursix-landscape {
-    aspect-ratio: 6 / 4;
+.templates {
+    display: flex;
+    flex-wrap: wrap;
+     gap: 1rem;
 }
 
-.half-landscape {
-    display:flex;
+.templates li {
+    list-style-type: none;
 }
 
-.half-landscape .collage-img {
-    flex: 50%;
+#page_size_selector {
+    width: 100%;
+}
+
+.template {
+    width: 100px;
+    height: 100px;
+}
+
+.template div {
+    border: 1px solid;
+}
+
+.single div {
+    width: 100%;
+    height: 100%;
 }
 
 .one-two {
@@ -66,21 +67,38 @@
     grid-area: one;
 }
 
-.letter-portrait .collage-img {
+.half-leftright {
+    display:flex;
+}
+
+.half-leftright .img {
+    flex: 50%;
+}
+
+.half-topbottom .img {
+    width: 100%;
     height: 50%;
 }
-.letter-landscape-2 {
-    display:flex;
-    // width: 80vh;
-    height: 100%;
-    // margin: auto;
-    aspect-ratio: 110 / 85;
-    // aspect-ratio: 7 / 5;
-    gap: 1rem;
+
+.two-one-two-leftright {
+    display: grid;
+    grid-template-areas: 
+    "one two two three"
+    "four two two five";
 }
-.letter-landscape-2 .img1 {
-    flex: 60%;
+.two-one-two-leftright .img2 {
+    grid-area: two;
 }
-.letter-landscape-2 .img2 {
-    flex: 40%;
+
+.two-one-two-topbottom {
+    display: grid;
+    grid-template-areas: 
+    "one two"
+    "three three"
+    "three three"
+    "four five"
+}
+
+.two-one-two-topbottom .img3 {
+    grid-area: three;
 }