Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

merged from dev branch

  • Loading branch information...
commit c28136a8639d5e18482740b7136bd23f8933fb8f 1 parent a76d162
@jeffreylouden authored
Showing with 223 additions and 125 deletions.
  1. +128 −61 _assets/css/style.css
  2. +84 −36 _assets/css/style.less
  3. +11 −28 index.html
View
189 _assets/css/style.css
@@ -121,7 +121,7 @@ table {
border-spacing: 0;
}
.wrap {
- max-width: 940px;
+ max-width: 200px;
padding: 0 10px;
margin: 0 auto;
clear: both;
@@ -130,11 +130,11 @@ body {
font-family: "proxima-nova-1", "proxima-nova-2", helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
- color: #231f20;
- background: url('../img/bg.jpg');
+ color: #0D3630;
+ background: #fff;
}
body a {
- color: #EF3E42;
+ color: #36E3CC;
text-decoration: none;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
@@ -144,7 +144,7 @@ body a:hover {
color: #bbb;
}
body section {
- margin-top: 0px;
+ margin-top: 50px;
-webkit-animation: 2s ease;
-moz-animation: 2s ease;
-ms-animation: 2s ease;
@@ -155,21 +155,48 @@ body section {
transition: all .3s linear;
}
body section header {
+ font-family: "kulturista-web-1", "kulturista-web-2", helvetica, sans-serif;
padding: 10px 0;
+ text-align: center;
+ width: 200px;
+ margin: 20px auto 0;
+}
+body section header i {
+ display: block;
+ font-size: 16px;
+ line-height: 32px;
+ font-style: normal;
+ color: #36E3CC;
+ position: relative;
+}
+body section header i:before {
+ content: '';
+ width: 60px;
+ height: 25px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ display: block;
+ border-top: 1px solid #999;
+}
+body section header i:after {
+ content: '';
+ width: 60px;
+ height: 25px;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ display: block;
+ border-top: 1px solid #999;
}
body section header h1 {
text-transform: uppercase;
- letter-spacing: 2px;
- font-weight: 600;
- text-shadow: 2px 2px 1px white;
-}
-body section header h1 i {
- font-style: normal;
- color: #EF3E42;
+ letter-spacing: 1px;
+ font-size: 20px;
+ margin: 10px 0;
}
body section nav {
- padding: 20px 0;
- background-color: rgba(250, 250, 250, 0.33);
+ padding: 0 0 20px;
}
body section nav ul {
overflow: hidden;
@@ -188,15 +215,36 @@ body section nav ul li {
transition: all .5s linear;
}
body section nav ul li header {
- margin: 0 0 10px;
+ text-align: center;
+ margin: 0 auto 10px;
padding: 0;
border: none;
}
body section nav ul li header h2 {
+ position: relative;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
- text-shadow: 2px 2px 1px white;
+}
+body section nav ul li header h2:before {
+ content: '';
+ width: 100px;
+ height: 25px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ display: block;
+ border-top: 1px solid #ccc;
+}
+body section nav ul li header h2:after {
+ content: '';
+ width: 100px;
+ height: 25px;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ display: block;
+ border-top: 1px solid #ccc;
}
body section nav ul li p {
margin-bottom: 20px;
@@ -215,18 +263,17 @@ body section nav ul li aside ul li:first-child.tweet_first p.tweet_time {
margin: 5px 0 0;
font-size: 85%;
}
-body section nav ul li ol li {
- float: none;
- display: inline;
- margin: 0 5px 0 0;
+body section ol li {
+ margin: 5px 0;
+ text-align: center;
}
-body section nav ul li ol li a {
+body section ol li a {
color: #777;
}
body section footer {
color: #666;
font-size: 85%;
- text-shadow: 1px 1px 1px white;
+ text-align: center;
}
body section footer p {
margin: 10px 0;
@@ -234,45 +281,65 @@ body section footer p {
body section footer p a {
color: #999;
}
-@media all and (min-width: 768px) {
- body section {
- margin-top: 100px;
- -webkit-animation: 2s ease;
- -moz-animation: 2s ease;
- -ms-animation: 2s ease;
- -o-animation: 2s ease;
- animation: 2s ease;
- -webkit-transition: all .3s linear;
- -moz-transition: all .3s linear;
- transition: all .3s linear;
- }
- body section nav ul li {
- float: left;
- width: 22.8723404%;
- margin: 0 01.0638298%;
- -webkit-animation: 2s ease;
- -moz-animation: 2s ease;
- -ms-animation: 2s ease;
- -o-animation: 2s ease;
- animation: 2s ease;
- -webkit-transition: all .5s linear;
- -moz-transition: all .5s linear;
- transition: all .5s linear;
- }
- body section nav ul li aside ul li:first-child.tweet_first {
- width: 100%;
- }
- body section nav ul li ol li {
- display: block;
- }
- body section nav ul li:first-child {
- width: 45.7446809%;
- margin: 0 01.0638298% 0 0;
- }
- body section nav ul li:last-child {
- margin: 0 0 0 01.0638298%;
- }
-}
+/* @media all and (min-width:768px) {
+
+ body {
+ section {
+ margin-top: 50px;
+ -webkit-animation: 2s ease;
+ -moz-animation: 2s ease;
+ -ms-animation: 2s ease;
+ -o-animation: 2s ease;
+ animation: 2s ease;
+ -webkit-transition: all .3s linear;
+ -moz-transition: all .3s linear;
+ transition: all .3s linear;
+ nav {
+ ul {
+ li {
+ float: left;
+ width: 22.8723404%;
+ margin: 0 01.0638298%;
+ -webkit-animation: 2s ease;
+ -moz-animation: 2s ease;
+ -ms-animation: 2s ease;
+ -o-animation: 2s ease;
+ animation: 2s ease;
+ -webkit-transition: all .5s linear;
+ -moz-transition: all .5s linear;
+ transition: all .5s linear;
+
+ aside {
+ ul {
+ li:first-child {
+ &.tweet_first {
+ width:100%;
+ }
+ }
+ }
+ }
+
+ ol {
+ li {
+ display: block;
+ }
+ }
+ }
+
+ li:first-child {
+ width: 45.7446809%;
+ margin: 0 01.0638298% 0 0;
+ }
+
+ li:last-child {
+ margin: 0 0 0 01.0638298%;
+ }
+ }
+ }
+ }
+ }
+
+} */
.oldie .wrap {
width: 940px;
}
View
120 _assets/css/style.less
@@ -1,7 +1,7 @@
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}
.wrap {
- max-width:940px;
+ max-width:200px;
padding: 0 10px;
margin: 0 auto;
clear: both;
@@ -11,11 +11,11 @@ body {
font-family: "proxima-nova-1","proxima-nova-2", helvetica, sans-serif;
font-size:14px;
line-height:24px;
- color:#231f20;
- background: url('../img/bg.jpg');
-
+ color:#0D3630;
+ background: #fff;
+
a {
- color: #EF3E42;
+ color: #36E3CC;
text-decoration:none;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
@@ -27,7 +27,7 @@ body {
}
section {
- margin-top: 0px;
+ margin-top: 50px;
-webkit-animation: 2s ease;
-moz-animation: 2s ease;
-ms-animation: 2s ease;
@@ -38,23 +38,52 @@ body {
transition: all .3s linear;
header {
+ font-family: "kulturista-web-1","kulturista-web-2", helvetica, sans-serif;
padding: 10px 0;
+ text-align:center;
+ width:200px;
+ margin:20px auto 0;
+ i {
+ display:block;
+ font-size: 16px;
+ line-height:32px;
+ font-style:normal;
+ color: #36E3CC;
+ position: relative;
+
+ &:before {
+ content: '';
+ width: 60px;
+ height:25px;
+ position:absolute;
+ top:50%;
+ left:0;
+ display:block;
+ border-top:1px solid #999;
+ }
+ &:after {
+ content: '';
+ width: 60px;
+ height:25px;
+ position:absolute;
+ top:50%;
+ right:0;
+ display:block;
+ border-top:1px solid #999;
+ }
+ }
+
h1 {
text-transform: uppercase;
- letter-spacing: 2px;
- font-weight: 600;
- text-shadow: 2px 2px 1px white;
-
- i {
- font-style:normal;
- color: #EF3E42;
- }
+ letter-spacing: 1px;
+ font-size:20px;
+ margin: 10px 0;
}
- }
+ }
+
nav {
- padding: 20px 0;
- background-color: rgba(250, 250, 250, .33);
+ padding: 0 0 20px;
ul {
overflow: hidden;
@@ -73,15 +102,37 @@ body {
transition: all .5s linear;
header {
- margin: 0 0 10px;
+ text-align:center;
+ margin: 0 auto 10px;
padding: 0;
border:none;
h2 {
+ position:relative;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
- text-shadow: 2px 2px 1px white;
+ &:before {
+ content: '';
+ width: 100px;
+ height:25px;
+ position:absolute;
+ top:50%;
+ left:0;
+ display:block;
+ border-top:1px solid #ccc;
+ }
+ &:after {
+ content: '';
+ width: 100px;
+ height:25px;
+ position:absolute;
+ top:50%;
+ right:0;
+ display:block;
+ border-top:1px solid #ccc;
+ }
+
}
}
@@ -115,27 +166,24 @@ body {
}
}
}
-
- ol {
- li {
- float:none;
- display: inline;
- margin:0 5px 0 0;
-
- a {
- color:#777;
- }
- }
}
}
}
- }
+
+ ol {
+ li {
+ margin:5px 0;
+ text-align:center;
+ a {
+ color:#777;
+ }
+ }
+ }
footer {
color:#666;
font-size: 85%;
- text-shadow: 1px 1px 1px white;
-
+ text-align: center;
p {
margin: 10px 0;
@@ -148,11 +196,11 @@ body {
}
}
-@media all and (min-width:768px) {
+/* @media all and (min-width:768px) {
body {
section {
- margin-top: 100px;
+ margin-top: 50px;
-webkit-animation: 2s ease;
-moz-animation: 2s ease;
-ms-animation: 2s ease;
@@ -206,7 +254,7 @@ body {
}
}
-}
+} */
.oldie {
.wrap {
View
39 index.html
@@ -16,40 +16,23 @@
<script src="http://assets.jefflouden.com/js/modernizr-2.5.2.min.js"></script>
<script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-21427100-1']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s)})();</script>
- <link rel="stylesheet" href="http://assets.jefflouden.com/css/style.css">
+ <link rel="stylesheet" href="http://assets.jefflouden.com/css/dev/style.css">
</head>
<body>
<section role="main" id="main">
<header>
- <h1 class="wrap">Jeffrey Louden / <i>2012</i></h1>
+ <i>2012</i>
+ <h1>Jeffrey Louden</h1>
+ <p>Lead Developer <a href="http://www.barackobama.com" title="BarackObama.com">BarackObama.com</a></p>
</header>
- <nav>
- <ul class="wrap">
- <li>
- <header>
- <h2>About</h2>
- </header>
- <p>I am humbly serving as Lead Developer of <a href="http://www.barackobama.com" title="BarackObama.com">BarackObama.com</a> for Obama for America in Chicago, IL. I work with some of the most amazing people in the world.</p>
- <p>I laugh a lot and drink an excessive amount of coffee (and bourbon).</p>
- </li>
- <li>
- <header>
- <h2>Twitter</h2>
- </header>
- <aside id="tweet"></aside>
- </li>
- <li>
- <header>
- <h2>Elsewhere</h2>
- </header>
- <ol>
- <li><a href="https://github.com/jeffreylouden" title="Github">Github</a></li>
- <li><a href="https://facebook.com/jeffreyslouden" title="Facebook">Facebook</a></li>
- <li><a href="http://www.rdio.com/#/people/heph502/" title="Rdio">Rdio</a></li>
- </ol>
- </li>
- </ul>
+ <nav>
+ <ol class="wrap">
+ <li><a href="https://github.com/jeffreylouden" title="Github">Github</a></li>
+ <li><a href="http://twitter.com/jeffreylouden" title="Twitter">Twitter</a></li>
+ <li><a href="https://facebook.com/jeffreyslouden" title="Facebook">Facebook</a></li>
+ <li><a href="http://www.rdio.com/#/people/heph502/" title="Rdio">Rdio</a></li>
+ </ol>
</nav>
<footer class="wrap">
<p>Powered by <a href="https://github.com/" title="Github">Github</a> and <a href="https://github.com/mojombo/jekyll" title="Jekyll on Github">Jekyll</a>.</p>
Please sign in to comment.
Something went wrong with that request. Please try again.