Skip to content

Instantly share code, notes, and snippets.

@adutko
Created April 6, 2015 23:02
Show Gist options
  • Save adutko/38a03bf41b45c26c32c3 to your computer and use it in GitHub Desktop.
Save adutko/38a03bf41b45c26c32c3 to your computer and use it in GitHub Desktop.
Sass lint error
// Styles that affect all .grid-blocks
.grid-block {
height: 0;
padding-bottom: 50%;
position: relative;
overflow: hidden;
.fill-space {
@include fill-space;
}
.content-block {
@include fill-space; // If a url is provided, fill space with a.content-block
}
.block-content { // Inner wrapper with padding applied
@include fill-space;
padding: $grid-block-padding;
@include cinema-up {
padding: $grid-block-padding;
}
@include tablet {
padding: $grid-block-padding-tablet;
}
@include mobile {
padding: $grid-block-padding-mobile;
}
}
&:hover,
&:focus {
@include tile-hover;
}
&:active {
@include tile-hover;
}
}
// Styles for Quotes
.quote {
._text {
padding: 40px;
right: 0;
left: 0;
max-width: 900px; // just for quotes right now, may become global/reusable
margin: 0 auto;
}
._quote {
font-size: 36px;
line-height: (56 / 36);
margin: 0 0 50px 0;
color: $indigo-900; //temporary
@include cinema-up {
font-size: 36px;
line-height: (56 / 36);
}
@include tablet {
font-size: 24px;
line-height: (40 / 24);
}
@include mobile {
font-size: 24px;
line-height: (40 / 24);
margin: 0 0 30px 0;
}
}
._attribution {
font-size: 16px;
color: $indigo-900; //temporary
@include cinema-up {
font-size: 16px;
line-height: (22 / 16);
}
@include tablet {
font-size: 16px;
line-height: (22 / 16);
}
@include mobile {
font-size: 16px;
line-height: (22 / 16);
}
}
}
// Styles for Articles
.article {
background: #1de9b6; // Temporary
._text {
@include vertical-align;
background: #ccc;
.title-lockup {
background: #ececec;
.title {
font-size: 36px;
line-height: (44 / 36);
}
.description {
font-size: 16px;
line-height: (19 / 16);
margin-top: 5px;
}
}
.author-lockup {
.byline {
display: table;
}
.avatar {
display: block;
border-radius: 40px;
float: left;
height: 40px;
width: 40px;
margin-right: 16px;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
.authorname {
display: table-cell;
vertical-align: middle;
}
}
@include mobile {
//@include fill-space;
//@include remove-vertical-align;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment