git.shemshak.org - ~bandali/bndl.org/blob - styles.css

   1 body {
   2   font-family: "Noto Sans", "Arial", sans-serif;
   3   font-size: 1em;
   4 }
   5
   6 body,
   7 html {
   8   margin: 0;
   9   height: 100%;
  10 }
  11
  12
  13
  14 #light-off {
  15   position: absolute;
  16   visibility: hidden;
  17 }
  18
  19 .light-off-button {
  20   display: block;
  21 }
  22
  23 .light-off-button,
  24 -.light-off-button-inline {
  25   color: #888888;
  26   -webkit-user-select: none;
  27   user-select: none;
  28   cursor: pointer;
  29   text-align: right;
  30 }
  31
  32 .light-off-button:hover:after,
  33 .light-off-button-inline:hover:after {
  34   color: #357edd;
  35   border-bottom: 0;
  36 }
  37
  38 .light-off:checked ~ .page .light-off-button:hover:after,
  39 .light-off:checked ~ .page .light-off-button-inline:hover:after {
  40   color: #ddddb6;
  41   border-bottom: 0;
  42 }
  43
  44 .light-off-button:after,
  45 .light-off-button-inline:after {
  46   content: "\1F4A1";
  47 }
  48
  49
  50
  51 .page {
  52   background-color: #ffffff;
  53   color: #232323;
  54   min-height: 100%;
  55 }
  56
  57 .light-off:checked ~ .page {
  58   background-color: #141414;
  59   color: #cccccc;
  60 }
  61
  62 .page:selection {
  63   background: #ddddb6;
  64 }
  65 .light-off:checked ~ .page:selection {
  66   background: #357edd;
  67 }
  68
  69 .page a {
  70   color: #357edd;
  71   text-decoration: none;
  72   border-bottom: 1px solid #a5ceff;
  73 }
  74
  75 .page a:visited {
  76   color: #888888;
  77   border-bottom: 1px solid #cccccc;
  78 }
  79
  80 .page a:hover {
  81   color: #357edd;
  82   border-bottom: 1px solid #357edd;
  83 }
  84
  85 .light-off:checked ~ .page a {
  86   color: #ddddb6;
  87   border-bottom: 1px solid #aaaa96;
  88 }
  89
  90 .light-off:checked ~ .page a:visited {
  91   color: #888888;
  92   border-bottom: 1px solid #444444;
  93 }
  94
  95 .light-off:checked ~ .page a:hover {
  96   color: #ddddb6;
  97   border-bottom: 1px solid #ddddb6;
  98 }
  99
 100
 101
 102 .announcement {
 103   color: #000000;
 104   background-color: #eeeeee;
 105   text-align: center;
 106   width: 100%;
 107   margin: 0;
 108 }
 109
 110 .light-off:checked ~ .page .announcement {
 111   color: #ffffff;
 112   background-color: #000000;
 113 }
 114
 115 .announcement__text {
 116   font-size: 1.2em;
 117   padding: 2em 1em;
 118 }
 119
 120 .page .announcement a,
 121 .page .announcement a:visited,
 122 .page .announcement a:hover {
 123   color: #000000;
 124   border-bottom: 1px solid #888888;
 125 }
 126
 127 .light-off:checked ~ .page .announcement a,
 128 .light-off:checked ~ .page .announcement a:visited,
 129 .light-off:checked ~ .page .announcement a:hover {
 130   color: #ffffff;
 131   border-bottom: 1px solid #888888;
 132 }
 133
 134
 135
 136 .header,
 137 .footer {
 138   color: #888888;
 139   padding: 2em 1em 1em 1em;
 140   margin: 0 auto;
 141   max-width: 32em;
 142 }
 143
 144 .footer a {
 145   color: #888888;
 146   border-bottom: 1px solid #cccccc;
 147 }
 148
 149 .header__left {
 150   width: 50%;
 151   float: left;
 152   text-align: left;
 153 }
 154
 155 .header__right {
 156   width: 50%;
 157   float: right;
 158   text-align: right;
 159 }
 160
 161
 162
 163 .article {
 164   clear: both;
 165   line-height: 1.6em;
 166   margin: 0 auto;
 167   padding: 2em 1em;
 168   max-width: 32em;
 169 }
 170
 171 .article h1,
 172 .article h2 {
 173   line-height: 1em;
 174   font-weight: 700;
 175   letter-spacing: -0.03em;
 176   word-spacing: -0.03em;
 177 }
 178
 179 .article h1 {
 180   font-size: 2.8em;
 181   margin-top: 1em;
 182 }
 183
 184 .article h2 {
 185   font-size: 1.2em;
 186   margin-top: 3em;
 187 }
 188
 189 .article p {
 190   margin: 1em 0;
 191 }
 192
 193 .article li code,
 194 .article p code {
 195   font-weight: 700;
 196 }
 197
 198 .article p img {
 199   margin: 1em 0;
 200   width: 100%;}
 201
 202 .article hr {
 203   border: none;
 204   margin-top: 4em;
 205 }
 206 .article ul {
 207   padding: 0;
 208 }
 209
 210 .article ul li {
 211   list-style: none;
 212 }
 213
 214 .article li {
 215   margin: 0.5em 0;
 216 }
 217
 218 .article table {
 219   width: 100%;
 220   margin: 2em 0;
 221 }
 222
 223 .article li em a {
 224 font-size: 0.7em;
 225   border-radius: 0.3em;
 226   padding: 0.3em;
 227   vertical-align: middle;
 228   margin: 0 0.5em;
 229   font-style: normal;
 230 }
 231
 232 .article li em a {
 233   border: 1px solid #a5ceff;
 234 }
 235
 236 .article li em a:visited {
 237   border: 1px solid #888888;
 238 }
 239
 240 .article li em a:hover {
 241   border: 1px solid #357edd;
 242 }
 243
 244 .light-off:checked ~ .page li em a {
 245   color: #aaaa96;
 246   border: 1px solid #aaaa96;
 247 }
 248
 249 .light-off:checked ~ .page li em a:visited {
 250   color: #888888;
 251   border: 1px solid #888888;
 252 }
 253
 254 .light-off:checked ~ .page li em a:hover {
 255   color: #ddddb6;
 256   border: 1px solid #ddddb6;
 257 }
 258
 259
 260
 261 .article .picture a,
 262 .article .quote a,
 263 .light-off:checked ~ .page .picture a,
 264 .light-off:checked ~ .page .quote a {
 265   border: 0;
 266 }
 267
 268 .article .picture__avatar {
 269   margin: 0;
 270   height: 6em;
 271   width: 6em;
 272   border-radius: 6em;
 273 }
 274
 275 .article .quote {
 276   padding-bottom: 0.4em;
 277 }
 278
 279 .article .quote__avatar {
 280   height: 2em;
 281   width: 2em;
 282   border: 1px solid #888888;
 283   border-radius: 2em;
 284   margin: 0 0.4em 0 0; vertical-align: middle;
 285 }
 286
 287 .article .quote__name,
 288 .article .quote__text {
 289   vertical-align: middle;
 290   font-style: italic;
 291 }
 292
 293
 294
 295 .article code,
 296 .article pre {
 297   font-family: "Menlo", "DejaVu Sans Mono", monospace;
 298   font-size: 0.9em;
 299   line-height: 1.5em;
 300   margin: 0;
 301 }
 302
 303 .article pre {
 304   background-color: #eeeeee;
 305   color: #232323;
 306   margin: 0 -1em;
 307   overflow-x: auto;
 308   padding: 1em;
 309   word-wrap: normal;
 310 }
 311
 312 .light-off:checked ~ .page .article pre {
 313   background-color: #000000;
 314   color: #cccccc;
 315 }