Add color, icons and style based on proposed layout

Melissa Wen
1 parent c12c2fd9
Showing 34 changed files with 146 additions and 64 deletions Show diff stats
_homeblocks.sass
_topmenu.sass
icons/13.png
icons/agenda-contagem.png
icons/balao.png
icons/balao_claro.png
icons/como-participar.png
icons/home.png
icons/indicadores.png
icons/line.png
icons/login.png
icons/more.png
icons/more_two.png
icons/pessoas.png
icons/trilhas.png
icons/user.png
icons/visualizacao.png
icons/visualizacao_claro.png
images/home/01.png
images/home/02.png
 #content
   .article-block
-    padding: 20px
-    margin: 0px
-    border-bottom: 2px solid #000
+    h3.block-title
+      background: url('icons/line.png') repeat-x left center
+      border-bottom: none
+      border-left: 10px solid #575959
+      font-family: 'Ubuntu'
+      font-size: 22px
+      font-variant: normal
+      font-weight: 300
+      line-height: 22px
+      margin: 25px 0
+      span
+        background: #FFF
+        padding: 0 15px
     .short-post
-      p
-        font-family: 'Open Sans'
-        font-size: 12px
-        margin: 0 0 20px
+      font-family: 'Ubuntu'
+      font-size: 13px
     .read-more
       a
-        background: url('images/home/09.png') no-repeat left center
+        background: url('icons/more.png') no-repeat left center
         background-size: contain
         color: #000
         display: block
-        font-family: 'Open Sans'
-        font-size: 12px
-        height: 25px
-        line-height: 25px
+        float: right
+        font-family: 'Ubuntu'
+        font-size: 13px
+        height: 24px
+        line-height: 24px
+        margin: 25px 0
         padding-left: 30px
         text-decoration: none
+
+#content
   .container-block-plugin_container-block
     margin-top: 20px
     .block-outer
       .display-content-block
-        background: #ECECEF
-        border-bottom: 2px solid #000
-        margin-right: 10px
-        padding: 25px
-        width: 425px !important
+        background: #999999
+        border-top: 5px solid #E5E5E5
+        margin-right: 0px
+        padding: 25px 0 0 0
+        width: 480px !important
+        .block-title
+          color: #E4E5CC
+          margin-bottom: 20px
+          padding-left: 15px
+          span
+            background: url('icons/more.png') no-repeat left center
+            background-size: contain
         ul
           margin: 0
         li
-          margin: 0 0 25px 0
+          border-bottom: 1px solid #E4E5CC
+          margin: 0
           overflow: hidden
+          padding: 15px
           > div
             float: left
+          &:last-child
+            margin: 0
+            border: none
         .image
-          height: 75px
+          border: 2px solid #F3F3F3
+          height: 95px
           margin-right: 15px
           overflow: hidden
-          width: 85px
+          width: 100px
           a
+            color: #F3F3F3
             display: block
             overflow: hidden
           img
-            max-width: 135px
+            max-width: 150px
         .title
-          height: 18px
-          margin: 0 0 15px 0
+          height: 34px
+          margin: 10px 0 30px 0
           overflow: hidden
           width: 300px
           a
-            color: #000
-            font-family: 'Open Sans'
+            color: #F3F3F3
+            font-family: 'Ubuntu'
             font-size: 14px
-            font-weight: 700
+            font-weight: 300
             text-decoration: none
         .lead
-          max-height: 34px
-          margin-left: 0
-          overflow: hidden
-          width: 300px
-          p
-            font-family: 'Open Sans'
-            font-size: 12px
-            font-weight: 300
-            margin: 0
-        .read_more
           display: none
-      &:last-child .display-content-block
-        background: #575C67
-        border: none
-        margin: 0
+        .read_more
+          width: 300px
+          a
+            background: url('icons/more_two.png') no-repeat left center
+            background-size: 20px 20px
+            color: #F3F3F3
+            display: block
+            float: left
+            font-family: 'Ubuntu'
+            height: 20px
+            line-height: 20px
+            text-decoration: none
+            text-indent: 25px
+            text-transform: lowercase
+      &:first-child .display-content-block
+        background: #F3F3F3
+        border-bottom: none
+        border-top: 5px solid #999999
+        margin-right: 5px
+        padding: 25px 15px 15px
+        width: 450px !important
         .block-title
-          color: #ECECEF
-          margin-bottom: 20px
-        li 
+          color: #409EA8
+          margin-bottom: 25px
+          padding: 0
+        li
           margin: 0
+          padding: 0
           & > div
             float: none
         .title
           height: auto
+          margin-bottom: 13px
           max-height: 38px
           width: 100%
           a
-            color: #ECECEF
+            color: #575959
+            font-weight: 300
         .image
+          border-color: #999999
           height: auto
           max-height: 290px
-          width: 100%
+          width: 446px
           img
             max-width: 100%
+        .read_more
+          float: right
+          margin: 15px 0 0 0
+          width: auto
+          a
+            background: url('icons/more.png') no-repeat left center
+            background-size: 25px 24px
+            color: #575959
+            height: 25px
+            line-height: 25px
+            text-indent: 30px
+
+#content
+  .block-outer:last-child
+    .link-list-block
+      background: none
+      padding: 0
+      .block-title
+        background: #E5E5E5
+        padding: 20px
+      li
+        background: none
+        margin: 0 25px 0 0
+        padding: 0
+        a
+          background: #FFF2DD url('icons/13.png') no-repeat 25px 40px
+          background-size: 169px
+          border: 1px solid #FF9C39
+          color: #FF9C39
+          font-family: 'Ubuntu'
+          font-size: 16px
+          font-weight: 700
+          display: block
+          height: 20px
+          padding: 230px 25px 40px
+          text-align: center
+          width: 169px
+        &:last-child
+          margin: 0
 #content .box-1 .link-list-block
-  background: #ccc
+  background: #69677C
+  border-radius: 0 0 3px 3px
+  margin-bottom: 30px
   padding: 20px
   ul
-    text-align: center
+    text-align: left
   li
-    margin: 0 25px
+    display: inline-block
+    margin: 0 0 0 50px
     padding: 0
+    &:first-child
+      background: url('icons/home.png') no-repeat left center
+      background-size: 24px
+      margin-left: 0
+      padding-left: 40px
     a
-      background: #ccc
-      border-bottom: 2px solid #ccc
+      background: #69677C
       border-radius: 0
-      font-family: 'Open Sans'
-      font-size: 15px
+      color: #FFF
+      font-family: 'Ubuntu Mediun'
+      font-size: 16px
       margin: 0
       padding: 0
       text-transform: capitalize
-      &:hover
-        color: #000
-        border-bottom: 2px solid #000
@@ -42,26 +42,26 @@ body
 @import profileheader
  
 #boxes
-  margin-top: 5px
+  margin-top: 0px
  
 @import topmenu
  
-@import homeblocks
+.action-profile-index, #box-organizer 
+  @import homeblocks
  
 #content
   .block-title
     border: none
-    color: #000
-    font-family: 'Open Sans'
-    font-size: 18px
+    color: #575959
+    font-family: 'Ubuntu Mediun'
+    font-size: 20px
     font-variant: normal
     font-weight: normal
     margin-bottom: 30px
-    text-transform: uppercase
     span
-      background: url('images/home/09.png') no-repeat left center
+      background: url('icons/more.png') no-repeat left center
       background-size: contain
-      height: 30px
-      padding-left: 35px
+      height: 25px
+      padding-left: 30px
  
 @import internalpage
1	1	#content
2	2	.article-block
3		- padding: 20px
4		- margin: 0px
5		- border-bottom: 2px solid #000
	3	+ h3.block-title
	4	+ background: url('icons/line.png') repeat-x left center
	5	+ border-bottom: none
	6	+ border-left: 10px solid #575959
	7	+ font-family: 'Ubuntu'
	8	+ font-size: 22px
	9	+ font-variant: normal
	10	+ font-weight: 300
	11	+ line-height: 22px
	12	+ margin: 25px 0
	13	+ span
	14	+ background: #FFF
	15	+ padding: 0 15px
6	16	.short-post
7		- p
8		- font-family: 'Open Sans'
9		- font-size: 12px
10		- margin: 0 0 20px
	17	+ font-family: 'Ubuntu'
	18	+ font-size: 13px
11	19	.read-more
12	20	a
13		- background: url('images/home/09.png') no-repeat left center
	21	+ background: url('icons/more.png') no-repeat left center
14	22	background-size: contain
15	23	color: #000
16	24	display: block
17		- font-family: 'Open Sans'
18		- font-size: 12px
19		- height: 25px
20		- line-height: 25px
	25	+ float: right
	26	+ font-family: 'Ubuntu'
	27	+ font-size: 13px
	28	+ height: 24px
	29	+ line-height: 24px
	30	+ margin: 25px 0
21	31	padding-left: 30px
22	32	text-decoration: none
	33	+
	34	+#content
23	35	.container-block-plugin_container-block
24	36	margin-top: 20px
25	37	.block-outer
26	38	.display-content-block
27		- background: #ECECEF
28		- border-bottom: 2px solid #000
29		- margin-right: 10px
30		- padding: 25px
31		- width: 425px !important
	39	+ background: #999999
	40	+ border-top: 5px solid #E5E5E5
	41	+ margin-right: 0px
	42	+ padding: 25px 0 0 0
	43	+ width: 480px !important
	44	+ .block-title
	45	+ color: #E4E5CC
	46	+ margin-bottom: 20px
	47	+ padding-left: 15px
	48	+ span
	49	+ background: url('icons/more.png') no-repeat left center
	50	+ background-size: contain
32	51	ul
33	52	margin: 0
34	53	li
35		- margin: 0 0 25px 0
	54	+ border-bottom: 1px solid #E4E5CC
	55	+ margin: 0
36	56	overflow: hidden
	57	+ padding: 15px
37	58	> div
38	59	float: left
	60	+ &:last-child
	61	+ margin: 0
	62	+ border: none
39	63	.image
40		- height: 75px
	64	+ border: 2px solid #F3F3F3
	65	+ height: 95px
41	66	margin-right: 15px
42	67	overflow: hidden
43		- width: 85px
	68	+ width: 100px
44	69	a
	70	+ color: #F3F3F3
45	71	display: block
46	72	overflow: hidden
47	73	img
48		- max-width: 135px
	74	+ max-width: 150px
49	75	.title
50		- height: 18px
51		- margin: 0 0 15px 0
	76	+ height: 34px
	77	+ margin: 10px 0 30px 0
52	78	overflow: hidden
53	79	width: 300px
54	80	a
55		- color: #000
56		- font-family: 'Open Sans'
	81	+ color: #F3F3F3
	82	+ font-family: 'Ubuntu'
57	83	font-size: 14px
58		- font-weight: 700
	84	+ font-weight: 300
59	85	text-decoration: none
60	86	.lead
61		- max-height: 34px
62		- margin-left: 0
63		- overflow: hidden
64		- width: 300px
65		- p
66		- font-family: 'Open Sans'
67		- font-size: 12px
68		- font-weight: 300
69		- margin: 0
70		- .read_more
71	87	display: none
72		- &:last-child .display-content-block
73		- background: #575C67
74		- border: none
75		- margin: 0
	88	+ .read_more
	89	+ width: 300px
	90	+ a
	91	+ background: url('icons/more_two.png') no-repeat left center
	92	+ background-size: 20px 20px
	93	+ color: #F3F3F3
	94	+ display: block
	95	+ float: left
	96	+ font-family: 'Ubuntu'
	97	+ height: 20px
	98	+ line-height: 20px
	99	+ text-decoration: none
	100	+ text-indent: 25px
	101	+ text-transform: lowercase
	102	+ &:first-child .display-content-block
	103	+ background: #F3F3F3
	104	+ border-bottom: none
	105	+ border-top: 5px solid #999999
	106	+ margin-right: 5px
	107	+ padding: 25px 15px 15px
	108	+ width: 450px !important
76	109	.block-title
77		- color: #ECECEF
78		- margin-bottom: 20px
79		- li
	110	+ color: #409EA8
	111	+ margin-bottom: 25px
	112	+ padding: 0
	113	+ li
80	114	margin: 0
	115	+ padding: 0
81	116	& > div
82	117	float: none
83	118	.title
84	119	height: auto
	120	+ margin-bottom: 13px
85	121	max-height: 38px
86	122	width: 100%
87	123	a
88		- color: #ECECEF
	124	+ color: #575959
	125	+ font-weight: 300
89	126	.image
	127	+ border-color: #999999
90	128	height: auto
91	129	max-height: 290px
92		- width: 100%
	130	+ width: 446px
93	131	img
94	132	max-width: 100%
	133	+ .read_more
	134	+ float: right
	135	+ margin: 15px 0 0 0
	136	+ width: auto
	137	+ a
	138	+ background: url('icons/more.png') no-repeat left center
	139	+ background-size: 25px 24px
	140	+ color: #575959
	141	+ height: 25px
	142	+ line-height: 25px
	143	+ text-indent: 30px
	144	+
	145	+#content
	146	+ .block-outer:last-child
	147	+ .link-list-block
	148	+ background: none
	149	+ padding: 0
	150	+ .block-title
	151	+ background: #E5E5E5
	152	+ padding: 20px
	153	+ li
	154	+ background: none
	155	+ margin: 0 25px 0 0
	156	+ padding: 0
	157	+ a
	158	+ background: #FFF2DD url('icons/13.png') no-repeat 25px 40px
	159	+ background-size: 169px
	160	+ border: 1px solid #FF9C39
	161	+ color: #FF9C39
	162	+ font-family: 'Ubuntu'
	163	+ font-size: 16px
	164	+ font-weight: 700
	165	+ display: block
	166	+ height: 20px
	167	+ padding: 230px 25px 40px
	168	+ text-align: center
	169	+ width: 169px
	170	+ &:last-child
	171	+ margin: 0
...	...
1	1	#content .box-1 .link-list-block
2		- background: #ccc
	2	+ background: #69677C
	3	+ border-radius: 0 0 3px 3px
	4	+ margin-bottom: 30px
3	5	padding: 20px
4	6	ul
5		- text-align: center
	7	+ text-align: left
6	8	li
7		- margin: 0 25px
	9	+ display: inline-block
	10	+ margin: 0 0 0 50px
8	11	padding: 0
	12	+ &:first-child
	13	+ background: url('icons/home.png') no-repeat left center
	14	+ background-size: 24px
	15	+ margin-left: 0
	16	+ padding-left: 40px
9	17	a
10		- background: #ccc
11		- border-bottom: 2px solid #ccc
	18	+ background: #69677C
12	19	border-radius: 0
13		- font-family: 'Open Sans'
14		- font-size: 15px
	20	+ color: #FFF
	21	+ font-family: 'Ubuntu Mediun'
	22	+ font-size: 16px
15	23	margin: 0
16	24	padding: 0
17	25	text-transform: capitalize
18		- &:hover
19		- color: #000
20		- border-bottom: 2px solid #000
...	...
...	...	@@ -42,26 +42,26 @@ body
42	42	@import profileheader
43	43
44	44	#boxes
45		- margin-top: 5px
	45	+ margin-top: 0px
46	46
47	47	@import topmenu
48	48
49		-@import homeblocks
	49	+.action-profile-index, #box-organizer
	50	+ @import homeblocks
50	51
51	52	#content
52	53	.block-title
53	54	border: none
54		- color: #000
55		- font-family: 'Open Sans'
56		- font-size: 18px
	55	+ color: #575959
	56	+ font-family: 'Ubuntu Mediun'
	57	+ font-size: 20px
57	58	font-variant: normal
58	59	font-weight: normal
59	60	margin-bottom: 30px
60		- text-transform: uppercase
61	61	span
62		- background: url('images/home/09.png') no-repeat left center
	62	+ background: url('icons/more.png') no-repeat left center
63	63	background-size: contain
64		- height: 30px
65		- padding-left: 35px
	64	+ height: 25px
	65	+ padding-left: 30px
66	66
67	67	@import internalpage
...	...