aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/assets
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2020-05-25 15:07:03 -0700
commitb9c5fcf085bed9c6100283133531b36bfbb06cf0 (patch)
tree7baa4d16c9d6c06745727c7c273065a29b8fc1d7 /src/assets
parentab7ac44c191e3b7dea696e76b74097e23f73b18c (diff)
downloadhomer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.gz
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.tar.zst
homer-b9c5fcf085bed9c6100283133531b36bfbb06cf0.zip
Build system integration using vue-cli.
Diffstat (limited to 'src/assets')
-rw-r--r--src/assets/app.scss336
-rw-r--r--src/assets/defaults.yml39
-rw-r--r--src/assets/themes/sui.scss34
3 files changed, 409 insertions, 0 deletions
diff --git a/src/assets/app.scss b/src/assets/app.scss
new file mode 100644
index 0000000..4b69864
--- /dev/null
+++ b/src/assets/app.scss
@@ -0,0 +1,336 @@
1@charset "utf-8";
2
3@import url("//fonts.googleapis.com/css?family=Lato:400,700|Pacifico|Raleway&display=swap");
4@import "bulma";
5
6// Themes import
7@import "./themes/sui.scss";
8
9@mixin ellipsis() {
10 white-space: nowrap;
11 overflow: hidden;
12 text-overflow: ellipsis;
13}
14
15html {
16 height: 100%;
17}
18
19body {
20 font-family: "Raleway", sans-serif;
21 height: 100%;
22
23 #app {
24 min-height: 100%;
25 background-color: var(--background);
26 color: var(--text);
27 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
28
29 a {
30 &:hover {
31 color: var(--link-hover);
32 }
33 }
34
35 .title {
36 color: var(--text-title);
37 }
38 .subtitle {
39 color: var(--text-subtitle);
40 }
41
42 .card {
43 background-color: var(--card-background);
44 box-shadow: 0 2px 15px 0 var(--card-shadow);
45 &:hover {
46 background-color: var(--card-background);
47 }
48 }
49
50 .message {
51 background-color: var(--card-background);
52 .message-body {
53 color: var(--text);
54 }
55 }
56
57 .footer {
58 background-color: var(--card-background);
59 box-shadow: 0 2px 15px 0 var(--card-shadow);
60 }
61 }
62
63 h1,
64 h2,
65 h3,
66 h4,
67 h5,
68 h6 {
69 font-family: "Lato", sans-serif;
70 }
71
72 h1 {
73 font-size: 2rem;
74 }
75
76 h2 {
77 font-size: 1.7rem;
78 margin-top: 2rem;
79 margin-bottom: 1rem;
80
81 .fas,
82 .fab,
83 .far {
84 margin-right: 10px;
85 }
86
87 span {
88 font-weight: bold;
89 color: var(--highlight-secondary);
90 }
91 }
92
93 [v-cloak] {
94 display: none;
95 }
96
97 #bighead {
98 color: var(--text-header);
99
100 .dashboard-title {
101 padding: 6px 0 0 80px;
102 }
103
104 .first-line {
105 height: 100px;
106 vertical-align: center;
107 background-color: var(--highlight-primary);
108
109 h1 {
110 margin-top: -12px;
111 font-size: 2rem;
112 }
113
114 .headline {
115 margin-top: 5px;
116 font-size: 0.9rem;
117 }
118
119 .container {
120 height: 80px;
121 padding: 10px 0;
122 }
123
124 .logo {
125 float: left;
126 i {
127 vertical-align: top;
128 padding: 8px 15px;
129 font-size: 50px;
130 }
131
132 img {
133 padding: 10px;
134 max-height: 70px;
135 max-width: 70px;
136 }
137 }
138 }
139 .navbar,
140 .navbar-menu {
141 background-color: var(--highlight-secondary);
142
143 a {
144 color: var(--text-header);
145 padding: 8px 12px;
146 &:hover,
147 &:focus {
148 color: var(--text-header);
149 background-color: var(--highlight-hover);
150 }
151 }
152 }
153 .navbar-end {
154 text-align: right;
155 }
156 }
157
158 #main-section {
159 margin-bottom: 2rem;
160 padding: 0;
161
162 h2 {
163 padding-bottom: 0px;
164 @include ellipsis();
165 }
166
167 .title {
168 font-size: 1.1em;
169 @include ellipsis();
170 }
171
172 .subtitle {
173 font-size: 0.9em;
174 @include ellipsis();
175 }
176
177 .container {
178 padding: 1.2rem 0.75rem;
179 }
180
181 .message {
182 margin-top: 45px;
183 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
184
185 .message-header {
186 font-weight: bold;
187 }
188
189 .message-body {
190 border: none;
191 }
192 }
193 }
194
195 .media-content {
196 overflow: hidden;
197 text-overflow: inherit;
198 }
199
200 .tag {
201 color: var(--highlight-secondary);
202 background-color: var(--highlight-secondary);
203 position: absolute;
204 top: 1rem;
205 right: -0.2rem;
206 width: 3px;
207 overflow: hidden;
208 transition: all 0.2s ease-out;
209 padding: 0;
210
211 .tag-text {
212 display: none;
213 }
214 }
215
216 .card {
217 border-radius: 5px;
218 border: none;
219 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
220 transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
221
222 a {
223 outline: none;
224 }
225 }
226
227 .card:hover {
228 transform: translate(0, -3px);
229
230 .tag {
231 width: auto;
232 color: #ffffff;
233 padding: 0 0.75em;
234
235 .tag-text {
236 display: block;
237 }
238 }
239 }
240
241 .card-content {
242 height: 85px;
243 padding: 1.3rem;
244 }
245
246 .layout-vertical {
247 .card {
248 border-radius: 0;
249 }
250
251 .column div:first-of-type .card {
252 border-radius: 5px 5px 0 0;
253 }
254
255 .column div:last-child .card {
256 border-radius: 0 0 5px 5px;
257 }
258 }
259
260 .footer {
261 position: fixed;
262 left: 0;
263 right: 0;
264 bottom: 0;
265 padding: 0.5rem;
266 text-align: left;
267 color: #676767;
268 font-size: 0.85rem;
269 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
270 }
271
272 .no-footer {
273 #main-section {
274 margin-bottom: 0;
275 }
276
277 .footer {
278 display: none;
279 }
280 }
281
282 .search-bar {
283 position: relative;
284 display: inline-block;
285 input {
286 border: none;
287 background-color: var(--highlight-hover);
288 border-radius: 5px;
289 margin-top: 2px;
290 padding: 2px 12px 2px 30px;
291 transition: all 100ms linear;
292 color: #ffffff;
293 height: 30px;
294 width: 100px;
295
296 &:focus {
297 color: #000000;
298 width: 250px;
299 background-color: #ffffff;
300 }
301 }
302
303 .search-label::before {
304 font-family: "Font Awesome 5 Free";
305 position: absolute;
306 top: 14px;
307 left: 16px;
308 content: "\f002";
309 font-weight: 900;
310 width: 20px;
311 height: 20px;
312 color: #ffffff;
313 }
314
315 &:focus-within .search-label::before {
316 color: #6e6e6e;
317 }
318 }
319
320 .offline-message {
321 text-align: center;
322 margin: 35px 0;
323
324 svg {
325 font-size: 2rem;
326 }
327
328 svg.fa-redo-alt {
329 font-size: 1.3rem;
330 line-height: 1rem;
331 vertical-align: middle;
332 cursor: pointer;
333 color: #3273dc;
334 }
335 }
336}
diff --git a/src/assets/defaults.yml b/src/assets/defaults.yml
new file mode 100644
index 0000000..1909328
--- /dev/null
+++ b/src/assets/defaults.yml
@@ -0,0 +1,39 @@
1---
2# Default configuration
3
4title: "Dashboard"
5subtitle: "Homer"
6logo: "logo.png"
7
8header: true
9footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>' # set false if you want to hide it.
10
11theme: default
12colors:
13 light:
14 highlight-primary: "#3367d6"
15 highlight-secondary: "#4285f4"
16 highlight-hover: "#5a95f5"
17 background: "#f5f5f5"
18 card-background: "#ffffff"
19 text: "#363636"
20 text-header: "#ffffff"
21 text-title: "#303030"
22 text-subtitle: "#424242"
23 card-shadow: rgba(0, 0, 0, 0.1)
24 link-hover: "#363636"
25 dark:
26 highlight-primary: "#3367d6"
27 highlight-secondary: "#4285f4"
28 highlight-hover: "#5a95f5"
29 background: "#131313"
30 card-background: "#2b2b2b"
31 text: "#eaeaea"
32 text-header: "#ffffff"
33 text-title: "#fafafa"
34 text-subtitle: "#f5f5f5"
35 card-shadow: rgba(0, 0, 0, 0.4)
36 link-hover: "#ffdd57"
37
38links: []
39services: []
diff --git a/src/assets/themes/sui.scss b/src/assets/themes/sui.scss
new file mode 100644
index 0000000..f94433e
--- /dev/null
+++ b/src/assets/themes/sui.scss
@@ -0,0 +1,34 @@
1/*
2 * SUI theme
3 * Inpired by the great https://github.com/jeroenpardon/sui start page
4 * Author: @bastienwirtz
5 */
6body #app.theme-sui {
7 #bighead .dashboard-title {
8 padding: 65px 0 0 12px;
9
10 h1 {
11 margin-top: 0;
12 font-weight: bold;
13 font-size: 2.2rem;
14 }
15 }
16
17 .navbar .navbar-item:hover {
18 background-color: transparent;
19 }
20
21 .card,
22 .card:hover {
23 background-color: transparent;
24 box-shadow: none;
25
26 .title {
27 font-weight: bold;
28 }
29
30 .card-content {
31 padding: 0;
32 }
33 }
34}