Designed the buttons in the Home screen.

nagarjun · Sep 7, 2013 · 93101f9 · 93101f9
1 parent 3afcc7a
commit 93101f9
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 4 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -33,6 +33,7 @@
                 <div id="buttons">
                     <a href="index.html"><span class="icon">p</span><span>Posts</span></a>
                     <a href="about.html"><span class="icon">c</span><span>About</span></a>
+                    <a href="press.html"><span class="icon">v</span><span>Press</span></a>
                     <span id="search">
                         <span class="icon">s</span><input type="text" placeholder="Search">
                     </span>

diff --git a/css/main.css b/css/main.css
diff --git a/fonts/icons.eot b/fonts/icons.eot
diff --git a/fonts/icons.svg b/fonts/icons.svg
diff --git a/fonts/icons.ttf b/fonts/icons.ttf
diff --git a/fonts/icons.woff b/fonts/icons.woff
diff --git a/index.html b/index.html
@@ -3,8 +3,21 @@
 title: Nagarjun Palavalli > Entrepreneur • Web Developer and Designer
 ---
 
-<div id="home">
-  <h1>Blog Posts</h1>
+<div class="left">
+	<h2>Who</h2>
+	<p>Founder &amp; CEO at <a href="http://www.eduora.com/">Eduora</a>, front-end web developer &amp; designer. Interested in space, 
+		aviation, wearables &amp; technology.</p>
+	<p class="icon">
+		<a id="twitter" href="http://twitter.com/palavalli">t</a>
+		<a id="linkedin" href="http://in.linkedin.com/in/palavalli">l</a>
+		<a id="github" href="http://github.com/nagarjun">h</a>
+		<a id="facebook" href="http://www.facebook.com/nagarjun">f</a>
+		<a id="googleplus" href="https://plus.google.com/u/0/111499386112733402151/">g</a>
+	</p>
+	<p id="power">Powered by <a href="http://jekyllrb.com/">Jekyll</a> &amp; <a href="https://github.com/">GitHub</a>.</p>
+</div>
+<div class="right">
+  <h2>Blog Posts</h2>
   <ul class="posts">
     {% for post in site.posts %}
       <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>

diff --git a/less/main.less b/less/main.less
@@ -11,6 +11,7 @@
 @import "header.less";
 @import "article.less";
 
+// Custom Decoration
 @font-face {
 	font-family: "icons";
 	src:url("../fonts/icons.eot");
@@ -20,4 +21,82 @@
 		url("../fonts/icons.woff") format("woff");
 	font-weight: normal;
 	font-style: normal;
+}
+
+.container > .left {
+	width: 288px;
+	height: auto;
+}
+
+.container > .right {
+	padding-left: 44px;
+	width: 836px;
+	height: auto;
+}
+
+.container p {
+	line-height: 1.5;
+}
+
+.container > .left .icon {
+	font-size: 36px;
+	line-height: 1;
+}
+
+.container > .left .icon a {
+	text-decoration: none;
+}
+
+#twitter:link, #twitter:visited {
+	color: #73CBEF;
+}
+
+#twitter:hover {
+	color: darken(#73CBEF, 18%);
+}
+
+#linkedin:link, #linkedin:visited {
+	color: #1287CD;
+}
+
+#linkedin:hover {
+	color: darken(#1287CD, 18%);
+}
+
+#github:link, #github:visited {
+	color: #171515;
+}
+
+#github:hover {
+	color: darken(#171515, 18%);
+}
+
+#facebook:link, #facebook:visited {
+	color: #4E75BA;
+}
+
+#facebook:hover {
+	color: darken(#4E75BA, 18%);
+}
+
+#googleplus:link, #googleplus:visited {
+	color: #DF4A32;
+}
+
+#googleplus:hover {
+	color: darken(#DF4A32, 18%);
+}
+
+#power {
+	font-size: 9px;
+	color: @gray-light;
+}
+
+#power a:link, #power a:visited {
+	text-decoration: none;
+	color: @gray-dark;
+}
+
+#power a:hover {
+	color: @gray;
 }