removed floats to stop cause breakdowns on the layout when resized, a…

…dded display inline block to work properly as responsive. added text overflow at the github project description.
zenorocha · Mar 13, 2013 · 10b8b59 · 10b8b59
1 parent f719d76
commit 10b8b59
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1,15 +1,20 @@
 /* Github Box */
 
+.github-box-wrap {
+  display: inline-block;
+  width: 46%;
+  margin-right: 0.6em;
+  margin-left: 0.6em;
+  margin-bottom: 2em;
+}
+
 .github-box {
   font-family: "Helvetica Neue", Arial, sans-serif;
   background: #fafafa;
   border: 1px solid #ddd;
   color: #666;
   border-radius: 5px;
-  float: left;
-  margin-right: 1.2em;
-  margin-bottom: 2em;
-  width: 46%;
+  width: 100%;
 }
 
 .github-box a {
@@ -92,6 +97,10 @@
 
 .github-box .github-box-content p {
   margin: 0;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .github-box .github-box-content .repo-link {
@@ -153,4 +162,13 @@
   border-bottom-color: #9fc7db;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
-}
+}
+
+/* breakpoint content-driven */
+@media all and (max-width: 678px) { 
+  .github-box-wrap {
+    display: block;
+    width: inherit;
+    margin-right: 0;
+  }
+}
diff --git a/demo/css/style.css b/demo/css/style.css
@@ -23,18 +23,18 @@ h1 {
 }
 
 .title {
-  width: 700px;
+  width: 90%;
   margin: 0 auto;
-  padding-right: 35px;
 }
 
 .title p {
   text-align: center;
+  margin-bottom: 40px;
 }
 
 .credits {
   margin: 0 auto;
-  width: 700px;
+  width: 90%;
   text-align: center;
   clear: both;
 }
@@ -56,9 +56,8 @@ h1 {
 }
 
 .projects{
-  width: 700px;
+  width: 90%;
   margin: 0 auto;
-  padding: 30px;
 }
 
 /* Font-face */

diff --git a/demo/index.html b/demo/index.html
@@ -24,10 +24,10 @@ <h1>jQuery Github</h1>
   </div>
 
   <div class="projects">
-    <div data-repo="jquery-boilerplate/boilerplate"></div>
-    <div data-repo="zenorocha/diveintohtml5"></div>
-    <div data-repo="zenorocha/jquery-github"></div>
-    <div data-repo="zenorocha/hub.me"></div>
+    <div data-repo="jquery-boilerplate/boilerplate" class="github-box-wrap"></div>
+    <div data-repo="zenorocha/diveintohtml5" class="github-box-wrap"></div>
+    <div data-repo="zenorocha/jquery-github" class="github-box-wrap"></div>
+    <div data-repo="zenorocha/hub.me" class="github-box-wrap"></div>
   </div>
 
   <p class="credits">Made with love by <a href="http://zenorocha.com">Zeno Rocha</a>.</p>