www/css/blerg.css

   1 /* Blerg is (C) 2011 The Dominion of Awesome, and is distributed under a
   2  * BSD-style license.  Please see the COPYING file for details.
   3  */
   4 @font-face {
   5         font-family: "Alte Haas Grotesk Bold";
   6         src: url("/fonts/AlteHaasGroteskBold.ttf");
   7 }
   8
   9 body {
  10         margin: 0;
  11         font-family: sans-serif;
  12         background-color: white;
  13 }
  14
  15 a.ref {
  16         color: #404040;
  17 }
  18
  19 a > img {
  20         border: 0;
  21 }
  22
  23 .blerg-header {
  24         background-color: #1E1E1E;
  25         color: white;
  26         padding: 8px 8px 16px 8px;
  27         position: relative;
  28 }
  29
  30 .blerg-header .logo {
  31         float: left;
  32         margin-right: 10px;
  33 }
  34
  35 .blerg-header h1 {
  36         margin: 4px 0 0 0;
  37         font-size: 65px;
  38         text-shadow: black 0px 2px;
  39 }
  40
  41 .blerg-header h1 a {
  42         text-decoration: none;
  43 }
  44
  45 .blerg-header h1 a:hover {
  46         text-decoration: underline;
  47 }
  48
  49 .blerg-header a {
  50         color: inherit;
  51 }
  52
  53 .blerg-header h2 {
  54         margin: 0;
  55         font-size: 28px;
  56         text-shadow: black 0px 1px;
  57 }
  58
  59 .blerg-header .onyx-input, .blerg-header .onyx-textarea {
  60         color: white;
  61 }
  62
  63 .blerg-header .onyx-focused > .onyx-input, .blerg-header .onyx-focused > .onyx-textarea {
  64         color: black;
  65 }
  66
  67 .blerg-title {
  68         float: left;
  69         width: 35%;
  70 }
  71
  72 .blerg-controls {
  73         float: right;
  74         margin-top: 8px;
  75         margin-right: 8px;
  76         font-size: large;
  77         text-align: right;
  78 }
  79
  80 .blerg-controls-toolbar {
  81         position: absolute;
  82         right: 0;
  83         top: 69pt;
  84         margin-bottom: 16px;
  85         margin-right: 16px;
  86 }
  87
  88 .blerg-controls-toolbar .onyx-button {
  89         margin-left: 4pt;
  90         font-size: 14pt;
  91 }
  92
  93 @media screen and (max-width: 800px) {
  94         .blerg-title {
  95                 float: none;
  96                 width: auto;
  97         }
  98
  99         .blerg-controls {
 100                 float: none;
 101                 text-align: left;
 102                 margin: 1em 0 0 0;
 103         }
 104
 105         .blerg-controls-greeting {
 106                 margin: 1em 8px;
 107         }
 108
 109         .blerg-controls-toolbar {
 110                 position: static;
 111                 margin: 1em 8px;
 112         }
 113
 114         .blerg-controls-toolbar .onyx-button {
 115                 display: block;
 116                 width: 100%;
 117                 margin: 8px 0;
 118         }
 119
 120         .blerg-controls .login {
 121                 display: block;
 122                 width: auto;
 123                 margin: 1em 0;
 124         }
 125 }
 126
 127 .feed-button.new {
 128         background-color: #E4C010;
 129 }
 130
 131 .spew-button {
 132         color: #333;
 133         background-color: #0D0;
 134         font-weight: bold;
 135 }
 136
 137 .spew-button::after {
 138         content: " ▼";
 139 }
 140
 141 .spew-button.active::after {
 142         content: " ▲";
 143 }
 144
 145 h2 {
 146         font-size: 20pt;
 147         margin-bottom: 28pt;
 148 }
 149
 150 h1, h2, h3 {
 151         font-family: "Alte Haas Grotesk Bold", sans-serif;
 152 }
 153
 154 .blerg-main {
 155         padding: 15pt 15pt 0 15pt;
 156 }
 157
 158 .signup-button {
 159         font-size: 40pt;
 160         padding: 1em;
 161         background-color: #C0F;
 162         color: #F88;
 163 }
 164
 165 @media screen and (max-width: 800px) {
 166         .signup-button {
 167                 font-size: 20pt;
 168         }
 169 }
 170
 171 @media screen and (max-width: 400px) {
 172         .signup-button {
 173                 font-size: 14pt;
 174         }
 175 }
 176
 177 .blerg-main h2 {
 178         margin: 8pt 0;
 179 }
 180
 181 .blerg-post {
 182         position: fixed;
 183         top: 0;
 184         left: 0;
 185         bottom: 0;
 186         right: 0;
 187         background-color: #1E1E1E;
 188 }
 189
 190 .blerg-post h2 {
 191         font-size: 14pt;
 192         margin: 12pt 12pt 8pt 12pt;
 193 }
 194
 195 .blerg-post .content-decorator {
 196         display: block;
 197         border-color: #999;
 198         margin: 8pt 12pt 12pt;
 199         height: 35%;
 200 }
 201
 202 .blerg-post .content {
 203         display: block;
 204         width: 100%;
 205         height: 100%;
 206         font-size: 14pt;
 207         font-family: sans-serif;
 208 }
 209
 210 .blerg-post .toolbar .switcher {
 211         color: black;
 212         background-color: white;
 213         height: 60px;
 214         padding: 12pt 8pt 4pt 12pt;
 215 }
 216
 217 .blerg-post .toolbar .buttons {
 218         height: 60px;
 219         padding: 0 12pt 0 60px;
 220         text-align: right;
 221         vertical-align: top;
 222         background-image: url(/images/corner.svg);
 223         background-position: left bottom;
 224         background-repeat: no-repeat;
 225         background-size: auto 100%;
 226 }
 227
 228 .blerg-post .toolbar .buttons .onyx-button {
 229         margin-left: 4pt;
 230         height: 0.4in;
 231         width: 1in;
 232 }
 233
 234 .blerg-post .bottom-panel {
 235         height: 45%;
 236         color: black;
 237         background-color: white;
 238 }
 239
 240 .blerg-post .bottom-panel > div {
 241         padding: 12pt;
 242 }
 243
 244 .login {
 245         display: inline-block;
 246         width: 200px;
 247 }
 248
 249 .login .onyx-button {
 250         width: 100%;
 251         margin-top: 4pt;
 252 }
 253
 254 .login .enyo-input {
 255         width: 100%;
 256 }
 257
 258 .blerg-user-controls {
 259         font-size: 14pt;
 260         text-align: right;
 261 }
 262
 263 .blerg-user-controls a {
 264         color: inherit;
 265         text-decoration: none;
 266         margin-left: 4pt;
 267 }
 268
 269 .blerg-user-controls a:hover {
 270         text-decoration: underline;
 271 }
 272
 273
 274 .record {
 275         margin: 8pt 0 24pt 0;
 276         font-size: 14pt;
 277 }
 278
 279 .record p {
 280         margin-bottom: 0;
 281 }
 282
 283 .record .info {
 284         color: #8F8F8F;
 285         font-size: small;
 286         font-style: italic;
 287 }
 288
 289 .record .info a {
 290         color: #8F8F8F;
 291 }
 292
 293 .record h1 {
 294         font-size: 18pt;
 295         margin: 1em 0;
 296 }
 297
 298 .record h2 {
 299         font-size: 16pt;
 300         margin: 1em 0;
 301 }
 302
 303 .record h3 {
 304         font-size: 14pt;
 305         margin: 1em 0;
 306 }
 307
 308 .record h4 {
 309         font-size: 14pt;
 310         font-weight: normal;
 311         margin: 1em 0;
 312 }
 313
 314 .record h5 {
 315         font-size: 14pt;
 316         font-weight: normal;
 317         font-style: italic;
 318         margin: 1em 0;
 319 }
 320
 321 .latest {
 322         display: table;
 323         margin: 0 auto;
 324         border-spacing: 10px;
 325 }
 326
 327 .latest h2 {
 328         font-size: 16pt;
 329         margin-top: 0;
 330 }
 331
 332 .latest-scroller {
 333         height: 600px;
 334         padding: 12px;
 335         overflow-y: auto;
 336 }
 337
 338 .latest-posts {
 339         display: table-cell;
 340         border: 2px solid #E6E6E6;
 341         color: #4C4C4C;
 342         width: 850px;
 343 }
 344
 345 .latest-posts .record {
 346         font-size: 12pt;
 347         margin: 10px 0;
 348 }
 349
 350 .latest-tags {
 351         display: table-cell;
 352         border: 2px solid #E6E6E6;
 353         background-color: #FAE3FC;
 354         line-height: 2em;
 355         width: 480px;
 356 }
 357
 358 .latest-tags a {
 359         margin: 0 0.75em;
 360 }
 361
 362 @media screen and (min-width: 1400px) {
 363         .latest { width: 1340px; }
 364 }
 365
 366 @media screen and (max-width: 1100px) {
 367         .latest {
 368                 display: block;
 369                 margin-top: 15px;
 370         }
 371         .latest-posts {
 372                 display: block;
 373                 width: auto;
 374                 margin-right: 0;
 375                 overflow: auto;
 376         }
 377         .latest-tags {
 378                 display: block;
 379                 width: auto;
 380                 margin-top: 10px;
 381         }
 382         .latest-tags .latest-scroller {
 383                 height: auto;
 384         }
 385 }
 386
 387 @media screen and (max-width: 800px) {
 388         .latest-posts, .latest-tags {
 389                 border: none;
 390                 background-color: inherit;
 391         }
 392         .latest-scroller {
 393                 height: auto;
 394                 padding: 0;
 395         }
 396 }
 397
 398 .author {
 399         font-weight: bold;
 400 }
 401
 402 .quote {
 403         border-left: 2px solid blue;
 404         padding-left: 6px;
 405         margin-left: 2px;
 406 }
 407
 408 .blerg-dialog {
 409         position: fixed;
 410         width: 300px;
 411         padding: 8px;
 412 }
 413
 414 .blerg-dialog h2 {
 415         font-size: 14pt;
 416         margin: 0;
 417 }
 418
 419 .blerg-dialog .onyx-groupbox {
 420         margin: 8px 0;
 421 }
 422
 423 .blerg-dialog .onyx-button {
 424         display: block;
 425         margin: 8px 0 0 0;
 426         width: 100%;
 427 }
 428
 429 .blerg-dialog .onyx-input {
 430         width: 100%;
 431         color: white;
 432 }
 433
 434 .blerg-dialog .onyx-focused > .onyx-input {
 435         color: black;
 436 }
 437
 438 .blerg-error {
 439         color: red;
 440         font-weight: bold;
 441 }
 442
 443 table.help td {
 444         padding: 2pt 8pt;
 445 }
 446
 447 footer {
 448         clear: both;
 449         margin: 15pt;
 450         font-size: small;
 451         color: #333;
 452 }