Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Rearrange photo display so it folds better when responsding

  • Loading branch information...
commit a4611ed60efd0d56bdf0cbb9bc6780d167f218ab 1 parent 3a146e7
Jeff Johnson authored
Showing with 39 additions and 36 deletions.
  1. +5 −4 css/main.css
  2. +3 −2 css/main.scss
  3. +31 −30 index.html
View
9 css/main.css
@@ -161,7 +161,7 @@ a, a:visited, a:hover {
.photo-display {
float: right;
- margin-top: -5px;
+ margin-top: -35px;
margin-right: 30px;
margin-left: 5px; }
.photo-display img {
@@ -172,9 +172,9 @@ a, a:visited, a:hover {
min-height: 290px; }
.subsection .heading {
border-bottom: solid 1px;
- width: 850px;
height: 63px;
- margin-bottom: 10px; }
+ margin-bottom: 10px;
+ margin-right: 15px; }
.subsection .header {
display: inline-block; }
.subsection .aside {
@@ -316,7 +316,8 @@ a, a:visited, a:hover {
@media only screen and (max-width: 720px) {
/* Style adjustments for viewports that meet the condition */
.photo-display {
- float: none; }
+ float: none;
+ margin-top: 0; }
.subsection .copy {
width: 100%; }
View
5 css/main.scss
@@ -183,7 +183,7 @@ a, a:visited, a:hover {
.photo-display {
float: right;
- margin-top: -5px;
+ margin-top: -35px;
margin-right: 30px;
margin-left: 5px;
img {
@@ -195,9 +195,9 @@ a, a:visited, a:hover {
min-height: 290px;
.heading {
border-bottom: solid 1px;
- width: 850px;
height: 63px;
margin-bottom: 10px;
+ margin-right: 15px;
}
.header {
display: inline-block;
@@ -371,6 +371,7 @@ a, a:visited, a:hover {
/* Style adjustments for viewports that meet the condition */
.photo-display {
float: none;
+ margin-top: 0;
}
.subsection {
.copy {
View
61 index.html
@@ -63,10 +63,7 @@ <h1 class="soft-shadow" itemprop="name">jeff johnson</h1>
<h2>projects</h2>
- <article class="subsection" itemscope itemtype="http://schema.org/SoftwareApplication">
- <div class="photo-display">
- <img class="subtle-outline" src="img/cbug.png">
- </div>
+ <article class="subsection clearfix" itemscope itemtype="http://schema.org/SoftwareApplication">
<div class="heading">
<h3 class="header">
<a href="http://classbug.com/" target="_blank" itemprop="name">ClassBug.com</a>
@@ -75,14 +72,15 @@ <h3 class="header">
ruby on rails, postgresql, coffeescript
</span>
</div>
+ <div class="photo-display">
+ <img class="subtle-outline" src="img/cbug.png">
+ </div>
+
<span class="copy" itemprop="description">
Chicago-based startup developing SaaS scheduling, CRM, and studio management software for leisure class providers. Developed Ruby on Rails application with the help of countless gems, test driven development, and my CoFounder/Designer.
</span>
</article>
- <article class="subsection" itemscope itemtype="http://schema.org/SoftwareApplication">
- <div class="photo-display">
- <img class="subtle-outline" src="img/cfill.png">
- </div>
+ <article class="subsection clearfix" itemscope itemtype="http://schema.org/SoftwareApplication">
<div class="heading">
<h3 class="header">
<a href="http://classfill.com/" target="_blank" itemprop="name">ClassFill.com</a>
@@ -90,15 +88,15 @@ <h3 class="header">
<span class="aside">
php, mysql, codeigniter
</span>
- </div>
+ </div>
+ <div class="photo-display">
+ <img class="subtle-outline" src="img/cfill.png">
+ </div>
<span class="copy" itemprop="description">
Changing the way soccer moms book yoga, one class at a time. ClassFill provides a name-your-price online marketplace for leisure classes in Chicago. Developed in PHP using CodeIgniter as a framework with some fun libraries such as jsrender.
</span>
</article>
- <article class="subsection" itemscope itemtype="http://schema.org/SoftwareApplication">
- <div class="photo-display">
- <img class="subtle-outline" src="img/ipro.png">
- </div>
+ <article class="subsection clearfix" itemscope itemtype="http://schema.org/SoftwareApplication">
<div class="heading">
<h3 class="header" itemprop="name">
Playing games with Epidemiology
@@ -106,16 +104,16 @@ <h3 class="header" itemprop="name">
<span class="aside">
ruby on rails, ios, hadoop
</span>
- </div>
+ </div>
+ <div class="photo-display">
+ <img class="subtle-outline" src="img/ipro.png">
+ </div>
<span class="copy" itemprop="description">
Modeling the spread of diseases through real contact graphs generated by usage of a iOS based mobile phone game. Used developing technologies and ideas in epidemiology to add fine-grain detail to a high level field. Developed Ruby on Rails web interface and API for mobile phone and hadoop components thanks to a wonderful team and strong support from our <a href="http://cs.iit.edu/~lee/" target="_blank">advisor</a>. Awarded Best in Track Fall 2012.
</span>
</article>
-
- <article class="subsection" data-img-hover="img/esw1.png" itemscope itemtype="http://schema.org/SoftwareApplication">
- <div class="photo-display">
- <img class="subtle-outline" src="img/esw1.png">
- </div>
+
+ <article class="subsection clearfix" data-img-hover="img/esw1.png" itemscope itemtype="http://schema.org/SoftwareApplication">
<div class="heading">
<h3 class="header">
<a href="http://eswiit.org/" target="_blank" itemprop="name">ESW@iit </a>
@@ -123,15 +121,15 @@ <h3 class="header">
<span class="aside">
locomotive cms, ruby on rails
</span>
- </div>
+ </div>
+ <div class="photo-display">
+ <img class="subtle-outline" src="img/esw1.png">
+ </div>
<span class="copy" itemprop="description">
Designed and implemented website for local chapter of national sustainability organization. Leveraged LocomotiveCMS to ensure maintainability of website down the road. Graphic work thanks to Christina Noonan.
</span>
</article>
- <article class="subsection" data-img-hover="img/esw2.png">
- <div class="photo-display">
- <img class="subtle-outline" src="img/esw2.png">
- </div>
+ <article class="subsection clearfix" data-img-hover="img/esw2.png">
<div class="heading">
<h3 class="header">
ESW@iit - Sustainability Week 2011
@@ -139,15 +137,15 @@ <h3 class="header">
<span class="aside">
html5, jquery
</span>
- </div>
+ </div>
+ <div class="photo-display">
+ <img class="subtle-outline" src="img/esw2.png">
+ </div>
<span class="copy">
Homepage and homebase for week long celebration of sustainability. First serious design project.
</span>
</article>
- <article class="subsection" data-img-hover="img/jquery-color-field.png" itemscope itemtype="http://schema.org/SoftwareApplication">
- <div class="photo-display">
- <img class="subtle-outline" src="img/jquery-color-field.png">
- </div>
+ <article class="subsection clearfix" data-img-hover="img/jquery-color-field.png" itemscope itemtype="http://schema.org/SoftwareApplication">
<div class="heading">
<h3 class="header">
<a href="https://github.com/johnsonj/jquery-color-field" target="_blank" itemprop="name">jQuery Color Field</a>
@@ -155,7 +153,10 @@ <h3 class="header">
<span class="aside">
coffeescript, opensource
</span>
- </div>
+ </div>
+ <div class="photo-display">
+ <img class="subtle-outline" src="img/jquery-color-field.png">
+ </div>
<span class="copy" itemprop="description">
It's nice to color code stuff, but it should only add to the users experience. This plugin is an attempt at a sublte method for closing the gap between the entity the color is related to and the selection of that color. Work in progress.
</span>
Please sign in to comment.
Something went wrong with that request. Please try again.