mirror of
https://github.com/c-cube/tiny_httpd.git
synced 2025-12-06 03:05:29 -05:00
334 lines
11 KiB
CSS
334 lines
11 KiB
CSS
@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. */
|
|
|
|
/* 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; }
|
|
|
|
/* Basic geometry */
|
|
|
|
: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-font-mono-ratio: 0.865;
|
|
--size-line-ratio: 1.5;
|
|
--size-line: calc(var(--size-line-ratio) * var(--size-font));
|
|
--size-half-line: calc(0.5 * var(--size-line));
|
|
--size-fourth-line: calc(0.25 * var(--size-line)); }
|
|
|
|
.odoc { background-color: var(--color-bg);
|
|
color: var(--color-fg);
|
|
font-size: var(--size-font);
|
|
font-family: var(--font-body), sans-serif;
|
|
font-weight: 400;
|
|
line-height: var(--size-line);
|
|
text-align: left;
|
|
display: grid;
|
|
margin: 0 auto;
|
|
max-width: 130ch;
|
|
grid-template-columns: minmax(50ch,76ch) minmax(23ch,1fr);
|
|
grid-column-gap: calc(2 * var(--size-line));
|
|
grid-template-areas: "nav nav"
|
|
"header toc"
|
|
"content toc";
|
|
padding: calc(1.5 * var(--size-line));
|
|
padding-top: calc(0.5 * var(--size-line)); }
|
|
|
|
.odoc-nav { grid-area: nav; }
|
|
.odoc-preamble { grid-area: header; }
|
|
.odoc-content { grid-area: content; margin: 0 }
|
|
.odoc-toc
|
|
{ grid-area: toc;
|
|
margin-top: var(--size-line);
|
|
border-top: solid thin var(--color-rule); }
|
|
|
|
/* 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) /* Basically mobile */
|
|
{
|
|
.odoc
|
|
{ padding: var(--size-line);
|
|
grid-template-columns: auto;
|
|
grid-template-rows: none;
|
|
grid-template-areas: "nav"
|
|
"header"
|
|
"toc"
|
|
"content"; }
|
|
.odoc-toc { margin: 0; margin-top: var(--size-line); }
|
|
pre { font-size: var(--size-font-tiny); }
|
|
}
|
|
|
|
@media print
|
|
{
|
|
* { -webkit-print-color-adjust: exact; }
|
|
.odoc-nav { visibility: hidden }
|
|
.odoc-toc { 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; }
|
|
}
|
|
|
|
/* Block level markup */
|
|
|
|
header > * + *, div > * + *, details > * + *
|
|
{ margin-top: var(--size-half-line); }
|
|
|
|
ul + * , ol + * { margin-top: 0; }
|
|
ul, ol { margin-top: var(--size-fourth-line);
|
|
margin-bottom: var(--size-fourth-line);
|
|
list-style-position: outside; }
|
|
|
|
li *:first-child, li ol, li ul { margin-top: 0; }
|
|
|
|
ul { list-style-type: square; }
|
|
ul > li { margin-left: 2.25ch; }
|
|
ol > li { margin-left: 2ch; }
|
|
ol li::marker
|
|
{ font-family: var(--font-headings), sans-serif;
|
|
font-size: var(--size-font-small); }
|
|
|
|
img
|
|
{ display: block;
|
|
margin-top: var(--size-half-line);
|
|
margin-bottom: var(--size-half-line); }
|
|
|
|
/* Headings and horizontal rulers */
|
|
|
|
h1, h2, .odoc-content > *:first-child
|
|
{ border-top: solid thin var(--color-rule);
|
|
padding-top: calc(0.75 * var(--size-line));
|
|
margin-top: var(--size-line); }
|
|
|
|
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, h2 { line-height: calc(1.5 * var(--size-line)); }
|
|
h1 { font-size: var(--size-font-huge); }
|
|
h2 { font-size: var(--size-font-big); }
|
|
h3 { font-size: var(--size-font-large); }
|
|
|
|
/* Phrasing content */
|
|
|
|
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; }
|
|
|
|
/* 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);
|
|
overflow-wrap: anywhere; }
|
|
|
|
code span span { white-space: nowrap } /* Do not break these units */
|
|
|
|
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;
|
|
overflow-wrap: break-word; }
|
|
|
|
.arrow { white-space: nowrap }
|
|
.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; }
|
|
|
|
/* 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 */
|
|
|
|
.odoc-toc { font-size: var(--size-font-small); }
|
|
.odoc-toc a { color : var(--color-fg); }
|
|
.odoc-toc a:hover { color : var(--color-link) }
|
|
.odoc-toc ul
|
|
{ font-family: var(--font-headings); text-transform: uppercase;
|
|
margin-top: var(--size-line);
|
|
list-style-type: none; }
|
|
|
|
.odoc-toc ul ul
|
|
{ font-family: var(--font-body); text-transform: none; margin-top:0; }
|
|
|
|
.odoc-toc ul ul ul { margin-left:1.5ch }
|
|
.odoc-toc li { margin-left: 0; padding-left: 1ch; text-indent: -1ch; }
|
|
.odoc-toc > ul > li { margin-top: calc(0.25 * var(--size-half-line)) }
|
|
.odoc-toc > ul > li > ul > li:last-child
|
|
{ margin-bottom: var(--size-half-line) }
|
|
|
|
.odoc-toc ul ul li { margin-left: 0; padding-left: 0; }
|
|
|
|
/* Module structure items */
|
|
|
|
.odoc-spec { padding-bottom: var(--size-fourth-line); }
|
|
.spec { margin-top: 0; }
|
|
.spec-doc { margin-top:0; padding-left: 1ch; }
|
|
.spec-doc > *:first-child { margin-top: 0 }
|
|
|
|
/* Indent on wrap */
|
|
.spec, .spec td:first-child { padding-left: 4ch; text-indent: -4ch }
|
|
.spec td.field { padding-left: 6ch }
|
|
|
|
.spec .def-doc .comment-delim + * { margin-top: 0 }
|
|
.spec .def-doc .comment-delim /* make them invisible yet copy-pastable */
|
|
{ position: absolute; width: 1px; height: 1px; overflow: hidden; }
|
|
|
|
/* 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. */
|
|
.spec.type { padding-left: 0; text-indent: 0 }
|
|
.spec.type > a.anchor
|
|
{ padding-left: 1ch; padding-right: 1ch; /* values from a.anchor */ }
|
|
.spec li > a.anchor, .spec > a.anchor
|
|
{ padding-right: 0.5ch; padding-left: 2ch; }
|
|
|
|
.spec ol { margin:0; list-style-type: none; }
|
|
.spec li { margin-left: 0; padding-left: 4ch; text-indent: -4ch }
|
|
.spec li.record.field { margin-left: 2ch }
|
|
|
|
.spec .def-doc { display: inline-block }
|
|
.spec .def-doc { padding-left: /* 4 + 3 */ 7ch; }
|
|
.spec .def-doc p { margin-left: -4ch; text-indent: 0 }
|
|
|
|
.odoc-include summary { cursor: pointer }
|
|
|
|
/* Package, module and @tag lists
|
|
|
|
Allowing indent on wrap with the anchor makes all this quite convoluted.
|
|
Is there a better way ? */
|
|
|
|
.packages, .modules, .at-tags { list-style-type: none; margin-left: -2ch; }
|
|
.packages li, .modules li, .at-tags li { padding-left: 2ch; text-indent: -2ch; }
|
|
.modules li a.anchor, .packages li a.anchor
|
|
{ padding-right: 0.5ch; padding-left: 2ch; }
|
|
|
|
.synopsis { padding-left: 1ch; }
|
|
.version { font-size: var(--size-font-micro); }
|
|
.at-tag { text-transform : capitalize }
|
|
|
|
/* 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 index 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; }
|
|
|
|
/*
|
|
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.
|
|
*/
|