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         padding: 20pt 20pt 16pt 20pt;
 183 }
 184
 185 .blerg-post h2 {
 186         font-size: 14pt;
 187         margin: 0;
 188 }
 189
 190 .blerg-post .buttons {
 191         text-align: right;
 192 }
 193
 194 .blerg-post .buttons .onyx-button {
 195         margin-left: 4pt;
 196         height: 0.4in;
 197         width: 1in;
 198 }
 199
 200 .blerg-post .onyx-input-decorator {
 201         display: block;
 202         border-color: #999;
 203         margin: 4pt 0;
 204 }
 205
 206 .blerg-post .onyx-textarea {
 207         display: block;
 208         width: 100%;
 209 }
 210
 211 .blerg-post .content {
 212         font-size: 14pt;
 213         font-family: sans-serif;
 214         height: 51pt;
 215 }
 216
 217 .login {
 218         display: inline-block;
 219         width: 200px;
 220 }
 221
 222 .login .onyx-button {
 223         width: 100%;
 224         margin-top: 4pt;
 225 }
 226
 227 .login .enyo-input {
 228         width: 100%;
 229 }
 230
 231 .blerg-user-controls {
 232         font-size: 14pt;
 233         text-align: right;
 234 }
 235
 236 .blerg-user-controls a {
 237         color: inherit;
 238         text-decoration: none;
 239         margin-left: 4pt;
 240 }
 241
 242 .blerg-user-controls a:hover {
 243         text-decoration: underline;
 244 }
 245
 246
 247 .record {
 248         margin: 8pt 0 24pt 0;
 249         font-size: 14pt;
 250 }
 251
 252 .record p {
 253         margin-bottom: 0;
 254 }
 255
 256 .record .info {
 257         color: #8F8F8F;
 258         font-size: small;
 259         font-style: italic;
 260 }
 261
 262 .record .info a {
 263         color: #8F8F8F;
 264 }
 265
 266 .record h1 {
 267         font-size: 18pt;
 268         margin: 1em 0;
 269 }
 270
 271 .record h2 {
 272         font-size: 16pt;
 273         margin: 1em 0;
 274 }
 275
 276 .record h3 {
 277         font-size: 14pt;
 278         margin: 1em 0;
 279 }
 280
 281 .record h4 {
 282         font-size: 14pt;
 283         font-weight: normal;
 284         margin: 1em 0;
 285 }
 286
 287 .record h5 {
 288         font-size: 14pt;
 289         font-weight: normal;
 290         font-style: italic;
 291         margin: 1em 0;
 292 }
 293
 294 .latest {
 295         display: table;
 296         margin: 0 auto;
 297         border-spacing: 10px;
 298 }
 299
 300 .latest h2 {
 301         font-size: 16pt;
 302         margin-top: 0;
 303 }
 304
 305 .latest-scroller {
 306         height: 600px;
 307         padding: 12px;
 308         overflow-y: auto;
 309 }
 310
 311 .latest-posts {
 312         display: table-cell;
 313         border: 2px solid #E6E6E6;
 314         color: #4C4C4C;
 315         width: 850px;
 316 }
 317
 318 .latest-posts .record {
 319         font-size: 12pt;
 320         margin: 10px 0;
 321 }
 322
 323 .latest-tags {
 324         display: table-cell;
 325         border: 2px solid #E6E6E6;
 326         background-color: #FAE3FC;
 327         line-height: 2em;
 328         width: 480px;
 329 }
 330
 331 .latest-tags a {
 332         margin: 0 0.75em;
 333 }
 334
 335 @media screen and (min-width: 1400px) {
 336         .latest { width: 1340px; }
 337 }
 338
 339 @media screen and (max-width: 1100px) {
 340         .latest {
 341                 display: block;
 342                 margin-top: 15px;
 343         }
 344         .latest-posts {
 345                 display: block;
 346                 width: auto;
 347                 margin-right: 0;
 348                 overflow: auto;
 349         }
 350         .latest-tags {
 351                 display: block;
 352                 width: auto;
 353                 margin-top: 10px;
 354         }
 355         .latest-tags .latest-scroller {
 356                 height: auto;
 357         }
 358 }
 359
 360 @media screen and (max-width: 800px) {
 361         .latest-posts, .latest-tags {
 362                 border: none;
 363                 background-color: inherit;
 364         }
 365         .latest-scroller {
 366                 height: auto;
 367                 padding: 0;
 368         }
 369 }
 370
 371 .author {
 372         font-weight: bold;
 373 }
 374
 375 .quote {
 376         border-left: 2px solid blue;
 377         padding-left: 6px;
 378         margin-left: 2px;
 379 }
 380
 381 .blerg-dialog {
 382         position: fixed;
 383         width: 300px;
 384         padding: 8px;
 385 }
 386
 387 .blerg-dialog h2 {
 388         font-size: 14pt;
 389         margin: 0;
 390 }
 391
 392 .blerg-dialog .onyx-groupbox {
 393         margin: 8px 0;
 394 }
 395
 396 .blerg-dialog .onyx-button {
 397         display: block;
 398         margin: 8px 0 0 0;
 399         width: 100%;
 400 }
 401
 402 .blerg-dialog .onyx-input {
 403         width: 100%;
 404         color: white;
 405 }
 406
 407 .blerg-dialog .onyx-focused > .onyx-input {
 408         color: black;
 409 }
 410
 411 .blerg-error {
 412         color: red;
 413         font-weight: bold;
 414 }
 415
 416 table.help td {
 417         padding: 2pt 8pt;
 418 }
 419
 420 footer {
 421         clear: both;
 422         margin: 15pt;
 423         font-size: small;
 424         color: #333;
 425 }