<!-- Discovered by SiamakMokhtari Twitter: @sia_mac. -->
%header{:class => 'masthead'}

%section.iam
 %figure.face-people 
  %img.gravatar{:src =>'http://gravatar.com/avatar/a4673ef019dea5e2bbd56691abd7f354?s=256'}
  
 %h2 Hi, I'm <a href="https://siamak.me" title="Siamak's Website">Siamak  Mokhtari</a>.
 %p Minimalist • Constant dripping hollows out a stone. #NeverGiveUp.

%footer{:class => 'bye'}
 There is a Trick<sup>*</sup>, You can do anything with it.<br/> * Replacement Background-attachment with Position Fixed :)

@import "compass/css3";

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;500&display=swap');

$bg:#fff;
$color:#777;
$color_link:#3C87C5;
$color_hover:#222;
$height:30rem;

/* default setup */
html, body {height: 100%;padding: 0;}
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
p{margin:0;}
img{max-width:100%;}
::selection{color:$color_link}
::-webkit-selection{color: $color_link;}
::-moz-selection{color: $color_link;}
html {font-size: 100%;}
body{
  background:$bg;
  color:$color;
  font-family: 'Figtree', sans-serif;
  line-height: 1.618;
  text-align:center;
  font-weight: 500;
  word-spacing: -0.07em;
  letter-spacing: -.01em;
}
a{
  color: $color_link;
  text-decoration: none;
  border-bottom:.05em dotted $color_link;
&:hover{border-bottom-color:$color_hover;color:$color_hover}
}

/* important part */
header.masthead{
  min-height: $height;
  overflow: hidden;
  background-color:$bg;
  position:relative;
&:after{
  content:'';
  background-image: url(https://source.unsplash.com/random/1600x900?city,nature) /*you should change it :)*/;
  position: fixed;
  background-size: 100% /* or cover */;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  width: 100%;
  height: $height;
  z-index:0;
}
}
/* These are just for design happy... */
h2 {
	margin-bottom: 0.25em;
}
section.iam{
  position:relative;
  z-index:1;
  background-color:$bg;
  padding:5rem 1.5rem;
  box-shadow:0 -1px 0 rgba(0, 0, 0, 0.02), 0 -1px 6px rgba(0, 0, 0, 0.02);
figure.face-people{
  width: 7em;
  height: 7rem;
  position: absolute;
  margin:-3.5em 0;
  border-radius:50%;
  box-shadow:0 0 0 .3em $bg,0 -6px 2px rgba(0, 0, 0, 0.05);
  background-color:$bg;
  overflow:hidden;
  z-index: 999;
  left:50%;
  top:0;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
}
footer.bye{
  padding-bottom:2rem;
  padding-left:1rem;
  padding-right:1rem;
  color: #999;
  font-weight: 300;
  background-color:$bg;
  position:relative;
  font-size:.8rem;
}