balkian/balkian.github.com
1
0
Fork 0
mirror of https://github.com/balkian/balkian.github.com.git synced 2024-12-25 09:48:12 +00:00
Code Issues Releases Wiki Activity

Fixed avatar

Browse Source
This commit is contained in:
J. Fernando Sánchez 2015-01-11 21:47:17 +01:00
parent 5d51bc77e4
commit 31c7e9ec9a
3 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_layouts/default.html
View File

@ -55,12 +55,12 @@
<div id="contentwrapper"> <div id="contentwrapper">
<div id="sidebar" > <div id="sidebar" >
<div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper"> <div class="flipper sticky">
<div class="front sticky"> <div class="front">
<!-- front content --> <!-- front content -->
<img id="avatar" width=100% src="/img/me.png"> <img id="avatar" width=100% src="/img/me.png">
</div> </div>
<div class="back stickyback"> <div class="back">
<!-- back content --> <!-- back content -->
<img id="picture" width=100% src="/img/me.jpg"> <img id="picture" width=100% src="/img/me.jpg">
</div> </div>

21
css/main-desktop.css
View File

@ -54,6 +54,7 @@
.front, .back { .front, .back {
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -67,14 +68,16 @@
/* front pane, placed above back */ /* front pane, placed above back */
.front { .front {
z-index: 4; z-index: 3;
} }
/* back, initially hidden pane */ /* back, initially hidden pane */
.back { .back {
transform: rotateY(180deg); transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
z-index: 3; -moz-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index: 4;
} }
.sticky:after { .sticky:after {
@ -92,15 +95,15 @@
z-index: 1000; z-index: 1000;
-webkit-transform:rotate(43deg); -webkit-transform:rotate(43deg);
-moz-transform:rotate(43deg); -moz-transform:rotate(43deg);
backface-visibility: visible; backface-visibility: hidden;
-moz-backface-visibility: visible; -moz-backface-visibility: hidden;
-webkit-backface-visibility: visible; -webkit-backface-visibility: hidden;
} }
.sticky:hover:after { /*.flip-container:hover .sticky:after {*/
content: ""; /*content: "";*/
visibility: hidden; /*visibility: hidden;*/
} /*}*/
#container { #container {
min-height: 100%; min-height: 100%;

10
css/main-medium.css
View File

@ -66,14 +66,14 @@
/* front pane, placed above back */ /* front pane, placed above back */
.front { .front {
z-index: 4; z-index: 3;
} }
/* back, initially hidden pane */ /* back, initially hidden pane */
.back { .back {
transform: rotateY(180deg); transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
z-index: 3; z-index: 4;
} }
.sticky:after { .sticky:after {
@ -91,9 +91,9 @@
z-index: 1000; z-index: 1000;
-webkit-transform:rotate(43deg); -webkit-transform:rotate(43deg);
-moz-transform:rotate(43deg); -moz-transform:rotate(43deg);
backface-visibility: visible; backface-visibility: hidden;
-moz-backface-visibility: visible; -moz-backface-visibility: hidden;
-webkit-backface-visibility: visible; -webkit-backface-visibility: hidden;
} }
.sticky:hover:after { .sticky:hover:after {