new stylez

jlord · Jun 30, 2014 · 22003bd · 22003bd
1 parent bb264c5
commit 22003bd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,7 +1,5 @@
-/* Stylez
-Franklin Gothic Book*/
-
-body {font-family: Source Sans Pro, Helvetica Neue, sans-serif; margin: 0 auto; background: #efefef; line-height: 1.8em; padding: 12px; box-sizing: border-box; color: #333;}
+/* Stylez */
+body {font-family: Franklin Gothic Book, Source Sans Pro, Helvetica Neue, sans-serif; margin: 0 auto; background: #efefef; line-height: 1.8em; padding: 12px; box-sizing: border-box; color: #333;}
 body, html {height: 100%;}
 
 .wrapper {box-sizing: border-box; background: #fff; box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; height: 100%; overflow: auto; }
@@ -13,7 +11,7 @@ p {font-weight: 200; font-size: 20px;}
 
 .name {font-family: Playfair Display; font-size: 50px; font-weight: 900; padding-bottom: 20px;}
 
-.container {margin: 0 auto; width: 600px; height: 400px; padding: 80px 12px; overflow: auto;}
+.container {margin: 0 auto; width: 600px; height: 400px; padding: 80px 0px; overflow: auto;}
 
 .meta {text-transform: uppercase; font-family: Courier New, Quicksand, "Helvetica Neue", "Arial", sans-serif; font-size: 11px; letter-spacing: .15em;}
 .meta a:hover {border-bottom: 1px solid #CCFF26; color: #333;}

diff --git a/css/style2.css b/css/style2.css
@@ -0,0 +1,27 @@
+/* Stylez
+Franklin Gothic Book*/
+
+body {font-family: Montserrat, Helvetica Neue, sans-serif; margin: 0 auto; background: #FFDED1; line-height: 2em; padding: 12px; box-sizing: border-box; color: #333;}
+body, html {height: 100%;}
+
+.wrapper {box-sizing: border-box; height: 100%; overflow: auto; }
+
+
+a {text-decoration: none; color: #333; border-bottom: 3px solid #0068FF;}
+a:hover {color: #0068FF}
+p {font-weight: 200; font-size: 20px;}
+
+.name {font-family: Montserrat; font-size: 45px; text-transform: uppercase; font-weight: 900; padding: 12px; border: 4px solid #0068FF; color: #0068FF; display: inline-block; position: absolute; margin-bottom: 60px; top: 60px; left: 90px;}
+
+.container {margin: 0 auto; width: 600px; height: 400px; padding: 130px 12px; overflow: auto;}
+article {padding-top: 60px;}
+
+.meta {text-transform: uppercase; font-family: Arial, Courier New, Source Sans Pro, sans-serif; font-size: 10px; letter-spacing: .15em;}
+.meta a:hover {color: #333;}
+
+.inline-list {list-style: none; margin: 0; padding: 0;}
+.inline-list li {display: inline-block;}
+
+footer .inline-list li {margin-right: 40px;}
+footer a {border: none; color: #0068FF;}
+footer {margin: 0 auto; position: absolute; bottom: 50%; right: -263px; padding: 40px 0; width: 600px; -webkit-transform: rotate(-90deg);}
diff --git a/index.html b/index.html
@@ -4,18 +4,21 @@
     <meta charset="utf-8">
     <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> -->
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/style2.css">
     <link rel="icon" href="favicon.png" type="image/x-icon">
     <title>Hello World</title>
   </head>
   <body>
     <div class="wrapper">
     <div class="container">
       <header>
-        <h1 class="name"><em>jlord</em></h1>
+        <h1 class="name">jlord</h1>
+      </header>
+      <article>
         <p>I'm an <a href="http://en.wikipedia.org/wiki/Open-source_software" target="_blank">open source</a> developer and designer living in Oakland, California. Far, far away from my <a href="http://en.wikipedia.org/wiki/Central_Georgia" target="_blank">East Coast US roots</a>. I work at <a href="http://www.github.com/about" target="_blank">GitHub</a>, mentor at programming events (<a href="http://www.nodeschoo.io">NodeSchool.io</a>, <a href="https://github.com/blog/1805-patchwork-night" target="_blank">Patchwork</a>) and do some conferences, too.</p>
         <p> Previously I was an <a href="www.bostonredevelopmentauthority.org" target="_blank">urban designer</a>, but the call of the wild open tech world would win me over.</p>
-      </header>
+      </article>
+
 
     <footer>
       <ul class="meta inline-list">