Skip to content

Commit 2e35d9a

Browse files
mbbischoffmbbischoff
committed
Added webfont and created orange site.
1 parent 09241c0 commit 2e35d9a

10 files changed

+481
-88
lines changed

‎css/main.css

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,6 @@ body {
2323
line-height: 1.4;
2424
}
2525

26-
/*
27-
* Remove text-shadow in selection highlight: h5bp.com/i
28-
* These selection declarations have to be separate.
29-
* Customize the background color to match your design.
30-
*/
31-
32-
::-moz-selection {
33-
background: #b3d4fc;
34-
text-shadow: none;
35-
}
36-
37-
::selection {
38-
background: #b3d4fc;
39-
text-shadow: none;
40-
}
41-
4226
/*
4327
* A better looking default horizontal rule
4428
*/
@@ -78,36 +62,6 @@ textarea {
7862
resize: vertical;
7963
}
8064

81-
/* ==========================================================================
82-
Chrome Frame prompt
83-
========================================================================== */
84-
85-
.chromeframe {
86-
margin: 0.2em 0;
87-
background: #ccc;
88-
color: #000;
89-
padding: 0.2em 0;
90-
}
91-
92-
/* ==========================================================================
93-
Author's custom styles
94-
========================================================================== */
95-
96-
97-
98-
99-
100-
101-
102-
103-
104-
105-
106-
107-
108-
109-
110-
11165

11266
/* ==========================================================================
11367
Helper classes

‎css/style.css

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
5+
-webkit-font-smoothing: antialiased;
6+
7+
-webkit-box-sizing: border-box;
8+
-moz-box-sizing: border-box;
9+
box-sizing: border-box;
10+
}
11+
12+
13+
::selection { background: rgba(0,0,0,.2); }
14+
::-moz-selection { background: rgba(0,0,0,.2); }
15+
::-webkit-selection { background: rgba(0,0,0,.2); }
16+
17+
body {
18+
font: 300 22px/25px "Helvetica Neue", Helvetica, sans-serif;
19+
20+
margin: 150px 30%;
21+
background: #FF6D21;
22+
color: #fff;
23+
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
24+
}
25+
26+
section {
27+
margin-top: 20px;
28+
}
29+
30+
ul {
31+
margin-top: 10px;
32+
}
33+
34+
a {
35+
color: white;
36+
opacity: 0.8;
37+
text-decoration: none;
38+
border-bottom: 1px solid rgba(255,255,255,0.8);
39+
40+
-webkit-transition: opacity .3s;
41+
-moz-transition: opacity .3s;
42+
-ms-transition: opacity .3s;
43+
-o-transition: opacity .3s;
44+
transition: opacity .3s;
45+
}
46+
47+
a:hover{
48+
opacity: 1.0;
49+
}
50+
51+
li {
52+
margin: 10px 0px;
53+
}
54+
55+
h1 {
56+
57+
font-weight: 500;
58+
}
59+
60+
h1, h2 {
61+
font-size: 150%;
62+
line-height: 125%;
63+
}
64+
65+
h2 {
66+
font-weight: 300;
67+
opacity: 0.5;
68+
}
69+
70+
h3 {
71+
font-size: 110%;
72+
line-height: 120%;
73+
font-weight: 4 00;
74+
}
75+
76+
77+
/**
78+
* Social services.
79+
*/
80+
81+
.social {
82+
list-style: none;
83+
margin-top: 40px;
84+
}
85+
86+
.social li {
87+
color: #fff;
88+
float: left;
89+
display: inline-block;
90+
margin-right: 25px;
91+
margin-bottom: 15px;
92+
93+
}
94+
95+
.social li a{
96+
border: none;
97+
opacity: .8;
98+
}
99+
100+
.social li a:hover {
101+
opacity: 1;
102+
}

‎humans.txt

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@
33

44
# TEAM
55

6-
<name> -- <role> -- <twitter>
7-
8-
# THANKS
9-
10-
<name>
6+
Matthew Bischoff -- Design and Development -- @mb
117

128
# TECHNOLOGY COLOPHON
139

14-
HTML5, CSS3
15-
Normalize.css, jQuery, Modernizr
10+
HTML5, CSS3

‎index.html

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
11
<!DOCTYPE html>
2-
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3-
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4-
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5-
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6-
<head>
7-
<meta charset="utf-8">
8-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9-
<title></title>
10-
<meta name="description" content="">
11-
<meta name="viewport" content="width=device-width">
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>Brian Capps</title>
7+
<meta name="description" content="Brian Capps makes things simpler.">
8+
<!-- <meta name="viewport" content="width=device-width"> -->
129

13-
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
14-
15-
<link rel="stylesheet" href="css/normalize.css">
16-
<link rel="stylesheet" href="css/main.css">
17-
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
10+
<link rel="author" type="text/plain" href="humans.txt">
11+
<link rel="stylesheet" href="css/main.css">
12+
<link rel="stylesheet" href="css/style.css">
13+
<link rel="stylesheet" href="webfonts/ss-social-regular.css">
14+
1815
</head>
19-
<body>
20-
<!--[if lt IE 7]>
21-
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
22-
<![endif]-->
23-
24-
<!-- Add your site or application content here -->
25-
<p>Hello world! This is HTML5 Boilerplate.</p>
26-
27-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
28-
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
29-
<script src="js/plugins.js"></script>
30-
<script src="js/main.js"></script>
16+
<body>
17+
<header>
18+
<h1>Brian Capps</h1>
19+
<h2 class="manifesto">I make things simpler.</p>
20+
</header>
3121

32-
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
33-
<script>
34-
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
35-
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
36-
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
37-
s.parentNode.insertBefore(g,s)}(document,'script'));
38-
</script>
39-
</body>
22+
<section class="work">
23+
<ul class="projects">
24+
<li><a href="http://quotebookapp.com">Quotebook</a></li>
25+
<li><a href="http://velocityapp.com">Velocity</a></li>
26+
<li><a href="http://appstore.com/nytimes">NYTimes for iPhone</a></li>
27+
</ul>
28+
</section>
29+
30+
<footer>
31+
<ul class="social">
32+
<li class="ss-icon"><a href="http://twitter.com/bcapps">Twitter</a></li>
33+
<li class="ss-icon"><a href="https://github.com/bcapps">githuboctocat</a></li>
34+
<li class="ss-icon"><a href="https://www.facebook.com/bcapps">Facebook</a></li>
35+
<li class="ss-icon"><a href="https://www.last.fm/people/bcapps322">Lastfm</a></li>
36+
<li class="ss-icon"><a href="http://www.kickstarter.com/profile/1281389198">Kickstarter</a></li>
37+
<li class="ss-icon"><a href="www.linkedin.com/pub/brian-capps/42/b58/597">LinkedIn</a></li>
38+
<li class="ss-icon"><a href="mailto:[email protected]">Mail</a></li>
39+
</ul>
40+
</footer>
41+
</body>
4042
</html>

‎webfonts/ss-social-regular.css

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@charset "UTF-8";
2+
3+
/*
4+
* Symbolset
5+
* www.symbolset.com
6+
* Copyright © 2013 Oak Studios LLC
7+
*
8+
* Upload this file to your web server
9+
* and place this within your <head> tags.
10+
* <link href="webfonts/ss-social-regular.css" rel="stylesheet" />
11+
*/
12+
13+
@font-face {
14+
font-family: "SSSocial";
15+
src: url('ss-social-regular.eot');
16+
src: url('ss-social-regular.eot?#iefix') format('embedded-opentype'),
17+
url('ss-social-regular.woff') format('woff'),
18+
url('ss-social-regular.ttf') format('truetype'),
19+
url('ss-social-regular.svg#SSSocialRegular') format('svg');
20+
font-weight: normal;
21+
font-style: normal;
22+
}
23+
24+
/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
25+
html:hover [class^="ss-"]{-ms-zoom: 1;}
26+
27+
.ss-icon, .ss-icon.ss-social-regular,
28+
[class^="ss-"]:before, [class*=" ss-"]:before,
29+
[class^="ss-"].ss-social-regular:before, [class*=" ss-"].ss-social-regular:before,
30+
[class^="ss-"].right:after, [class*=" ss-"].right:after,
31+
[class^="ss-"].ss-social-regular.right:after, [class*=" ss-"].ss-social-regular.right:after {
32+
font-family: "SSSocial";
33+
font-style: normal;
34+
font-weight: normal;
35+
text-decoration: none;
36+
text-rendering: optimizeLegibility;
37+
white-space: nowrap;
38+
/*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
39+
-moz-font-feature-settings: "liga=1";
40+
-moz-font-feature-settings: "liga";
41+
-ms-font-feature-settings: "liga" 1;
42+
-o-font-feature-settings: "liga";
43+
font-feature-settings: "liga";
44+
-webkit-font-smoothing: antialiased;
45+
}
46+
47+
[class^="ss-"].right:before,
48+
[class*=" ss-"].right:before{display:none;content:'';}
49+
50+
.ss-facebook:before,.ss-facebook.right:after{content:''}.ss-twitter:before,.ss-twitter.right:after{content:''}.ss-linkedin:before,.ss-linkedin.right:after{content:''}.ss-googleplus:before,.ss-googleplus.right:after{content:''}.ss-appdotnet:before,.ss-appdotnet.right:after{content:''}.ss-zerply:before,.ss-zerply.right:after{content:''}.ss-reddit:before,.ss-reddit.right:after{content:''}.ss-tumblr:before,.ss-tumblr.right:after{content:''}.ss-wordpress:before,.ss-wordpress.right:after{content:''}.ss-blogger:before,.ss-blogger.right:after{content:''}.ss-posterous:before,.ss-posterous.right:after{content:''}.ss-youtube:before,.ss-youtube.right:after{content:''}.ss-vimeo:before,.ss-vimeo.right:after{content:''}.ss-flickr:before,.ss-flickr.right:after{content:''}.ss-instagram:before,.ss-instagram.right:after{content:''}.ss-fivehundredpx:before,.ss-fivehundredpx.right:after{content:''}.ss-pinterest:before,.ss-pinterest.right:after{content:''}.ss-svpply:before,.ss-svpply.right:after{content:''}.ss-readmill:before,.ss-readmill.right:after{content:''}.ss-dropbox:before,.ss-dropbox.right:after{content:''}.ss-pinboard:before,.ss-pinboard.right:after{content:''}.ss-dribbble:before,.ss-dribbble.right:after{content:''}.ss-behance:before,.ss-behance.right:after{content:''}.ss-github:before,.ss-github.right:after{content:''}.ss-octocat:before,.ss-octocat.right:after{content:''}.ss-stackoverflow:before,.ss-stackoverflow.right:after{content:''}.ss-paypal:before,.ss-paypal.right:after{content:''}.ss-kickstarter:before,.ss-kickstarter.right:after{content:''}.ss-foursquare:before,.ss-foursquare.right:after{content:''}.ss-yelp:before,.ss-yelp.right:after{content:''}.ss-skype:before,.ss-skype.right:after{content:''}.ss-rdio:before,.ss-rdio.right:after{content:''}.ss-spotify:before,.ss-spotify.right:after{content:''}.ss-lastfm:before,.ss-lastfm.right:after{content:''}.ss-soundcloud:before,.ss-soundcloud.right:after{content:''}.ss-mail:before,.ss-mail.right:after{content:'✉'}.ss-like:before,.ss-like.right:after{content:''}.ss-rss:before,.ss-rss.right:after{content:''}.ss-share:before,.ss-share.right:after{content:''}.ss-apple:before,.ss-apple.right:after{content:''}.ss-microsoft:before,.ss-microsoft.right:after{content:''}.ss-windows:before,.ss-windows.right:after{content:''}.ss-android:before,.ss-android.right:after{content:''}.ss-blackberry:before,.ss-blackberry.right:after{content:''}

‎webfonts/ss-social-regular.eot

13.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)