area-selection-js/docs/assets/header.css

Simple and easy area selection library for image/video cropping

/**
 * Babel Starter Kit (https://www.kriasoft.com/babel-starter-kit)
 *
 * Copyright © 2015-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

.header {
  padding: 1.5rem 0;
  background: var(--header-bg-color);
  color: var(--header-color);
}

.header__logo {
  color: var(--logo-color);
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
  font-weight: 700;
  font-style: italic;
  font-size: 2.5rem;
  font-family: 'Lato', sans-serif;
}

.header__logo-img {
  margin-right: 10px;
  width: 164px;
  height: 64px;
  vertical-align: middle;
}

.header__author {
  float: right;
  padding: 18px 0;
  font-size: 18px;
  color: rgba(255, 255, 255, .6);
}
.header__author a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
}
.header__author a:hover {
  color: rgba(255, 255, 255, 1);
}

.header__hero {
  padding: 50px 0 30px;
}

.header__hero-title {
  margin: 0;
  padding: 0 0 15px;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1em;
}

.header__hero-desc {
  margin: 0;
  padding: 0 0 30px;
  letter-spacing: 1px;
  font-weight: 300;
  font-size: 1.5rem;
}

.header__hero-img {
  margin: -20px -20px 0 0;
  float: right;
  width: 256px;
  height: 256px;
}

.header__hero-btn {
  display: inline-block;
  margin: 1rem 1rem 0 0;
  padding: .8rem 2rem .875rem 2rem;
  border-radius: 3px;
  background: rgba(249, 220, 62, .9);
  color: var(--header-bg-color);
  text-decoration: none;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

.header__hero-btn:hover {
  background: rgba(249, 220, 62, 1);
}

.header__hero-btn--muted {
  background: rgba(255, 255, 255, .5);
}

.header__hero-btn--muted:hover {
  background: rgba(255, 255, 255, .6);
}

.header__hero-btn-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin: -4px 10px -4px 0;
  fill: var(--header-bg-color);
}

.header__version {
  background: color(var(--header-bg-color) alpha(-90%));
  padding: 15px 0;
  font-size: 16px;
  color: var(--main-color);
}

.header__version a {
  color: var(--link-color);
  text-decoration: none;
}

.header__version a:hover,
.header__version a:active {
  color: color(var(--link-color) blackness(10%));
}

.header__join {
  float: right;
}