diff options
author | nicosomb <nicolas@loeuillet.org> | 2013-04-12 11:33:34 +0200 |
---|---|---|
committer | nicosomb <nicolas@loeuillet.org> | 2013-04-12 11:33:34 +0200 |
commit | b70971e06b67786bb61e863cf89b3b061b4f6467 (patch) | |
tree | 14a96f8b8a99de44bdf0726307f0f1e9ae7d0467 /css/style.css | |
parent | c775c8436b30fffde88e69a8c8f6bd488d66a585 (diff) | |
download | wallabag-b70971e06b67786bb61e863cf89b3b061b4f6467.tar.gz wallabag-b70971e06b67786bb61e863cf89b3b061b4f6467.tar.zst wallabag-b70971e06b67786bb61e863cf89b3b061b4f6467.zip |
corrections mise en page avec utilisation de jquery.masonry.js
Diffstat (limited to 'css/style.css')
-rw-r--r-- | css/style.css | 154 |
1 files changed, 55 insertions, 99 deletions
diff --git a/css/style.css b/css/style.css index 6a8b07b2..d53060ec 100644 --- a/css/style.css +++ b/css/style.css | |||
@@ -47,101 +47,14 @@ header { | |||
47 | color: #F1F1F1; | 47 | color: #F1F1F1; |
48 | } | 48 | } |
49 | 49 | ||
50 | footer { | ||
51 | text-align: right; | ||
52 | } | ||
53 | |||
54 | /*** ***/ | ||
55 | /*** GRID DISPLAY ***/ | ||
56 | |||
57 | #content { | 50 | #content { |
58 | width: 1000px; | 51 | width: 800px; |
59 | margin: 0 auto; | 52 | margin: 0 auto; |
60 | } | 53 | } |
61 | 54 | ||
62 | #entries { | ||
63 | -moz-column-count: 4; | ||
64 | -moz-column-gap: 20px; | ||
65 | -webkit-column-count: 4; | ||
66 | -webkit-column-gap: 20px; | ||
67 | column-count: 4; | ||
68 | column-gap: 20px; | ||
69 | width: 1000px; | ||
70 | } | ||
71 | |||
72 | #entries span.content { | ||
73 | display: inline-block; | ||
74 | margin-bottom: 0px; | ||
75 | width: 100%; | ||
76 | } | ||
77 | 55 | ||
78 | @media only screen and (max-width : 1199px), | 56 | footer { |
79 | only screen and (max-device-width : 1199px){ | 57 | text-align: right; |
80 | #entries { | ||
81 | -moz-column-count: 5; | ||
82 | -moz-column-gap: 20px; | ||
83 | -webkit-column-count: 5; | ||
84 | -webkit-column-gap: 20px; | ||
85 | column-count: 5; | ||
86 | column-gap: 20px; | ||
87 | width: 1000px; | ||
88 | } | ||
89 | |||
90 | #content { | ||
91 | width: 1000px; | ||
92 | } | ||
93 | } | ||
94 | |||
95 | |||
96 | @media only screen and (max-width : 999px), | ||
97 | only screen and (max-device-width : 999px){ | ||
98 | #entries { | ||
99 | -moz-column-count: 4; | ||
100 | -moz-column-gap: 15px; | ||
101 | -webkit-column-count: 4; | ||
102 | -webkit-column-gap: 15px; | ||
103 | column-count: 4; | ||
104 | column-gap: 15px; | ||
105 | width: 800px; | ||
106 | } | ||
107 | |||
108 | #content { | ||
109 | width: 800px; | ||
110 | } | ||
111 | } | ||
112 | |||
113 | @media only screen and (max-width : 799px), | ||
114 | only screen and (max-device-width : 799px){ | ||
115 | #entries { | ||
116 | -moz-column-count: 3; | ||
117 | -moz-column-gap: 10px; | ||
118 | -webkit-column-count: 3; | ||
119 | -webkit-column-gap: 10px; | ||
120 | column-count: 3; | ||
121 | column-gap: 10px; | ||
122 | width: 600px; | ||
123 | } | ||
124 | |||
125 | #content { | ||
126 | width: 600px; | ||
127 | } | ||
128 | } | ||
129 | |||
130 | @media only screen and (max-width : 599px), | ||
131 | only screen and (max-device-width : 599px){ | ||
132 | #entries { | ||
133 | -moz-column-count: 2; | ||
134 | -moz-column-gap: 10px; | ||
135 | -webkit-column-count: 2; | ||
136 | -webkit-column-gap: 10px; | ||
137 | column-count: 2; | ||
138 | column-gap: 10px; | ||
139 | width: 400px; | ||
140 | } | ||
141 | |||
142 | #content { | ||
143 | width: 400px; | ||
144 | } | ||
145 | } | 58 | } |
146 | 59 | ||
147 | /*** ***/ | 60 | /*** ***/ |
@@ -152,32 +65,34 @@ only screen and (max-device-width : 599px){ | |||
152 | cursor: pointer; | 65 | cursor: pointer; |
153 | } | 66 | } |
154 | 67 | ||
155 | #main #entries { | 68 | #main #content { |
156 | margin-top: 20px; | 69 | margin-top: 20px; |
157 | } | 70 | } |
158 | 71 | ||
159 | #main #entries .entrie { | 72 | #main .entrie { |
160 | color: rgb(46, 46, 46); | 73 | color: rgb(46, 46, 46); |
161 | position:relative; | 74 | position:relative; |
162 | background-color: #ffffff; | 75 | background-color: #ffffff; |
163 | padding: 15px; | 76 | padding: 15px; |
164 | min-height: 6em; | 77 | min-height: 8em; |
165 | -webkit-border-radius: 2px; | 78 | -webkit-border-radius: 2px; |
166 | border-radius: 2px; | 79 | border-radius: 2px; |
167 | -webkit-box-shadow: 0px 0px 2px -1px #000; | 80 | -webkit-box-shadow: 0px 0px 2px -1px #000; |
168 | box-shadow: 0px 0px 2px -1px #000; | 81 | box-shadow: 0px 0px 2px -1px #000; |
169 | list-style-type: none; | 82 | width: 30%; |
83 | margin: 10px; | ||
84 | float: left; | ||
170 | } | 85 | } |
171 | 86 | ||
172 | #main #entries .entrie h2 a { | 87 | #main .entrie h2 a { |
173 | text-decoration: none; | 88 | text-decoration: none; |
174 | } | 89 | } |
175 | 90 | ||
176 | #main #entries .entrie h2 a:hover { | 91 | #main .entrie h2 a:hover { |
177 | color: #F5BE00; | 92 | color: #F5BE00; |
178 | } | 93 | } |
179 | 94 | ||
180 | #main #entries .entrie .tools { | 95 | #main .entrie .tools { |
181 | position:absolute; | 96 | position:absolute; |
182 | bottom: 0; | 97 | bottom: 0; |
183 | width: 100%; | 98 | width: 100%; |
@@ -185,7 +100,7 @@ only screen and (max-device-width : 599px){ | |||
185 | margin-left: -20px; | 100 | margin-left: -20px; |
186 | } | 101 | } |
187 | 102 | ||
188 | #main #entries .entrie .tools a.tool span { | 103 | #main .entrie .tools a.tool span { |
189 | display: inline-block; | 104 | display: inline-block; |
190 | width: 16px; | 105 | width: 16px; |
191 | height: 16px; | 106 | height: 16px; |
@@ -238,4 +153,45 @@ body.article { | |||
238 | text-decoration: none; | 153 | text-decoration: none; |
239 | } | 154 | } |
240 | 155 | ||
241 | /*** ***/ \ No newline at end of file | 156 | /*** ***/ |
157 | #main | ||
158 | { | ||
159 | max-width: 60em; /* 960 px */ | ||
160 | margin: 0 auto; | ||
161 | } | ||
162 | #content | ||
163 | { | ||
164 | width: 103.125%; /* 990px */ | ||
165 | overflow: hidden; | ||
166 | margin-left: -1.562%; /* 15px */ | ||
167 | margin-bottom: -1.875em; /* 30px */ | ||
168 | } | ||
169 | .entrie | ||
170 | { | ||
171 | width: 30.303%; /* 300px */ | ||
172 | float: left; | ||
173 | margin: 0 1.515% 1.875em; /* 15px 30px */ | ||
174 | } | ||
175 | |||
176 | @media only screen and ( max-width: 40em ) /* 640px */ | ||
177 | { | ||
178 | .entrie | ||
179 | { | ||
180 | width: 46.876%; /* 305px */ | ||
181 | margin-bottom: 0.938em; /* 15px */ | ||
182 | } | ||
183 | } | ||
184 | @media only screen and ( max-width: 20em ) /* 640px */ | ||
185 | { | ||
186 | #content | ||
187 | { | ||
188 | width: 100%; | ||
189 | margin-left: 0; | ||
190 | } | ||
191 | .entrie | ||
192 | { | ||
193 | width: 100%; | ||
194 | margin-left: 0; | ||
195 | margin-right: 0; | ||
196 | } | ||
197 | } \ No newline at end of file | ||