Skip to content

Commit 780680c

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #776 from ElamathiiSelvan/patch-30
countword.css
2 parents 16b22d5 + 3147c0e commit 780680c

File tree

1 file changed

+78
-173
lines changed

1 file changed

+78
-173
lines changed

‎word counter/word.css‎

Lines changed: 78 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
2-
31
html, div, span, applet, object, iframe,
42
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
53
a, abbr, acronym, address, big, cite, code,
@@ -13,225 +11,132 @@ article, aside, canvas, details, embed,
1311
figure, figcaption, footer, header, hgroup,
1412
menu, nav, output, ruby, section, summary,
1513
time, mark, audio, video {
16-
margin: 0;
17-
padding: 0;
18-
border: 0;
19-
font-size: 100%;
20-
font: inherit;
21-
vertical-align: baseline;
22-
23-
}
24-
body{
25-
background-image: linear-gradient(#fec8d8, #ffdfd3);
26-
}
27-
article, aside, details, figcaption, figure,
28-
footer, header, hgroup, menu, nav, section {
29-
display: block;
30-
}
31-
body {
32-
line-height: 1;
33-
}
34-
ol, ul {
35-
list-style: none;
36-
}
37-
blockquote, q {
38-
quotes: none;
39-
}
40-
blockquote:before, blockquote:after,
41-
q:before, q:after {
42-
content: '';
43-
content: none;
14+
margin: 0;
15+
padding: 0;
16+
border: 0;
17+
font-size: 100%;
18+
font: inherit;
19+
vertical-align: baseline;
4420
}
45-
table {
46-
border-collapse: collapse;
47-
border-spacing: 0;
48-
}
49-
/* End of reset CSS */
50-
5121

52-
/* border box */
53-
html {
54-
box-sizing: border-box;
55-
-webkit-user-select: none; /* Chrome all / Safari all */
56-
-moz-user-select: none; /* Firefox all */
57-
-ms-user-select: none; /* IE 10+ */
58-
user-select: none; /* Likely future */
59-
}
60-
*, *:before, *:after {
61-
box-sizing: inherit;
62-
}
63-
b {
64-
font-weight: bold;
65-
}
66-
67-
/* main app styles */
6822
body {
69-
width: 700px;
70-
margin: 0 auto;
71-
background-color: #FAFAFA;
72-
font-family: 'Source Sans Pro', sans-serif;
73-
color: #111;
23+
background-image: linear-gradient(#fec8d8, #ffdfd3);
24+
line-height: 1.5;
25+
font-family: 'Source Sans Pro', sans-serif;
26+
color: #111;
27+
width: 700px;
28+
margin: 0 auto;
7429
}
7530

7631
.container {
77-
margin: 2% auto;
78-
padding: 15px;
79-
background-color: #FFFFFF;
80-
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
81-
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
32+
margin: 2% auto;
33+
padding: 15px;
34+
background-color: #FFFFFF;
35+
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
8236
}
8337

8438
h1 {
85-
font-size: 3rem;
86-
font-weight: 900;
87-
text-align: center;
88-
margin: 1% 0 3%;
39+
font-size: 3rem;
40+
font-weight: 900;
41+
text-align: center;
42+
margin: 1% 0 3%;
8943
}
9044

9145
textarea {
92-
width: 100%;
93-
height: 250px;
94-
padding: 10px;
95-
border: 1px solid #d9d9d9;
96-
outline: none;
97-
font-size: 1rem;
98-
resize: none;
99-
line-height: 1.5rem;
46+
width: 100%;
47+
height: 250px;
48+
padding: 10px;
49+
border: 1px solid #d9d9d9;
50+
outline: none;
51+
font-size: 1rem;
52+
resize: none;
53+
line-height: 1.5rem;
10054
}
10155

10256
textarea:hover {
103-
border-color: #C0C0C0;
57+
border-color: #C0C0C0;
10458
}
10559

10660
textarea:focus {
107-
border-color: #4D90FE;
61+
border-color: #4D90FE;
10862
}
10963

11064
.output.row {
111-
width: 100%;
112-
border: 1px solid #DDD;
113-
font-size: 1.4rem;
114-
margin: 1% 0;
115-
background-color: #F9F9F9;
65+
width: 100%;
66+
border: 1px solid #DDD;
67+
font-size: 1.4rem;
68+
margin: 1% 0;
69+
background-color: #F9F9F9;
11670
}
11771

11872
.output.row div {
119-
display: inline-block;
120-
width: 42%;
121-
padding: 10px 15px;
122-
margin: 1%;
73+
display: inline-block;
74+
width: 42%;
75+
padding: 10px 15px;
76+
margin: 1%;
12377
}
12478

12579
.output.row span {
126-
font-weight: bold;
127-
font-size: 1.5rem;
80+
font-weight: bold;
81+
font-size: 1.5rem;
12882
}
12983

13084
#readability {
131-
width: 52%;
132-
font-weight: bold;
85+
width: 52%;
86+
font-weight: bold;
13387
}
13488

13589
#readability:hover {
136-
background-color: #4D90FE;
137-
color: #FFF;
138-
border-radius: 2px;
139-
cursor: pointer;
90+
background-color: #4D90FE;
91+
color: #FFF;
92+
border-radius: 2px;
93+
cursor: pointer;
14094
}
14195

14296
#readability:active {
143-
background-color: #307AF3;
97+
background-color: #307AF3;
14498
}
14599

146100
.keywords {
147-
display: none;
148-
margin: 4% 0 0;
149-
font-size: 2rem;
150-
font-weight: 900;
101+
display: none;
102+
margin: 4% 0 0;
103+
font-size: 2rem;
104+
font-weight: 900;
151105
}
152106

153107
.keywords ul {
154-
font-weight: 400;
155-
border: 1px solid #DDD;
156-
font-size: 1.4rem;
157-
background-color: #F9F9F9;
158-
margin: 2% 0;
108+
font-weight: 400;
109+
border: 1px solid #DDD;
110+
font-size: 1.4rem;
111+
background-color: #F9F9F9;
112+
margin: 2% 0;
159113
}
160114

161115
.keywords li {
162-
display: inline-block;
163-
width: 44%;
164-
padding: 10px;
165-
margin: 1%;
116+
display: inline-block;
117+
width: 44%;
118+
padding: 10px;
119+
margin: 1%;
166120
}
167121

168-
169-
/*
170-
** Making it responsive
171-
*/
172-
173-
122+
/* Responsive styles */
174123
@media (max-width: 750px) {
175-
body {
176-
width: 600px;
177-
}
178-
.output.row {
179-
font-size: 1.2rem;
180-
}
181-
.output.row span {
182-
font-size: 1.3rem;
183-
}
184-
.keywords ul {
185-
font-size: 1.2rem;
186-
}
124+
body {
125+
width: 600px;
126+
}
127+
.output.row {
128+
font-size: 1.2rem;
129+
}
130+
.output.row span {
131+
font-size: 1.3rem;
132+
}
133+
.keywords ul {
134+
font-size: 1.2rem;
135+
}
187136
}
188137

189138
@media (max-width: 600px) {
190-
191-
/* rewriting old styles */
192-
body {
193-
width: 95%;
194-
}
195-
.output.row {
196-
border: none;
197-
background-color: #FFF;
198-
}
199-
.output.row div {
200-
display: block;
201-
width: 100%;
202-
padding: 10px 15px;
203-
margin: 2% auto;
204-
border: 1px solid #DDD;
205-
font-size: 1.8rem;
206-
background-color: #F9F9F9;
207-
}
208-
.output.row span {
209-
font-size: 2rem;
210-
}
211-
#readability {
212-
width: 100%;
213-
font-size: 1.6rem;
214-
font-weight: 400;
215-
}
216-
217-
.keywords {
218-
margin: 10% auto;
219-
}
220-
221-
.keywords ul {
222-
font-weight: 400;
223-
border: none;
224-
font-size: 1.8rem;
225-
background-color: #F9F9F9;
226-
margin: 5% 0;
227-
}
228-
229-
.keywords li {
230-
display: block;
231-
width: 100%;
232-
padding: 10px;
233-
margin: 2% auto;
234-
border: 1px solid #DDD;
235-
}
236-
237-
}
139+
body {
140+
width: 95%;
141+
}
142+
.output.r

0 commit comments

Comments
 (0)