restyle done for better display on phones

couple of issues remain: 1) menu at top seems to be small? 2) get rid of slides and replace with simple images on the page
leejo · Feb 22, 2015 · 75e5440 · 75e5440
1 parent 37311cf
commit 75e5440
Show file tree

Hide file tree

Showing 36 changed files with 112 additions and 113 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ Gemfile
 Gemfile.lock
 _site
 .DS_Store
+vim.*
diff --git a/_includes/header.html b/_includes/header.html
@@ -3,5 +3,7 @@
 	<link href="{{ site.url }}/css/main.css" rel="stylesheet" />
 	<link href="{{ site.url }}/css/slides.css" rel="stylesheet" />
 	<link href="{{ site.url }}/css/slides_wide.css" rel="stylesheet" />
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
+	<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
 	<title>{{ page.title }}</title>
 </head>
diff --git a/_includes/main_menu.html b/_includes/main_menu.html
@@ -1,44 +1,9 @@
-<div class="main_menu" id="main_menu">
-	<div class="sub_menu" id="projects">
-		Projects:
-		<div class="item_menu">
-			<a href="{{ site.url }}/projects/dents_du_midi/">Dents du Midi (2014)</a><br />
-			<a href="{{ site.url }}/projects/the_green_the_blue_the_grey/">The Green The Blue The Grey (2013)</a><br />
-			<a href="{{ site.url }}/projects/skateboarding/">Skateboarding (2004-2012)</a><br />
-		</div>
-	</div>
-	<div class="sub_menu" id="blog">
-		Blog:
-		<div class="item_menu">
-			{% assign counter = 1 %}
-			{% for post in site.posts limit:10 %}
-				<div class="menu_entry_{{ counter }}">
-					<a href="{{ post.url }}">{{ post.title }}</a><br />
-				</div>
-			{% assign counter = counter | plus:1 %}
-			{% endfor %}
-			<a href="{{ site.url }}/blog/">Archive ...</a>
-		</div>
-	</div>
-	<div class="sub_menu" id="tags">
-		<a href="{{ site.url }}/tags/">Tags</a>
-	</div>
-	<div class="sub_menu" id="about">
-		<a href="{{ site.url }}/about/">About</a>
-	</div>
-	<div class="sub_menu" id="home">
-		<a href="{{ site.url }}/">Home</a>
-	</div>
-	<div class="sub_menu" id="badges">
-		<br />
-		<a href="{{ site.url }}/feed.xml"><img src="{{ site.url }}/images/rss_32x32.png" alt="RSS Feed" width="16" height="16" /></a>
-		<a href="https://github.com/leejo"><img src="{{ site.url }}/images/github_32x32.png" alt="GitHub" width="16" height="16" /></a>
-		<a href="http://instagram.com/leejebay?ref=badge"><img src="{{ site.url }}/images/instagram_32x32.png" alt="Instagram" width="16" height="16" /></a>
-		<a href="https://metacpan.org/author/LEEJO"><img src="{{ site.url }}/images/metacpan_32x32.png" alt="metacpan" width="16" height="16" /></a>
-		<br />
-		<a href="https://twitter.com/lee_a_j"><img src="{{ site.url }}/images/trr_32x32.png" alt="Twitter" width="16" height="16" /></a>
-		<a href="http://ch.linkedin.com/pub/lee-johnson/73/765/446/"><img src="{{ site.url }}/images/linkedin_32x32.png" alt="LinkedIn" width="16" height="16" /></a>
-		<a href="https://www.facebook.com/leejebay"><img src="{{ site.url }}/images/fbook_32x32.png" alt="Facebook" width="16" height="16" /></a>
-		<a href="https://www.youtube.com/channel/UC4wnZT7ucLzv2ri65QXMGjg/videos"><img src="{{ site.url }}/images/youtube_32x32.png" alt="YouTube" width="16" height="16" /></a>
-	</div>
+<div class="main_menu">
+	<center>
+		<a href="{{ site.url }}/projects/">Projects</a> |
+		<a href="{{ site.url }}/blog/">Blog</a> | 
+		<a href="{{ site.url }}/tags/">Tags</a> | 
+		<a href="{{ site.url }}/about/">About</a> | 
+		<a href="{{ site.url }}/">Home</a> 
+	</center>
 </div>
diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -5,9 +5,10 @@
 		{% include main_menu.html %}
 		<div class="content">
 			<div class="content_title">
-				{{ page.title }}
+				<center>{{ page.title }}</center>
 			</div>
 			<div class="content_date">
+				<center>
 				{{ page.date | date: "%B %d, %Y" }} (
 				{% for post in site.posts %}
 					{% if post.url == page.url %}
@@ -30,6 +31,7 @@
 					Next
 				{% endif %}
 			)
+				</center>
 			</div>
 			{{ content }}
 			<div class="content_tags">

diff --git a/about/index.html b/about/index.html
@@ -2,17 +2,17 @@
 title: About
 layout: main_content
 ---
-<strong>About Me</strong>
+<div class="content_title"><center>About Me</center></div>
 <p>
-	I would call myself a "perl developer" as this has been my primary role for over a decade.
-
-	I would not really call myself a photographer because i do not have a body of work.
-	I am currently working on a few short term projects and a couple of longer ones that may change this.
-	The intention of this website is primarily for the photography projects.
+	I would call myself a "perl developer" as this has been my primary role for over a decade. I am the maintainer / author of several perl modules on <a href="https://metacpan.org/author/LEEJO">CPAN</a> and a sporadic attendee / speaker at various perl conferences.
+</p>
+<p>
+	I have been a contributing photographer to several print and online magazines in the past and am now working on a few long term photographic projects.
 </p>
 
 <p>
-	The secondary intention of this website is as a sporadic blogging platform.
+	The primary intention of this website is primarily for the photography projects.
+	The secondary intention of this website is as an occasional blogging platform.
 	There are no comments enabled on the blog entries, if you want to get in touch do so using the links below.
 </p>
 
@@ -24,6 +24,7 @@
 
 <p>
 	<a href="https://github.com/leejo">Github</a><br />
+	<a href="https://metacpan.org/author/LEEJO">CPAN</a><br />
 	<a href="http://ch.linkedin.com/pub/lee-johnson/73/765/446/">LinkedIn</a><br />
 	<a href="https://twitter.com/lee_a_j">Twitter</a><br />
 	<a href="https://instagram.com/leejebay">Instagram</a><br />

diff --git a/blog/index.html b/blog/index.html
@@ -2,10 +2,11 @@
 title: Blog Archive
 layout: main_content
 ---
-<strong>Blog Archive</strong><br />
+<div class="content_title"><center>Blog Archive</center></div>
 <br />
 {% for post in site.posts %}
-	{{ post.date | date: "%Y/%m/%d" }} - <a href="{{ post.url }}">{{ post.title }}</a>
+	<a href="{{ post.url }}">{{ post.title }}</a>
+	<div class="content_date">{{ post.date | date: "%Y/%m/%d" }}</div>
 	<div class="content_tags">
 		{% for tag in post.tags %}
 			<a href="/tags/{{ tag }}">{{ tag }}</a>{% if forloop.last %}{% else %}, {% endif %}

diff --git a/css/main.css b/css/main.css
@@ -8,7 +8,7 @@ p {
 
 .content img {
 	display: block;
-	margin: 0 auto;
+	margin: 0px auto;
 }
 
 .crops {
@@ -22,64 +22,62 @@ p {
 
 pre {
 	color: #666;
-	font-size: 80%;
+	font-size: 60%;
 	overflow: auto;
-	width: 600px;
+	margin: 0px auto;
 }
 
 .main_menu {
-	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
-	margin-left: 0px;
-	float: left;
-	padding: 5px;
-	width: 300px;
-	position: fixed;
-}
-.sub_menu {
-	display: block;
-	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
-	font-size: 10pt;
-	padding: 5px;
+	margin: 0px auto;
+	padding: 20px 0px;
+	font-family: "open sans", sans-serif;
+	font-size: 12pt;
+	text-decoration: none;
 }
-.sub_menu a {
+
+.main_menu a {
 	color: black;
 	text-decoration: none;
 }
-.sub_menu a:hover {
+
+.main_menu a:hover {
 	text-decoration: underline;
 }
 .item_menu {
-	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
+	font-family: "open sans", sans-serif;
 	color: black;
-	font-size: 8pt;
-	padding: 5px;
 }
 .content {
-	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
-	font-size: 10pt;
-	width: 600px;
-    margin-left: 300px;
-    padding: 10px;
+	max-width: 646px;
+	margin: 0px auto;
+	font-family: "open sans", sans-serif;
+	font-size: 14pt;
+	word-wrap: break-word;
 }
 .content_title {
 	font-weight: bold;
+	font-size: 16pt;
+}
+.footnotes {
+	max-width: 500px;
+	font-size: 10pt;
+	word-wrap: break-word;
 }
 .content_date {
-	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
+	font-family: "open sans", sans-serif;
 	color: gray;
 	font-size: 8pt;
 }
 .content_tags {
-	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
+	font-family: "open sans", sans-serif;
 	color: gray;
 	font-size: 8pt;
 }
 .nav_text {
-	font-family: 'Lucida Grande',Verdana,Arial,Sans-Serif;
+	font-family: "open sans", sans-serif;
 	color: gray;
 	font-size: 8pt;
     text-align: center;
-	padding-top: 10px;
 }
 
 .nav_text label {

diff --git a/index.html b/index.html
@@ -2,11 +2,9 @@
 title: Lee A Johnson
 layout: main_content
 ---
-<strong>{{ site.description }}</strong><br/>
-<br/>
-Latest Blog Posts (<a href="{{ site.url }}/blog/">Archive</a>):<br />
+<div class="content_title"><center>Latest Posts</center></div>
+{% for post in site.posts limit:5 %}
 <br />
-{% for post in site.posts limit:3 %}
 	<strong>{{ post.title }}</strong><br />
 	<div class="content_date">
 		{{ post.date | date: "%B %d, %Y" }}
@@ -15,3 +13,4 @@
 	<a href="{{ post.url }}">Read More...</a><br />
 	<br />
 {% endfor %}
+<a href="{{ site.url }}/blog/">Blog Archive</a>
diff --git a/projects/dents_du_midi/index.html b/projects/dents_du_midi/index.html
@@ -2,7 +2,8 @@
 title: Dents du Midi
 layout: main_content
 ---
-<strong>Dents du Midi</strong> (2014)<br />
+<div class="content_title"><center>Dents du Midi</center></div>
+<div class="content_date"><center>2014</center></div>
 
 <p>
 Three random images everytime you refresh the page, or click <a href="https://vimeo.com/114580270">here</a> for the full video. These images were shot between January and December 2014. Click <a href="/2014/12/15/dents_du_midi/">here</a> for more information.

diff --git a/projects/index.html b/projects/index.html
@@ -0,0 +1,27 @@
+---
+title: Photo Projects
+layout: main_content
+---
+<div class="content_title"><center>Photo Projects</center></div>
+
+<p>
+	<center>
+		<a href="{{ site.url }}/projects/dents_du_midi/">Dents du Midi</a>
+		<div class="content_date"><center>2014</center></div>
+		Random study of the Val-d’Illiez's most recognisable peaks
+	</center>
+</p>
+<p>
+	<center>
+		<a href="{{ site.url }}/projects/the_green_the_blue_the_grey/">The Green The Blue The Grey</a>
+		<div class="content_date"><center>2013</center></div>
+		A three week road trip through the Pacific North West of America
+	</center>
+</p>
+<p>
+	<center>
+		<a href="{{ site.url }}/projects/skateboarding/">Skateboarding</a>
+		<div class="content_date"><center>2004-2012</center></div>
+		Various wheely planking adventures
+	</center>
+</p>
diff --git a/projects/skateboarding/index.html b/projects/skateboarding/index.html
@@ -3,7 +3,8 @@
 layout: main_content
 images: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]
 ---
-<strong>Skateboarding</strong> (2004-2012)<br />
+<div class="content_title"><center>Skateboarding</center></div>
+<div class="content_date"><center>2004-2012</center></div>
 <p>For a long time i shot skateboarding pretty much exclusively. I had some photos published in Sidewalk and Document magazine as well as some photos used for online skate zines. Here are a few of my favourite shots from that time period.</p>
 
 {% include slides.html %}
diff --git a/projects/the_green_the_blue_the_grey/index.html b/projects/the_green_the_blue_the_grey/index.html
@@ -3,7 +3,8 @@
 layout: main_content
 images: [1,2,3,4,5,6]
 ---
-<strong>The Green The Blue The Grey</strong> (2013)<br />
+<div class="content_title"><center>The Green The Blue The Grey</center></div>
+<div class="content_date"><center>2013</center></div>
 <p>A project shot whilst on a three week road trip through the Pacific North West of America. This is my first self-published photobook and, with the exception of the three images here, print exclusive. Please see below for more information and ordering instructions</p>
 
 {% include slides.html %}

diff --git a/tags/3d_secure/index.html b/tags/3d_secure/index.html
@@ -2,7 +2,7 @@
 title: Tags - 3d_secure
 layout: main_content
 ---
-<strong>Tags - 3d_secure</strong><br />
+<div class="content_title"><center>Tag - 3d_secure</center></div>
 		<ul>
 			<li><a href="/2013/11/09/current_frustrations_with_lloyds/">2013/11/09 - Current Frustrations With Lloyds TSB</a></li>
 		</ul>
diff --git a/tags/banking/index.html b/tags/banking/index.html
@@ -2,7 +2,7 @@
 title: Tags - banking
 layout: main_content
 ---
-<strong>Tags - banking</strong><br />
+<div class="content_title"><center>Tag - banking</center></div>
 		<ul>
 			<li><a href="/2013/11/09/current_frustrations_with_lloyds/">2013/11/09 - Current Frustrations With Lloyds TSB</a></li>
 		</ul>
diff --git a/tags/bug_or_feature/index.html b/tags/bug_or_feature/index.html
@@ -2,7 +2,7 @@
 title: Tags - bug_or_feature
 layout: main_content
 ---
-<strong>Tags - bug_or_feature</strong><br />
+<div class="content_title"><center>Tag - bug_or_feature</center></div>
 		<ul>
 			<li><a href="/2013/11/27/false_positives/">2013/11/27 - False Positives With YouTube Search</a></li>
 			<li><a href="/2013/11/09/current_frustrations_with_lloyds/">2013/11/09 - Current Frustrations With Lloyds TSB</a></li>

diff --git a/tags/driving/index.html b/tags/driving/index.html
@@ -2,7 +2,7 @@
 title: Tags - driving
 layout: main_content
 ---
-<strong>Tags - driving</strong><br />
+<div class="content_title"><center>Tag - driving</center></div>
 		<ul>
 			<li><a href="/2014/05/29/permis_de_conduire/">2014/05/29 - Permis De Conduire</a></li>
 		</ul>
diff --git a/tags/f1/index.html b/tags/f1/index.html
@@ -2,7 +2,7 @@
 title: Tags - f1
 layout: main_content
 ---
-<strong>Tags - f1</strong><br />
+<div class="content_title"><center>Tag - f1</center></div>
 		<ul>
 			<li><a href="/2014/06/24/observations_from_austria/">2014/06/24 - Observations From Austria</a></li>
 		</ul>
diff --git a/tags/french/index.html b/tags/french/index.html
@@ -2,7 +2,7 @@
 title: Tags - french
 layout: main_content
 ---
-<strong>Tags - french</strong><br />
+<div class="content_title"><center>Tag - french</center></div>
 		<ul>
 			<li><a href="/2013/11/01/three_months_in_suisse/">2013/11/01 - Three Months In Switzerland</a></li>
 		</ul>
diff --git a/tags/git/index.html b/tags/git/index.html
@@ -2,7 +2,7 @@
 title: Tags - git
 layout: main_content
 ---
-<strong>Tags - git</strong><br />
+<div class="content_title"><center>Tag - git</center></div>
 		<ul>
 			<li><a href="/2013/11/03/please_use_verbose_commits/">2013/11/03 - Please Use Verbose Commit Messages</a></li>
 		</ul>
diff --git a/tags/green_blue_grey/index.html b/tags/green_blue_grey/index.html
@@ -2,7 +2,7 @@
 title: Tags - green_blue_grey
 layout: main_content
 ---
-<strong>Tags - green_blue_grey</strong><br />
+<div class="content_title"><center>Tag - green_blue_grey</center></div>
 		<ul>
 			<li><a href="/2013/11/28/green_blue_grey_available/">2013/11/28 - Green Blue Grey Available For Order</a></li>
 		</ul>
diff --git a/tags/index.html b/tags/index.html
@@ -2,7 +2,7 @@
 title: Tags
 layout: main_content
 ---
-<strong>Tags</strong><br />
+<div class="content_title"><center>Tags</center></div>
 	<p>3d_secure
 		<ul>
 			<li><a href="/2013/11/09/current_frustrations_with_lloyds/">2013/11/09 - Current Frustrations With Lloyds TSB</a></li>

diff --git a/tags/interview/index.html b/tags/interview/index.html
@@ -2,7 +2,7 @@
 title: Tags - interview
 layout: main_content
 ---
-<strong>Tags - interview</strong><br />
+<div class="content_title"><center>Tag - interview</center></div>
 		<ul>
 			<li><a href="/2014/01/25/on_technical_interviewing/">2014/01/25 - On Perl Technical Interviewing</a></li>
 		</ul>