107 lines
2 KiB
SCSS
107 lines
2 KiB
SCSS
$container-width : 1170;
|
|
|
|
$margin-between-columns : 30;
|
|
$column-width : 255 - $margin-between-columns;
|
|
$two-column-width : ($column-width * 2) + ($margin-between-columns * 2);
|
|
|
|
$margin-between-rows : 20;
|
|
|
|
$row-height : $column-width;
|
|
$two-row-height : $two-column-width;
|
|
|
|
@mixin tall() {
|
|
height : $two-column-width + px;
|
|
min-height : $two-column-width + px;
|
|
max-height : $two-column-width + px;
|
|
}
|
|
|
|
@mixin wide() {
|
|
width : $two-column-width + px;
|
|
min-width : $two-column-width + px;
|
|
max-width : $two-column-width + px;
|
|
}
|
|
|
|
body {
|
|
background-color : #F6F6F6;
|
|
background-image : image_url('pattern.jpg')
|
|
}
|
|
|
|
#canvas {
|
|
margin-top : 100px;
|
|
}
|
|
|
|
.canvas-frame {
|
|
float : left;
|
|
margin : 10px;
|
|
|
|
.content {
|
|
@include transition(box-shadow);
|
|
@include box-shadow(0,1px,3px,rgba(0,0,0,0.2));
|
|
|
|
&:hover {
|
|
@include box-shadow(0,1px,5px,rgba(0,0,0,0.5));
|
|
cursor : pointer;
|
|
}
|
|
|
|
&:active {
|
|
-webkit-transform : scale(0.98);
|
|
}
|
|
|
|
//hax to deal with markdownify
|
|
p {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
position : relative;
|
|
|
|
background-color : #fff;
|
|
min-height : $column-width + px;
|
|
max-height : $column-width + px;
|
|
|
|
width : $column-width + px;
|
|
min-width : $column-width + px;
|
|
max-width : $column-width + px;
|
|
|
|
overflow : hidden;
|
|
padding : 20px;
|
|
|
|
/* used in masking photos with overflow: hidden; */
|
|
.image-container {
|
|
position : absolute;
|
|
overflow : hidden;
|
|
|
|
width : 100%;
|
|
top : 0;
|
|
left : 0;
|
|
|
|
width : 100%;
|
|
|
|
img {
|
|
max-height : 100%;
|
|
max-width : 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.embed-frame {
|
|
position : absolute;
|
|
top : 0;
|
|
left : 0;
|
|
width : 100%;
|
|
height : 100%;
|
|
|
|
iframe {
|
|
height : 100%;
|
|
width : 100%;
|
|
}
|
|
}
|
|
|
|
/* larger declarations */
|
|
&.x2.width .content { @include wide(); }
|
|
&.x2.height .content { @include tall(); }
|
|
|
|
&.x2.width .content img { max-height: none; max-width: none; min-width: 100%; }
|
|
&.x2.height .content img { max-width: none; max-height: none; min-height: 100%; }
|
|
|
|
}
|