Add better about page

This commit is contained in:
Christine Dodrill 2015-01-31 22:05:42 -08:00
parent 7ca1ac8498
commit 9851025ff4
3 changed files with 143 additions and 3 deletions

View File

@ -16,6 +16,7 @@ class Layout extends Widget
link rel: "stylesheet", href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
link rel: "stylesheet", href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"
link rel: "stylesheet", href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
link rel: "stylesheet", href: "/static/css/readable.css"
link rel: "stylesheet", href: "/static/css/main.css"

View File

@ -2,3 +2,126 @@ img.textwrap-right {
float: right;
margin: 10px;
}
*{
font-family: 'Open Sans', sans-serif;
}
.well {
margin-top:-20px;
background-color:#007FBD;
border:2px solid #0077B2;
text-align:center;
cursor:pointer;
font-size: 25px;
padding: 15px;
border-radius: 0px !important;
}
.well:hover {
margin-top:-20px;
background-color:#0077B2;
border:2px solid #0077B2;
text-align:center;
cursor:pointer;
font-size: 25px;
padding: 15px;
border-radius: 0px !important;
border-bottom : 2px solid rgba(97, 203, 255, 0.65);
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #fff;
background-color: #F1F1F1;
}
.bg_blur
{
background-image:url('http://data2.whicdn.com/images/139218968/large.jpg');
height: 300px;
background-size: cover;
}
.follow_btn {
text-decoration: none;
position: absolute;
left: 35%;
top: 42.5%;
width: 35%;
height: 15%;
background-color: #007FBE;
padding: 10px;
padding-top: 6px;
color: #fff;
text-align: center;
font-size: 20px;
border: 4px solid #007FBE;
}
.follow_btn:hover {
text-decoration: none;
position: absolute;
left: 35%;
top: 42.5%;
width: 35%;
height: 15%;
background-color: #007FBE;
padding: 10px;
padding-top: 6px;
color: #fff;
text-align: center;
font-size: 20px;
border: 4px solid rgba(255, 255, 255, 0.8);
}
.header{
color : #808080;
margin-left:10%;
margin-top:70px;
}
.picture{
height:150px;
width:150px;
position:absolute;
top: 75px;
left:-75px;
}
.picture_mob{
position: absolute;
width: 35%;
left: 35%;
bottom: 70%;
}
.btn-style{
color: #fff;
background-color: #007FBE;
border-color: #adadad;
width: 33.3%;
}
.btn-style:hover {
color: #333;
background-color: #3D5DE0;
border-color: #adadad;
width: 33.3%;
}
@media (max-width: 767px) {
.header{
text-align : center;
}
.nav{
margin-top : 30px;
}
}

View File

@ -4,7 +4,23 @@ class About extends Widget
content: =>
link rel: "stylesheet", href: "/static/css/about/main.css"
img class: "textwrap-right", src: @user.avatar_url, height: 150, width: 150
div class: "row panel", ->
div class: "col-md-4 bg_blur", ->
a href: "https://github.com/Xe", class: "follow_btn hidden-xs", "Follow"
p ->
text "I am a GitHub power user. As of right now, I have #{@user.public_repos} open source projects tracked on GitHub. I have #{@user.followers} followers and am following #{@user.following} users."
div class: "col-md-8 col-xs-12", ->
img src: @user.avatar_url, class: "img-thumbnail picture hidden-xs"
img src: @user.avatar_url, class: "img-thumbnail picture visible-xs picture_mob"
div class: "header", ->
h1 "Christine Dodrill"
h4 "Rockstar Programmer"
span "I am a GitHub power user. I am constantly learning new languages and tools. I strongly believe in knowing many languages and ways to do things so I can pick the right tool for the job."
div class: "row nav", ->
div class: "col-md-4"
div class: "col-md-8 col-xs-12", style: "margin: 0px;padding: 0px;", ->
div class: "col-md-4 col-xs-4 well", ->
i class: "fa fa-weixin fa-lg", @user.public_repos
i class: "fa fa-heart-o fa-lg", @user.followers
i class: "fa fa-thumbs-o-up fa-lg", @user.following