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

47
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;
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;