witchcraft.systems
this repo has no description
Css now uses variables for all its colors
ari.express
astrra.space
+46
-34
+8
-7
src/App.svelte
+8
-7
src/App.svelte
···
41
41
</main>
42
42
43
43
<style>
44
+
44
45
/* desktop style */
45
-
46
+
46
47
#Content {
47
48
display: flex;
48
49
/* split the screen in half, left for accounts, right for posts */
···
51
52
flex-direction: row;
52
53
justify-content: space-between;
53
54
align-items: center;
54
-
background-color: #12082b;
55
-
color: #ffffff;
55
+
background-color: var(--background-color);
56
+
color: var(--text-color);
56
57
}
57
58
#Feed {
58
59
width: 65%;
···
74
75
width: 35%;
75
76
display: flex;
76
77
flex-direction: column;
77
-
border: 1px solid #8054f0;
78
-
background-color: #0d0620;
78
+
border: 1px solid var(--border-color);
79
+
background-color: var(--content-background-color);
79
80
height: 80vh;
80
81
padding: 20px;
81
82
margin-left: 20px;
···
96
97
margin-bottom: 20px;
97
98
}
98
99
99
-
/* mobile style */
100
-
@media screen and (max-width: 600px) {
100
+
/* mobile style */
101
+
@media screen and (max-width: 600px) {
101
102
#Content {
102
103
flex-direction: column;
103
104
width: auto;
+18
-8
src/app.css
+18
-8
src/app.css
···
3
3
src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
4
4
}
5
5
6
+
:root {
7
+
--link-color: #646cff;
8
+
--link-hover-color: #535bf2;
9
+
--background-color: #12082b;
10
+
--header-background-color: #1f1145;
11
+
--content-background-color: #0d0620;
12
+
--text-color: white;
13
+
--border-color: #8054f0;
14
+
--indicator-inactive-color: #4a4a4a;
15
+
--indicator-active-color: #8054f0;
16
+
}
17
+
6
18
::-webkit-scrollbar {
7
19
width: 0px;
8
20
background: transparent;
···
35
47
36
48
a {
37
49
font-weight: 500;
38
-
color: #646cff;
50
+
color: var(--link-color);
39
51
text-decoration: inherit;
40
52
}
41
53
a:hover {
42
-
color: #535bf2;
54
+
color: var(--link-hover-color);
43
55
text-decoration: underline;
44
56
}
45
57
···
49
61
place-items: center;
50
62
min-width: 320px;
51
63
min-height: 100vh;
52
-
background-color: #12082b;
64
+
background-color: var(--background-color);
53
65
font-family: 'ProggyClean', monospace;
54
66
font-size: 24px;
55
-
color: white;
56
-
border-color: #8054f0;
67
+
color: var(--text-color);
68
+
border-color: var(--border-color);
57
69
}
58
70
59
71
h1 {
···
68
80
margin-left: auto;
69
81
margin-right: auto;
70
82
text-align: center;
71
-
}
72
-
73
-
83
+
}
+3
-3
src/lib/AccountComponent.svelte
+3
-3
src/lib/AccountComponent.svelte
···
24
24
display: flex;
25
25
text-align: start;
26
26
align-items: center;
27
-
background-color: #12082b;
27
+
background-color: var(--background-color);
28
28
padding: 0px;
29
29
margin-bottom: 15px;
30
-
border: 1px solid #8054f0;
30
+
border: 1px solid var(--border-color);
31
31
}
32
32
#accountName {
33
33
margin-left: 10px;
···
43
43
width: 50px;
44
44
height: 50px;
45
45
margin: 0px;
46
-
border-right: #8054f0 1px solid;
46
+
border-right: var(--border-color) 1px solid;
47
47
}
48
48
</style>
+17
-16
src/lib/PostComponent.svelte
+17
-16
src/lib/PostComponent.svelte
···
77
77
<a
78
78
id="postLink"
79
79
href="{Config.FRONTEND_URL}/profile/{post.authorDid}/post/{post.recordName}"
80
-
>{moment(post.timenotstamp).isBefore(moment().subtract(1, 'month'))
81
-
? moment(post.timenotstamp).format('MMM D, YYYY')
80
+
>{moment(post.timenotstamp).isBefore(moment().subtract(1, "month"))
81
+
? moment(post.timenotstamp).format("MMM D, YYYY")
82
82
: moment(post.timenotstamp).fromNow()}</a
83
83
>
84
84
</p>
···
145
145
</div>
146
146
147
147
<style>
148
+
148
149
a:hover {
149
150
text-decoration: underline;
150
151
}
151
152
#postContainer {
152
153
display: flex;
153
154
flex-direction: column;
154
-
border: 1px solid #8054f0;
155
-
background-color: black;
155
+
border: 1px solid var(--border-color);
156
+
background-color: var(--background-color);
156
157
margin-bottom: 15px;
157
158
overflow-wrap: break-word;
158
159
}
···
161
162
flex-direction: row;
162
163
align-items: center;
163
164
justify-content: start;
164
-
background-color: #1f1145;
165
+
background-color: var(--header-background-color);
165
166
padding: 0px 0px;
166
167
height: fit-content;
167
-
border-bottom: 1px solid #8054f0;
168
+
border-bottom: 1px solid var(--border-color);
168
169
font-weight: bold;
169
170
overflow-wrap: break-word;
170
171
height: 60px;
171
172
}
172
173
#displayName {
173
-
color: white;
174
+
color: var(--text-color);
174
175
font-size: 1.2em;
175
176
padding: 0;
176
177
margin: 0;
177
178
}
178
179
#handle {
179
-
color: #8054f0;
180
+
color: var(--border-color);
180
181
font-size: 0.8em;
181
182
padding: 0;
182
183
margin: 0;
183
184
}
184
185
185
186
#postLink {
186
-
color: #8054f0;
187
+
color: var(--border-color);
187
188
font-size: 0.8em;
188
189
padding: 0;
189
190
margin: 0;
···
193
194
text-align: start;
194
195
flex-direction: column;
195
196
padding: 10px;
196
-
background-color: #0d0620;
197
-
color: white;
197
+
background-color: var(--content-background-color);
198
+
color: var(--text-color);
198
199
overflow-wrap: break-word;
199
200
}
200
201
#replyingText {
···
224
225
height: 100%;
225
226
margin: 0px;
226
227
margin-left: 0px;
227
-
border-right: #8054f0 1px solid;
228
+
border-right: var(--border-color) 1px solid;
228
229
}
229
230
#carouselContainer {
230
231
position: relative;
···
249
250
.indicator {
250
251
width: 8px;
251
252
height: 8px;
252
-
background-color: #4a4a4a;
253
+
background-color: var(--indicator-inactive-color);
253
254
}
254
255
.indicator.active {
255
-
background-color: #8054f0;
256
+
background-color: var(--indicator-active-color);
256
257
}
257
258
#prevBtn,
258
259
#nextBtn {
259
260
background-color: rgba(31, 17, 69, 0.7);
260
-
color: white;
261
-
border: 1px solid #8054f0;
261
+
color: var(--text-color);
262
+
border: 1px solid var(--border-color);
262
263
width: 30px;
263
264
height: 30px;
264
265
cursor: pointer;