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         height: 600px;
 299 }
 300
 301 .latest h2 {
 302         font-size: 16pt;
 303         margin-top: 0;
 304 }
 305
 306 .latest-scroller {
 307         max-height: 600px;
 308         padding: 12px;
 309         overflow-y: auto;
 310 }
 311
 312 .latest-posts {
 313         display: table-cell;
 314         border: 2px solid #E6E6E6;
 315         color: #4C4C4C;
 316         width: 850px;
 317 }
 318
 319 .latest-posts .record {
 320         font-size: 12pt;
 321         margin: 10px 0;
 322 }
 323
 324 .latest-tags {
 325         display: table-cell;
 326         border: 2px solid #E6E6E6;
 327         background-color: #FAE3FC;
 328         line-height: 2em;
 329         width: 480px;
 330 }
 331
 332 .latest-tags a {
 333         margin: 0 0.75em;
 334 }
 335
 336 @media screen and (min-width: 1400px) {
 337         .latest { width: 1340px; }
 338 }
 339
 340 @media screen and (max-width: 1100px) {
 341         .latest { display: block; }
 342         .latest-posts {
 343                 display: block;
 344                 width: auto;
 345                 margin-right: 0;
 346                 overflow: auto;
 347                 height: auto;
 348         }
 349         .latest-tags { display: block; width: auto; }
 350 }
 351
 352 .author {
 353         font-weight: bold;
 354 }
 355
 356 .quote {
 357         border-left: 2px solid blue;
 358         padding-left: 6px;
 359         margin-left: 2px;
 360 }
 361
 362 .blerg-dialog {
 363         position: fixed;
 364         width: 300px;
 365         padding: 8px;
 366 }
 367
 368 .blerg-dialog h2 {
 369         font-size: 14pt;
 370         margin: 0;
 371 }
 372
 373 .blerg-dialog .onyx-groupbox {
 374         margin: 8px 0;
 375 }
 376
 377 .blerg-dialog .onyx-button {
 378         display: block;
 379         margin: 8px 0 0 0;
 380         width: 100%;
 381 }
 382
 383 .blerg-dialog .onyx-input {
 384         width: 100%;
 385         color: white;
 386 }
 387
 388 .blerg-dialog .onyx-focused > .onyx-input {
 389         color: black;
 390 }
 391
 392 .blerg-error {
 393         color: red;
 394         font-weight: bold;
 395 }
 396
 397 table.help td {
 398         padding: 2pt 8pt;
 399 }
 400
 401 footer {
 402         clear: both;
 403         margin: 15pt;
 404         font-size: small;
 405         color: #333;
 406 }