Skip to content

Commit ed67fb2

Browse files
author
Julia Elman
committed
Added more styles, functionality, html and images. Cleaned up static/screen.css and templates/index.html.
1 parent f5176e0 commit ed67fb2

File tree

5 files changed

+186
-34
lines changed

5 files changed

+186
-34
lines changed

‎pythonkc_site/static/arrow-top.png‎

1.72 KB
Loading

‎pythonkc_site/static/footer-follow.png‎

2.15 KB
Loading

‎pythonkc_site/static/meetup-logo.gif‎

1.01 KB
Loading

‎pythonkc_site/static/screen.css‎

Lines changed: 121 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
1+
/* ---------- RESET ---------- */
2+
3+
html, body, div, span, object, iframe,
4+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
5+
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
6+
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
7+
fieldset, form, label, legend,
8+
table, caption, tbody, tfoot, thead, tr, th, td,
9+
article, aside, canvas, details, figcaption, figure,
10+
footer, header, hgroup, menu, nav, section, summary,
11+
time, mark, audio, video {
12+
margin: 0;
13+
padding: 0;
14+
border: 0;
15+
font-size: 100%;
16+
vertical-align: baseline;
17+
}
18+
19+
article, aside, details, figcaption, figure,
20+
footer, header, hgroup, menu, nav, section {
21+
display: block;
22+
}
23+
24+
blockquote, q { quotes: none; }
25+
26+
blockquote:before, blockquote:after,
27+
q:before, q:after { content: ""; content: none; }
28+
29+
ins { background-color: #ff9; color: #000; text-decoration: none; }
30+
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
31+
del { text-decoration: line-through; }
32+
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
33+
table { border-collapse: collapse; border-spacing: 0; }
34+
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
35+
textarea, input { border: 1px solid #ddd; background: #FFFFFF; font-weight: normal; color: #333; font-size: 13px; }
36+
ul, li { list-style: none; }
37+
a { text-decoration: none; }
38+
a:hover { text-decoration: underline; }
39+
140
html { height: 100%; background: #87cded; }
241
body {
342
height: 100%;
@@ -11,17 +50,97 @@ body {
1150
background-image: -ms-radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
1251
background-image: radial-gradient(50% 28%, circle cover, rgba(255,255,255, .3) 0%,#87cded 18.0%);
1352
}
14-
header, section, article { display: block; }
53+
1554
header[role="banner"]{ height: 145px; background: url(logo.png) center center no-repeat; }
1655
.wrap{ width: 930px; position: relative; margin: 0 auto; padding: 0 15px;
1756
overflow: hidden;
1857
}
58+
59+
1960
.next-meeting {
2061
background-color: white;
2162
border-top: 3px solid #abdcf2;
2263
border-bottom: 3px solid #abdcf2;
2364
}
24-
footer { background: #219cd7; }
65+
66+
.next-meeting .details {
67+
padding: 30px 0 40px 0;
68+
width: 450px;
69+
}
70+
71+
.next-meeting h1 {
72+
font-size: 44px;
73+
line-height: 30px;
74+
}
75+
76+
.next-meeting h2 {
77+
font-size: 24px;
78+
padding-top: 15px;
79+
}
80+
81+
.next-meeting time p {
82+
font-size: 33px;
83+
}
84+
85+
.next-meeting p.rsvp {
86+
font-size: 30px;
87+
font-weight: bold;
88+
padding-top: 15px;
89+
}
90+
91+
.next-meeting p.rsvp a {
92+
position: absolute;
93+
padding-left: 10px;
94+
}
95+
96+
footer {
97+
color: #FFFFFF;
98+
background: #219cd7;
99+
font-size: 13px;
100+
padding: 40px 0;
101+
position: relative;
102+
}
103+
104+
footer h1 {
105+
margin-bottom: 15px;
106+
}
107+
108+
footer a.top {
109+
position: absolute;
110+
top: -30px;
111+
right: 100px;
112+
cursor: pointer;
113+
background: url(arrow-top.png) no-repeat scroll 0 0 transparent;
114+
text-indent: -9999px;
115+
overflow: hidden;
116+
height: 65px;
117+
width: 65px;
118+
}
119+
120+
footer section article {
121+
float: left;
122+
margin: 0 20px 0 0;
123+
padding: 0;
124+
width: 175px;
125+
}
126+
127+
footer ul li {
128+
line-height: 22px;
129+
}
130+
131+
footer ul li a {
132+
color: #FFFFFF;
133+
}
134+
135+
footer ul.follow {
136+
background: url(footer-follow.png) no-repeat scroll 0 0 transparent;
137+
height: 165px;
138+
}
139+
140+
footer ul.follow li {
141+
padding: 0 0 14px 25px;
142+
}
143+
25144
#map_canvas {
26145
position: absolute;
27146
right: 0;

‎pythonkc_site/templates/index.html‎

Lines changed: 65 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,62 +12,91 @@
1212
<![endif]-->
1313
</head>
1414
<body>
15-
<header role="banner">
16-
</header>
15+
<header role="banner"></header>
16+
1717
<section class="next-meeting">
18-
19-
<div class="wrap">
20-
<article>
21-
<header>
22-
<time>
23-
<h1>{{ next_event.time|date:"F j, Y" }}</h1>
24-
<p>{{ next_event.time|date:"g:i a" }}</p>
25-
</time>
26-
</header>
18+
<div class="wrap">
19+
<article>
20+
<div class="details">
21+
<header>
22+
<time>
23+
<h1>{{ next_event.time|date:"F j"|upper }}</h1>
24+
<p>{{ next_event.time|date:"gA" }}</p>
25+
</time>
26+
</header>
2727
<h2>{{ next_event.name|safe }}</h2>
28-
<p>{{ next_event.description|safe }}</p>
29-
<p class="rsvp"><a href="{{ next_event.event_url }}">RSVP</a></p>
30-
<div id="map_canvas" style="width:100%; height:100%"></div>
28+
{% if next_event.venue_id %}<address>{{ next_event.venue_name }} // {{ next_event.venue_address1 }}{% if next_event.venue_address2 %}, {{ next_event.venue_address2 }}{% endif %} // {{ next_event.venue_city }}, {{ next_event.venue_state }} {{ next_event.venue_zip }}</address>{% else %}Venue TBD{% endif %}
29+
{% if next_event.description %}<p class="description">{{ next_event.description|safe }}</p>{% endif %}
30+
<p class="rsvp">RSVP at <a href="{{ next_event.event_url }}"><img src="{{ STATIC_URL }}meetup-logo.gif" alt="PythonKC Meetup RSVP for {{ next_event.name|safe }}"></a></p>
31+
</div>
32+
<div id="map_canvas" style="width:100%; height:100%"></div>
3133
</article>
3234
</div>
33-
</section>
35+
</section>
3436

35-
<section id="past-meetups">
37+
<section id="past-meetups">
3638
<div class="wrap">
3739
<h1>Past Events</h1>
3840
<div class="slider-controls" id="slider-controls">
3941
<a href="#" class="btn-previous btn-control disabled" id="prev"> <span class="prev-arrow"></span></a>
4042
<a href="#" class="btn-next btn-control" id="next"><span class="next-arrow"></span></a>
4143
</div>
4244
<div id="evt-wrapper">
43-
{% for event in past_events %}
44-
<article class="past-event">
45-
<header>
46-
<h1><time datetime>{{ event.time|date:"F j, Y" }}</time></h1>
47-
</header>
48-
45+
{% for event in past_events %}
46+
<article class="past-event">
47+
<header>
48+
<h1><time datetime>{{ event.time|date:"F j, Y" }}</time></h1>
49+
</header>
50+
4951
<h2>{{ event.name|safe }}</h2>
5052
<p>{{ event.description|safe }}</p>
5153
<div class="attendees">
5254
<h3>Attendees ({{event.attendees|length}})</h3>
53-
{% for attendee in event.attendees %}
55+
{% for attendee in event.attendees %}
5456
{% if attendee.photo.thumb_url %}
5557
<div title="{{ attendee.name }}" style="background-image: url( {{ attendee.photo.thumb_url }} );" class="attendee"></div>
5658
{% endif %}
5759
{% endfor %}
5860
</div>
59-
60-
<figure class="flickr-photo">
61-
<a href="{{flickr_url}}"><img src="" height="" width="" /></a>
62-
</figure>
63-
</article>
64-
{% endfor %}
65-
</div>
61+
</article>
62+
{% endfor %}
63+
</div>
6664
</div>
67-
</section>
65+
</section>
6866

69-
<footer>
67+
<footer>
68+
<a class="top">Back to the top</a>
7069
<div class="wrap">
70+
<section>
71+
<article>
72+
<h1>POWERED BY</h1>
73+
<ul>
74+
<li><a href="http://www.python.org/">Python</a></li>
75+
<li><a href="http://djangoproject.com/">Django</a></li>
76+
<li><a href="https://gondor.io/">Gondor</a></li>
77+
</ul>
78+
</article>
79+
<article>
80+
<h1>FOLLOW US</h1>
81+
<ul class="follow">
82+
<li><a href="https://convore.com/pythonkc/">Convore</a></li>
83+
<li><a href="http://groups.google.com/group/pythonkc/">Google Group</a></li>
84+
<li><a href="http://www.linkedin.com/groups/PythonKC/">LinkedIN</a></li>
85+
<li><a href="http://www.meetup.com/pythonkc/">Meetup</a></li>
86+
<li><a href="http://twitter.com/pythonkc/">Twitter</a></li>
87+
</ul>
88+
</article>
89+
</section>
90+
{% comment %}
91+
<section>
92+
<div id="contact-form">
93+
</div>
94+
</section>
95+
{% endcomment %}
96+
<section>
97+
<div class="copyright">
98+
</div>
99+
</section>
71100
</div>
72101
</footer>
73102
</div>
@@ -132,6 +161,10 @@ <h3>Attendees ({{event.attendees|length}})</h3>
132161
}
133162

134163
pykc.init = function(){
164+
$('.top').click(function(e){
165+
e.preventDefault();
166+
$('html, body').animate({scrollTop: 0}, 300);
167+
});
135168
$('#prev').click(pykc.onPrev);
136169
$('#next').click(pykc.onNext);
137170
this.mapInit();

0 commit comments

Comments
 (0)