Anatomical “fugitive sheets” are illustrations of the body designed to display internal organs and structures using paper flaps. Their name arose from the frequency with which the accompanying sheets were torn or misplaced. This site reimagines the fugitive sheet as a misplaced code-snippet, framed within a randomly generated cut-out.
//Grid Mixins & Container Placeholder @mixin col($columns, $maximum-columns:$maximum-columns, $omega:false) { width: columns($columns, $maximum-columns); @if $omega == omega { float: right; } @else if $omega == 'none'{ margin-right: gutter(); } @else{ margin-right: gutter(); float: left; } } @mixin omega { float: right; margin-right: 0; } @mixin push($from-direction, $columns) { @if $from-direction == left { margin-left: offset-columns($columns); } @if $from-direction == right { margin-right: offset-columns($columns); } } %container{ max-width: $max-width; margin-left: auto; margin-right: auto; } @function columns($columns, $container-columns: $maximum-columns) { $width: $columns * $column-width + ($columns - 1) * $gutter-width; $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width; @return percentage($width / $container-width); } @function gutter($container-columns: $maximum-columns, $gutter: $gutter-width) { $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width; @return percentage($gutter / $container-width); } @function offset-columns($columns) { $margin: $columns * $column-width + $columns * $gutter-width; @return $margin; }
//Grid Mixins & Container Placeholder @mixin col($columns, $maximum-columns:$maximum-columns, $omega:false) { width: columns($columns, $maximum-columns); @if $omega == omega { float: right; } @else if $omega == 'none'{ margin-right: gutter(); } @else{ margin-right: gutter(); float: left; } } @mixin omega { float: right; margin-right: 0; } @mixin push($from-direction, $columns) { @if $from-direction == left { margin-left: offset-columns($columns); } @if $from-direction == right { margin-right: offset-columns($columns); } } %container{ max-width: $max-width; margin-left: auto; margin-right: auto; } @function columns($columns, $container-columns: $maximum-columns) { $width: $columns * $column-width + ($columns - 1) * $gutter-width; $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width; @return percentage($width / $container-width); } @function gutter($container-columns: $maximum-columns, $gutter: $gutter-width) { $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width; @return percentage($gutter / $container-width); } @function offset-columns($columns) { $margin: $columns * $column-width + $columns * $gutter-width; @return $margin; }
//Grid Mixins & Container Placeholder @mixin col($columns, $maximum-columns:$maximum-columns, $omega:false) { width: columns($columns, $maximum-columns); @if $omega == omega { float: right; } @else if $omega == 'none'{ margin-right: gutter(); } @else{ margin-right: gutter(); float: left; } } @mixin omega { float: right; margin-right: 0; } @mixin push($from-direction, $columns) { @if $from-direction == left { margin-left: offset-columns($columns); } @if $from-direction == right { margin-right: offset-columns($columns); } } %container{ max-width: $max-width; margin-left: auto; margin-right: auto; } @function columns($columns, $container-columns: $maximum-columns) { $width: $columns * $column-width + ($columns - 1) * $gutter-width; $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width; @return percentage($width / $container-width); } @function gutter($container-columns: $maximum-columns, $gutter: $gutter-width) { $container-width: $container-columns * $column-width + ($container-columns - 1) * $gutter-width; @return percentage($gutter / $container-width); } @function offset-columns($columns) { $margin: $columns * $column-width + $columns * $gutter-width; @return $margin; }