Commit 0cfab289fd7eb25a6877a860f2e5971c124382fe
1 parent
be51ee4b
Exists in
news_page_css
Adjusting position-5 to maintain the standard
Showing
1 changed file
with
31 additions
and
46 deletions
Show diff stats
news.css
1 | 1 | .action-content_viewer-view_page #content .main-block #article p { |
2 | - text-align: left; | |
3 | 2 | max-height: 65px; |
4 | - text-overflow: ellipsis; | |
5 | 3 | overflow: hidden; |
4 | + text-align: left; | |
5 | + text-overflow: ellipsis; | |
6 | 6 | } |
7 | 7 | |
8 | 8 | /******************** New layout of blog. ********************/ |
... | ... | @@ -14,35 +14,35 @@ |
14 | 14 | } |
15 | 15 | |
16 | 16 | .action-content_viewer-view_page.blog-post h1.title { |
17 | - padding-left: 25px; | |
18 | 17 | margin-bottom: 0px; |
18 | + padding-left: 25px; | |
19 | 19 | } |
20 | 20 | |
21 | 21 | .action-content_viewer-view_page .blog-post .title a { |
22 | - font-size: 16px; | |
23 | 22 | font-family: arial; |
23 | + font-size: 16px; | |
24 | 24 | } |
25 | 25 | |
26 | 26 | .action-content_viewer-view_page .blog-post .post-pic { |
27 | + background-size: 100% 100%; | |
27 | 28 | border-radius: 4px; |
28 | - width: 150px; | |
29 | - height: 100px; | |
30 | 29 | float: left; |
31 | - margin-right: 10px; | |
30 | + height: 100px; | |
32 | 31 | margin-bottom: 5px; |
33 | - background-size: 100% 100%; | |
32 | + margin-right: 10px; | |
33 | + width: 150px; | |
34 | 34 | } |
35 | 35 | |
36 | 36 | .action-content_viewer-view_page .blog-post .short-post { |
37 | - text-align: justify; | |
38 | 37 | max-height: 25px; |
39 | - text-overflow: ellipsis; | |
40 | 38 | overflow: hidden; |
39 | + text-align: justify; | |
40 | + text-overflow: ellipsis; | |
41 | 41 | } |
42 | 42 | |
43 | 43 | .action-content_viewer-view_page .blog-post .short-post p { |
44 | - margin-bottom: -5px; | |
45 | 44 | color: #172738; |
45 | + margin-bottom: -5px; | |
46 | 46 | } |
47 | 47 | |
48 | 48 | /***** Behavior to special posts *****/ |
... | ... | @@ -50,14 +50,14 @@ |
50 | 50 | /* Featured post */ |
51 | 51 | |
52 | 52 | .action-content_viewer-view_page .page-1 .position-1 .post-pic { |
53 | - width: 100%; | |
54 | 53 | height: 315px; |
55 | 54 | max-height: 315px; |
55 | + width: 100%; | |
56 | 56 | } |
57 | 57 | |
58 | 58 | .action-content_viewer-view_page .page-1 .position-1 .title a { |
59 | - font-size: 34px; | |
60 | 59 | color: #172738 !important; |
60 | + font-size: 34px; | |
61 | 61 | line-height: 37px; |
62 | 62 | |
63 | 63 | } |
... | ... | @@ -67,56 +67,30 @@ |
67 | 67 | .action-content_viewer-view_page .page-1 .position-2 .short-post, |
68 | 68 | .action-content_viewer-view_page .page-1 .position-3 .short-post, |
69 | 69 | .action-content_viewer-view_page .page-1 .position-4 .short-post { |
70 | - text-align: justify; | |
70 | + color: #172738; | |
71 | 71 | max-height: 45px; |
72 | - text-overflow: ellipsis; | |
73 | 72 | overflow: hidden; |
74 | - color: #172738; | |
73 | + text-align: justify; | |
74 | + text-overflow: ellipsis; | |
75 | 75 | } |
76 | 76 | .action-content_viewer-view_page .page-1 .position-2, |
77 | 77 | .action-content_viewer-view_page .page-1 .position-3, |
78 | 78 | .action-content_viewer-view_page .page-1 .position-4 { |
79 | - width: 150px; | |
80 | 79 | display: block; |
81 | 80 | float:left; |
82 | 81 | height: 235px; |
83 | 82 | padding:30px; |
84 | - | |
83 | + width: 150px; | |
85 | 84 | } |
86 | 85 | |
87 | 86 | .action-content_viewer-view_page .page-1 .position-2 .post-pic, |
88 | 87 | .action-content_viewer-view_page .page-1 .position-3 .post-pic, |
89 | 88 | .action-content_viewer-view_page .page-1 .position-4 .post-pic { |
90 | - width: 100%; | |
91 | - top: 10px; | |
92 | 89 | margin-top: 5px; |
93 | - /*display: table-cell;*/ | |
94 | -} | |
95 | - | |
96 | -/*.action-content_viewer-view_page .page-1 .position-2 { | |
97 | - display: block; | |
98 | - float:left; | |
99 | - width: 222px; | |
100 | - padding-left: 0px; | |
101 | - padding-right: 20px; | |
102 | -} | |
103 | - | |
104 | -.action-content_viewer-view_page .page-1 .position-3 { | |
105 | - display: block; | |
106 | - float:left; | |
107 | - width: 232px; | |
108 | - padding-left: 10px; | |
109 | - padding-right: 10px; | |
90 | + top: 10px; | |
91 | + width: 100%; | |
110 | 92 | } |
111 | 93 | |
112 | -.action-content_viewer-view_page .page-1 .position-4 { | |
113 | - display: block; | |
114 | - float:left; | |
115 | - width: 222px; | |
116 | - padding-left: 20px; | |
117 | - padding-right: 0px; | |
118 | -} | |
119 | -*/ | |
120 | 94 | .action-content_viewer-view_page #content .blog-post { |
121 | 95 | background: none; |
122 | 96 | border-bottom: 1px solid #ccc; |
... | ... | @@ -130,6 +104,18 @@ |
130 | 104 | border-top: none !important; |
131 | 105 | } |
132 | 106 | |
107 | +/* Other Positions */ | |
108 | + | |
109 | +/* This rule serves to maintain the element in position-5 clear the | |
110 | + * configurations of float. | |
111 | + * | |
112 | + * TODO: the ideal would be edit HTML of position-2, position-3 and | |
113 | + * position-4 to a list and don't use float. | |
114 | + */ | |
115 | +.action-content_viewer-view_page #content .blog-post.position-5 { | |
116 | + clear: both; | |
117 | +} | |
118 | + | |
133 | 119 | .action-content_viewer-view_page #content .blog-post .position-5 h1.title, |
134 | 120 | .action-content_viewer-view_page #content .blog-post .position-6 h1.title, |
135 | 121 | .action-content_viewer-view_page #content .blog-post .position-7 h1.title, |
... | ... | @@ -158,4 +144,3 @@ |
158 | 144 | font-family: arial; |
159 | 145 | line-height: 21px; |
160 | 146 | } |
161 | - | ... | ... |