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
Show Stats 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">
<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>

45
css/layout.css
View File

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

29
css/look.css
View File

@ -28,15 +28,28 @@ body {
right: 0em;
font-weight: bold;
font-size: 1.2em;
background: url('../graphics/cornerStripedLeft.png') no-repeat bottom left;
}
#header-inner #title a{
#header-inner #title a {
display: block;
margin: 0;
padding: 15px 20px 10px 20px;
text-decoration: none;
color: #fff;
background: url('../graphics/cornerStripedRight.png') no-repeat top right;
}
/* 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;
}
}
#header-inner a #title-inner{
color: #d6d6c0;
@ -86,21 +99,22 @@ div#tabs ul {
padding: 0;
list-style: none;
text-align: left;
background-color: #88BBEE;
background-color: rgba(136, 187, 238, 0.8);
}
div#tabs ul li {
margin: 0;
margin: 10px 0 0 0;
padding: 0;
display:inline;
display: inline-block;
}
div#tabs ul li a {
position: relative;
bottom: 3px;
font-weight: bold;
color: #357;
margin: 0 0 0 17px;
padding: 3px;
text-decoration:none;
background-color: #88BBEE;
color: #357;
}
div#tabs ul li:hover a {
color: #000;
@ -108,7 +122,6 @@ div#tabs ul li:hover a {
div#tabs ul li a.current {
border-top: #036 2px solid;
}
a {
text-decoration: none;
color: #2288aa;

2
footer.php
View File

@ -1,6 +1,6 @@
<div id="footer">
<div id="footer-inner">
&copy; 2009 - 2014 Aaron Lindsay
&copy; 2009 - 2015 Aaron Lindsay
</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-language" content="en-US" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="owner" content="Aaron Lindsay" />
<meta name="author" content="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>
<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 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%;" />
<ul>
<li><h4 style="margin: 1em 0 .5em 0;">Find me on:</h4></li>