@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.
   odig v0.0.5 */

:root { --font-headings: "PT-Sans-Caption";
        --font-body: "PT-Sans";
        --font-mono: "DejaVu-SansMono";

        --size-font: 0.96875rem;
        --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: calc(1.25 * var(--size-font));
        --size-font-big:   calc(1.5 * var(--size-font));
        --size-font-huge:  calc(1.75 * 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;
  max-width: 120ch;
  margin: 0 auto;
  padding: calc(1.5 * var(--size-line));
  padding-top: calc(0.5 * var(--size-line)); }

.content > * { max-width: 78ch; width: 75% }
.toc
{ position: absolute;
  top: 0px; right: 0px;
  width: 20%;
  margin-left: var(--size-line);
  margin-top: calc(3 * var(--size-line));
  margin-right: var(--size-line);
  border-top: solid thin var(--color-rule); }

/* 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, h2, .content > header + dl
{ border-top: solid thin var(--color-rule); padding-top: var(--size-line);}

/* Basic markup */

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

h1 { font-size: var(--size-font-huge); }
h2 { font-size: var(--size-font-big); }
h3 { font-size: var(--size-font-large); }

h1, h2 { line-height: calc(1.5 * var(--size-line));
         padding-top: calc(0.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 { text-decoration:none; color: var(--color-link); }
a:hover { box-shadow:0 1px 0 0 var(--color-link); }
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;
 }

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

.xref-unresolved { box-shadow:0 1px 0 0 var(--color-broken-link)}

/* Table of contents */

.toc { font-size: var(--size-font-small); }
.toc a { color : var(--color-fg); }
.toc a:hover { color : var(--color-link) }
.toc ul { font-family: var(--font-headings); text-transform: uppercase;
          margin-top: var(--size-line);
          list-style-type: none; }

.toc ul ul { font-family: var(--font-body); text-transform: none;
             margin-top:0; }
.toc ul ul ul { margin-left:1.5ch }

.toc li { margin-left: 0; padding-left: 1ch; text-indent: -1ch; }
.toc > ul > li { margin-top: calc(0.25 * var(--size-half-line)) }
.toc > ul > li > ul > li:last-child { margin-bottom: var(--size-half-line) }
.toc ul ul li { margin-left: 0; padding-left: 0; }

/* 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 { padding-top: var(--size-line) } /* When there are no doc strings */

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

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

/* 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; }

/* Code and code highlighting */

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

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... */
a code { color: inherit }
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { text-transform: none; }

pre { background: var(--color-code-block-bg);
      padding-left: 0.8ch; padding-right: 0.8ch;
      margin-left: -0.8ch; margin-right: -0.8ch;
      padding-top: 1ch; padding-bottom: 1ch;
      white-space: pre-wrap;
      word-wrap: break-word; }

.keyword , .hljs-keyword { color : var(--color-code-keyword); }
.hljs-type { color : var(--color-code-type-id); }
.hljs-string { color : var(--color-code-string); }
.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: 1.125rem; } /* consider using vmin units */
}

@media only screen and (max-width:80ch)
{
  .content { padding: var(--size-line); }
  .content > * { width: 100%; }
  .toc { position: static;
         margin: 0; margin-top: var(--size-line);
         width: 100%; }
  pre { font-size: var(--size-font-tiny); }
}

@media print
{
 * { -webkit-print-color-adjust: exact; }
 .content nav:first-child { visibility: hidden }
 .content > * { width: 100%; }
 .toc { position: static; width: 100%;
        margin: 0; margin-top: var(--size-line); }

 /* 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: #16191D;
   --color-code-comment: #747679;
   --color-code-keyword: #874aa9;
   --color-code-type-id: #a9874a;
   --color-code-string: #4aa987;

   --color-link:  #557dcc;
   --color-broken-link: #f71414; }
}

/*
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.
*/
