Finishes responsify-ing-ly the portfolio site

jacobemerick · Mar 25, 2016 · 9ed059d · 9ed059d
1 parent 2a8a5aa
commit 9ed059d
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 17 deletions.
diff --git a/public/css/portfolio.css b/public/css/portfolio.css
@@ -296,6 +296,21 @@ body {
 .portfolio-container #jake-picture {
   margin: 0 0 5px 10px;}
 
+.portfolio-container .resume .contact-card {
+  width: 225px;}
+.portfolio-container .resume .main-pane {
+  margin-left: 240px;}
+.portfolio-container .resume .contact-card ul.contact-methods {
+  padding-left: 20px;}
+
+.portfolio-container .contact {
+  width: 55%;}
+.portfolio-container .contact textarea {
+  max-width: 400px;
+  width: 100%;}
+.portfolio-container .sidebar {
+  margin-left: 60%;}
+
 #footer {
   margin: 20px auto 150px;
   padding-left: 0;
@@ -313,10 +328,38 @@ body {
   padding-top: 40px;}
 .portfolio-container .window h1 {
   font-size: 2.5em;}
+.portfolio-container .window h2 {
+  font-size: 1.2em;}
 .portfolio-container #jake-picture {
   height: auto;
   max-width: 150px;}
 
+.portfolio-container .resume .contact-card {
+  border: 1px solid #f0f0f0;
+  float: none;
+  margin: 0 0 10px;
+  width: auto;}
+.portfolio-container .resume .contact-card img {
+  float: left;
+  width: 200px;}
+.portfolio-container .resume .contact-card .contact-content {
+  margin-left: 210px;}
+.portfolio-container .resume .main-pane {
+  margin-left: 0;}
+
+.portfolio-container .contact {
+  float: none;
+  width: auto;}
+.portfolio-container .contact input[type=submit] {
+  font-size: 1.2em;
+  padding: 8px 40px;}
+
+.portfolio-container .sidebar {
+  margin-left: 0;
+  padding-top: 20px;}
+.portfolio-container .sidebar h3 {
+  font-size: 1.2em;}
+
 .bottom {
   margin-top: 50px;}
 .bottom #site-links {
@@ -351,4 +394,12 @@ body {
   max-width: 100px;}
 .portfolio-container .introduction {
   margin-right: 0;}
+
+.portfolio-container .resume .main-pane h1 {
+  font-size: 1.6em;}
+.portfolio-container .resume .contact-card img {
+  float: left;
+  width: 140px;}
+.portfolio-container .resume .contact-card .contact-content {
+  margin-left: 150px;}
 }
diff --git a/view/portfolio/body/Resume.tpl.php b/view/portfolio/body/Resume.tpl.php
@@ -1,23 +1,25 @@
 <div class="resume h-resume">
   <div class="contact-card h-card p-contact" id="jacob-contact">
     <img class="u-photo" src="/image/jacob-emerick.jpg" alt="<?= $data['basics']['name'] ?>" />
-    <h2 class="p-name"><?= $data['basics']['name'] ?></h2>
-    <h3 class="p-job-title"><?= $data['basics']['label'] ?></h3>
-    <hr />
-    <ul class="contact-methods">
-      <li>
-        <span class="p-locality"><?= $data['basics']['location']['city'] ?></span>,
-        <span class="p-region"><?= $data['basics']['location']['region'] ?></span>
-      </li>
-      <li><a class="u-email" href="mailto:<?= $data['basics']['email'] ?>"><?= $data['basics']['email'] ?></a></li>
-      <li><a class="u-url" href="<?= $data['basics']['website'] ?>"><?= $data['basics']['website'] ?></a></li>
-    </ul>
-    <hr />
-      <ul class="profiles">
-      <?php foreach ($data['basics']['profiles'] as $profile) : ?>
-      <li><a href="<?= $profile['url'] ?>"><?= $profile['network'] ?></a></li>
-      <?php endforeach ?>
-    </ul>
+    <div class="contact-content">
+      <h2 class="p-name"><?= $data['basics']['name'] ?></h2>
+      <h3 class="p-job-title"><?= $data['basics']['label'] ?></h3>
+      <hr />
+      <ul class="contact-methods">
+        <li>
+          <span class="p-locality"><?= $data['basics']['location']['city'] ?></span>,
+          <span class="p-region"><?= $data['basics']['location']['region'] ?></span>
+        </li>
+        <li><a class="u-email" href="mailto:<?= $data['basics']['email'] ?>"><?= $data['basics']['email'] ?></a></li>
+        <li><a class="u-url" href="<?= $data['basics']['website'] ?>"><?= $data['basics']['website'] ?></a></li>
+      </ul>
+      <hr />
+        <ul class="profiles">
+        <?php foreach ($data['basics']['profiles'] as $profile) : ?>
+        <li><a href="<?= $profile['url'] ?>"><?= $profile['network'] ?></a></li>
+        <?php endforeach ?>
+      </ul>
+    </div>
   </div>
 
   <div class="main-pane">