Skip to content

Commit 207aaf4

Browse files
committed
adding some style and content
1 parent 25d398e commit 207aaf4

File tree

6 files changed

+277
-91
lines changed

6 files changed

+277
-91
lines changed

_layouts/default.html

+62-36
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,68 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6-
<title>{{ page.title }}</title>
7-
<meta name="viewport" content="width=device-width">
8-
9-
<!-- brick.im fonts -->
10-
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Crimson:400,400i">
11-
12-
<!-- typography fonts -->
13-
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/typo.css">
14-
15-
<!-- syntax highlighting CSS -->
16-
<link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
17-
18-
<!-- Custom CSS -->
19-
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
20-
</head>
21-
<body>
22-
23-
<div class="site">
24-
<div class="header">
25-
<h1 class="title"><a href="{{ site.baseurl }}">{{ site.name }}</a></h1>
26-
</div>
27-
28-
<div>
29-
<hr>
30-
<ul class="navbar">
31-
<li><a href="#">Join</a></li>
32-
<li><a href="http://spoj.com/UIUC">Practice</a></li>
33-
<li><a href="#">News</a></li>
34-
<li><a href="mailto:name@email.com">Contact</a></li>
35-
</ul>
36-
<hr>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>{{ page.title }}</title>
7+
<meta name="viewport" content="width=device-width">
8+
9+
<!-- brick.im fonts -->
10+
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code Pro:400">
11+
12+
<!-- typography fonts -->
13+
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/typo.css">
14+
15+
<!-- font awesome icons -->
16+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
17+
18+
<!-- syntax highlighting css -->
19+
<link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css">
20+
21+
<!-- custom css -->
22+
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
23+
</head>
24+
<body>
25+
<div class="navbar">
26+
<div class="navlist-bg">
27+
<!-- This is temporary until we get a decent logo -->
28+
<div class="brand logo" style="font-size:48px; color:white; margin-left:-48px; margin-top:2px">
29+
λ
30+
<!-- <img width="64px" height="64px" src="./assets/images/64x64_balloon.png"></img> -->
31+
</div>
32+
<div class="navlist">
33+
<div class="item">
34+
<h1 class="brand {% if page.title == 'ICPC'%}active{% endif %}">
35+
<a href="{{ site.baseurl }}/">ICPC</a>
36+
</h1>
37+
</div>
38+
39+
<div class="item {% if page.title == 'Resources' %}active{% endif %}">
40+
<div class="navlink"><a href="{{ site.baseurl }}/practice.html">Practice</a></div>
41+
</div>
42+
<div class="item">
43+
<div class="navlink"><a href="#">News</a></div>
3744
</div>
38-
{{ content }}
39-
</body>
45+
<div class="item {% if page.title == 'Contact' %}active{% endif %}">
46+
<div class="navlink"><a href="{{ site.baseurl }}/contact.html">Contact</a></div>
47+
</div>
48+
49+
<div class="item">
50+
<h1 class="brand right">
51+
<a href="http://www.acm.uiuc.edu/">ACM@UIUC</a>
52+
</h1>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
58+
{% if page.title == "ICPC" %}
59+
<div class="warbanner"></div>
60+
{% endif %}
61+
62+
<div class="site">
63+
{{ content }}
64+
</div>
65+
</body>
4066

4167
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
4268
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

assets/images/warimage.gif

4.96 MB
Loading

contact.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
layout: default
3+
title: Contact
4+
---
5+
6+
<div class="both">
7+
<a class="contact"
8+
href="https://www-s.acm.uiuc.edu/cgi-bin/mailman/listinfo/icpc-l">
9+
<div class="left">
10+
<h2 class="title">Mailing List</h2>
11+
<span class="fa fa-envelope fa-5x"></span>
12+
</div>
13+
</a>
14+
15+
<a class="contact"
16+
href="https://www.facebook.com/groups/IllinoisICPC/">
17+
<div class="right">
18+
<h2 class="title">Facebook</h2>
19+
<span class="fa fa-facebook fa-5x" style="color:#5856D6;"></span>
20+
</div>
21+
</a>
22+
23+
<div class="clear"></div>
24+
</div>

css/main.css

+110-32
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@
33
/* Common
44
/*
55
/*****************************************************************************/
6-
7-
/* Global Reset */
8-
html {
9-
/*-webkit-font-smoothing: antialiased;*/
10-
}
11-
126
* {
137
margin: 0;
148
padding: 0;
@@ -29,14 +23,13 @@ hr {
2923
}
3024

3125
h1, h2, h3, h4, h5, h6 {
32-
font-size: 100%; }
26+
font-size: 100%;
27+
}
3328

3429
h1 { margin-bottom: 1em; }
3530
p { margin: 0 0 1em 0; }
3631

37-
a { color: #900; }
38-
a:hover { color: #c00; }
39-
a:visited { color: #700; }
32+
a { text-decoration: none; }
4033

4134
/*****************************************************************************/
4235
/*
@@ -81,8 +74,8 @@ a:visited { color: #700; }
8174
}
8275

8376
.site {
84-
margin: 3em auto 2em;
85-
width: 42em;
77+
margin-right: 21%;
78+
margin-left: 21%;
8679
text-align: justify;
8780
font-size: 115%;
8881
line-height: 1.5em;
@@ -93,14 +86,16 @@ a:visited { color: #700; }
9386
}
9487

9588
a.title, h2.title, .meta.title {
89+
margin-bottom: .75em;
9690
text-decoration: none;
9791
font-weight: 400;
9892
font-size: 18pt;
9993
font-family: 'Crimson', Georgia, serif;
10094
-webkit-font-smoothing: subpixel-antialiased;
10195
}
10296

103-
h1.title, h2.title {
97+
.brand, h1.title {
98+
display: inline;
10499
margin-bottom: .5em;
105100
}
106101

@@ -172,12 +167,11 @@ h1.title, h2.title {
172167
/* Posts
173168
/*
174169
/*****************************************************************************/
175-
176170
.post:not(.meta) {
177171
color: #463F40;
178172
font-size: 18px;
179173
font-family: 'Mercury SSm A', 'Mercury SSm B', Georgia, 'Times New Roman', serif;
180-
line-height: 28px;
174+
line-height: 32px;
181175
}
182176

183177
/* standard */
@@ -217,34 +211,118 @@ h1.title, h2.title {
217211
/* Navigation Bar
218212
/*
219213
/*****************************************************************************/
214+
.navbar {
215+
border-bottom: solid 10px #7C75FA;
216+
background-color: #5856D6;
217+
}
218+
219+
.navbar > .navlist-bg > .navlist > .item > .navlink > *,
220+
.navbar > .navlist-bg > .navlist > .item > h1.brand > a {
221+
color: white;
222+
font-family: "Source Code Pro";
223+
}
224+
225+
.navlist-bg {
226+
margin-right: 20%;
227+
margin-left: 20%;
228+
height: 5em;
229+
background-color: #7C75FA;
230+
}
231+
232+
.brand {
233+
text-decoration: none;
234+
font-size: 24pt;
235+
}
236+
237+
.brand.logo {
238+
float: left;
239+
margin-left: -74px;
240+
}
220241

221-
ul.navbar {
242+
.navlist {
222243
display: inline;
223244
list-style-type: none;
224245
}
225246

226-
ul.navbar > li {
247+
.navlist > .item {
248+
display: table;
249+
float: left;
250+
height: 4em;
227251
font-size: 12pt;
228-
display: inline;
229-
margin-top: 1em;
230-
margin-right: 1em;
231-
margin-bottom: 1em;
232252
}
233253

234-
ul.navbar > li > a.active {
254+
.navlist > .item > .navlink,
255+
.navlist > .item > .brand {
256+
display: table-cell;
257+
width: 95px;
258+
vertical-align: middle;
259+
text-align: center;
260+
}
261+
262+
.navlist > .item.active > .navlink > a {
263+
color: #5856D6 !important;
264+
}
265+
266+
.brand.active a {
267+
color: #5856D6 !important;
268+
}
269+
270+
.navlist > .item:first-child,
271+
.navlist > .item:nth-child(2) {
272+
float: left;
273+
margin-left: 1em;
274+
}
275+
276+
.navlist > .item:last-child {
277+
float: right;
278+
margin-right: 1.5em;
279+
}
280+
281+
/*****************************************************************************/
282+
/*
283+
/* Front Page
284+
/*
285+
/*****************************************************************************/
286+
287+
.warbanner {
288+
width: auto;
289+
height: 300px;
290+
border-bottom: solid 10px #7C75FA;
291+
background-image: url("../assets/images/warimage.gif");
292+
background-size: cover;
293+
background-repeat: no-repeat;
294+
}
295+
296+
/*****************************************************************************/
297+
/*
298+
/* Contact Page
299+
/*
300+
/*****************************************************************************/
301+
302+
a.contact {
235303
color: black;
236-
text-decoration: underline;
237-
opacity: 1;
238304
}
239305

240-
ul.navbar > li > a {
241-
color: #900 !important;
242-
text-decoration: none;
243-
font-family: 'Mercury SSm A', 'Mercury SSm B', Georgia, 'Times New Roman', serif;
244-
line-height: 36px;
245-
-webkit-font-smoothing: subpixel-antialiased;
306+
.both {
307+
margin-top: 5em;
246308
}
247309

248-
ul.navbar > li > a:hover {
249-
color: #FF5D4A !important;
310+
.left {
311+
float: left;
312+
margin-left: 0;
313+
width: 45%;
314+
text-align: center;
315+
}
316+
317+
.right {
318+
margin-right: auto;
319+
margin-left: 45%;
320+
text-align: center;
250321
}
322+
323+
.left > h2.title {
324+
}
325+
326+
.clear {
327+
clear: both;
328+
}

0 commit comments

Comments
 (0)