style.css

   1 @charset "utf-8";
   2
   3 /* Variables for light & dark modes. */
   4
   5 :root {
   6         --nano-content-bg-color: #fff;
   7         --nano-content-fg-color: #440077;
   8         --nano-inverted-bg-color: #407;
   9         --nano-inverted-fg-color: #fff;
  10         --nano-a-color: #407;
  11         --nano-a-visited-color: #51188E;
  12         --nano-a-active-color: #F00;
  13         --nano-a-inverted-color: #fff;
  14 }
  15
  16 @media (prefers-color-scheme: dark) {
  17 :root {
  18         --nano-content-bg-color: #111;
  19         --nano-content-fg-color: #cc88ff;
  20         --nano-inverted-bg-color: #9200ff;
  21         --nano-inverted-fg-color: #fff;
  22         --nano-a-color: #c8f;
  23         --nano-a-visited-color: #b7f;
  24         --nano-a-active-color: #F00;
  25         --nano-a-inverted-color: #fff;
  26 }
  27 }
  28
  29 body {
  30         color: var(--nano-content-fg-color);
  31         background-color: var(--nano-content-bg-color);
  32 }
  33 .inverted {
  34         color: var(--nano-inverted-fg-color);
  35         background-color: var(--nano-inverted-bg-color);
  36 }
  37
  38 a {
  39         color: var(--nano-a-color);
  40 }
  41 a:visited {
  42         color: var(--nano-a-visited-color);
  43 }
  44 a:active {
  45         color: var(--nano-a-active-color);
  46 }
  47
  48 .inverted a {
  49         color: var(--nano-a-inverted-color);
  50 }
  51
  52 * {
  53         box-sizing: border-box;
  54 }
  55
  56 .onecolumn {
  57         float: left;
  58         width: 45%;
  59         padding: 5%;
  60 }
  61
  62 table {
  63         border-spacing: 0px;
  64         border-collapse: separate;
  65 }
  66
  67 table#homepage {
  68         padding-top: 3em;
  69         padding-bottom: 3em;
  70 }
  71
  72 table#top td,
  73 div#bottom .indented {
  74         padding-left: 1ch;
  75         padding-right: 1ch;
  76 }
  77
  78 table#docs,
  79 table#download {
  80         width: 80%;
  81 }
  82
  83 div#bottom {
  84         display: flex;
  85         flex-wrap: wrap;
  86 }
  87 div#bottom span.menuitem {
  88         flex-basis: 25%;
  89         flex-grow: 1;
  90         flex-shrink: 0;
  91         line-height: 1em;
  92         white-space: nowrap;
  93 }
  94
  95 /* Mobile (i.e. phones) */
  96 @media only screen and (max-width: 768px) {
  97 body {
  98         margin: 0px;
  99 }
 100
 101 blockquote {
 102         margin: 1em 0 1em 0;
 103 }
 104
 105 table#homepage {
 106         font-size: x-small;
 107 }
 108
 109 table#top td,
 110 div#bottom .indented {
 111         padding-left: 0.5ch;
 112         padding-right: 0.5ch;
 113 }
 114
 115 div#bottom span.menuitem {
 116         font-size: large;
 117         line-height: inherit;
 118 }
 119
 120 table#docs,
 121 table#download {
 122         width: 100%;
 123 }
 124
 125 #screenshots ul {
 126         padding-left: 0;
 127 }
 128 }
 129
 130 @media only screen and (max-width: 600px) {
 131 div#bottom span.menuitem {
 132         flex-basis: 50%;
 133         line-height: 1.5em;
 134 }
 135 }