main.scss

@import '../node_modules/@creativecommons/vocabulary/scss/vocabulary.scss';
@import '../node_modules/vue-select/src/scss/vue-select.scss';
@import './home-page.scss';
@import './blog-page.scss';
@import './single-post-page.scss';
@import './author-post-page.scss';
@import './series-page.scss';
@import './categories-page.scss';
@import './authors-page.scss';
@import './guidelines.scss';
@import './issue-finder-page.scss';
@import './project-list.scss';
@import './project-ideas.scss';
@import './search-guidelines-page.scss';
@import './cc-search.scss';

// Links
a {
  color: $color-forest-green;
  text-decoration: none;
}

a:hover {
  color: $color-forest-green;
}

// logo
svg {
  width: 100%;
}

// Code
code {
  color: $color-dark-slate-gray;
  background-color: $color-lighter-gray;
  border: 0.0625rem solid $color-light-gray;
  border-radius: 0.25rem;
}

// Multiple lines of code
pre {
  color: $color-dark-slate-gray;
  background-color: $color-lighter-gray;
  border: 0.0625rem solid $color-light-gray;
  border-radius: 0.25rem;

  code {
    border: none;
  }
}

// GitHub labels
.gh-label {
  display: inline-block;
  font-size: smaller;
  padding: 0 1em;
  border: 1px solid #eeeeee;
  border-radius: 999em;
  margin-right: 0.25em;

  $label-colors: (
    ('goal'                  #ffffff #000000),
    ('aspect'                #04338c #ffffff),
    ('skill'                 #5ff1f5 #000000),
    ('talk'                  #f9bbe5 #000000),
    ('friendliness'          #7f0799 #ffffff),
    ('status-lighter'        #eeeeee #000000),
    ('status-light'          #cccccc #000000),
    ('status-neutral'        #999999 #000000),
    ('status-dark'           #666666 #ffffff),
    ('status-darker'         #333333 #ffffff),
    ('priority-unfavourable' #b60205 #ffffff),
    ('priority-negative'     #ff9f1c #000000),
    ('priority-neutral'      #ffcc00 #000000),
    ('priority-positive'     #cfda2c #000000),
    ('priority-favourable'   #008672 #ffffff),
    ('miscellaneous'         #000000 #ffffff),
    ('hacktoberfest'         #883255 #ffffff),
    ('invalid'               #eeeeee #000000),
  );
  @each $category, $background-color, $foreground-color in $label-colors {
    &.#{$category} {
      background-color: $background-color;
      color: $foreground-color;
    }
  }
}

.content {
  @extend .body-big;

  line-height: 1.6875;
}

// Navbar
.navbar-item {
  &.has-dropdown {
    .navbar-dropdown {
      display: none;
    }
    &.is-active {
      .navbar-dropdown {
        display: block;
      }
    }
  }
}

// Breadcrumb
.breadcrumb-container {
  border-top: 4px solid $color-forest-green;
  background-color: $color-lighter-gray;

  .breadcrumb {
    @extend .padding-horizontal-big;
    @extend .padding-vertical-bigger;

    .link {
      @extend .has-color-forest-green;
    }
  }
}

// Common Title section
.header {
  background-color: $color-lighter-gray;

  .container {
    @extend .padding-horizontal-big;
    @extend .padding-bottom-xl;

    word-wrap: break-word;

    .description {
      @extend .body-bigger;
      @extend .padding-top-normal;
      @extend .has-text-dark-slate-gray;

      line-height: 1.8125;
    }
  }
}

@media screen and (max-width: 1024px) {
  .main-footer .subscription .newsletter {
    width: 100%;
  }
}

// Sticky utility function
.sticky-top {
  position: sticky;
  top: 0;
}

// Right align the final menu dropdown. Once this is part of vocabulary it will be removed from this file.
.navbar-item.has-dropdown:last-child {
  .navbar-dropdown {
    right: 0;
    left: auto;
  }
}