Skip to content

Instantly share code, notes, and snippets.

@montogeek
Created December 17, 2015 18:44
Show Gist options
  • Save montogeek/260148c4fa74e8090a33 to your computer and use it in GitHub Desktop.
Save montogeek/260148c4fa74e8090a33 to your computer and use it in GitHub Desktop.
.feature-new-design {
> .container {
background-color: @color-white;
.cover {
.entity .cover;
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
.item-cover {
background-color: #fff;
width: 100%;
height: 100%;
background-size: cover;
}
}
h1 {
font-size: @fsize-35;
font-family: @primary-font;
color: @color-black;
line-height: 0.75;
text-align: center;
text-transform: none;
}
.description {
font-family: @primary-font;
font-size: @fsize-17;
color: @nf-color-white;
}
h3 {
font-family: @primary-font;
font-size: @fsize-25;
line-height: 1.125;
text-align: center;
text-transform: none;
margin-top: 50px;
}
.people {
.integrantes {
list-style-type: none;
padding: 0;
li {
display: inline-block;
&:not(:first-child) {
margin-left: 20px;
}
}
.rounded {
width: 60px;
height: 60px;
border-radius: 50%;
background-position: center;
}
}
}
.tags {
list-style: none;
padding: 0;
margin: 20px 0;
li {
background-color: @nf-color-whiteB;
display: inline-block;
padding: 3px 12px;
border-radius: 5px;
&:not(:first-child) {
margin-left: 12px;
}
a {
text-transform: uppercase;
font-size: @fsize-25;
color: @color-white;
}
}
}
hr {
border: 0;
height: 0;
border-top: 1px solid @nf-color-black;
&.section {
width: 140px;
}
&.subsection {
width: 20px;
}
}
.join {
position: absolute;
top: 30px;
right: 30px;
background-color: @color-green;
font-size: @fsize-17;
color: @color-white;
padding: 6px 16px;
border-radius: 5px;
}
}
}
<div class="feature-new-design">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-md-offset-2 col-md-8 text-center">
<div class="cover">
{{#if cover}}
<div class="item-cover" style="background-image: url({{cover}});"></div>
{{else}}
<i class="item-letter">{{firstLetter title}}</i>
{{/if}}
</div>
<h1>{{title}}</h1>
<hr class="section">
<div class="description">
{{{markdown description}}}
</div>
<div class="people">
<h3>Integrantes</h3>
<hr class="subsection">
<ul class="integrantes">
<li>
<a href="/users/{{leader._id}}">
{{getProfileImageRounded leader}}
</a>
</li>
{{#each contributors}}
<li>
<a href="/users/{{_id}}">
{{getProfileImageRounded .}}
</a>
</li>
{{/each}}
{{#each followers}}
<li>
<a href="/users/{{_id}}">
{{getProfileImageRounded .}}
</a>
</li>
{{/each}}
</ul>
</div>
<h3>Tecnologias</h3>
<hr class="subsection">
<ul class="tags">
{{#each tags}}
{{#if .}}
<li>
<a href="/projects?q={{.}}" data-bypass="true">{{.}}</a>
</li>
{{/if}}
{{/each}}
</ul>
<h3>Redes Sociales</h3>
<hr class="subsection">
</div>
</div>
<a href="" class="join">Ask to join</a>
</div>
</div>
</div>
</div>
<div class="row main-header">
<div class="hidden-xs col-sm-10 col-md-10 col-lg-10 col-sm-offset-1 col-md-offset-1 search-ctn"></div>
<div class="col-lg-2">
<a class="logo" href="{{hackdashURL}}" data-bypass>Hack <span>/</span> Dash</a>
</div>
<div class="col-lg-10">
<nav class="main-nav">
<a href="" class="sign-up pull-right">Sign Up</a>
<ul class="list-inline pull-right">
<li class="active"><a href="">Dashboard</a></li>
<li><a href="">About this hackaton</a></li>
<li><a href="">Login</a></li>
</ul>
</nav>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment