Merge pull request jglovier#14 from jglovier/design-love

1.0 page design; addresses jglovier#1
sahwar · Feb 5, 2014 · 09e6e8b · 09e6e8b
2 parents 06df350 + f83484e
commit 09e6e8b
Show file tree

Hide file tree

Showing 5 changed files with 531 additions and 4 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,4 +1,5 @@
 <head>
   <meta charset="UTF-8">
   <title>{% if page.title %}{{ page.title }}{% else %}gifs.joelglovier.com{% endif %}</title>
+  <link rel="stylesheet" href="/css/main.css">
 </head>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+{% include head.html %}
+
+<body>
+
+  <header class="page-header">
+    <img src="/aha/aha.gif" alt="" class="banner-img">
+    {{ content }}
+  </header>
+
+  <div class="gif-listing">
+  {% include site-index.html %}
+  </div>
+
+</body>
+
+{% include closing-tags.html %}
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,86 @@
+/* @group main styles -------------------- */
+
+@import url( "normalize.css" );
+
+body{
+  font-family: "Myriad Pro", "Lucida Grande", Arial, sans-serif;
+  font-size:16px;
+  line-height:1.5;
+  background-color: #f8f8f8;
+}
+
+.page-header {
+  width: 300px; height: 100%;
+  background-color: #15171b;
+  position: fixed;
+  left: 0; top: 0; bottom: 0;
+  color: white;
+  text-align: center; }
+
+.page-header .banner-img { width: 100%; }
+
+.page-header a {
+  color: #bdf5da;
+  font-weight: bold; }
+
+.gif-listing {
+  margin-left: 300px;
+  padding: 20px;
+  overflow: hidden; }
+
+/*Style the list of categories*/
+.gif-listing > ul {
+  margin: 0; padding: 0;
+  list-style: none;
+  /*experimental column support*/
+  -moz-column-gap: 20px;
+  -moz-column-fill: auto;
+  -webkit-column-count: 3;
+  -webkit-column-gap: 20px;
+  -webkit-column-fill: auto;
+  column-count: 3;
+  column-gap: 20px;
+  column-fill: auto; }
+
+/*Style individual category cards*/
+.gif-listing > ul > li {
+  background-color: rgba(189,245,218,.2);
+  background-color: white;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin: 0 0 20px 0;
+  text-transform: capitalize;
+  font-size: 24px;
+  /* experimental column support */
+  -moz-column-break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  column-break-inside: avoid; }
+
+/*Style the sub-list of gifs*/
+.gif-listing > ul > li > ul {
+  margin: 4px 0 0;
+  padding: 8px 0 0;
+  list-style: none;
+  border-top: 1px solid #dae3e3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*Style individual gif listing items*/
+.gif-listing > ul > li > ul > li {
+  text-overflow: ellipsis;
+  width: 100%;
+  overflow: hidden;
+  font-size: 16px;
+  text-transform: none; }
+
+/*Style individual gif links*/
+.gif-listing > ul > li > ul > li a {
+  color: #5d9379;
+  text-decoration: none; }
+
+.gif-listing > ul > li > ul > li a:hover {
+  color: #2a2f37;
+  text-decoration: underline; }
+
+/* @end main styles */