[READ-ONLY] Mirror of https://github.com/probablykasper/lumix. Art website (unfinished)
art
website
LUMIX_ENV -> APP_ENV. Moved letsencrypt services to seperate docker-compose file
+244
-32
+1
-1
.env
+1
-1
.env
+4
-4
README.md
+4
-4
README.md
···
4
4
### Get Started
5
5
- Install Docker Compose if you do not already have it.
6
6
- Set your environment variables in `.env`. This assumes your server only uses *one* domain.
7
-
- `LUMIX_ENV`: `dev` or `production`.
7
+
- `APP_ENV`: `dev` or `production`.
8
8
- `CERT_DOMAIN`: Set this to your domain name.
9
9
- `CERT_EMAIL`: The email your TLS certficiate will be registered with.
10
10
- Create the file `web/node/keys.js`, and fill in your Google API Client ID and Client Secret in it. To get those:
···
24
24
```
25
25
26
26
### Usage
27
-
- Register TLS certificate: `docker-compose up letsencrypt-init`.
28
-
- Renew TLS certificate: `docker-compose up letsencrypt-renew`.
29
-
- Start server: `docker-compose up web`.
27
+
- Register TLS certificate: `docker-compose -f docker-compose-extras.yml up letsencrypt-init`.
28
+
- Renew TLS certificate: `docker-compose -f docker-compose-extras.yml up letsencrypt-renew`.
29
+
- Start server: `docker-compose up`.
+22
docker-compose-extras.yml
+22
docker-compose-extras.yml
···
1
+
letsencrypt-init:
2
+
# https://stackoverflow.com/questions/39846649/how-to-use-lets-encrypt-with-docker-container-based-on-the-node-js-image
3
+
image: certbot/certbot:v0.21.1
4
+
env_file:
5
+
- .env
6
+
ports:
7
+
- 80:80
8
+
- 443:443
9
+
volumes:
10
+
- ./web/letsencrypt/etc/letsencrypt:/etc/letsencrypt
11
+
- ./web/letsencrypt/var/lib/letsencrypt:/var/lib/letsencrypt
12
+
- ./web/letsencrypt/usr/share/nginx/html:/usr/share/nginx/html
13
+
command: certonly -n -d ${CERT_DOMAIN} -m ${CERT_EMAIL} --standalone --agree-tos
14
+
letsencrypt-renew:
15
+
image: certbot/certbot:v0.21.1
16
+
env_file:
17
+
- .env
18
+
volumes:
19
+
- ./web/letsencrypt/etc/letsencrypt:/etc/letsencrypt
20
+
- ./web/letsencrypt/var/lib/letsencrypt:/var/lib/letsencrypt
21
+
- ./web/letsencrypt/usr/share/nginx/html:/usr/share/nginx/html
22
+
command: certonly -n -d ${CERT_DOMAIN} --webroot -w /usr/share/nginx/html --agree-tos
-23
docker-compose.yml
-23
docker-compose.yml
···
37
37
volumes:
38
38
- ./db/db:/data/db
39
39
restart: always
40
-
41
-
letsencrypt-init:
42
-
# https://stackoverflow.com/questions/39846649/how-to-use-lets-encrypt-with-docker-container-based-on-the-node-js-image
43
-
image: certbot/certbot:v0.21.1
44
-
env_file:
45
-
- .env
46
-
ports:
47
-
- 80:80
48
-
- 443:443
49
-
volumes:
50
-
- ./web/letsencrypt/etc/letsencrypt:/etc/letsencrypt
51
-
- ./web/letsencrypt/var/lib/letsencrypt:/var/lib/letsencrypt
52
-
- ./web/letsencrypt/usr/share/nginx/html:/usr/share/nginx/html
53
-
command: certonly -n -d ${CERT_DOMAIN} -m ${CERT_EMAIL} --standalone --agree-tos
54
-
letsencrypt-renew:
55
-
image: certbot/certbot:v0.21.1
56
-
env_file:
57
-
- .env
58
-
volumes:
59
-
- ./web/letsencrypt/etc/letsencrypt:/etc/letsencrypt
60
-
- ./web/letsencrypt/var/lib/letsencrypt:/var/lib/letsencrypt
61
-
- ./web/letsencrypt/usr/share/nginx/html:/usr/share/nginx/html
62
-
command: certonly -n -d 2.kasp.io --webroot -w /usr/share/nginx/html --agree-tos
+215
-1
web/static/global.css
+215
-1
web/static/global.css
···
1
-
table{border-collapse:collapse;border-spacing:0}h1{font-size:48px}h2{font-size:38px}h3{font-size:28px}h4{font-size:22px}a,aside,audio,body,button,canvas,div,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,img,input,label,legend,li,menu,nav,ol,p,section,span,table,tbody,td,tfoot,th,thead,tr,ul,video{color:#3f3f3f;font:inherit;margin:0;padding:0;border:0;font-size:inherit;vertical-align:baseline;outline:none}img{display:block}a:active,a:hover,a:link,a:visited{color:inherit;text-decoration:none}article,aside,details,figcaption,figure,footer,header,hgroup,input,menu,nav,section,textarea{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}button{cursor:pointer}label{cursor:text}html{font-family:Rubik,sans-serif}body{background-color:#fff;display:grid}header.site-header{font-size:16px;z-index:5;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#3f3f3f}header.site-header .left-side-header,header.site-header .right-side-header{width:200px;padding:0 8px}header.site-header .left-side-header{display:flex;align-items:center}header.site-header .left-side-header a.header-logo{font-size:38px;padding:8px}header.site-header input.search{font-size:15px;padding:10px 14px;border-radius:5px;width:250px;background-color:#f3f3f3}header.site-header .right-side-header{display:flex;align-items:center;justify-content:flex-end}header.site-header .right-side-header a.menu-bar-item{padding:12px 8px;position:relative}header.site-header .right-side-header a.menu-bar-item:hover:before{width:50%}header.site-header .right-side-header a.menu-bar-item:focus:before{width:80%;transform:translate(-50%,-2px)}header.site-header .right-side-header a.menu-bar-item:before{content:"";position:absolute;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:#717171;bottom:0;transform:translate(-50%);left:50%;height:2px;width:0;border-radius:5px}header.site-header .right-side-header .account-icon-container{max-height:100%;position:relative}header.site-header .right-side-header .account-icon-container img.account-icon{margin:10px 0;cursor:pointer}header.site-header .right-side-header .account-icon-container .account-box{z-index:10;background-color:#fff;box-shadow:0 4px 8px 0 rgba(0,0,0,.24);position:absolute;right:0;top:calc(100% - 8px);overflow:hidden;height:0;width:100px;pointer-events:none;transform-origin:right top;transition:all .2s cubic-bezier(.4,0,1,1)}header.site-header .right-side-header .account-icon-container .account-box.visible{height:170px;width:200px;pointer-events:all;transition:all .3s cubic-bezier(0,0,.2,1)}header.site-header .right-side-header .account-icon-container .account-box .spacer{height:10px}header.site-header .right-side-header .account-icon-container .account-box a.account-box-item{height:50px;display:flex;align-items:center;padding:0 18px;flex-grow:1;cursor:pointer}header.site-header .right-side-header .account-icon-container .account-box a.account-box-item .item-text{margin-left:8px;font-size:15px;color:#3f3f3f}header.site-header .right-side-header .account-icon-container .account-box a.account-box-item:hover{background-color:#f3f3f3}html .center-container{position:absolute;height:calc(100% - 70px);width:100%;top:70px;min-height:200px;display:flex;justify-content:center;align-items:center;flex-direction:column}html .center-container p.center-logo{font-size:128px}html .center-container p.tagline{font-size:16px}html .stuff{height:900px;width:200px;margin:auto;background-color:#ffa65c}html .button{padding:12px 8px;position:relative}html .button:hover:before{width:50%}html .button:focus:before{width:80%;transform:translate(-50%,-2px)}html .button:before{content:"";position:absolute;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:#717171;bottom:0;transform:translate(-50%);left:50%;height:2px;width:0;border-radius:5px}html .form-container{position:absolute;height:calc(100% - 70px);width:100%;top:70px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:15px}html .form-container .form input.form-field{padding:10px 14px;margin-top:5px;margin-bottom:15px;border-radius:5px;width:250px;background-color:#f3f3f3}
1
+
table {
2
+
border-collapse: collapse;
3
+
border-spacing: 0; }
4
+
5
+
h1 {
6
+
font-size: 48px; }
7
+
8
+
h2 {
9
+
font-size: 38px; }
10
+
11
+
h3 {
12
+
font-size: 28px; }
13
+
14
+
h4 {
15
+
font-size: 22px; }
16
+
17
+
body, div, img, ol, ul, li,
18
+
span, h1, h2, h3, h4, h5, h6, p, a,
19
+
form, label, legend, fieldset,
20
+
table, tbody, tfoot, thead, tr, th, td,
21
+
aside, canvas, footer, header, menu, nav,
22
+
section, audio, video, input, button {
23
+
color: #3F3F3F;
24
+
font: inherit;
25
+
margin: 0;
26
+
padding: 0;
27
+
border: 0;
28
+
font-size: inherit;
29
+
vertical-align: baseline;
30
+
outline: none; }
31
+
32
+
img {
33
+
display: block; }
34
+
35
+
a:link, a:visited, a:hover, a:active {
36
+
color: inherit;
37
+
text-decoration: none; }
38
+
39
+
article, aside, details, figcaption, figure,
40
+
footer, header, hgroup, menu, nav, section,
41
+
input, textarea {
42
+
display: block; }
43
+
44
+
body {
45
+
line-height: 1; }
46
+
47
+
ol, ul {
48
+
list-style: none; }
49
+
50
+
blockquote, q {
51
+
quotes: none; }
52
+
53
+
blockquote:before, blockquote:after,
54
+
q:before, q:after {
55
+
content: '';
56
+
content: none; }
57
+
58
+
button {
59
+
cursor: pointer; }
60
+
61
+
label {
62
+
cursor: text; }
63
+
64
+
html {
65
+
font-family: "Rubik", sans-serif; }
66
+
67
+
body {
68
+
background-color: #FFFFFF;
69
+
display: grid; }
70
+
71
+
header.site-header {
72
+
font-size: 16px;
73
+
z-index: 5;
74
+
height: 70px;
75
+
display: flex;
76
+
align-items: center;
77
+
justify-content: space-between;
78
+
padding: 0px 20px;
79
+
color: #3F3F3F; }
80
+
header.site-header .left-side-header, header.site-header .right-side-header {
81
+
width: 200px;
82
+
padding: 0px 8px; }
83
+
header.site-header .left-side-header {
84
+
display: flex;
85
+
align-items: center; }
86
+
header.site-header .left-side-header a.header-logo {
87
+
font-size: 38px;
88
+
padding: 8px; }
89
+
header.site-header input.search {
90
+
font-size: 15px;
91
+
padding: 10px 14px;
92
+
border-radius: 5px;
93
+
width: 250px;
94
+
background-color: #F3F3F3; }
95
+
header.site-header .right-side-header {
96
+
display: flex;
97
+
align-items: center;
98
+
justify-content: flex-end; }
99
+
header.site-header .right-side-header a.menu-bar-item {
100
+
padding: 12px 8px;
101
+
position: relative; }
102
+
header.site-header .right-side-header a.menu-bar-item:hover::before {
103
+
width: 50%; }
104
+
header.site-header .right-side-header a.menu-bar-item:focus::before {
105
+
width: 80%;
106
+
transform: translate(-50%, -2px); }
107
+
header.site-header .right-side-header a.menu-bar-item::before {
108
+
content: "";
109
+
position: absolute;
110
+
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) all;
111
+
background-color: #717171;
112
+
bottom: 0px;
113
+
transform: translate(-50%, 0px);
114
+
left: 50%;
115
+
height: 2px;
116
+
width: 0%;
117
+
border-radius: 5px; }
118
+
header.site-header .right-side-header .account-icon-container {
119
+
max-height: 100%;
120
+
position: relative; }
121
+
header.site-header .right-side-header .account-icon-container img.account-icon {
122
+
margin: 10px 0px;
123
+
cursor: pointer; }
124
+
header.site-header .right-side-header .account-icon-container .account-box {
125
+
z-index: 10;
126
+
background-color: #FFFFFF;
127
+
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.24);
128
+
position: absolute;
129
+
right: 0px;
130
+
top: calc(100% - 8px);
131
+
overflow: hidden;
132
+
height: 0px;
133
+
width: 100px;
134
+
pointer-events: none;
135
+
transform-origin: right top;
136
+
transition: 0.2s cubic-bezier(0.4, 0, 1, 1) all; }
137
+
header.site-header .right-side-header .account-icon-container .account-box.visible {
138
+
height: calc(10px + 50px*3 + 10px);
139
+
width: 200px;
140
+
pointer-events: all;
141
+
transition: 0.3s cubic-bezier(0, 0, 0.2, 1) all; }
142
+
header.site-header .right-side-header .account-icon-container .account-box .spacer {
143
+
height: 10px; }
144
+
header.site-header .right-side-header .account-icon-container .account-box a.account-box-item {
145
+
height: 50px;
146
+
display: flex;
147
+
align-items: center;
148
+
padding: 0px 18px;
149
+
flex-grow: 1;
150
+
cursor: pointer; }
151
+
header.site-header .right-side-header .account-icon-container .account-box a.account-box-item .item-text {
152
+
margin-left: 8px;
153
+
font-size: 15px;
154
+
color: #3F3F3F; }
155
+
header.site-header .right-side-header .account-icon-container .account-box a.account-box-item:hover {
156
+
background-color: #F3F3F3; }
157
+
158
+
html .center-container {
159
+
position: absolute;
160
+
height: calc(100% - 70px);
161
+
width: 100%;
162
+
top: 70px;
163
+
min-height: 200px;
164
+
display: flex;
165
+
justify-content: center;
166
+
align-items: center;
167
+
flex-direction: column; }
168
+
html .center-container p.center-logo {
169
+
font-size: 128px; }
170
+
html .center-container p.tagline {
171
+
font-size: 16px; }
172
+
173
+
html .stuff {
174
+
height: 900px;
175
+
width: 200px;
176
+
margin: auto;
177
+
background-color: #FFA65C; }
178
+
179
+
html .button {
180
+
padding: 12px 8px;
181
+
position: relative; }
182
+
html .button:hover::before {
183
+
width: 50%; }
184
+
html .button:focus::before {
185
+
width: 80%;
186
+
transform: translate(-50%, -2px); }
187
+
html .button::before {
188
+
content: "";
189
+
position: absolute;
190
+
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) all;
191
+
background-color: #717171;
192
+
bottom: 0px;
193
+
transform: translate(-50%, 0px);
194
+
left: 50%;
195
+
height: 2px;
196
+
width: 0%;
197
+
border-radius: 5px; }
198
+
199
+
html .form-container {
200
+
position: absolute;
201
+
height: calc(100% - 70px);
202
+
width: 100%;
203
+
top: 70px;
204
+
display: flex;
205
+
align-items: center;
206
+
justify-content: center;
207
+
flex-direction: column;
208
+
font-size: 15px; }
209
+
html .form-container .form input.form-field {
210
+
padding: 10px 14px;
211
+
margin-top: 5px;
212
+
margin-bottom: 15px;
213
+
border-radius: 5px;
214
+
width: 250px;
215
+
background-color: #F3F3F3; }
-1
web/static/global.js
-1
web/static/global.js
+1
-1
web/web.Dockerfile
+1
-1
web/web.Dockerfile