stylesheets/main.less

/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import "button";
@import "constants";
@import "code";
@import "home";
@import "icon";

/**
 * Note to contributors: The style rules below have been tuned and tested
 * extensively across various device types and screen sizes. If you wish to make
 * changes, please consult the primary authors to ensure that your changes will
 * not break anything.
 */

*,
:before,
:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

html,
body {
  min-height: 100%;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: @color-blue-grey-800;
  margin: 1.2em 0 0.4em;
  line-height: 1.5;
}
h4, h5, h6 {
  font-weight: 500;
}
h1.title {
  color: @color-primary-700;
  font-size: 45px;
  line-height: 48px;
}
h1 {
  color: @color-blue-grey-500;
  font-size: 34px;
  line-height: 40px;
}
h2 {
  font-size: 24px;
  line-height: 32px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 16px;
}
h5 {
  font-size: 14px;
}
h6 {
  color: @color-blue-grey-500;
  font-size: 12px;
}

p {
  margin: 1em 0;
  line-height: 1.7;
}

a {
  color: @color-primary-700;
  text-decoration: none;

  &:hover,
  &:active {
    color: @color-primary-800;
  }
}

blockquote {
  background-color: @color-grey-100;
  margin: 0 -@gutter-half;
  padding: 0 @gutter-half;
  overflow: hidden;
  font-style: normal;

  /* Undo the effects of MDL. */
  &:before,
  &:after {
    position: static;
    content: "";
    margin: 0;
  }
}

figure {
  margin: 0;
}

figure img {
  max-width: 100%;
}

figcaption {
  margin: @gutter-quarter 0;
  color: @color-blue-grey-500;
  font-size: 12px;
  font-weight: 500;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  border: 1px solid @color-grey-100;
  padding: @gutter-half;
}

th {
  font-weight: bold;
}

/* Page components ************************************************************/

header {
  @import "header";

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

/* Adjust for sidebar. */
main,
.previous-next {
  margin-left: @sidebar-width;

  @media @small-screen {
    margin-left: 0;
  }
}

main {
  position: relative;
  flex: 1;
  margin-top: @header-height;
  padding: 0 calc(@gutter + @gutter-half) @gutter;
  max-width: @main-max-width;

  @media @small-screen {
    padding: 0 @gutter @gutter;
  }

  /* Prevent headings from being obscured by the <header> for #heading urls. */
  h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
    /**
     * Prevent the :before block from obscuring the element above. Note: The
     * meaning of "obscuring" here is subtle. The "visibility: hidden" rule
     * makes it so the :before block doesn't visually obscure anything, but it
     * does still obscure certain UI behaviors. For example, if there's a code
     * block with a horizontal scrollbar directly above a heading element,
     * hovering over that scrollbar doesn't bring it into focus.
     */
    position: relative;
    z-index: -1;

    &:before {
      display: block;
      content: "";
      margin-top: calc(-1 * (@header-height + @gutter-half));
      height: calc(@header-height + @gutter-half);
      visibility: hidden;
    }
  }
}

.previous-next {
  @import "previous-next";

  margin-top: @gutter;
}

.sidebar {
  @import "sidebar";

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: @sidebar-width;
  z-index: 2;  /* below header */

  @media @small-screen {
    top: 0;
    z-index: 5;  /* above mdl-layout__obfuscator */
    transform: translateX(-@sidebar-width);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &.is-visible {
      transform: translateX(0);
    }
  }
}

.toc {
  @import "toc";

  @media (min-width: (@main-max-width + 2 * @sidebar-width)) {
    position: fixed;
    top: @header-height;
    right: 0;
    bottom: 0;
    width: @sidebar-width;
  }
}

.sidebar-data {
  display: none;
}

/* The logo element appears in the header and in the sidebar. */
.logo {
  font-size: 20px;
}

.note {
  @import "note";
}

.rows {
  display: flex;
  margin-right: @gutter-half;
  margin-left: @gutter-half;
  & > * {
    flex: 1;
    margin-right: @gutter-half;
    margin-left: @gutter-half;
  }
}