A little challenge between @willemsol and me to create a profile popup display thingy.
A Pen by Bart Veneman on CodePen.
<a id="open-popup" class="button" href=""> | |
View my profile | |
</a> | |
<div class="popup" id="popup"> | |
<div class="popup__inner"> | |
<header class="popup__header"> | |
<kbd>esc</kbd><a href="#" class="popup__close"></a> | |
</header> | |
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="124" height="124" class="profile__image" /><!-- | |
--><section class="profile__details"> | |
<ul class="profile__stats"> | |
<li> | |
<h3 class="profile_stat__heading">Followers</h3> | |
<div class="profile_stat__number">17</div> | |
</li><!-- | |
--><li> | |
<h3 class="profile_stat__heading">Following</h3> | |
<div class="profile_stat__number">8</div> | |
</li><!-- | |
--><li> | |
<h3 class="profile_stat__heading">CodePens</h3> | |
<div class="profile_stat__number">21</div> | |
</li> | |
</ul> | |
<h2 class="profile__name">Bart Veneman</h2> | |
<ul class="social"> | |
<li><a href="#"><i class="fa fa-github"></i></a></li><!-- | |
--><li><a href="#"><i class="fa fa-instagram"></i></a></li><!-- | |
--><li><a href="#"><i class="fa fa-twitter"></i></a></li><!-- | |
--><li><a href="#"><i class="fa fa-bitbucket"></i></a></li><!-- | |
--><li class="location"><i class="fa fa-map-marker"></i><span>Ommen, NL</span></li> | |
</ul> | |
</section> | |
</div><!-- /popup__inner --> | |
</div><!-- /popup --> |
A little challenge between @willemsol and me to create a profile popup display thingy.
A Pen by Bart Veneman on CodePen.
$(document).ready(function () { | |
var popup = $("#popup"), | |
doc = $(document), | |
popClass = "popped", | |
showPopup = function (event) { | |
popup.fadeIn(200); | |
event.preventDefault(); | |
}, | |
hidePopup = function (event) { | |
popup.hide(); | |
event.preventDefault(); | |
}; | |
doc.on("click", "#open-popup", showPopup); | |
doc.on("click", ".popup__close", hidePopup); | |
doc.keypress(function (event) { | |
if (event.keyCode === 27) { // esc key | |
hidePopup(); | |
} | |
}); | |
}); |
@import "compass"; | |
%ui-list { | |
padding-left: 0; | |
list-style: none inside; | |
> li { | |
display: inline-block; | |
vertical-align: top; | |
} | |
} | |
html, | |
body { | |
height: 100%; | |
} | |
body { | |
position: relative; | |
font: 300 1em/1.5 "Open Sans Condensed", sans-serif; | |
color: #333; | |
} | |
.button { | |
display: inline-block; | |
padding-left: 2em; | |
background-color: deepskyblue; | |
color: #f2f2f2; | |
margin: 2em; | |
font-weight: 700; | |
text-decoration: none; | |
position: relative; | |
&:before { // triangle | |
content: ""; | |
display: block; | |
position: absolute; | |
top: 1em; | |
right: 3em; | |
height: 0; | |
width: 0; | |
border-top: 0.75em solid transparent; | |
border-bottom: 0.75em solid transparent; | |
border-left: 0.5em solid deepskyblue; | |
} | |
&:after { // profile image | |
content: ""; | |
width: 3.5em; | |
height: 3.5em; | |
margin-left: 1em; | |
display: inline-block; | |
vertical-align: middle; | |
background: url(http://www.fillmurray.com/124/124) no-repeat center; | |
background-size: cover; | |
} | |
} | |
//////////// | |
// POPUP // | |
/////////// | |
.popup { // gray area | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
background-color: rgba(50, 50, 50, 0.5); | |
display: none; | |
} | |
.popup__inner { | |
overflow-y: scroll; | |
max-height: 100%; | |
background-color: #f2f2f2; | |
width: 90%; | |
max-width: 30em; | |
margin: 3em auto 0; | |
padding-bottom: 1.5em; | |
border-radius: 2px; | |
box-shadow: 0 0 1em rgba(0, 0, 0, 0.6); | |
} | |
.popup__header { | |
background-color: lightgray; | |
padding: 0.25em 0.75em; | |
margin-bottom: 2em; | |
text-align: right; | |
} | |
.popup__close { | |
display: inline-block; | |
width: 0.875em; | |
height: 0.875em; | |
background-color: tomato; | |
border-radius: 50%; | |
&:hover { | |
background-color: darken(tomato, 8%); | |
} | |
} | |
kbd { | |
display: inline-block; | |
font-family: inherit; | |
font-size: 0.875em; | |
vertical-align: 0.125em; | |
margin-right: 0.5em; | |
color: slategray; | |
} | |
.profile__image { | |
width: 8em; | |
margin: 0 auto 2em; | |
border: 0.125em solid black; | |
background-color: #000; | |
display: block; | |
@media screen and (min-width: 30em) { | |
display: inline-block; | |
margin: 0 3em 0 2em; | |
} | |
} | |
.profile__details { | |
margin: 0 2em 0 0; | |
text-align: center; | |
@media screen and (min-width: 30em) { | |
display: inline-block; | |
vertical-align: top; | |
text-align: left; | |
} | |
} | |
.profile__stats { | |
@extend %ui-list; | |
margin: 0 0 1rem 0; | |
> li { | |
text-align: center; | |
border-right: 1px solid lightgray; | |
padding: 0 0.5em; | |
line-height: 1.1; | |
&:first-child { | |
padding-left: 0; | |
} | |
&:last-child { | |
border-right: none; | |
padding-right: 0; | |
} | |
} | |
} | |
.profile_stat__heading { | |
font-weight: 300; | |
text-transform: capitalize; | |
font-size: 0.875em; | |
margin: 0 0 0.25em 0; | |
color: slategray; | |
} | |
.profile_stat__number { | |
font-size: 1.75em; | |
color: slategray; | |
} | |
.profile__name { | |
font-weight: 700; | |
margin: 0 0 1rem 0; | |
} | |
.social { | |
@extend %ui-list; | |
margin-bottom: 0; | |
margin-left: 0; | |
> li:not(:last-child) { | |
margin-right: 0.5em; | |
} | |
.location { | |
margin-left: 1em; | |
&, .fa { color: darkgreen; } | |
span { | |
font-size: 0.875em; | |
display: inline-block; | |
vertical-align: middle; | |
margin-left: 0.25em; | |
} | |
} | |
a { | |
display: block; | |
line-height: 1.1; | |
} | |
.fa { | |
font-size: 1.25em; | |
color: slategray; | |
} | |
.fa-github:hover { color: #171515; } | |
.fa-instagram:hover { color: #3f729b; } | |
.fa-twitter:hover { color: #00acee; } | |
.fa-bitbucket:hover { color: #205081; } | |
} |