1diff --git a/pkg/list/list.go b/pkg/list/list.go
2index dfc3fb7bce58752364d08c552a45be6eb47b047a..3aa9d65676a9bffc0007249d53373ac2dfc209df 100644
3--- a/pkg/list/list.go
4+++ b/pkg/list/list.go
5@@ -13,6 +13,25 @@ Left T
6 Right U
7 }
8
9+func Chunck[T any](slice []T, size int) [][]T {
10+ chuncks := make([][]T, size)
11+
12+ for i := 0; i < len(slice); i += size {
13+ for x := 0; x < size; x++ {
14+ end := i + x
15+
16+ if end > len(slice) {
17+ break
18+ }
19+
20+ chuncks[x] = append(chuncks[x], slice[end])
21+ }
22+
23+ }
24+
25+ return chuncks
26+}
27+
28 func Zip[T, U any](left []T, right []U) []Pair[T, U] {
29 // pick the array with the smaller length
30 l := len(left)
31diff --git a/scss/main.scss b/scss/main.scss
32index addae37547d11c435af03c54f643ed454cf146f5..8220af6ae62db68b8e37fbebd048b0f2abd7e421 100644
33--- a/scss/main.scss
34+++ b/scss/main.scss
35@@ -1,9 +1,9 @@
36 $breakpoint: 360px;
37
38-$tablet: $breakpoint;
39+$tablet: 480px;
40 $body-font-size: 1rem;
41 $radius-rounded: 0;
42-$container-max-width: 920px;
43+$container-max-width: 1080px;
44
45 $navbar-breakpoint: $breakpoint;
46
47@@ -34,15 +34,16 @@ @import "bulma/sass/elements/_all.sass";
48
49 body {
50 font-family: $family-primary;
51- padding-bottom: 10px;
52 }
53
54 .input, .button{
55 border-radius: 0;
56 }
57+
58 .wide-column {
59 width: 100%;
60 }
61+
62 .is-mono {
63 font-family: monospace;
64 }
65@@ -71,17 +72,17 @@ }
66
67
68 .card-image {
69- margin: 5px;
70+ padding: 5px;
71 }
72
73
74 .image.is-fit {
75 height: auto;
76- width: 130px;
77+ width: 100%;
78+}
79
80- @include until($breakpoint) {
81- width: auto;
82- }
83+.column {
84+ padding: 0;
85 }
86
87 th {
88diff --git a/templates/album.qtpl b/templates/album.qtpl
89index 9f4c0bd67ae7fdd6d21ebf52839cc6197be17f3c..328c6d444892cad0792ba27695045a93199e0b0f 100644
90--- a/templates/album.qtpl
91+++ b/templates/album.qtpl
92@@ -1,4 +1,5 @@
93 {% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
94+{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
95
96 {% code
97 type AlbumPage struct {
98@@ -26,8 +27,10 @@ {% for _, a := range p.Albums %}
99 <a href="/album/?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
100 {% endfor %}
101 </div>
102-<div class="columns is-multiline">
103-{% for _, media := range p.Medias %}
104+<div class="columns">
105+{% for _, c := range list.Chunck(p.Medias, 4) %}
106+ <div class="column is-3">
107+ {% for _, media := range c %}
108 <div class="card-image">
109 {% if media.IsVideo() %}
110 <video class="image is-fit" controls muted="true" poster="/media/thumbnail/?path_hash={%s media.PathHash %}" preload="{%s p.PreloadAttr() %}">
111@@ -38,6 +41,8 @@ <figure class="image is-fit">
112 <img src="/media/thumbnail/?path_hash={%s media.PathHash %}">
113 </figure>
114 {% endif %}
115+ </div>
116+ {% endfor %}
117 </div>
118 {% endfor %}
119 </div>
120diff --git a/templates/media.qtpl b/templates/media.qtpl
121index 11fc9bcd5a62b0e6d0b7bf0e0a0cf51ce96b27de..7dcdf54a8c8e329be1b29912260e59d5e22b1ba5 100644
122--- a/templates/media.qtpl
123+++ b/templates/media.qtpl
124@@ -1,4 +1,5 @@
125 {% import "git.sr.ht/~gabrielgio/img/pkg/database/repository" %}
126+{% import "git.sr.ht/~gabrielgio/img/pkg/list" %}
127
128 {% code
129 type MediaPage struct {
130@@ -18,8 +19,10 @@
131 {% func (p *MediaPage) Title() %}Media{% endfunc %}
132
133 {% func (p *MediaPage) Content() %}
134-<div class="columns is-multiline">
135-{% for _, media := range p.Medias %}
136+<div class="columns">
137+{% for _, c := range list.Chunck(p.Medias, 4) %}
138+ <div class="column is-3">
139+ {% for _, media := range c %}
140 <div class="card-image">
141 {% if media.IsVideo() %}
142 <video class="image is-fit" controls muted="true" poster="/media/thumbnail/?path_hash={%s media.PathHash %}" preload="{%s p.PreloadAttr() %}">
143@@ -30,6 +33,8 @@ <figure class="image is-fit">
144 <img src="/media/thumbnail/?path_hash={%s media.PathHash %}">
145 </figure>
146 {% endif %}
147+ </div>
148+ {% endfor %}
149 </div>
150 {% endfor %}
151 </div>