app/assets/stylesheets/home.css.less
@hdoPrimaryColor: #019ea2;
@hdoSecondaryColor: #e03d25;
.home-party-list {
padding-top: 20px;
}
.home-party-logo {
max-width: 14%;
float: left;
position: relative;
}
.home-party-logo {
&:hover {
}
}
.home-photo {
border-radius: 4px;
}
.person {
position: relative;
padding-left: 70px;
margin-bottom: 60px;
&.board {
padding-left: 135px;
padding-right: 30px;
min-height: 128px;
.photo {
width: 128px;
height: 128px;
}
.name {
margin-top: 0;
font-size: 1.255em;
a {
color: inherit;
}
}
}
.photo {
border-radius: 50%;
background: #fff 50% 0% no-repeat;
margin-bottom: 20px;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0,0,0,0.1), 0 0 0 9px #fff, 0 0 0 10px rgba(0,0,0,0.033);
width: 64px;
height: 64px;
position: absolute;
top: 0;
left: -10px;
}
.name {
font-size: 1.25em;
line-height: 1em;
margin-bottom: 0;
}
.profession {
}
.bio {
font-size: 0.9em;
margin-top: 0.25em;
line-height: 1.6em;
word-break:break-word;
}
}
.row-fluid.promoboxes {
> div {
padding: 5px 15px 5px 86px;
margin-bottom: 10px;
min-height: 190px;
position: relative;
background: #eee;
background: -webkit-linear-gradient(top, #eee 50%, #fff);
background: -moz-linear-gradient(top, #eee 50%, #fff);
background: -ms-linear-gradient(top, #eee 50%, #fff);
background: linear-gradient(top, #eee 50%, #fff);
&.promoted {
@dimmedPrimary: lighten(desaturate(@hdoPrimaryColor,50),60);
background: @dimmedPrimary;
background: -webkit-linear-gradient(top, @dimmedPrimary 50%, #fff);
background: -moz-linear-gradient(top, @dimmedPrimary 50%, #fff);
background: -ms-linear-gradient(top, @dimmedPrimary 50%, #fff);
background: linear-gradient(top, @dimmedPrimary 50%, #fff);
}
.promoimage {
position: absolute;
left: 10px;
top: 10px;
width: 64px;
height: auto;
}
}
}
.home-leaderboard {
h3 {
margin-bottom: 0;
}
h4 {
font-weight: normal;
}
.party-list {
.party {
background-color: #fff;
border-radius: 2px;
display: block;
position: relative;
margin-bottom: 20px;
padding: 10px 100px 10px 95px;
line-height: 50px;
height: 50px;
color: inherit;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-shadow: 0 -4px 20px rgba(0,0,0,0.03) inset,
0 0 0 1px rgba(0,0,0,0.1) inset,
0 1px 4px rgba(0,0,0,0.075);
&:hover {
text-decoration: none;
background-color: #fafafa;
}
&:active {
background-color: #eee;
}
.logo {
position: absolute;
border-radius: 2px 0 0 2px;
width: 80px;
left: 0;
top: 0;
bottom: 0;
font-size: 1.75em;
color: #666;
text-align: center;
line-height: 40px;
box-shadow: -1px 0 rgba(0,0,0,0.05) inset,
-1px 0 rgba(255,255,255,0.75);
img {
position: absolute;
top: 50%;
left: 15px;
height: 48px;
width: 48px;
margin-top: -24px;
}
}
.name {
font-size: 1.2em;
}
.counters {
background: rgba(0,0,0,0.05);
position: absolute;
border-radius: 0 2px 2px 0;
width: 80px;
right: 0;
top: 0;
bottom: 0;
font-size: 1.5em;
color: #666;
text-align: right;
line-height: 36px;
box-shadow: 1px 0 3px rgba(0,0,0,0.1) inset,
2px 0 2px rgba(255,255,255,0.75);
.kept, .broken {
position: absolute;
height: 50%;
left: 0;
right: 0;
padding-right: 10px;
&:after {
display: inline-block;
vertical-align: 3px;
font-size: 0.55em;
font-weight: normal;
line-height: 1em;
color: rgba(0,0,0,0.4);
margin-left: 5px;
}
}
.kept {
top: 0;
box-shadow: 0 1px rgba(0,0,0,0.1);
&:after {
content: "holdt";
}
}
.broken {
bottom: 0 ;
&:after {
content: "brutt";
}
}
}
}
}
}
.bubble-mixin (){
0% {
top: 100%;
opacity: 0;
}
1% {
top: 100%;
opacity: 1;
}
100% {
top: 20%;
opacity: 0;
}
}
.blog {
h2 {
margin-bottom: 0;
}
a {
color: inherit;
text-decoration: none;
display: block;
padding: 10px;
margin-bottom: 0.5rem;
border-radius: 3px;
border: 1px solid #f6f6f6;
&:hover {
text-decoration: none;
background-color: #f6f6f6;
border-color: #eee;
.read-more {
text-decoration: underline;
}
}
&:active {
background-color: #eee;
}
.byline {
color: #666;
}
.content {
}
}
}
.background-image {
height: 200px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.social-media {
.social-network {
border: 1px solid #eee;
background-color: #fafafa;
border-radius: 3px;
text-align: center;
padding: 15px 15px 10px 15px;
}
}
.twitter-share-button[style] { vertical-align: bottom !important; }
.separator-image {
background-size: cover; height: 30rem; margin: 2rem 0;
}