psique 0.1.0

data/assets/stylesheets/psique/_mixins.scss

@@ -0,0 +1,69 @@
+// Generate the grid for a particular size
+@mixin make-cols($size) {
+
+  @for $i from 1 through susy-get(columns) {
+    .col-#{$size}-#{$i} {
+      @include span($i);
+      @include trailer(susy-get(gutters));
+
+      > .row {
+        margin: 0 (- gutter()) (- gutter());
+      }
+    }
+  }
+}
+
+// Generate bottom arrow to header panels
+@mixin arrow($size, $color, $offset) {
+  position: relative;
+
+  &:after {
+    @include output-rhythm(border-width, $size);
+    @include output-rhythm(bottom, -1.8 * $size);
+    @include translateX(-$offset);
+    border: {
+      color: transparent;
+      style: solid;
+      top-color: $color;
+    }
+    content: '';
+    height: 0;
+    left: $offset;
+    pointer-events: none;
+    position: absolute;
+    visibility: visible;
+    width: 0;
+  }
+}
+
+// Generate panel
+@mixin panel($header-bg-color, $header-text-color, $content-bg-color: transparent, $content-border-color: transparent, $padding: .4rem) {
+  @include trailer(1);
+
+  .panel-header {
+    @include output-rhythm(padding, $padding);
+    background-color: $header-bg-color;
+    color: $header-text-color;
+    font-size: 1.2em;
+    font-weight: bold;
+
+    &.arrow {
+      @include arrow(rhythm(.4), $header-bg-color, 20%);
+    }
+
+    &.border-bottom {
+      @include output-rhythm(border-bottom, rhythm(.4));
+      border-bottom: {
+        color: adjust-color($header-bg-color, $hue: -2, $saturation: 48%, $lightness: -38%);
+        style: solid;
+      }
+    }
+  }
+
+  .panel-content {
+    @include output-rhythm(padding, $padding);
+    background-color: $content-bg-color;
+    border: 1px solid $content-border-color;
+    border-top: 0;
+  }
+}

data/assets/stylesheets/psique/_panels.scss

@@ -0,0 +1,148 @@
+/*doc
+---
+title: Panels
+name: panel
+category: Components
+---
+
+Example usage of basic panels.
+
+```haml_example
+%aside.panel
+  %header.panel-header
+    Panel title
+  %section.panel-content
+    Panel content
+```
+
+Panel with header decorations. You can use the classes `arrow` and `border-bottom`.
+
+```haml_example
+%aside.panel
+  %header.panel-header.arrow
+    Panel title
+  %section.panel-content
+    Panel content
+
+%aside.panel
+  %header.panel-header.border-bottom
+    Panel title
+  %section.panel-content
+    Panel content
+```
+
+Panel colors.
+
+```haml_example
+%aside.panel.red
+  %header.panel-header
+    Panel title
+  %section.panel-content
+    Panel content
+
+%aside.panel.green
+  %header.panel-header
+    Panel title
+  %section.panel-content
+    Panel content
+
+%aside.panel.pink
+  %header.panel-header
+    Panel title
+  %section.panel-content
+    Panel content
+
+%aside.panel.orange
+  %header.panel-header
+    Panel title
+  %section.panel-content
+    Panel content
+```
+
+Panel with tabs.
+
+```haml_example
+%aside.panel
+  %ul.tablist{role: 'tablist'}
+    %li.tab.active{'aria-controls' => 'panel1', :role => 'tab', :tabindex => '0'} First tab
+    %li.tab{'aria-controls' => 'panel2', :role => 'tab', :tabindex => '0'} Second tab
+    %li.tab{'aria-controls' => 'panel3', :role => 'tab', :tabindex => '0'} Third tab
+  %section.panel-content
+    #panel1.tabpanel.active{role: 'tabpanel'}
+      First panel
+    #panel2.tabpanel{role: 'tabpanel'}
+      Second panel
+    #panel3.tabpanel{role: 'tabpanel'}
+      Third panel
+```
+*/
+
+.panel {
+  @include panel(map-get($panel-colors, 'light-blue'), $black, $content-border-color: #ccc);
+
+  @each $panel-type, $panel-color in map-remove($panel-colors, 'light-blue') {
+    &.#{$panel-type} { @include panel($panel-color, $white, #f4f4f6); }
+  }
+}
+
+.tablist {
+  border-bottom: {
+    color: $primary-color;
+    style: solid;
+    width: 4px; }
+  display: table;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+
+  &.narrow {
+    @include display-flex;
+
+    > .tab {
+      display: inline-block;
+      padding-left: 2em;
+      padding-right: 2em;
+    }
+  }
+}
+
+.tab {
+  @include reset-focus;
+  background-color: $azul-ceruleo;
+  border-left: 1px solid $white;
+  cursor: pointer;
+  display: table-cell;
+  font-weight: bold;
+  margin: 0;
+  padding: .4rem 0;
+  text-align: center;
+
+  &:first-child { border-left: 0; }
+  &.active {
+    @include arrow(rhythm(.4), $well-read, 50%);
+    background-color: $well-read;
+    color: $white;
+    cursor: auto;
+  }
+
+  a { @include unstyled-link; }
+}
+
+.tabpanel {
+  display: none;
+  &.active { display: block; }
+}
+
+.tab-menu {
+  bottom: 5px;
+  display: inline-block;
+  position: absolute;
+  right: 0;
+
+  > * {
+    @include delimited-list(' |');
+    margin: 0;
+    padding: 0;
+  }
+}

data/assets/stylesheets/psique/_settings.scss

@@ -0,0 +1,127 @@
+// Media queries screens and layouts
+// -------------------------------------------------
+
+$screen-desktop: 1000px !default;
+$screen-mobile: 768px !default;
+$layout-desktop: $screen-desktop static !default;
+
+
+// Susy grid global defaults
+// -------------------------------------------------
+
+$susy: (
+  flow: ltr,
+  math: fluid,
+  output: isolation,
+  gutter-position: split,
+  container: auto,
+  container-position: center,
+  columns: 12,
+  gutters: .25,
+  column-width: false,
+  global-box-sizing: content-box,
+  last-flow: to,
+  debug: (
+    image: hide,
+    color: rgba(#66f, .25),
+    output: background,
+    toggle: top right,
+  ),
+  use-custom: (
+    background-image: true,
+    background-options: false,
+    box-sizing: true,
+    clearfix: false,
+    rem: true,
+  )
+);
+
+
+// Compass Vertical Rhythm Settings
+// -------------------------------------------------
+
+$round-to-nearest-half-line: true;
+$rhythm-unit: 'rem';
+
+
+// Colors
+// -------------------------------------------------
+
+$astronaut: #034665 !default;
+$black: #000 !default;
+$casper: #afc6d4 !default;
+$hollywood-cerise: #c000a6 !default;
+$trinidad: #e85900 !default;
+$verdun-green: #426e00 !default;
+$well-read: #ab3132 !default;
+$white: #fff !default;
+
+$aux-grey: #d5d5d5;
+$azul-capota: #21689d;
+$azul-ceruleo: #a2baca;
+
+$highlight-color: #00bd00;
+$primary-color: $azul-capota;
+
+
+// Typography
+// -------------------------------------------------
+
+$font-size-h1: 36px;
+$font-size-h2: 30px;
+$font-size-h3: 18px;
+$font-size-h4: 14px;
+$font-size-h5: 12px;
+$font-size-h6: 10px;
+
+$texts-font-family:    'Source Sans Pro' !default;
+$headings-font-family: 'Roboto' !default;
+$headings-font-weight: bold;
+
+
+// Panels
+// -------------------------------------------------
+
+$panel-colors: (
+  'red': $well-read,
+  'green': #00bd00,
+  'pink': $hollywood-cerise,
+  'orange': $trinidad,
+  'light-blue': $casper
+);
+
+
+// Forms
+// -------------------------------------------------
+
+$input-border-radius: 4px;
+
+
+/*Rankia Colores*/
+/*Principales*/
+$capota:#21689D;
+$capota-light:lighten(#21689D,20);
+$capota-dark:darken(#21689D,10);
+
+$navyblue:#019875;
+$navyblue-light:lighten(#019875,15);
+$navyblue-dark:darken(#019875,10);
+
+$ceruleo:#A2BACA;
+$ceruleo-light:lighten(#A2BACA,15);
+$ceruleo-dark:darken(#A2BACA,10);
+
+/*Greyscale*/
+$lightgrey:#F4F4F4;
+$midgrey:#888888;
+$darkgrey:#1E1E1E;
+$auxgrey:#D5D5D5;
+
+/*Section colors*/
+$darkorange:#FA640F;
+$darkorange-light:lighten(#FA640F,15);
+$darkorange-dark:darken(#FA640F,8);
+
+$darkmagenta:#AA2098;
+$seagreen:#188960;
+$granate:#951E25;

data/assets/stylesheets/psique/_summaries.scss

@@ -0,0 +1,188 @@
+/*doc
+---
+title: Summaries
+name: summary
+category: Components
+---
+
+A summary is a representative of a complete news extract, to place it in some
+prominent and visible place in the website. The different formats summary,
+allow give more importance to some elements or others, according to their
+position on the page.
+
+```haml_example
+%article.summary.featured
+  .summary-left
+    %img{:src => "http://www.fillmurray.com/400/305/"}
+  .summary-right
+    %header.summary-header
+      %h2.summary-title
+        %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
+      .summary-meta
+        .author john doe
+        .comments
+          %i.fa.fa-comment 7
+    %section.summary-content
+      %p
+        %a.topic{href: '#'} officia consectetur.
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+```
+```haml_example
+%article.summary.medium
+  .summary-left
+    %img{:src => "http://www.fillmurray.com/g/400/300/"}
+  .summary-right
+    %header.summary-header
+      %h3.summary-title
+        %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
+        %span.author john doe
+
+    %section.summary-content
+      %p
+        %a.topic{href: '#'} officia consectetur.
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+```
+```haml_example
+%article.summary.new
+  %header.summary-header
+    %h3.summary-title
+      %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
+  %section.summary-content
+    .thumbnail
+      %img{:src => "http://www.fillmurray.com/g/375/250/"}
+    .summary-meta
+      .author john doe
+      .comments
+        %i.fa.fa-comment 7
+    %p
+      %a.topic{href: '#'} officia consectetur.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+```
+```haml_example
+%article.summary.default
+  %header.summary-header
+    %h2.summary-title
+      %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
+    .summary-meta
+      .author john doe
+      .comments
+        %i.fa.fa-comment 7
+  %section.summary-content
+    .thumbnail
+      %img{:src => "http://www.fillmurray.com/g/800/250/"}
+    %p
+      %a.topic{href: '#'} officia consectetur.
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+```
+```haml_example
+%article.summary.small
+  .summary-left
+    %img{:src => "http://www.fillmurray.com/g/400/150/"}
+  .summary-right
+    %header.summary-header
+      %h4.category reprehenderit
+      %h4.summary-title
+        %a{href: '#'} Lorem ipsum dolor sit amet consectetur adipisicing
+    %section.summary-content
+      %p
+        %a.topic{href: '#'} officia consectetur.
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+```
+*/
+
+
+%summary {
+  @extend .row;
+  padding: .2em;
+
+  .summary-title {
+    color: $primary-color;
+    font-weight: bold;
+    margin-bottom: 0;
+
+    a { color: $primary-color; }
+  }
+
+  .author {
+    color: #666;
+    display: inline-block;
+    font-size: 11px !important;
+    font-weight: normal;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .comments {
+    color: $primary-color;
+    display: inline-block;
+    margin-left: 1em;
+    font-size: 14px;
+  }
+
+  .summary-content {
+    p {
+      color: #323131;
+      font-size: 13px;
+      line-height: 1.2em;
+      margin: 0;
+    }
+  }
+
+  .category {
+    color: $primary-color;
+    font-size: 12px;
+    font-weight: bold;
+    margin-bottom: 0;
+    text-transform: uppercase;
+  }
+
+  .topic {
+    color: $primary-color;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+
+  .thumbnail {
+    margin-bottom: .5em;
+  }
+
+  img {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.summary {
+  @extend %summary;
+
+  &.small {
+    .summary-left { @extend .col-sm-3; }
+    .summary-right { @extend .col-sm-9; }
+  }
+
+  &.medium {
+    .summary-left { @extend .col-sm-5; }
+    .summary-right { @extend .col-sm-7; }
+  }
+
+  &.new {
+    .summary-header { @extend .col-sm-12; }
+    .summary-content {
+      .thumbnail { @extend .col-sm-5; }
+      p { @extend .col-sm-7;}
+    }
+    .summary-meta { @extend .col-sm-7; }
+  }
+
+  &.default {
+    .summary-header { @extend .col-sm-12; }
+    .summary-content { @extend .col-sm-12; }
+  }
+
+  &.featured {
+    .summary-left { @extend .col-sm-5; }
+    .summary-right { @extend .col-sm-7; }
+    .summary-meta { margin: .25em 0; }
+    background-color: #F4F3F5;
+  }
+}