Commit f4dc8b83131d2a5ad30b49311b60c707da8e3cbd
1 parent
34f023c1
Exists in
master
and in
79 other branches
Reorganizing rules of news page
Reordering the rules for better understanding of the hierarchy. Removal declarations '!important' already unnecessary. Adding new statements on rules to remove dependence on other style sheets.
Showing
1 changed file
with
197 additions
and
0 deletions
Show diff stats
... | ... | @@ -0,0 +1,197 @@ |
1 | +/*** News Page's homepage ***/ | |
2 | + | |
3 | +/** Header's Block **/ | |
4 | +#content .main-block .blog #article-header h1.title { | |
5 | + margin: 0px 0px 0px 0px; | |
6 | + border: none; | |
7 | + padding: 0px 0px 0px 0px; | |
8 | + color: #FF0366; | |
9 | + font: normal normal 300 16px/37px 'open sans'; | |
10 | + text-transform: uppercase; | |
11 | +} | |
12 | + | |
13 | +/* WARNING: | |
14 | + * This solution is TEMPORARY. This informations shouldn't exist | |
15 | + * in this area. | |
16 | + * | |
17 | + * TODO: Remove this informations of the html and, then, from here. | |
18 | + */ | |
19 | +#content .blog #article-header .publishing-info .date, | |
20 | +#content .blog #article-header .publishing-info .author, | |
21 | +#content .blog #article-header .publishing-info .comments { | |
22 | + display: none; | |
23 | +} | |
24 | +/** end of Header's Block **/ | |
25 | + | |
26 | + | |
27 | +/** General Properties of News **/ | |
28 | +#content .blog p { | |
29 | + margin-bottom: 5px; | |
30 | + max-height: 25px; | |
31 | + overflow: hidden; | |
32 | + text-align: left; | |
33 | + text-overflow: ellipsis; | |
34 | +} | |
35 | + | |
36 | +#content .blog .publishing-info { | |
37 | + display: inline; | |
38 | +} | |
39 | + | |
40 | +#content .blog .blog-post { | |
41 | + margin: 0 auto; | |
42 | + border-bottom: 1px solid #ccc; | |
43 | + padding: 25px 0px 0px 0px; | |
44 | + background: none; | |
45 | +} | |
46 | + | |
47 | +#content .blog .blog-post h1.title { | |
48 | + margin-bottom: 10px; | |
49 | + border: none; | |
50 | + padding: 0px 0px 0px 0px; | |
51 | +} | |
52 | + | |
53 | +#content .blog .blog-post .title a { | |
54 | + line-height: 20px; | |
55 | + font: normal normal bold 16px arial; | |
56 | +} | |
57 | + | |
58 | +/* WARNING: | |
59 | + * This solution is TEMPORARY. This informations shouldn't exist | |
60 | + * in this area. | |
61 | + * | |
62 | + * TODO: Remove this informations of the html and, then, from here. | |
63 | + */ | |
64 | +#content .blog .blog-post .author { | |
65 | + display: none; | |
66 | +} | |
67 | + | |
68 | +#content .blog .blog-post .publishing-info { | |
69 | + border-top: none; | |
70 | + line-height: 21px; | |
71 | + color: #172838; | |
72 | + font: 13px arial; | |
73 | +} | |
74 | + | |
75 | +#content .blog .blog-post .publishing-info .date { | |
76 | + display: block; | |
77 | + margin-bottom: 5px; | |
78 | +} | |
79 | + | |
80 | +#content .blog .blog-post .post-pic { | |
81 | + margin: 0px 20px 5px 0px; | |
82 | + border-radius: 4px; | |
83 | + height: 80px; | |
84 | + width: 20%; | |
85 | + background-size: cover; | |
86 | + background-position: center; | |
87 | + background-repeat: no-repeat; | |
88 | + float: left; | |
89 | +} | |
90 | + | |
91 | +#content .blog .blog-post .short-post { | |
92 | + max-height: 50px; | |
93 | + text-align: justify; | |
94 | + text-overflow: ellipsis; | |
95 | + overflow: hidden; | |
96 | +} | |
97 | + | |
98 | +#content .blog .blog-post .short-post p { | |
99 | + color: #172738; | |
100 | +} | |
101 | + | |
102 | +#content .blog #article-actions:last-child { | |
103 | + border-top: none; | |
104 | +} | |
105 | +/** end of General Properties of News **/ | |
106 | + | |
107 | + | |
108 | +/** Main News' Block **/ | |
109 | +#content .blog .page-1 .position-1 .title a { | |
110 | + line-height: 37px; | |
111 | + color: #172738 !important; | |
112 | + font-size: 34px; | |
113 | +} | |
114 | + | |
115 | +#content .blog .page-1 .position-1 .post-pic { | |
116 | + margin-bottom: 13px; | |
117 | + max-height: 320px; | |
118 | + height: 320px; | |
119 | + width: 100%; | |
120 | +} | |
121 | +/** end of Main News' Block **/ | |
122 | + | |
123 | + | |
124 | +/** Secondary News' Block **/ | |
125 | +#content .blog .page-1 .position-2, | |
126 | +#content .blog .page-1 .position-3, | |
127 | +#content .blog .page-1 .position-4 { | |
128 | + display: block; | |
129 | + margin: 0px 0px 0px 0px; | |
130 | + padding: 20px 30px 45px 0px; | |
131 | + height: 235px; | |
132 | + width: 30.5%; | |
133 | + float: left; | |
134 | +} | |
135 | + | |
136 | +#content .blog .page-1 .position-4 { | |
137 | + margin: 0px; | |
138 | + padding-right: 0px; | |
139 | +} | |
140 | + | |
141 | +#content .main-block #article.blog .page-1 .position-2 p, | |
142 | +#content .main-block #article.blog .page-1 .position-3 p, | |
143 | +#content .main-block #article.blog .page-1 .position-4 p { | |
144 | + max-height: 35px; | |
145 | +} | |
146 | + | |
147 | +#content .blog .page-1 .position-2 .post-pic, | |
148 | +#content .blog .page-1 .position-3 .post-pic, | |
149 | +#content .blog .page-1 .position-4 .post-pic { | |
150 | + margin-top: 12px; | |
151 | + top: 10px; | |
152 | + height: 120px; | |
153 | + width: 100%; | |
154 | +} | |
155 | + | |
156 | +#content .blog .page-1 .position-4 .post-pic { | |
157 | + margin-right: 0px; | |
158 | +} | |
159 | + | |
160 | +#content .blog .page-1 .position-2 .short-post, | |
161 | +#content .blog .page-1 .position-3 .short-post, | |
162 | +#content .blog .page-1 .position-4 .short-post { | |
163 | + max-height: 35px; | |
164 | + color: #172738; | |
165 | + text-align: justify; | |
166 | + text-overflow: ellipsis; | |
167 | + overflow: hidden; | |
168 | +} | |
169 | + | |
170 | +#content .main-block .blog .article-body h1 { | |
171 | + margin: 0px 0px 10px 0px; | |
172 | + border: none; | |
173 | + padding: 0px 0px 0px 0px; | |
174 | +} | |
175 | +/** end of Secondary News' Block **/ | |
176 | + | |
177 | + | |
178 | +/** Lastest News' Block ***/ | |
179 | + | |
180 | +/* This rule serves to maintain the element in position-5 clear the | |
181 | + * configurations of float. | |
182 | + */ | |
183 | +#content .blog .blog-post.position-5 { | |
184 | + clear: both; | |
185 | +} | |
186 | + | |
187 | +#content .main-block #article.blog p { | |
188 | + margin-bottom: 5px; | |
189 | + max-height: 25px; | |
190 | + font: 14px/21px Arial; | |
191 | + text-align: left; | |
192 | + text-overflow: ellipsis; | |
193 | + overflow: hidden; | |
194 | +} | |
195 | +/** end of Lastest News' Block **/ | |
196 | + | |
197 | +/** end of News Page's homepage **/ | |
0 | 198 | \ No newline at end of file | ... | ... |