1 files changed, 113 insertions, 0 deletions
diff --git a/app/assets/stylesheets/superfluid.scss b/app/assets/stylesheets/superfluid.scss
new file mode 100644
index 0000000..3280fb6
--- /dev/null
+++ b/app/assets/stylesheets/superfluid.scss
@@ -0,0 +1,113 @@
+//
+// This is a simple CSS for a very fluid layout. One could say it is SUPER fluid.
+// functions taken from susy.
+//
+// HTML
+//
+//  .top
+//    .column_countainer
+//      .column_content
+//  .middle
+//    .column_container
+//      .column_content
+//  .bottom
+//    .column_container
+//      .column_content
+//
+
+//
+// DEFAULTS
+//
+
+$total-columns: $gridColumns !default;
+$side-columns: 2 !default;
+
+$column-width: $gridColumnWidth !default;
+$gutter-width: $gridGutterWidth !default;
+
+//
+// FUNCTIONS
+//
+
+//
+// Returns the width of the specified number of columns
+// $columns => The number of columns to get width for.
+//
+@function columns-width($columns : $total-columns) {
+  @return ($columns * $column-width) + (ceil($columns - 1) * $gutter-width);
+}
+
+//
+// Returns the full width of all columns
+//
+@function full-width() {
+  @return columns-width();
+}
+
+//
+// Return the percentage width of a single gutter in a given column context.
+// $context => The grid context in columns, if nested.
+//
+@function gutter($context : $total-columns) {
+  @return percentage($gutter-width / columns-width($context));
+}
+
+//
+// Return the percentage width of multiple 'columns' in a given 'context'.
+// $columns => The number of columns to get relative width for.
+// $context => The grid context in columns, if nested.
+//
+@function columns($columns, $context : $total-columns) {
+  @return percentage(columns-width($columns) / columns-width($context));
+}
+
+//
+// CSS
+//
+
+.column_container {
+  *zoom: 1;
+  margin-left: auto;
+  margin-right: auto;
+  width: full-width();
+  max-width: 100%;
+}
+
+.column_content {
+  padding-left: gutter();
+  padding-right: gutter();
+}
+
+.middle .column_container:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.middle .column_content {
+  padding-top: gutter();
+  padding-bottom: gutter();
+}
+
+.main_column.with_side_column {
+  width: columns($total-columns - $side-columns);
+  margin-left: gutter();
+  float: left;
+  // without left float, we would use this:
+  // margin-left: columns($side-columns) + gutter();
+  // but that creates problems if we have floated columns inside this main column
+}
+
+//.article.full {
+//  margin-left: 0;
+//  width: columns;
+//}
+
+.side_column {
+  display: inline;
+  float: left;
+  width: columns($side-columns);
+}