Skip to content

Commit d30a162

Browse files
committed
auto: Keyboard help deployment
1 parent b9d19af commit d30a162

7 files changed

Lines changed: 820 additions & 0 deletions

File tree

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
@font-face {
2+
font-family: CharisSILWeb;
3+
font-weight: normal;
4+
font-style: normal;
5+
src: url("https://fonts.languagetechnology.org/fonts/sil/charissil/web/CharisSIL-Regular.woff2") format("woff2");
6+
}
7+
@font-face {
8+
font-family: CharisSILWeb;
9+
font-weight: bold;
10+
font-style: normal;
11+
src: url("https://fonts.languagetechnology.org/fonts/sil/charissil/web/CharisSIL-Bold.woff2") format("woff2");
12+
}
13+
14+
body {
15+
font-family: 'Charis SIL', CharisSILWeb, Gentium, serif;
16+
17+
}
18+
19+
20+
.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content {
21+
display: none;
22+
}
23+
24+
.tab-folder > :last-child, .tab-folder > .tab-content:target {
25+
display: block;
26+
}
27+
.right {
28+
float: right;
29+
}
30+
.left {
31+
float: left;
32+
}
33+
.full {
34+
width: 98%;
35+
min-width: 700px;
36+
}
37+
38+
.red {
39+
color:red;
40+
}
41+
42+
43+
img.responsive {
44+
height: 100px;
45+
width: auto;
46+
}
47+
/* style.css */
48+
.my-class {
49+
vertical-align: baseline;
50+
}
51+
52+
/* Responsive (si besoin) */
53+
@media (max-width: 600px) {
54+
img.responsive {
55+
height: 60px;
56+
}
57+
#container {
58+
flex-direction: column;
59+
text-align: center;
60+
}
61+
}
62+
63+
/* Pour le paragraphe du haut entre les images */
64+
.top-tagline {
65+
font-weight: bold;
66+
text-align: center;
67+
flex: 1;
68+
margin: 2px;
69+
font-size: 2em;
70+
font-style: italic; /* facultatif */
71+
}
72+
73+
/* Pour tous les autres paragraphes "normaux" */
74+
p.tagline {
75+
font-size: 100%;
76+
}
77+
78+
h1.color {
79+
text-align: center;
80+
font-size: 130%;
81+
display: block;
82+
}
83+
.tagline {
84+
text-align: center;
85+
font-style: italic;
86+
}
87+
.buttonlang {
88+
background-color: pink;
89+
border: none;
90+
color: white;
91+
padding: 5px;
92+
word-wrap: break-word;
93+
text-align: center;
94+
text-decoration: none;
95+
display: inline-block;
96+
font-size: 18px;
97+
font-weight: 800;
98+
margin: 6px 30px;
99+
cursor: pointer;
100+
border-radius: 8px;
101+
width: 94%;
102+
animation: pulse 1.5s ease infinite;
103+
}
104+
105+
h3.color {
106+
display: block;
107+
font-weight: bold;
108+
text-align: left;
109+
padding: 1rem;
110+
color: #000000;
111+
background: linear-gradient(90deg, rgba(255,206,0,1) 0%, rgba(255,206,0,0) 100%);
112+
cursor: pointer;
113+
border-radius: 7px;
114+
transition: all 0.25s ease-out;
115+
}
116+
117+
@keyframes pulse {
118+
0% {
119+
transform: scale(1);
120+
box-shadow: 0 2px 2px rgba(0,0,0,.2);
121+
background-color: #F1506C;
122+
}
123+
50% {
124+
transform: scale(1.05);
125+
box-shadow: 0 2px 2px rgba(0,0,0,.2);
126+
background-color: #D21034;
127+
}
128+
100% {
129+
transform: scale(1);
130+
box-shadow: 0 2px 2px rgba(0,0,0,.2);
131+
background-color: #F1506C;
132+
}
133+
}
134+
135+
table {
136+
border-collapse: collapse;
137+
border: 2px solid rgb(140,140,140);
138+
text-align: center;
139+
}
140+
141+
td {
142+
border: 1px solid rgb(160,160,160);
143+
padding: 8px 10px;
144+
}
145+
146+
th {
147+
color: white;
148+
background-color: rgb(0,78,221);
149+
}
150+
151+
tr:nth-child(even) td {
152+
background-color: rgb(240,240,240);
153+
}
154+
155+
.heman {
156+
font: 1.4rem molot;
157+
text-shadow:
158+
1px 1px 1px #fff,
159+
2px 2px 1px #000;
160+
}
161+
162+
.skeletor {
163+
font: 1.7rem rapscallion;
164+
letter-spacing: 3px;
165+
text-shadow:
166+
1px 1px 0 #fff,
167+
0 0 9px #000;
168+
}
169+
170+
.keyboard {
171+
font-size: 20px;
172+
white-space: nowrap;
173+
}
174+
.keyboard--row {
175+
display: block;
176+
height: 3em;
177+
margin: 0.5em;
178+
}
179+
180+
.keyboard--row > * {
181+
display: inline-block;
182+
box-sizing: border-box;
183+
position: relative;
184+
cursor: pointer;
185+
-webkit-user-select: none;
186+
border-radius: 0.3em;
187+
margin: 0.06em;
188+
padding: 0 0.2em;
189+
width: 3.3em;
190+
height: 100%;
191+
}
192+
193+
.key--bottom-left > * {
194+
position: absolute;
195+
text-align: left;
196+
bottom: 0.4em;
197+
left: 0.4em;
198+
}
199+
200+
.key--bottom-right > * {
201+
position: absolute;
202+
text-align: right;
203+
bottom: 0.4em;
204+
right: 0.4em;
205+
white-space:pre;
206+
}
207+
208+
.key--word > * {
209+
font-size: 0.8em;
210+
}
211+
212+
.key--letter > div {
213+
font-size: 1.2em;
214+
height: 1.2em;
215+
float: right;
216+
clear: right;
217+
}
218+
219+
.key--letter > div:first-child {
220+
margin-top: -0.2em;
221+
}
222+
223+
.key--letter > span {
224+
font-size: 1.2em;
225+
height: 1.2em;
226+
display: block;
227+
position: absolute;
228+
margin-top: -0.2em;
229+
margin-left: 0.1em;
230+
}
231+
.key--letter > span:last-child {
232+
margin-top: 1em;
233+
}
234+
235+
/* Light keyboard */
236+
237+
.keyboard.keyboard--light .keyboard--row > * {
238+
background: #ccc;
239+
color: #111;
240+
border: 1px solid #888;
241+
box-shadow: 0 0.2em 0 0.05em #666;
242+
border-bottom-color: #ddd;
243+
}
244+
245+
.keyboard.keyboard--light .keyboard--row > .key--letter {
246+
background: #f0f0f0;
247+
box-shadow: 0 0.2em 0 0.05em #666;
248+
border-bottom-color: #ddd;
249+
}
250+
251+
.keyboard.keyboard--light .key--letter > span {
252+
color: black
253+
}
254+
255+
.keyboard.keyboard--light .key--letter span.french {
256+
color: blue
257+
}
258+
259+
.keyboard.keyboard--light .key--letter span.spec {
260+
color: gray
261+
}
262+
263+
.keyboard.keyboard--light .key--letter span.specTd {
264+
color: #9400D3
265+
}
239 Bytes
Loading
748 Bytes
Loading
8.28 KB
Loading

0 commit comments

Comments
 (0)