collage-maker/web/index.css
Balakrishnan Balasubramanian 12b4386f14 Frontend improvements
1. Simplify template css to use grid always and use ABCD for area names
2. Add 3 new templates
3. Set data attribute dynamically for templates
4. Minor reformatting in js files
5. Fix URL path
2024-08-09 01:51:52 -04:00

117 lines
1.5 KiB
CSS

.container {
display: flex;
background-color: lightyellow;
height: calc(100vh - 20px);
}
.controls {
background-color: lightgrey;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
flex: 25%;
}
.imagebox {
padding: 2rem;
flex: 75%;
}
.image-surface {
overflow: hidden;
margin: auto;
border: 1px solid;
height: 100%;
width: auto;
--collage-ap: 110 / 85;
aspect-ratio: var(--collage-ap);
}
.showbuton {
font-size: 2rem;
}
.templates {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.templates li {
list-style-type: none;
}
#page_size_selector {
width: 100%;
}
.template {
width: 100px;
height: 100px;
}
.template-selected {
background-color: green;
}
.template div {
border: 1px solid;
}
.single {
display: grid;
}
.one-two {
display: grid;
grid-template-areas:
"A B"
"A C";
}
.one-two .img1{
grid-area: A;
}
.half-topbottom {
display: grid;
}
.two-one-two-leftright {
display: grid;
grid-template-areas:
"A B B C"
"D B B E";
}
.two-one-two-leftright .img1 {
grid-area: B;
}
.two-one-two-topbottom {
display: grid;
grid-template-areas:
"A B"
"C C"
"C C"
"D E"
}
.two-one-two-topbottom .img1 {
grid-area: C;
}
.two-row {
display: grid;
grid-template-areas:
"A B"
}
.three-row {
display: grid;
grid-template-areas:
"A B C"
}
.four-row {
display: grid;
grid-template-areas:
"A B C D"
}