OCram85
/
beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

fix avatar to work in small screens even when title is long

This commit is contained in:
Dean Attali 2015-03-02 13:48:04 -08:00
parent d239d67fc4
commit 2494bcdc47
1 changed files with 5 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/main.css
View File

@ -119,20 +119,20 @@ img::-moz-selection {
-moz-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
left: 50%; left: 50%;
height: 100%; width: 50px;
bottom: -50%; margin-top: -25px;
} }
.navbar-custom .avatar-container .avatar-img-border { .navbar-custom .avatar-container .avatar-img-border {
width: 100%;
border-radius: 50%; border-radius: 50%;
margin-left: -50%; margin-left: -50%;
display: inline-block; display: inline-block;
box-shadow: 0 0 8px rgba(0, 0, 0, .8); box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
height: 100%;
} }
.navbar-custom .avatar-container .avatar-img { .navbar-custom .avatar-container .avatar-img {
height: 100%; width: 100%;
border-radius: 50%; border-radius: 50%;
display: block; display: block;
} }
@ -148,14 +148,11 @@ img::-moz-selection {
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.navbar-custom .avatar-container { .navbar-custom .avatar-container {
width: 100px; width: 100px;
margin-top: -50px; /* Because of the 20px padding of the navbar, we need +20 to be at the bottom, minus whatever proportion of the image height we want */ margin-top: -50px;
bottom: auto;
height: auto;
} }
.navbar-custom .avatar-container .avatar-img-border { .navbar-custom .avatar-container .avatar-img-border {
width: 100%; width: 100%;
height: auto;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .8); box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
@ -163,7 +160,6 @@ img::-moz-selection {
.navbar-custom .avatar-container .avatar-img { .navbar-custom .avatar-container .avatar-img {
width: 100%; width: 100%;
height: auto;
} }
} }