aclindsa/aclindsay.com
1
0
Fork 0
Code Releases Activity

Update css to be more mobile friendly

Browse Source
This commit is contained in:
Aaron Lindsay
2015-03-10 22:01:20 -04:00
parent 3d6fdd36fe
commit 563f6b73fd
6 changed files with 61 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
aclindsa-wordpress-theme/header.php
View File

@@ -10,6 +10,7 @@ include_once("common.php");
<head profile="http://gmpg.org/xfn/11"> <head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title('&laquo;', true, 'right'); ?> Blog - aclindsay.com</title> <title><?php wp_title('&laquo;', true, 'right'); ?> Blog - aclindsay.com</title>

31
css/layout.css
View File

@@ -7,14 +7,21 @@ body {
padding: 0; padding: 0;
} }
#header-inner, #content, #footer-inner { #header-inner, #content, #footer-inner {
width: 80%;
min-width: 45em;
max-width: 60em; max-width: 60em;
margin: 0 auto; margin: 0 auto;
} }
#main, #sidebar { #main, #sidebar {
position: relative; position: relative;
} }
#footer {
clear: both;
}
@media (min-width: 751px) {
#header-inner, #content, #footer-inner {
width: 80%;
min-width: 45em;
}
#main { #main {
float: left; float: left;
width: 73%; width: 73%;
@@ -23,6 +30,24 @@ body {
float: right; float: right;
width: 23%; width: 23%;
} }
#footer { }
@media (max-width: 750px) {
#header-inner, #content, #footer-inner {
width: 95%;
}
#main {
float: left;
width: 100%;
clear: both; clear: both;
} }
#sidebar {
float: left;
position: relative;
width: 75%;
left: 12.5%;
}
#sidebar.optional {
display: none;
}
}

25
css/look.css
View File

@@ -28,7 +28,6 @@ body {
right: 0em; right: 0em;
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
background: url('../graphics/cornerStripedLeft.png') no-repeat bottom left;
} }
#header-inner #title a { #header-inner #title a {
display: block; display: block;
@@ -36,8 +35,22 @@ body {
padding: 15px 20px 10px 20px; padding: 15px 20px 10px 20px;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
}
/* Hide graphics when page is too narrow to avoid clashing with main header image */
@media (max-width: 500px) {
#header-inner #title {
background-color: #88BBEE;
background-color: rgba(136, 187, 238, 0.8);
}
}
@media (min-width: 501px) {
#header-inner #title {
background: url('../graphics/cornerStripedLeft.png') no-repeat bottom left;
}
#header-inner #title a {
background: url('../graphics/cornerStripedRight.png') no-repeat top right; background: url('../graphics/cornerStripedRight.png') no-repeat top right;
} }
}
#header-inner a #title-inner{ #header-inner a #title-inner{
color: #d6d6c0; color: #d6d6c0;
} }
@@ -86,21 +99,22 @@ div#tabs ul {
padding: 0; padding: 0;
list-style: none; list-style: none;
text-align: left; text-align: left;
background-color: #88BBEE;
background-color: rgba(136, 187, 238, 0.8);
} }
div#tabs ul li { div#tabs ul li {
margin: 0; margin: 10px 0 0 0;
padding: 0; padding: 0;
display:inline; display: inline-block;
} }
div#tabs ul li a { div#tabs ul li a {
position: relative; position: relative;
bottom: 3px; bottom: 3px;
font-weight: bold; font-weight: bold;
color: #357;
margin: 0 0 0 17px; margin: 0 0 0 17px;
padding: 3px; padding: 3px;
text-decoration:none; text-decoration:none;
background-color: #88BBEE; color: #357;
} }
div#tabs ul li:hover a { div#tabs ul li:hover a {
color: #000; color: #000;
@@ -108,7 +122,6 @@ div#tabs ul li:hover a {
div#tabs ul li a.current { div#tabs ul li a.current {
border-top: #036 2px solid; border-top: #036 2px solid;
} }
a { a {
text-decoration: none; text-decoration: none;
color: #2288aa; color: #2288aa;

2
footer.php
View File

@@ -1,6 +1,6 @@
<div id="footer"> <div id="footer">
<div id="footer-inner"> <div id="footer-inner">
&copy; 2009 - 2014 Aaron Lindsay &copy; 2009 - 2015 Aaron Lindsay
</div> </div>
</div> </div>

1
header_bottom.php
View File

@@ -2,6 +2,7 @@
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-US" /> <meta http-equiv="content-language" content="en-US" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="owner" content="Aaron Lindsay" /> <meta name="owner" content="Aaron Lindsay" />
<meta name="author" content="Aaron Lindsay" /> <meta name="author" content="Aaron Lindsay" />
<meta name="copyright" content="Copyright 2009-2013 Aaron Lindsay" /> <meta name="copyright" content="Copyright 2009-2013 Aaron Lindsay" />

2
index.php
View File

@@ -15,7 +15,7 @@ include("header_top.php");
<h3>About Me</h3> <h3>About Me</h3>
<p>The ten-word summary: I am a Lutheran Eagle Scout who enjoys <strike style="text-decoration:line-through;">tinkering with</strike> <a href="http://www.catb.org/jargon/html/H/hacker.html">hacking</a> things.</p> <p>The ten-word summary: I am a Lutheran Eagle Scout who enjoys <strike style="text-decoration:line-through;">tinkering with</strike> <a href="http://www.catb.org/jargon/html/H/hacker.html">hacking</a> things.</p>
</div> </div>
<div id="sidebar"> <div id="sidebar" class="optional">
<center><img src="<?php echo get_base_url(); ?>/graphics/aaron.jpg" alt="Aaron at Angel's Rest near Pearisburg, VA" title="Aaron at Angel's Rest near Pearisburg, VA" style="padding: .5em; width: 90%;" /> <center><img src="<?php echo get_base_url(); ?>/graphics/aaron.jpg" alt="Aaron at Angel's Rest near Pearisburg, VA" title="Aaron at Angel's Rest near Pearisburg, VA" style="padding: .5em; width: 90%;" />
<ul> <ul>
<li><h4 style="margin: 1em 0 .5em 0;">Find me on:</h4></li> <li><h4 style="margin: 1em 0 .5em 0;">Find me on:</h4></li>