Ajustes de CSS de conteúdo

Rafael Diego
1 parent 07dd602e
Showing 1 changed file with 84 additions and 74 deletions Show diff stats
src/app/layout.scss
@@ -192,56 +192,6 @@
   border-radius: 100%;
 }
  
-.destaque-cinza {
-  background-color: #F1F1F1;
-  padding: 30px;
-}
-
-.destaque-biodiversidade {
-  background-color: #3CC667;
-  padding: 30px;
-  color: white;
-}
-
-.destaque-biodiversidade-nobg {
-  color: gray;
-}
-
-.destaque-cultura-viva {
-  background-color: #F8F8F8;
-  padding: 0px;
-  padding-left: 30px;
-}
-
-.left-border-gray {
-  border-left: 3px solid #eeeeee;
-  margin-bottom: 10px;
-
-  @media (max-width: 768px) {
-    border: none;
-  }
-}
-
-.right-border-gray {
-  border-right: 3px solid #eeeeee;
-  margin-bottom: 10px;
-
-  @media (max-width: 768px) {
-    border: none;
-  }
-}
-
-.bottom-border-gray {
-  border-bottom: 1px lightgray;
-  border-bottom-style: solid;
-  margin: 0px!important;
-  padding: 30px;
-}
-
-.padding-30 {
-  padding: 30px;
-}
-
 ul.list-color {
   list-style: none;
   padding: 0;
@@ -255,7 +205,6 @@ ul.list-color li:before {
       color: $color;
     }
   }
-
 }
  
 ul.list-color li:before {
@@ -268,28 +217,65 @@ ul.list-color li:before {
  
 ul.list-color li {
   padding-left: 2em;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
   text-indent: -0.7em;
 }
  
-.right-block {
-  float: right;
+.destaque-bg-cinza {
+  background-color: #F1F1F1;
 }
  
-a.link-black {
-  color: black;
+.destaque-padding {
+  padding: 20px;
 }
  
-.inline-block {
-  display: inline-block;
+.destaque-font {
+  font-size: 130%;
+}
+
+.font-140 {
+  font-size: 140%;
+}
+
+.font-115 {
+  font-size: 115%;
+}
+
+.font-180 {
+  font-size: 180%;
+}
+
+.destaque-bg-lightgray {
+  background-color: #F8F8F8;
+}
+
+.margin-15 {
+  margin-left: 15px;
+  margin-right: 15px;
 }
  
-.no-margin-bottom {
-  margin-bottom: 0px!important;
+.left-border-gray {
+  border-left: 4px solid #d1d6d9;
+  margin-bottom: 10px;
+  ul.list-color li:last-child { padding-bottom: 0; }
+  @media (max-width: 768px) {
+    border: none;
+  }
 }
  
-.margin-20 {
-  margin: 20px;
+.bottom-border-gray {
+  border-bottom: 1px lightgray;
+  border-bottom-style: solid;
+  margin: 0px!important;
+  padding: 30px;
+}
+
+.padding-30 {
+  padding: 30px;
+}
+
+a.link-black {
+  color: black;
 }
  
 article.program-content {
@@ -304,31 +290,38 @@ article.program-content h3 {
   margin-bottom: 15px;
 }
  
+.inline-block {
+  display: inline-block;
+}
+
 blockquote {
-  border-left: none;
-  padding-left: 50px;
-  font-size: 20px;
+  border-left: medium none;
+  font-size: 140%;
+  padding: 50px 0 0 50px;
+  position: relative;
  
   &:before {
-    @each $category, $color in $categories {
-      .#{$category} & {
-        color: $color;
-      }
-    }
-    color: #ECAAAB;
     content: "⌜";
     font-size: 200px;
     left: -2px;
     position: absolute;
     top: -50px;
     font-weight: bolder;
+    left: -17px;
+    top: -68px;
+    @each $category, $color in $categories {
+      .#{$category} & {
+        color: $color;
+      }
+    }
   }
-}
  
-.destaque-sinesp {
-  font-size:18px;
 }
  
+// .cultura blockquote::before {
+//   color: #cd999b;
+// }
+
 // Sobreescreve a classe do bootstrap
 .close {
   color: white;
@@ -339,3 +332,20 @@ blockquote {
 // .img-responsive {
 //   width: 100%;
 // }
+
+strong {
+  @each $category, $color in $categories {
+    .#{$category} & {
+      color: $color;
+    }
+  }
+}
+
+.top-border-theme {
+  @each $category, $color in $categories {
+    .#{$category} & {
+      border-color: $color;
+    }
+  }
+  border-top: 20px solid;
+}
...	...	@@ -192,56 +192,6 @@
192	192	border-radius: 100%;
193	193	}
194	194
195		-.destaque-cinza {
196		- background-color: #F1F1F1;
197		- padding: 30px;
198		-}
199		-
200		-.destaque-biodiversidade {
201		- background-color: #3CC667;
202		- padding: 30px;
203		- color: white;
204		-}
205		-
206		-.destaque-biodiversidade-nobg {
207		- color: gray;
208		-}
209		-
210		-.destaque-cultura-viva {
211		- background-color: #F8F8F8;
212		- padding: 0px;
213		- padding-left: 30px;
214		-}
215		-
216		-.left-border-gray {
217		- border-left: 3px solid #eeeeee;
218		- margin-bottom: 10px;
219		-
220		- @media (max-width: 768px) {
221		- border: none;
222		- }
223		-}
224		-
225		-.right-border-gray {
226		- border-right: 3px solid #eeeeee;
227		- margin-bottom: 10px;
228		-
229		- @media (max-width: 768px) {
230		- border: none;
231		- }
232		-}
233		-
234		-.bottom-border-gray {
235		- border-bottom: 1px lightgray;
236		- border-bottom-style: solid;
237		- margin: 0px!important;
238		- padding: 30px;
239		-}
240		-
241		-.padding-30 {
242		- padding: 30px;
243		-}
244		-
245	195	ul.list-color {
246	196	list-style: none;
247	197	padding: 0;
...	...	@@ -255,7 +205,6 @@ ul.list-color li:before {
255	205	color: $color;
256	206	}
257	207	}
258		-
259	208	}
260	209
261	210	ul.list-color li:before {
...	...	@@ -268,28 +217,65 @@ ul.list-color li:before {
268	217
269	218	ul.list-color li {
270	219	padding-left: 2em;
271		- padding-bottom: 20px;
	220	+ padding-bottom: 10px;
272	221	text-indent: -0.7em;
273	222	}
274	223
275		-.right-block {
276		- float: right;
	224	+.destaque-bg-cinza {
	225	+ background-color: #F1F1F1;
277	226	}
278	227
279		-a.link-black {
280		- color: black;
	228	+.destaque-padding {
	229	+ padding: 20px;
281	230	}
282	231
283		-.inline-block {
284		- display: inline-block;
	232	+.destaque-font {
	233	+ font-size: 130%;
	234	+}
	235	+
	236	+.font-140 {
	237	+ font-size: 140%;
	238	+}
	239	+
	240	+.font-115 {
	241	+ font-size: 115%;
	242	+}
	243	+
	244	+.font-180 {
	245	+ font-size: 180%;
	246	+}
	247	+
	248	+.destaque-bg-lightgray {
	249	+ background-color: #F8F8F8;
	250	+}
	251	+
	252	+.margin-15 {
	253	+ margin-left: 15px;
	254	+ margin-right: 15px;
285	255	}
286	256
287		-.no-margin-bottom {
288		- margin-bottom: 0px!important;
	257	+.left-border-gray {
	258	+ border-left: 4px solid #d1d6d9;
	259	+ margin-bottom: 10px;
	260	+ ul.list-color li:last-child { padding-bottom: 0; }
	261	+ @media (max-width: 768px) {
	262	+ border: none;
	263	+ }
289	264	}
290	265
291		-.margin-20 {
292		- margin: 20px;
	266	+.bottom-border-gray {
	267	+ border-bottom: 1px lightgray;
	268	+ border-bottom-style: solid;
	269	+ margin: 0px!important;
	270	+ padding: 30px;
	271	+}
	272	+
	273	+.padding-30 {
	274	+ padding: 30px;
	275	+}
	276	+
	277	+a.link-black {
	278	+ color: black;
293	279	}
294	280
295	281	article.program-content {
...	...	@@ -304,31 +290,38 @@ article.program-content h3 {
304	290	margin-bottom: 15px;
305	291	}
306	292
	293	+.inline-block {
	294	+ display: inline-block;
	295	+}
	296	+
307	297	blockquote {
308		- border-left: none;
309		- padding-left: 50px;
310		- font-size: 20px;
	298	+ border-left: medium none;
	299	+ font-size: 140%;
	300	+ padding: 50px 0 0 50px;
	301	+ position: relative;
311	302
312	303	&:before {
313		- @each $category, $color in $categories {
314		- .#{$category} & {
315		- color: $color;
316		- }
317		- }
318		- color: #ECAAAB;
319	304	content: "⌜";
320	305	font-size: 200px;
321	306	left: -2px;
322	307	position: absolute;
323	308	top: -50px;
324	309	font-weight: bolder;
	310	+ left: -17px;
	311	+ top: -68px;
	312	+ @each $category, $color in $categories {
	313	+ .#{$category} & {
	314	+ color: $color;
	315	+ }
	316	+ }
325	317	}
326		-}
327	318
328		-.destaque-sinesp {
329		- font-size:18px;
330	319	}
331	320
	321	+// .cultura blockquote::before {
	322	+// color: #cd999b;
	323	+// }
	324	+
332	325	// Sobreescreve a classe do bootstrap
333	326	.close {
334	327	color: white;
...	...	@@ -339,3 +332,20 @@ blockquote {
339	332	// .img-responsive {
340	333	// width: 100%;
341	334	// }
	335	+
	336	+strong {
	337	+ @each $category, $color in $categories {
	338	+ .#{$category} & {
	339	+ color: $color;
	340	+ }
	341	+ }
	342	+}
	343	+
	344	+.top-border-theme {
	345	+ @each $category, $color in $categories {
	346	+ .#{$category} & {
	347	+ border-color: $color;
	348	+ }
	349	+ }
	350	+ border-top: 20px solid;
	351	+}
...	...