scratchx/sass/_gallery.scss

102 lines
1.9 KiB
SCSS
Raw Normal View History

2015-08-04 00:20:39 -04:00
.gallery {
background: $gallery-background-color;
div {
padding: $vertical-base * 10 0;
}
ul {
@include outer-container;
2015-08-05 16:16:03 -04:00
@include reset-display;
padding-left: 0;
2015-08-04 00:20:39 -04:00
}
li {
/* Grid of 3 wide */
@include span-columns(4);
@include omega(3n);
margin-bottom: $gutter;
2015-08-05 16:16:03 -04:00
overflow: hidden;
border-radius: $base-border-radius;
2015-08-04 00:20:39 -04:00
section, header {
padding: $gutter;
background-color: $base-background-color;
font-size: $small-font-size;
p {
margin-bottom: 0;
text-align: left;
}
}
header {
background-color: $bright-blue;
color: $white;
position: relative;
@include icon(before, right-arrow) {
position: absolute;
font-size: 1.5em;
line-height: 1.5;
right: $gutter;
}
h2 {
font-size: $h3-font-size;
margin-bottom: 0;
line-height: 1;
}
}
img {
display: block;
height: 150px;
}
.description {
overflow: hidden;
a {
width: 50%;
float: left;
display: block;
}
}
.tags {
border-top: $base-border;
}
}
}
aside + .gallery {
margin-top: $vertical-base * -4;
}
.tag {
2015-08-10 10:29:05 -04:00
&:before {
padding-right: $vertical-base;
}
2015-08-04 00:20:39 -04:00
&.web {
2015-08-10 10:29:05 -04:00
@include icon(before, wifi) {
font-size: 1.25em;
display: inline-block;
vertical-align: baseline;
}
2015-08-04 00:20:39 -04:00
}
&.hardware {
2015-08-10 10:29:05 -04:00
@include icon(before, gear) {
font-size: 1.5em;
display: inline-block;
vertical-align: middle;
}
2015-08-04 00:20:39 -04:00
}
}