Skip to content
This repository was archived by the owner on Oct 22, 2021. It is now read-only.

Commit 242a3c6

Browse files
GitSquaredGitSquared
committed
Responsive design
1 parent bd2a86d commit 242a3c6

14 files changed

+208
-188
lines changed

‎package-lock.json‎

Lines changed: 17 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/_boot.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ const innerThemesDir = path.join(__dirname, "assets/themes");
2020
const kblayoutsDir = path.join(electron.app.getPath("userData"), "keyboards");
2121
const innerKblayoutsDir = path.join(__dirname, "assets/kb_layouts");
2222

23+
// Fix userData folder not setup on Windows
24+
try {
25+
fs.mkdirSync(electron.app.getPath("userData"));
26+
} catch(e) {
27+
// Folder already exists
28+
}
2329
// Create default settings file
2430
if (!fs.existsSync(settingsFile)) {
2531
fs.writeFileSync(settingsFile, JSON.stringify({

‎src/_renderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ initUI = () => {
140140
document.getElementById("keyboard").setAttribute("class", "animation_state_1 animation_state_2");
141141
setTimeout(() => {
142142
document.getElementById("keyboard").setAttribute("class", "");
143+
initMods();
143144
}, 1100);
144-
initMods();
145145
}, 100);
146146
}, 50);
147147
}, 260);

‎src/assets/css/boot_screen.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
section#boot_screen {
22
position: fixed;
3-
top: 0px;
4-
left: 0px;
3+
top: 0vh;
4+
left: 0vh;
55
width: 100%;
66
height: 100%;
7-
padding: 0px;
8-
margin: 0px;
7+
padding: 0vh;
8+
margin: 0vh;
99
overflow: hidden;
1010

1111
font-family: monospace;
12-
font-size: 15px;
12+
font-size: 1.4vh;
1313
text-align: left;
1414
display: flex;
1515
align-items: flex-end;
@@ -25,10 +25,9 @@ section#boot_screen h1 {
2525
font-family: var(--font_main);
2626
font-size: 10vh;
2727
text-align: center;
28-
border-bottom: 5px solid rgb(var(--color_r), var(--color_g), var(--color_b));
28+
border-bottom: 0.46vh solid rgb(var(--color_r), var(--color_g), var(--color_b));
2929
padding-top: 2vh;
3030
padding-right: 2vh;
3131
padding-left: 1.5vh;
3232
background-color: transparent;
33-
width: 20vw;
3433
}

‎src/assets/css/keyboard.css‎

Lines changed: 63 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ section#keyboard {
44
align-items: center;
55
width: 100vw;
66
position: relative;
7-
top: -10px;
7+
top: -0.925vh;
88
}
99

1010
div.keyboard_row {
@@ -13,15 +13,15 @@ div.keyboard_row {
1313
align-items: center;
1414
justify-content: center;
1515
flex-wrap: nowrap;
16-
margin: 5px 0px;
17-
height: 57px;
16+
margin: 0.46vh 0vh;
17+
height: 5.28vh;
1818
}
1919

2020
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(1) {
21-
transition: width .7s cubic-bezier(0.4, 0, 1, 1) .2s, filter .1s linear .8s;
21+
transition: width .7s cubic-bezier(0.4, 0, 1, 1) .3s, filter .1s linear .8s;
2222
}
2323
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(2) {
24-
transition: width .7s cubic-bezier(0.4, 0, 1, 1) .1s, filter .1s linear .6s;
24+
transition: width .7s cubic-bezier(0.4, 0, 1, 1) .2s, filter .1s linear .6s;
2525
}
2626
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(3) {
2727
transition: width .7s cubic-bezier(0.4, 0, 1, 1), filter .1s linear .5s;
@@ -30,12 +30,12 @@ section#keyboard.animation_state_2 > div.keyboard_row:nth-child(4) {
3030
transition: width .7s cubic-bezier(0.4, 0, 1, 1) .3s, filter .1s linear .8s;
3131
}
3232
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(5) {
33-
transition: width .6s cubic-bezier(0.4, 0, 1, 1) .2s, filter .1s linear .8s;
33+
transition: width .6s cubic-bezier(0.4, 0, 1, 1) .4s, filter .1s linear .8s;
3434
}
3535

3636
section#keyboard.animation_state_1 > * {
3737
filter: brightness(170%);
38-
width: 0px;
38+
width: 0vh;
3939
overflow: hidden;
4040
}
4141

@@ -47,25 +47,25 @@ section#keyboard.animation_state_2 > * {
4747

4848
div.keyboard_row:last-child {
4949
position: relative;
50-
left: 34px;
50+
left: 2.98vh;
5151
}
5252

5353
div.keyboard_key {
54-
height: 53px;
55-
min-width: 53px;
54+
height: 4.9vh;
55+
min-width: 4.9vh;
5656
overflow: hidden;
57-
border-radius: 5px;
57+
border-radius: 0.46vh;
5858
background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
59-
border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
60-
margin: 0px 5px;
59+
border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
60+
margin: 0vh 0.46vh;
6161
display: flex;
6262
align-items: center;
6363
justify-content: center;
6464
position: relative;
6565
}
6666

6767
div.keyboard_key:active, div.keyboard_key.active {
68-
border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
68+
border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
6969
background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 1);
7070
}
7171

@@ -83,40 +83,40 @@ div.keyboard_key.blink {
8383
}
8484

8585
div.keyboard_key > * {
86-
margin: 0px 5px;
87-
padding: 0px;
88-
-webkit-margin-after: 0px;
89-
-webkit-margin-before: 0px;
86+
margin: 0vh 0.46vh;
87+
padding: 0vh;
88+
-webkit-margin-after: 0vh;
89+
-webkit-margin-before: 0vh;
9090
}
9191

9292
div.keyboard_key > h1, div.keyboard_key > h4, div.keyboard_row > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_key:first-child > * {
9393
position: relative;
94-
top: 3px;
95-
font-size: 26px;
94+
top: 0.278vh;
95+
font-size: 2.4vh;
9696
}
9797

9898
div.keyboard_row:not(:nth-child(4)) > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_key:first-child > *, div.keyboard_row:last-child > .keyboard_key > *, div.keyboard_row:nth-child(4) > .keyboard_key:nth-last-child(2) > * {
99-
font-size: 20px;
99+
font-size: 1.85vh;
100100
}
101101

102102
div.keyboard_row:last-child > .keyboard_key:nth-last-child(-n+3) > * {
103-
font-size: 26px;
103+
font-size: 2.4vh;
104104
}
105105

106106
div.keyboard_key > *:not(h1) {
107-
margin: 0px;
108-
font-size: 18px;
107+
margin: 0vh;
108+
font-size: 1.67vh;
109109
position: absolute;
110110
}
111111

112112
div.keyboard_key > h2 {
113-
top: 3px;
114-
left: 3px;
113+
top: 0.278vh;
114+
left: 0.278vh;
115115
}
116116

117117
div.keyboard_key > h3 {
118-
bottom: 3px;
119-
right: 3px;
118+
bottom: 0.278vh;
119+
right: 0.278vh;
120120
}
121121

122122
div.keyboard_key > h4, div.keyboard_row > .keyboard_key:last-child > *:not(h1), div.keyboard_row > .keyboard_key:first-child > *:not(h1) {
@@ -125,56 +125,52 @@ div.keyboard_key > h4, div.keyboard_row > .keyboard_key:last-child > *:not(h1),
125125
}
126126

127127
div.keyboard_row:not(:nth-child(4)):not(:last-child) > .keyboard_key:last-child, div.keyboard_row > .keyboard_key:first-child {
128-
width: 90px;
129-
min-width: 90px;
128+
width: 8.33vh;
129+
min-width: 8.33vh;
130130
}
131131

132-
div.keyboard_key#keyboard_spacebar, div.keyboard_enter {
133-
border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
132+
div.keyboard_key#keyboard_spacebar {
133+
border: 0.19vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
134134
}
135135

136136
div.keyboard_row#row_1 > div.keyboard_enter {
137-
border-bottom-right-radius: 0px;
138-
width: 105px;
139-
min-width: 105px;
140-
}
141-
142-
div.keyboard_row#row_1 > div.keyboard_enter > h1 {
143-
position: relative;
144-
left: 5px;
137+
border: 0.19vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
138+
border-bottom-left-radius: 0vh;
139+
width: 9.72vh;
140+
min-width: 9.72vh;
145141
}
146142

147143
div.keyboard_row#row_2 > div.keyboard_enter {
148-
border-top-right-radius: 0px;
149-
border-top-left-radius: 0px;
150-
border-top: 2px solid var(--color_light_black);
151-
width: 84px;
152-
min-width: 84px;
153-
margin-top: 0px;
154-
height: 69px;
155-
top: -4px;
156-
right: -11px;
144+
border: 0.19vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
145+
border-top-right-radius: 0vh;
146+
border-top: 0.3vh solid var(--color_light_black);
147+
width: 7.78vh;
148+
min-width: 7.78vh;
149+
margin-top: 0vh;
150+
height: 6.389vh;
151+
top: -0.37vh;
152+
right: 1vh;
157153
}
158154

159155
div.keyboard_row#row_2 > div.keyboard_enter:active, div.keyboard_row#row_2 > div.keyboard_enter.active {
160-
border-top: 2px solid rgb(var(--color_r), var(--color_g), var(--color_b));
156+
border-top: 0.3vh solid rgb(var(--color_r), var(--color_g), var(--color_b));
161157
}
162158

163159
div.keyboard_key#keyboard_spacebar {
164-
width: 515px;
165-
min-width: 515px;
166-
height: 38px;
160+
width: 47.68vh;
161+
min-width: 47.68vh;
162+
height: 3.52vh;
167163
}
168164

169165
div.keyboard_row:nth-child(4) > div.keyboard_key:last-child {
170166
position: relative;
171-
top: 3px;
167+
top: 0.278vh;
172168
}
173169

174170
div.keyboard_row:last-child > div.keyboard_key:nth-last-child(-n+3) {
175-
margin: 0px;
171+
margin: 0vh;
176172
position: relative;
177-
bottom: 3px;
173+
bottom: 0.278vh;
178174
}
179175

180176
section#keyboard[data-is-caps-lck-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- CAPSLCK: ON"] {
@@ -184,22 +180,22 @@ section#keyboard[data-is-caps-lck-on="true"] div.keyboard_key[data-cmd="ESCAPED|
184180

185181
section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty), section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) {
186182
position: relative;
187-
top: 3px;
188-
font-size: 26px;
189-
margin: 0px 5px;
183+
top: 0.278vh;
184+
font-size: 2.4vh;
185+
margin: 0vh 0.46vh;
190186
}
191187

192188
section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 {
193-
font-size: 20px;
189+
font-size: 1.85vh;
194190
opacity: 1;
195191
}
196192

197193
section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1 {
198-
margin: 0px;
199-
font-size: 18px;
194+
margin: 0vh;
195+
font-size: 1.67vh;
200196
position: absolute;
201-
top: 3px;
202-
left: 3px;
197+
top: 0.278vh;
198+
left: 0.278vh;
203199
}
204200

205201
section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1 {
@@ -214,9 +210,9 @@ section#keyboard[data-is-fn-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- FN:
214210

215211
section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) {
216212
position: relative;
217-
top: 3px;
218-
font-size: 23px;
219-
margin: 0px 5px;
213+
top: 0.278vh;
214+
font-size: 20.278vh;
215+
margin: 0vh 0.46vh;
220216
opacity: 1;
221217
}
222218

0 commit comments

Comments
 (0)