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+ }
0 commit comments