1diff --git a/scss/main.scss b/scss/main.scss
2index 89d209699c14cbfb185cf0556a0805c3814ebd82..addae37547d11c435af03c54f643ed454cf146f5 100644
3--- a/scss/main.scss
4+++ b/scss/main.scss
5@@ -1,4 +1,4 @@
6-$breakpoint: 520px;
7+$breakpoint: 360px;
8
9 $tablet: $breakpoint;
10 $body-font-size: 1rem;
11@@ -18,6 +18,11 @@
12 $table-cell-padding: 0.5em;
13 $table-cell-border-width: 0;
14
15+$tag-radius: 0;
16+$tag-delete-margin: 15px;
17+
18+$title-weight: normal;
19+
20 @import "bulma/sass/base/_all.sass";
21 @import "bulma/sass/utilities/_all.sass";
22 @import "bulma/sass/grid/_all.sass";
23@@ -28,7 +33,8 @@ @import "bulma/sass/layout/_all.sass";
24 @import "bulma/sass/elements/_all.sass";
25
26 body {
27- font-family: $family-primary
28+ font-family: $family-primary;
29+ padding-bottom: 10px;
30 }
31
32 .input, .button{
33@@ -85,3 +91,12 @@
34 .img {
35 object-fit: cover;
36 }
37+
38+// exting size
39+.text-size-1{
40+ @extend .is-size-4 !optional;
41+}
42+
43+.text-size-2{
44+ @extend .is-size-5 !optional;
45+}
46diff --git a/templates/album.qtpl b/templates/album.qtpl
47index ce8111e926fdfff1f11d2947d5822bb7b1ef09c2..9f4c0bd67ae7fdd6d21ebf52839cc6197be17f3c 100644
48--- a/templates/album.qtpl
49+++ b/templates/album.qtpl
50@@ -20,10 +20,10 @@
51 {% func (p *AlbumPage) Title() %}Media{% endfunc %}
52
53 {% func (p *AlbumPage) Content() %}
54-<h1 class="title">{%s p.Name %}</h1>
55+<h1 class="title text-size-1">{%s p.Name %}</h1>
56 <div class="tags are-large">
57 {% for _, a := range p.Albums %}
58- <a href="/album/?albumId={%s FromUInttoString(&a.ID) %}" class="tag">{%s a.Name %}</a>
59+ <a href="/album/?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
60 {% endfor %}
61 </div>
62 <div class="columns is-multiline">
63@@ -41,7 +41,7 @@ {% endif %}
64 </div>
65 {% endfor %}
66 </div>
67-<div class="row">
68+<div>
69 <a href="/media/?page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
70 </div>
71 {% endfunc %}
72diff --git a/templates/base.qtpl b/templates/base.qtpl
73index 772167d70fbbcb8c1374c2f10243122c33085a25..b1878ba8f436c065ca17b9e31cebe36f7dcee0be 100644
74--- a/templates/base.qtpl
75+++ b/templates/base.qtpl
76@@ -33,16 +33,16 @@ </head>
77 <body>
78 <nav class="navbar">
79 <div class="navbar-start">
80- <a href="/fs/" class="navbar-item">
81- files
82+ <a href="/fs/" class="navbar-item text-size-1">
83+ file
84 </a>
85- <a href="/media/" class="navbar-item">
86+ <a href="/media/" class="navbar-item text-size-1">
87 media
88 </a>
89- <a href="/album/" class="navbar-item">
90+ <a href="/album/" class="navbar-item text-size-1">
91 album
92 </a>
93- <a href="/settings/" class="navbar-item">
94+ <a href="/settings/" class="navbar-item text-size-1">
95 settings
96 </a>
97 </div>
98diff --git a/templates/fs.qtpl b/templates/fs.qtpl
99index 489f79fc1ab56f05e95f5e240e2250d5f456f9f4..3dc2c5ab5912b7c9241d8a7a49a1ad5a9cf6051d 100644
100--- a/templates/fs.qtpl
101+++ b/templates/fs.qtpl
102@@ -14,7 +14,7 @@ <div class="panel">
103 <div class="panel-block">
104 <div class="columns file-row is-gapless is-mobile">
105 <div id="path" class="container-fluid">
106- <small>{% for _, h := range p.Page.History %}<a href="/fs?path={%s h.UrlEncodedPath %}" >{%s h.Name %}/</a>{% endfor %}</small>
107+ <small>{% for _, h := range p.Page.History %}<a class="text-size-2" href="/fs?path={%s h.UrlEncodedPath %}" >{%s h.Name %}/</a>{% endfor %}</small>
108 </div>
109 </div>
110 </div>
111@@ -22,15 +22,17 @@ {% for _, f := range p.Page.Files %}
112 <div class="panel-block">
113 <div class="columns wide-column is-mono is-gapless is-mobile">
114 <div class="column">
115+ <span class="text-size-2">
116 {% if p.ShowMode %}{%s f.Info.Mode().String() %} {% endif %}
117 {% if p.ShowOwner %}{%d f.GetGid() %}:{%d f.GetUid() %} {% endif %}
118 {% if f.Info.IsDir() %}
119- <a href="/?path={%s f.UrlEncodedPath %}">{%s f.Info.Name() %}/</a>
120+ </span>
121+ <a class="text-size-2" href="/?path={%s f.UrlEncodedPath %}">{%s f.Info.Name() %}/</a>
122 {% else %}
123 {%s f.Info.Name() %}
124 {% endif %}
125 </div>
126- <div class="column has-text-right">{%dl f.Info.Size() %} B</div>
127+ <div class="column text-size-2 has-text-right">{%dl f.Info.Size() %} B</div>
128 </div>
129 </div>
130 {% endfor %}
131diff --git a/templates/media.qtpl b/templates/media.qtpl
132index ae58e6181411735d7552404a7f6c5c443cb0dcae..11fc9bcd5a62b0e6d0b7bf0e0a0cf51ce96b27de 100644
133--- a/templates/media.qtpl
134+++ b/templates/media.qtpl
135@@ -33,7 +33,7 @@ {% endif %}
136 </div>
137 {% endfor %}
138 </div>
139-<div class="row">
140+<div>
141 <a href="/media/?page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
142 </div>
143 {% endfunc %}
144diff --git a/templates/settings.qtpl b/templates/settings.qtpl
145index 4207439c7d9d685f429ba3298ff3f23383a75581..3d1af81f75a942aaf7221271e19eb82aebd5d7c9 100644
146--- a/templates/settings.qtpl
147+++ b/templates/settings.qtpl
148@@ -15,7 +15,7 @@ <div class="column is-one-third">
149 <form action="/settings/", method="post">
150 <div class="field">
151 <div class="control">
152- <label class="checkbox">
153+ <label class="checkbox text-size-2">
154 <input type="checkbox" id="showMode" name="showMode" {% if p.Settings.ShowMode %}checked{% endif %}>
155 Show File Modes
156 </label>
157@@ -23,7 +23,7 @@ </div>
158 </div>
159 <div class="field">
160 <div class="control">
161- <label class="checkbox">
162+ <label class="checkbox text-size-2">
163 <input type="checkbox" id="showOwner" name="showOwner" {% if p.Settings.ShowOwner %}checked{% endif %}>
164 Show File Owner
165 </label>
166@@ -31,7 +31,7 @@ </div>
167 </div>
168 <div class="field">
169 <div class="control">
170- <label class="checkbox">
171+ <label class="checkbox text-size-2">
172 <input type="checkbox" id="preloadVideoMetadata" name="preloadVideoMetadata" {% if p.Settings.PreloadVideoMetadata %}checked{% endif %}>
173 Preload video metadata
174 </label>
175@@ -44,12 +44,12 @@ </form>
176 </div>
177 <div class="column">
178 {% for _, user := range p.Users %}
179- <div class="panel-block">
180+ <div class="panel-block field">
181 <div class="columns wide-column is-gapless is-mobile">
182- <div class="column">
183+ <div class="column text-size-2">
184 {%s user.Username %}
185 </div>
186- <div class="column">
187+ <div class="column text-size-2">
188 {%s user.Path %}
189 </div>
190 <div class="column has-text-right"><a href="/users?userId={%s FromUInttoString(&user.ID) %}">Edit</a> <a href="/users/delete?userId={%s FromUInttoString(&user.ID) %}" class="is-danger">Delete</a></div>
191@@ -57,7 +57,7 @@ </div>
192 </div>
193 {% endfor %}
194 <div class="field">
195- <a href="/users/" class="button">Create</a>
196+ <a href="/users/" class="button">create</a>
197 </div>
198 </div>
199 </div>