
@charset "UTF-8";
@import url("fonts/fonts.css");
@import url("theme.css");

/* Copyright (c) 2019 The odig programmers. All rights reserved.
   Distributed under the ISC license, see terms at the end of the file.
   %%NAME%% %%VERSION%% */

:root { --font-headings: "PT-Sans-Caption";
        --font-body: "PT-Sans";
        --font-mono: "DejaVu-SansMono";
        --size-font: 16px;
        --size-font-micro: calc(0.675 * var(--size-font));
        --size-font-tiny-ratio: 0.75;
        --size-font-tiny:  calc(var(--size-font-tiny-ratio) * var(--size-font));
        --size-font-small: calc(0.875 * var(--size-font));
        --size-font-large: 20px;
        --size-font-big: calc(1.4 * var(--size-font));
        --size-font-huge: calc(1.7 * var(--size-font));
        --size-font-mono-ratio: 0.87097;
        --size-line-ratio: 1.5;
        --size-line: calc(var(--size-line-ratio) * var(--size-font));
        --size-half-line: calc(0.5 * var(--size-line));
}

/* Reset a few things. */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,select,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,time,mark,audio,video,button,input
{ margin: 0; padding: 0; border: 0; /* outline: 0; */
  font-size: inherit; font: inherit; font-weight: inherit;
  line-height: inherit; vertical-align: baseline;
  text-align: inherit; color: inherit; background: transparent; }

table { border-collapse: collapse; border-spacing: 0; }
*,  *:before,  *:after { box-sizing: border-box; }

/* Geometry, a bit annoying at the moment and not exactly
   the desired geometry on responses.
   https://github.com/ocaml/odoc/issues/327

   See also media adjustements at the end of the stylesheet. */

body { background-color: var(--color-bg);
       color: var(--color-fg); }

.content
{ font-size: var(--size-font);
  font-family: var(--font-body), sans-serif;
  font-weight: 400;
  line-height: var(--size-line);
  text-align: left;
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  padding: calc(2.0 * var(--size-line));
  padding-top: calc(0.5 * var(--size-line)); }


.content.home > header:first-child { margin-top: 80px; }

.content > * { max-width: 78ch; width: 75%; }

/* Horizontal rules. The way to do it is not so nice, e.g. for
   anchoring it makes huge blobs on heading linking. It would be
   better to emit hr in the markup and display:none them if you don't
   want them.

   Some oddities may happen because of https://github.com/ocaml/odoc/issues/328
*/

h1, .content > header + dl { padding-top: var(--size-line); }

h1:first-of-type {
  border-top: 0;
  margin: 0 0 10px;
 font-size: 2.2rem; }

header nav:first-child {
  font-size: 16px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: #FFFFFF;
  z-index: 100;
  margin-top: 0;
  border-bottom: 4px solid #0B419E;
  box-shadow: 2px 4px 10px rgba(0,0,0,.2);
}

header nav .header,
header nav .breadcrumb {
  display: block;
  margin: 0;
  padding: 0 calc(2.0 * var(--size-line));
}

header nav .header a { margin: 0; }
header nav:first-child .wrapper {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 calc(2.0 * var(--size-line));
}

header nav:first-child .breadcrumb a {
  margin: 0 5px; }

header nav:first-child .breadcrumb {
  padding: 7px 0;
  border-top: 1px solid lightgray;
}

header nav .header img {
  max-width: 70px;
  margin: 10px auto;
}

header nav:first-child .logo-wrapper img {
  max-width: 35px;
  margin-top: 5px;
}

.content > header:first-child {
  padding: 0px 0 5px 0;
  margin-top: 110px; }

header:first-child h1 { margin: 0 0 10px; border-top: 0; }

/* Basic markup */

h1, h2, h3, h4, h5, h6
{ font-family: var(--font-headings), sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 50px; }

h1 { font-size: var(--size-font-huge); }
h2 { font-size: var(--size-font-big); }
h3 { font-size: var(--size-font-large); }
h4 { font-size: var(--size-font); }
h1, h2 { line-height: calc(1.5 * var(--size-line));
         margin-top: calc(1.75 * var(--size-line)); }

div, nav, p, ol, ul, dl, pre, table { margin-top: var(--size-half-line); }

ul, ol { list-style-position: outside }
ul { list-style-type: square }
ul > li { margin-left: 2.25ch; }
ol > li { margin-left: 2ch; }

em { font-style: italic }
b, strong { font-weight: 700 }
small { font-size: var(--size-font-small); }

sup { vertical-align: super; }
sub { vertical-align: sub; }
sup, sub { font-size : calc(1em * var(--size-font-tiny-ratio));
           line-height: 0; margin-left: 0.2ex; }

img { display: block;
      margin-top: var(--size-half-line); margin-bottom: var(--size-half-line); }

/* Links and anchors. Note anchors need to be refined a bit further down
   in certain cases. */

a { color: var(--color-link); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; color: var(--color-link-hover) !important; }
a.anchor:before { content: "#" }
a.anchor:hover { box-shadow: none; text-decoration: underline; }
*:hover > a.anchor { visibility: visible }
a.anchor
{ visibility: hidden; position: absolute;
  font-weight: normal;
  font-style: normal;
  margin-left: -2.5ch;
  padding-right: 1ch; padding-left: 1ch; /* To remain selectable */
  color: var(--color-link);
  text-align: right;
  transition: color 150ms; }

*:target {
  background-color: var(--color-bg-highlight);
  box-shadow: 0 0 0 3px var(--color-bg-highlight);
}

.xref-unresolved { text-decoration: underline wavy var(--color-broken-link); }

/* Table of contents */
.toc-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.toc {
  position: absolute;
  right: 0;
  width: 256px;
  height: 100%;
  top: 57px;
  padding: 0 20px 0 0;
  font-size: 13px;
  padding-top: var(--size-line);
  margin-left: var(--size-line);
  margin-top: 100px;
  margin-right: var(--size-line); }

.toc a,
.toc a code { color : var(--color-fg); cursor: pointer; }
.toc ul { font-family: var(--font-headings); text-transform: uppercase;
          list-style-type: none; margin: 0; }

.toc li { margin-left: 0;
          padding-left: 2ch;
          text-indent: -2ch;
          line-height: 20px;
          margin-top: 7px; }
.toc ul ul { font-family: var(--font-body);
             text-transform: none;
             margin-top:0;
             margin-left: 1ch; }

/* Module structure items */

dd { padding-left: 1ch; position: relative; }
dt table { margin-top: 0 }
dd *:first-child { margin-top: 0 }
dd > *:last-child { padding-bottom: var(--size-half-line) }
dt table p:first-child { margin-top: 0 }

dt + dt { margin-top: var(--size-line) } /* When there are no doc strings */

.record { margin-left: 2ch }
.variant .doc, .record .doc { padding-left: 1ch; }

td.field > a.anchor, td.constructor > a.anchor,
dt.spec > a.anchor { padding-right: 0.5ch;
                     padding-left: 2ch; }
td.field, td.constructor, dt.spec { padding-left: 4ch; text-indent: -4ch; }


/* But we don't do it for types for now because of variants and
   records. This makes :target highlight be off. And poses
   other problems (e.g. need to indent back the last ] or }.
   A better markup strategy should be found here. */
dt.spec.type { padding-left: 0; text-indent: 0 }
dt.spec.type > a.anchor
{ padding-left: 1ch; padding-right: 1ch; /* values from a.anchor */ }

/* ocamldoc tags we'd like a targeting class and more info here
   https://github.com/ocaml/odoc/issues/329 */

dd dd > *:last-child { padding-bottom: 0 /* override above rule */ }
dd dt { display: inline-block; }
dd dd { display: inline-block; }
.spec.module > *:last-child { padding-bottom: var(--size-half-line); }
summary { cursor: pointer; }
/* Code and code highlighting */

code, pre
{ font-family: var(--font-mono), monospace;
  font-weight: 400;
  font-size: calc(1em * var(--size-font-mono-ratio)); }

code span, pre span /* Allows to use spans to control breakpoints */
{ display: inline-block;
  text-indent: 0; /* That bit is important because of dt.spec's text-indent */ }

pre code { font-size: inherit } /* don't apply transform twice... */

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { text-transform: none; }

pre { background: var(--color-code-block-bg);
      color:var(--color-code-fg);
      padding: 10px;
      margin: 20px 0;
      overflow-x: auto; }

/* Inline code */
p > code,
li > code {
  font-size: 85%;
  padding: var(--padding-inline-code);
  margin: 0 1px;
  line-height: 1.5;
  border-radius: 2px;
  color: var(--color-inline-code-fg);
  background-color: var(--color-inline-code-bg);
  border: 1px solid #e1e4e5;
}

a code { color: var(--color-link); }
.keyword, .hljs-keyword { color : var(--color-code-inline-keyword); }
.hljs-keyword { color : var(--color-code-keyword); }
.hljs-type { color : var(--color-code-type-id); }
.hljs-string { color : var(--color-code-string); }
.hljs-number { color : var(--color-code-number); }
.hljs-literal { color : var(--color-code-literal); }
.hljs-comment { color : var(--color-code-comment); font-style: italic; }

/* Module and package lists

   Allowing indent on wrap with the anchor makes all this quite convoluted.
   Is there a better way ? */

.modules, .packages { list-style-type: none; margin-left: -2ch; }
.modules li, .packages li { padding-left: 2ch; text-indent: -2ch; }
.modules li a.anchor, .packages li a.anchor
{ padding-right: 0.5ch; padding-left: 2ch; }

.packages .version { font-size: var(--size-font-micro); }
.packages .synopsis { padding-left: 1ch; }

/* Package page */

h1 .version, h1 nav { font-size: var(--size-font); line-height:0 }
h1 nav { display: inline-block;
         font-family: var(--font-body);
         text-transform: capitalize; }

.package.info td:first-child { padding-right: 2ch; min-width: 13ch}
.package.info ul { list-style-type: none; display: inline; margin:0; padding:0}
.package.info li { display: inline-block; margin:0; margin-right:1ex; }
#info-authors li, #info-maintainers li { display: block; }

/* Package list page */

.by-name nav a
{ font-family: var(--font-headings);
  font-size: var(--size-font-large);
  text-transform: uppercase;
  margin-right: 1ch;
  display: inline-block; }

.by-tag ol { list-style-type: none; }
.by-tag ol.tags li { margin-left: 1ch; display: inline-block }
.by-tag td:first-child
{ font-family: var(--font-headings);
  font-size: var(--size-font-large);
  text-transform: uppercase; }

/* Media adjustments */

@media only screen and (min-width:160ch) /* and (min-height: 60rem) */
{
  :root { --size-font: 16px; } /* consider using vmin units */
}

@media only screen and (max-width:78ch)
{
  .content { padding: var(--size-line); }
  header nav:first-child .wrapper { padding: 0 var(--size-line); }
  .content > * { width: 100%; }
  pre { font-size: var(--size-font-tiny); }
}

@media print
{
  * { -webkit-print-color-adjust: exact; }
  .content nav:first-child { visibility: hidden; text-decoration: none; }
  .content { width: 100%; max-width: none; }
  .content > * { width: 100%; max-width: none; }
  header { margin-top: 0px; padding-top: 0; }
  /* odig.light with slight adjustements */
  :root
  { --color-bg: white;
    --color-bg-highlight: #CAD7EF;
    --color-fg: black;
    --color-rule: #DADBDB;
    --color-code-block-bg: #E8E8E8;
    --color-code-fg: #a53f1d;
    --color-code-comment: #747679;
    --color-code-keyword: #874aa9;
    --color-code-type-id: #a9874a;
    --color-code-string: #4aa987;
    --color-link:  #557dcc;
    --color-broken-link: #f71414; }
}

@media screen and (max-width: 980px) {
  .toc-wrapper { position: initial; margin-bottom: 20px; }
  .toc { position: static;
         width: 100%;
         margin: 30px 0 0;
         border-left: 1px solid var(--color-rule);
         border-top: 0;
         padding: 0 0 0 20px; }
}

/*
Copyright (c) 2019 The odig programmers

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/

