From 563f6b73fdf35e859c74380361521a32e5537068 Mon Sep 17 00:00:00 2001 From: Aaron Lindsay Date: Tue, 10 Mar 2015 22:01:20 -0400 Subject: [PATCH] Update css to be more mobile friendly --- aclindsa-wordpress-theme/header.php | 1 + css/layout.css | 47 ++++++++++++++++++++++------- css/look.css | 29 +++++++++++++----- footer.php | 2 +- header_bottom.php | 1 + index.php | 2 +- 6 files changed, 61 insertions(+), 21 deletions(-) diff --git a/aclindsa-wordpress-theme/header.php b/aclindsa-wordpress-theme/header.php index 9a8111f..d368cce 100644 --- a/aclindsa-wordpress-theme/header.php +++ b/aclindsa-wordpress-theme/header.php @@ -10,6 +10,7 @@ include_once("common.php"); + <?php wp_title('«', true, 'right'); ?> Blog - aclindsay.com diff --git a/css/layout.css b/css/layout.css index 94e908f..b0e4c58 100644 --- a/css/layout.css +++ b/css/layout.css @@ -7,22 +7,47 @@ body { padding: 0; } #header-inner, #content, #footer-inner { - width: 80%; - min-width: 45em; max-width: 60em; - margin: 0 auto; + 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; + } +} diff --git a/css/look.css b/css/look.css index be75961..09b9b16 100644 --- a/css/look.css +++ b/css/look.css @@ -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; diff --git a/footer.php b/footer.php index e0f0cf2..11d0a28 100644 --- a/footer.php +++ b/footer.php @@ -1,6 +1,6 @@ diff --git a/header_bottom.php b/header_bottom.php index b4410f8..7d6ba00 100644 --- a/header_bottom.php +++ b/header_bottom.php @@ -2,6 +2,7 @@ + diff --git a/index.php b/index.php index 5ef4566..f425051 100644 --- a/index.php +++ b/index.php @@ -15,7 +15,7 @@ include("header_top.php");

About Me

The ten-word summary: I am a Lutheran Eagle Scout who enjoys tinkering with hacking things.

-