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