Skip to content

Commit e27f9da

Browse files
author
aeoth
committed
fleshed out CSS/JS of splash page
1 parent ac79614 commit e27f9da

File tree

7 files changed

+551
-49
lines changed

7 files changed

+551
-49
lines changed

‎_includes/get_involved.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
<div class="item">
2-
3-
<div class="heading">what else can I do?</div>
4-
1+
<div class="pivot-item">
2+
<h3>what else can I do?</h3>
53
<div class="description"></div>
64

75
<div class="details">

‎_includes/latest_project.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
<div class="item">
2-
3-
<div class="heading">current project</div>
1+
<div class="pivot-item">
2+
<h3>current project</h3>
43

54
<div class="description"><a href="http://code52.org/pretzel.html">Pretzel</a> is a .NET based static site generator tool for quickly creating websites.</div>
65

‎_includes/links.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
<div class="item">
2-
3-
<div class="heading">more links</div>
1+
<div class="pivot-item">
2+
<h3>more links</h3>
43

54
<div class="details">
65
<ul>

‎_layouts/splash.html‎

Lines changed: 107 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,108 @@
1-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2-
<html xmlns="http://www.w3.org/1999/xhtml">
3-
<head>
4-
<meta content="en-au" http-equiv="Content-Language" />
5-
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6-
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="Blog Feed" />
7-
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Blog Feed" />
8-
<link href="/projectsrss.xml" type="application/rss+xml" rel="alternate" title="Projects Feed" />
9-
<link href="/projectsatom.xml" type="application/atom+xml" rel="alternate" title="Projects Feed" />
10-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
11-
<title>{% if page.title != "code52" %}{{ page.title }} - code52{% else %}{{ page.title }}{% endif %}</title>
12-
<link rel="stylesheet" type="text/css" href="/css/style20120128.css" />
13-
<link rel="shortcut icon" href="/img/favicon.ico" />
14-
</head>
15-
<body>
16-
<div id="container">
17-
18-
<!-- background image: 52, aligned left, semi-transparent -->
19-
20-
<div class="title left">
21-
<a href="/" id="home" title="home" alt="home">code52 - a new coding project every week</a>
22-
</div>
23-
24-
<!-- each of these items are tab-style sections for users to switch between -->
25-
26-
<div class="content left">
27-
28-
{% include latest_project.html %}
29-
30-
{% include get_involved.html %}
31-
32-
{% include links.html %}
33-
34-
</div>
35-
36-
{% include footer.html %}
37-
38-
</div>
39-
</body>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta content="en-au" http-equiv="Content-Language" />
5+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
7+
<title>{% if page.title != "code52" %}{{ page.title }} - code52{% else %}{{ page.title }}{% endif %}</title>
8+
9+
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="Blog Feed" />
10+
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Blog Feed" />
11+
<link href="/projectsrss.xml" type="application/rss+xml" rel="alternate" title="Projects Feed" />
12+
<link href="/projectsatom.xml" type="application/atom+xml" rel="alternate" title="Projects Feed" />
13+
<link rel="stylesheet" type="text/css" href="/css/jquery.metro.css" />
14+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
15+
<script type="text/javascript" src="/js/jquery.metro.js"></script>
16+
<link rel="shortcut icon" href="/img/favicon.ico" />
17+
<style>
18+
body {
19+
overflow:auto;
20+
}
21+
#container
22+
{
23+
width:800px;
24+
height: 500px;
25+
margin-left:auto;
26+
margin-right:auto;
27+
margin-top:150px;
28+
}
29+
.metro-pivot {
30+
height:350px;
31+
margin-left:2px;
32+
}
33+
.footer ul {
34+
margin:0;
35+
padding:0;
36+
}
37+
.footer li
38+
{
39+
margin-right:10px;
40+
display:inline;
41+
list-style-type:none;
42+
}
43+
44+
h1,h2,h3,h4,h5,h6
45+
{
46+
font-family: Segoe UI Light, Segoe WP Light, Segoe UI, Helvetica, sans-serif;
47+
font-weight: 100;
48+
margin-bottom:0px;
49+
}
50+
h1
51+
{
52+
font-size: 4em;
53+
}
54+
h2
55+
{
56+
color: #41b1e1;
57+
margin-left:20px;
58+
font-size: 2.5em;
59+
}
60+
a, a:visited
61+
{
62+
text-decoration: none;
63+
color:#13678b;
64+
}
65+
a:hover
66+
{
67+
color:white;
68+
background: #13678b
69+
}
70+
71+
</style>
72+
</head>
73+
<body>
74+
75+
<div id="container">
76+
<h1 style="display:inline;"><a href="/" id="home" title="home" alt="home">code52</a></h1>
77+
<h2 style="display:inline;">a new coding project every week</h2>
78+
<div class="metro-pivot">
79+
{% include latest_project.html %}
80+
81+
{% include get_involved.html %}
82+
83+
{% include links.html %}
84+
</div>
85+
86+
{% include footer.html %}
87+
</div>
88+
<script>
89+
var defaults = {
90+
animationDuration: 500,
91+
headerOpacity: 0.25,
92+
fixedHeaders: false,
93+
headerSelector: function (item) { return item.children("h3").first(); },
94+
itemSelector: function (item) { return item.children(".pivot-item"); },
95+
headerItemTemplate: function () { return $("<span class='header' />"); },
96+
pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
97+
itemsTemplate: function () { return $("<div class='items' />"); },
98+
headersTemplate: function () { return $("<div class='headers' />"); },
99+
controlInitialized: undefined,
100+
selectedItemChanged: undefined
101+
};
102+
103+
$(function () {
104+
$("div.metro-pivot").metroPivot(defaults);
105+
});
106+
</script>
107+
</body>
40108
</html>

‎css/jquery.metro.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
div.page {max-width:1000px; margin:auto; overflow:hidden;}
2+
3+
.rightside {float:right;}
4+
5+
h1 {font-size:5em; font-family: Segoe UI Light, Segoe UI; margin:0; margin-bottom:-30px;}
6+
h2 {font-size:30pt; margin:0;}
7+
h3 {font-size:20pt; margin:0;}
8+
h4 {font-size:20pt; margin:0;}
9+
10+
.theme-bg {background:#000;}
11+
.metro-pivot .headers { white-space: nowrap; height: 60px; display: block; clear: both; }
12+
.metro-pivot .pivot-item h3, .metro-pivot .headers .header { font-size: 250%; font-weight: light;font-family: "Segoe UI Light", SUIL, Arial, sans-serif; display: inline-block; vertical-align: top; padding: 0; cursor: pointer; margin-right:15px; }
13+
.metro-pivot .headers .header.current { }
14+
.metro-pivot .items { position: relative; }
15+
.metro-pivot .items .pivotItem { display: block; white-space: normal; text-align: justify; width: 100%; }
16+
.metro-pivot .items .pivotItem .pivot-item { padding: 10px; }
17+
18+
ul.metro-list { padding: 0; }
19+
ul.metro-list li { display: block; margin: 10px 0; height: 20px; padding: 5px; overflow: hidden; border-left: solid 30px; list-style: none; }
20+
21+
a.metro-button { display: inline-block; padding: 2px 10px; border: solid 2px white; color: white; text-decoration: none; margin: 10px 0; }
22+
.start-menu-item { float: left; height: 120px; width: 120px; position: relative; color: White; margin: 5px; overflow: hidden; }
23+
.start-menu-item label { position: absolute; margin: 5px; bottom: 0; left: 0; white-space: nowrap; }
24+
.side-menu-item { height: 20px; padding: 5px 15px; border-left: solid 30px; margin: 10px 0; }
25+
26+
27+
ul.metro-conversation { padding: 0 30px; }
28+
ul.metro-conversation li { margin: 10px 0; display: block; padding: 10px; line-height: 110%; margin-right: 20%; position: relative; }
29+
ul.metro-conversation li.alt { margin-right: 0; margin-left: 20%; }
30+
ul.metro-conversation li .list-diam { position: absolute; top: -15px; left: 20px; font-size: 40pt; font-family: Arial; }
31+
ul.metro-conversation li.alt .list-diam { left: auto; right: 20px; top: auto; bottom: -10px; }
32+
33+
div.html { background: white; padding: 10px; margin-left: 30px; border: dotted 2px #aaa; }
34+
35+
ul.metro-conversation li .question { color: #444; border-bottom: dashed 1px #444; margin-bottom: 5px; padding-bottom: 10px; }
36+
37+
.wp-popup {display:none; margin:20px;}
38+
.wp-popup-container {position:absolute; top:0; left:0; width:100%; display:none;}
39+
40+
a.wp-colored-button {display:inline-block; padding:0 15px; border:solid 4px; color:inherit !important;}
41+
42+
43+
.top-banner {text-align:right; border-bottom:dotted 1px #777; margin-bottom:10px; font-size:10pt;}
44+
.top-banner .theme-box,
45+
.top-banner .accent-box {display:inline-block; width:15px; height:15px; margin:3px; border:solid 1px #777; cursor:pointer; vertical-align:middle; }
46+
.top-banner .accent-box {background:#F09720;}
47+
48+
pre.jush {font-size:9pt; background:#F0F0FF; border:dashed 1px #aaa; padding:10px;}
49+
pre.jush a {text-decoration:none; }
50+
pre.jush a:hover {text-decoration:underline; }

‎js/jquery.metro.js‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
/**
2+
* jqMetro
3+
* JQUERY PLUGIN FOR METRO UI CONTROLS
4+
*
5+
* Copyright (c) 2011 Mohammad Valipour (http://manorey.net/mohblog)
6+
* Licensed under the MIT License:
7+
* http://www.opensource.org/licenses/mit-license.php
8+
*
9+
*/
10+
11+
;(function ($) {
12+
var defaults = {
13+
animationDuration: 150,
14+
headerOpacity: 0.5,
15+
fixedHeaders: false,
16+
headerSelector: function (item) { return item.children("h3").first(); },
17+
itemSelector: function (item) { return item.children(".pivot-item"); },
18+
headerItemTemplate: function () { return $("<span class='header' />"); },
19+
pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
20+
itemsTemplate: function () { return $("<div class='items' />"); },
21+
headersTemplate: function () { return $("<div class='headers' />"); },
22+
controlInitialized: undefined,
23+
selectedItemChanged: undefined
24+
};
25+
26+
$.fn.metroPivot = function (settings) {
27+
if(this.length > 1)
28+
{
29+
return this.each(function(index, el){ $(el).wp7Pivot(settings); });
30+
}
31+
32+
$.extend(this, defaults, settings);
33+
$.extend(this,{
34+
animating : false,
35+
headers : undefined,
36+
items : undefined,
37+
goToNext: function(){
38+
if(this.animating) return;
39+
this.headers.children(".current").next().trigger("click");
40+
},
41+
goToPrevious: function(){
42+
if(this.animating) return;
43+
this.headers.children(".header").last().trigger("click");
44+
},
45+
goToItemByName:function(header){
46+
if(this.animating) return;
47+
this.headers.children(":contains("+header+")").first().trigger("click");
48+
},
49+
goToItemByIndex:function(index){
50+
if(this.animating) return;
51+
this.headers.children().eq(index).trigger("click");
52+
},
53+
initialize : function () {
54+
var pivot = this;
55+
// define sections
56+
57+
var headers = pivot.headersTemplate();
58+
var items = pivot.itemsTemplate();
59+
60+
pivot.itemSelector(pivot).each(function (index, el) {
61+
el = $(el);
62+
63+
var h3Element = pivot.headerSelector(el);
64+
if (h3Element.length == 0) return;
65+
66+
var headerItem = pivot.headerItemTemplate().html(h3Element.html()).fadeTo(0, pivot.headerOpacity);
67+
var pivotItem = pivot.pivotItemTemplate().append(el).hide();
68+
69+
if (index == 0) {
70+
headerItem.addClass("current").fadeTo(0, 1);
71+
pivotItem.addClass("current").show();
72+
}
73+
headerItem.attr("index", index);
74+
headerItem.click(function() { pivot.pivotHeader_Click($(this)); });
75+
76+
headers.append(headerItem);
77+
items.append(pivotItem);
78+
79+
h3Element.remove();
80+
});
81+
82+
pivot.append(headers).append(items);
83+
pivot.headers = headers;
84+
pivot.items = items;
85+
86+
this.data("controller", pivot);
87+
88+
if(this.controlInitialized != undefined)
89+
{
90+
this.controlInitialized();
91+
}
92+
},
93+
setCurrentHeader: function(header){
94+
var pivot = this;
95+
96+
// make current header a normal one
97+
this.headers.children(".header.current").removeClass("current").fadeTo(0, this.headerOpacity);
98+
99+
// make selected header to current
100+
header.addClass("current").fadeTo(0, 1);
101+
102+
if(pivot.fixedHeaders == false)
103+
{
104+
// create a copy for fadeout navigation
105+
var copy = header.prevAll().clone();
106+
// detach items to move to end of headers
107+
var detached = $(header.prevAll().detach().toArray().reverse());
108+
109+
// copy animation items to beginning and animate them
110+
$("<span />").append(copy).prependTo(pivot.headers).animate({ width: 0, opacity: 0 }, pivot.animationDuration, function () {
111+
// when finished: delete animation objects
112+
$(this).remove();
113+
114+
// and attach detached items to the end of headers
115+
detached.fadeTo(0, 0).appendTo(pivot.headers).fadeTo(200, pivot.headerOpacity);
116+
});
117+
}
118+
},
119+
setCurrentItem: function(item, index){
120+
var pivot = this;
121+
122+
// hide current item immediately
123+
pivot.items.children(".pivotItem.current").hide().removeClass("current");
124+
125+
// after a little delay
126+
setTimeout(function () {
127+
// move the item to far right and make it visible
128+
item.css({ marginLeft: item.outerWidth() }).show().addClass("current");
129+
130+
// animate it to left
131+
item.animate( { marginLeft: 0 }, pivot.animationDuration, function() { pivot.currentItemChanged(index);});
132+
133+
}, 200);
134+
},
135+
currentItemChanged: function(index) {
136+
this.animating = false;
137+
if(this.selectedItemChanged != undefined)
138+
{
139+
this.selectedItemChanged(index);
140+
}
141+
},
142+
pivotHeader_Click : function (me) {
143+
// ignore if already current
144+
if (me.is(".current")) return;
145+
146+
// ignore if still animating
147+
if (this.animating) return;
148+
this.animating = true;
149+
150+
// set current header
151+
this.setCurrentHeader(me);
152+
153+
var index = me.attr("index");
154+
// find and set current item
155+
var item = this.items.children(".pivotItem:nth(" + index + ")");
156+
this.setCurrentItem(item, index);
157+
},
158+
});
159+
160+
return this.initialize();
161+
};
162+
})(jQuery);

0 commit comments

Comments
 (0)