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;
transition: opacity 0.5s ease-in-out;
left: 50%;
height: 100%;
bottom: -50%;
width: 50px;
margin-top: -25px;
}
.navbar-custom .avatar-container .avatar-img-border {
width: 100%;
border-radius: 50%;
margin-left: -50%;
display: inline-block;
box-shadow: 0 0 8px 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);
height: 100%;
}
.navbar-custom .avatar-container .avatar-img {
height: 100%;
width: 100%;
border-radius: 50%;
display: block;
}
@ -148,14 +148,11 @@ img::-moz-selection {
@media only screen and (min-width: 768px) {
.navbar-custom .avatar-container {
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 */
bottom: auto;
height: auto;
margin-top: -50px;
}
.navbar-custom .avatar-container .avatar-img-border {
width: 100%;
height: auto;
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);
@ -163,7 +160,6 @@ img::-moz-selection {
.navbar-custom .avatar-container .avatar-img {
width: 100%;
height: auto;
}
}