make projects template look good on a phone

dlech · dlech · commit ea97fcf719ae · 2014-08-02T14:07:30.000-05:00
diff --git a/_layouts/project.html b/_layouts/project.html
@@ -12,6 +12,10 @@
             <div class="breadcrumbs">
                 <a href="{{ site.github.url }}/projects">&lt; Back to Projects Gallery</a>
             </div>
+            <div class="project-content-wrapper">
+                {% include youtube-embed.html %}
+                {{ content }}
+            </div>
             <div class="project-sidebar">
                 <h3>
                     Project Info
@@ -40,13 +44,8 @@ <h3>
                     {% include author-card.html %}
                 {% endif %}
             </div>
-            <div class="project-content-wrapper">
-                {% include youtube-embed.html %}
-                {{ content }}
-                <br />
-                <div id="project-credit">
-                    Posted on {{ page.date | date_to_string }}
-                </div>
+            <div id="project-credit" class="clear">
+                Posted on {{ page.date | date_to_string }}
             </div>
         </section>
         {% include footer.html %}
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -627,14 +627,18 @@ strong {
 .project-content-wrapper {
     width: 650px;
     width: calc(100% - 250px);
+    display: inline;
+    float: left;
+    margin-right: 20px;
 }
 
 .project-sidebar {
-    float: right;
-    right: 0;
-    position: absolute;
+    float: left;
+    display: inline;
     width: 180px;
     text-align:center;
+    margin-right: 20px;
+    margin-left: 20px;
 }
 
 .project-sidebar .button a {
@@ -909,6 +913,66 @@ section #title p {
 	margin-bottom: -50px;
 }
 
+.user-card {
+    position: relative;
+    min-height: 40px;
+    background-color: #333333;
+    font-family: "Helvetica", Arial, sans-serif;
+    color: #fff;
+    border-radius: 2px;
+    text-align: center;
+    font-weight: 100;
+    padding: 5px;
+
+    -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
+    -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
+    -o-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
+    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
+}
+
+.user-card .user-card-avatar {
+    position: absolute;
+    float: left;
+    max-height: 100%;
+    width: auto;
+    max-width: 20%;
+    top: 50%;
+
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.user-card .user-card-avatar img {
+    vertical-align: middle;
+    border: 1px solid #aaa;
+    border-radius: 2px;
+}
+
+.user-card .user-card-text {
+    clear: both;
+    margin-left: auto;
+    margin-right: 0;
+    width: 75%;
+    height: 100%;
+    vertical-align: middle;
+}
+
+.user-card .user-card-name {
+    font-size: 1.1em;
+    font-weight: normal;
+    vertical-align: middle;
+}
+
+.user-card .user-card-login {
+    font-size: 0.9em;
+    font-weight: 100;
+    vertical-align: middle;
+}
+
+
 @media print, screen and (max-width: 450px) {
     #logo {
         display: none;
@@ -923,6 +987,18 @@ section #title p {
     clear: both;
 }
 
+@media print, screen and (max-width: 850px) {
+  .project-content-wrapper {
+      float: none;
+  }
+
+  .project-sidebar {
+      float: none;
+      display: table;
+      margin: 0 auto;
+  }
+}
+
 @media print, screen and (max-width: 720px) {
   #footer .credits {
     display: block;
@@ -983,62 +1059,3 @@ section #title p {
     70% { color: rgb(255, 204, 0); }
     100% { color: #e8e8e8 }
 }
-
-.user-card {
-    position: relative;
-    min-height: 40px;
-    background-color: #333333;
-    font-family: "Helvetica", Arial, sans-serif;
-    color: #fff;
-    border-radius: 2px;
-    text-align: center;
-    font-weight: 100;
-    padding: 5px;
-
-    -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
-    -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
-    -o-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
-    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.7);
-}
-
-    .user-card .user-card-avatar {
-        position: absolute;
-        float: left;
-        max-height: 100%;
-        width: auto;
-        max-width: 20%;
-        top: 50%;
-
-        -webkit-transform: translateY(-50%);
-        -ms-transform: translateY(-50%);
-        -o-transform: translateY(-50%);
-        -moz-transform: translateY(-50%);
-        transform: translateY(-50%);
-    }
-
-        .user-card .user-card-avatar img {
-            vertical-align: middle;
-            border: 1px solid #aaa;
-            border-radius: 2px;
-        }
-
-    .user-card .user-card-text {
-        clear: both;
-        margin-left: auto;
-        margin-right: 0;
-        width: 75%;
-        height: 100%;
-        vertical-align: middle;
-    }
-
-    .user-card .user-card-name {
-        font-size: 1.1em;
-        font-weight: normal;
-        vertical-align: middle;
-    }
-
-    .user-card .user-card-login {
-        font-size: 0.9em;
-        font-weight: 100;
-        vertical-align: middle;
-    }
