application.css.scss

// app/assets/stylesheets/application.css.scss

// APPLICATION
// Join together all stylesheets

// Variables and mixins
@import "variables";
@import "mixins";

// Import bootstrap and bourbon
@import "bootstrap";
@import "bourbon";

// Custom styling
@import "elements";
@import "general";
@import "components/*";
@import "sections/*"

article.css.scss

// app/assets/stylesheets/components/article.css.scss

// ARTICLE
// Styling for articles in listing pages

.gs-article {
  margin-bottom: 20px;
}

.gs-article-block {
  background: #eee;
  height: 200px;
}

elements.css.scss

// app/assets/stylesheets/elements.css.scss

// ELEMENTS
// Styling rules for elements

// Headings
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

// Paragraphs
p {
  margin-bottom: 10px;
}

general.css.scss

// app/assets/stylesheets/general.css.scss

// GENERAL
// Styling rules relative to generic classes

// Headings
.gs-title-big {
  font-size: 80px;
}

// Typography

// Links
a {
  &.gs-link-current {
    color: red !important;
  }
}

header.css.scss

// app/assets/stylesheets/components/header.css.scss

// HEADER
// Sets up styling for the headers

// Upper header
.gs-navbar-title-bar {
  margin-bottom: 0;
  background: transparent;
  border: none;
}

mixins.css.scss

// app/assets/stylesheets/mixins.css.scss

// MIXINS
// Styling helpers

// Shorter media queries
@mixin bigger($width) {
  @media screen and (min-width: $width) {
    @content;
  }
}

@mixin smaller($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

// SVG backgrounds + fallback
@mixin svg-image($image) {
  $image-png: $image + ".png";
  $image-svg: $image + ".svg";
  background-image: image-url($image-png);
  html.svg & {
    background-image: image-url($image-svg);
  }
}

// Dot spacers
@mixin spacer-dot-right($before, $after, $color: $spacer-color) {
  margin-right: $after;

  &:after {
    content: "·";
    display: inline-block;
    margin-left: $before;
    color: $color;
  }
}

@mixin spacer-dot-left($before, $after, $color: $spacer-color) {
  margin-left: $before;

  &:before {
    content: "·";
    display: inline-block;
    margin-right: $after;
    color: $color;
  }
}

@mixin spacer-dot-clear {
  &:before, &:after {
    content: none;
    display: none;
  }
}

users.css.scss

// app/assets/stylesheets/components/header.css.scss

// USERS
// Styling relative to user pages

variables.css.scss

// app/assets/stylesheets/variables.css.scss

// VARIABLES
// Definition of Bootstrap and custom variables

// Custom variables
$light-font-weight:               200;
$normal-font-weight:              400;
$bold-font-weight:                600;

// Bootstrap variables
$font-family-sans-serif:          "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size-base:                  16px;

$line-height-base:                1.68;

$grid-gutter-width:               20px;