mandocsite

an attempt to use mandoc(1) as a site framework
Download | Log | Files | Refs

style.css (2199B)

      1 :root {
      2   --header: #FBFADA;
      3   --body: #BFBFBF;
      4   --bodyalt: #808080;
      5   --background: #020100;
      6   --backgroundt: #3033320f;
      7   --background-content: #02020280;
      8   --accent: #000302;
      9   --grid: #171813;
     10   --grid-width: 2px;
     11   --grid-size: 60px;
     12   --grid-speed: 10s;
     13 }
     14 
     15 html::before {
     16   content: '';
     17   z-index: -1;
     18   width: calc(100% + var(--grid-size));
     19   height: calc(100% + var(--grid-size));
     20   top: calc(-1 * var(--grid-size));
     21   left: calc(-1 * var(--grid-size));
     22   pointer-events: none;
     23   position: fixed;
     24   background-size: var(--grid-size) var(--grid-size);
     25   background-image:
     26     linear-gradient(to right, var(--grid) var(--grid-width), transparent var(--grid-width)),
     27     linear-gradient(to bottom, var(--grid) var(--grid-width), var(--background) var(--grid-width));
     28   animation: bg-scroll var(--grid-speed) linear infinite;
     29 }
     30 
     31 @keyframes bg-scroll {
     32   to {
     33     transform: translate(var(--grid-size), var(--grid-size));  
     34   }
     35 }
     36 
     37 #SYNOPSIS.Sh::before{
     38     content: '';
     39     display: block;
     40     width: 500px;
     41     height: 169px;
     42     background-image: url('./lurk.png');
     43     margin: 0.75em auto;
     44 }
     45 
     46 table.head, table.foot { width: 100%; }
     47 td.head-rtitle, td.foot-os { text-align: right; }
     48 td.head-vol { text-align: center; }
     49 div.Pp { margin: 1ex 0ex; }
     50 div.Nd, div.Bf, div.Op { display: inline; }
     51 span.Pa, span.Ad { font-style: italic; }
     52 span.Ms { font-weight: bold; }
     53 dl.Bl-diag > dt { font-weight: bold; }
     54 code.Nm, code.Fl, code.Cm, code.Ic, code.In, code.Fd, code.Fn,
     55 code.Cd { font-weight: bold; font-family: inherit; }
     56 
     57 div.head, div.foot { display: flex; justify-content: space-between; }
     58 .head-ltitle, .foot-date { flex: 1; }
     59 .head-vol { flex: 0 1 auto; text-align: center; }
     60 .head-rtitle, .foot-os { flex: 1; text-align: right; }
     61 
     62 html { font-family: monospace; line-height: 1.25em; }
     63 body { max-width: 70ch; margin: 1em auto; padding: 0 1ch;}
     64 table { border-collapse: collapse; }
     65 table.Nm code.Nm { padding-right: 1ch; }
     66 table.foot { margin-top: 1em; }
     67 
     68 html { background-color: var(--background); color: var(--body); font-size: 16px; }
     69 a { color: var(--header); }
     70 a:visited { color: var(--header); }
     71 a.permalink { color: var(--header); text-decoration: none; }
     72 h1.Sh { font-size: 1.5em;}