Skip to content

Commit 916a7a2

Browse files
swaazswaaz
authored
Merge pull request #1 from swaaz/swaaz
Swaaz
2 parents 1b4d559 + 99c51f7 commit 916a7a2

File tree

2 files changed

+529
-107
lines changed

2 files changed

+529
-107
lines changed

‎css/events_css.css

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic");
2+
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");
3+
body {
4+
padding: 60px 0px;
5+
background-color: rgb(220, 220, 220);
6+
}
7+
8+
.event-list {
9+
list-style: none;
10+
font-family: 'Lato', sans-serif;
11+
margin: 0px;
12+
padding: 0px;
13+
}
14+
.event-list > li {
15+
background-color: rgb(255, 255, 255);
16+
box-shadow: 0px 0px 5px rgb(51, 51, 51);
17+
box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
18+
padding: 0px;
19+
margin: 0px 0px 20px;
20+
}
21+
.event-list > li > time {
22+
display: inline-block;
23+
width: 100%;
24+
color: rgb(255, 255, 255);
25+
background-color: rgb(197, 44, 102);
26+
padding: 5px;
27+
text-align: center;
28+
text-transform: uppercase;
29+
}
30+
.event-list > li:nth-child(even) > time {
31+
background-color: rgb(165, 82, 167);
32+
}
33+
.event-list > li > time > span {
34+
display: none;
35+
}
36+
.event-list > li > time > .day {
37+
display: block;
38+
font-size: 56pt;
39+
font-weight: 100;
40+
line-height: 1;
41+
}
42+
.event-list > li time > .month {
43+
display: block;
44+
font-size: 24pt;
45+
font-weight: 900;
46+
line-height: 1;
47+
}
48+
.event-list > li > img {
49+
width: 100%;
50+
}
51+
.event-list > li > .info {
52+
padding-top: 5px;
53+
text-align: center;
54+
}
55+
.event-list > li > .info > .title {
56+
font-size: 17pt;
57+
font-weight: 700;
58+
margin: 0px;
59+
}
60+
.event-list > li > .info > .desc {
61+
font-size: 13pt;
62+
font-weight: 300;
63+
margin: 0px;
64+
}
65+
.event-list > li > .info > ul,
66+
.event-list > li > .social > ul {
67+
display: table;
68+
list-style: none;
69+
margin: 10px 0px 0px;
70+
padding: 0px;
71+
width: 100%;
72+
text-align: center;
73+
}
74+
.event-list > li > .social > ul {
75+
margin: 0px;
76+
}
77+
.event-list > li > .info > ul > li,
78+
.event-list > li > .social > ul > li {
79+
display: table-cell;
80+
cursor: pointer;
81+
color: rgb(30, 30, 30);
82+
font-size: 11pt;
83+
font-weight: 300;
84+
padding: 3px 0px;
85+
}
86+
.event-list > li > .info > ul > li > a {
87+
display: block;
88+
width: 100%;
89+
color: rgb(30, 30, 30);
90+
text-decoration: none;
91+
}
92+
.event-list > li > .social > ul > li {
93+
padding: 0px;
94+
}
95+
.event-list > li > .social > ul > li > a {
96+
padding: 3px 0px;
97+
}
98+
.event-list > li > .info > ul > li:hover,
99+
.event-list > li > .social > ul > li:hover {
100+
color: rgb(30, 30, 30);
101+
background-color: rgb(200, 200, 200);
102+
}
103+
.facebook a,
104+
.twitter a,
105+
.google-plus a {
106+
display: block;
107+
width: 100%;
108+
color: rgb(75, 110, 168) !important;
109+
}
110+
.twitter a {
111+
color: rgb(79, 213, 248) !important;
112+
}
113+
.google-plus a {
114+
color: rgb(221, 75, 57) !important;
115+
}
116+
.facebook:hover a {
117+
color: rgb(255, 255, 255) !important;
118+
background-color: rgb(75, 110, 168) !important;
119+
}
120+
.twitter:hover a {
121+
color: rgb(255, 255, 255) !important;
122+
background-color: rgb(79, 213, 248) !important;
123+
}
124+
.google-plus:hover a {
125+
color: rgb(255, 255, 255) !important;
126+
background-color: rgb(221, 75, 57) !important;
127+
}
128+
129+
@media (min-width: 768px) {
130+
.event-list > li {
131+
position: relative;
132+
display: block;
133+
width: 100%;
134+
height: 120px;
135+
padding: 0px;
136+
}
137+
.event-list > li > time,
138+
.event-list > li > img {
139+
display: inline-block;
140+
}
141+
.event-list > li > time,
142+
.event-list > li > img {
143+
width: 120px;
144+
float: left;
145+
}
146+
.event-list > li > .info {
147+
background-color: rgb(245, 245, 245);
148+
overflow: hidden;
149+
}
150+
.event-list > li > time,
151+
.event-list > li > img {
152+
width: 120px;
153+
height: 120px;
154+
padding: 0px;
155+
margin: 0px;
156+
}
157+
.event-list > li > .info {
158+
position: relative;
159+
height: 120px;
160+
text-align: left;
161+
padding-right: 40px;
162+
}
163+
.event-list > li > .info > .title,
164+
.event-list > li > .info > .desc {
165+
padding: 0px 10px;
166+
}
167+
.event-list > li > .info > ul {
168+
position: absolute;
169+
left: 0px;
170+
bottom: 0px;
171+
}
172+
.event-list > li > .social {
173+
position: absolute;
174+
top: 0px;
175+
right: 0px;
176+
display: block;
177+
width: 40px;
178+
}
179+
.event-list > li > .social > ul {
180+
border-left: 1px solid rgb(230, 230, 230);
181+
}
182+
.event-list > li > .social > ul > li {
183+
display: block;
184+
padding: 0px;
185+
}
186+
.event-list > li > .social > ul > li > a {
187+
display: block;
188+
width: 40px;
189+
padding: 10px 0px 9px;
190+
}
191+
}

0 commit comments

Comments
 (0)