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 }
  28
  29 .blerg-header .logo {
  30         float: left;
  31         margin-right: 10px;
  32 }
  33
  34 .blerg-header h1 {
  35         margin: 4px 0 0 0;
  36         font-size: 65px;
  37         text-shadow: black 0px 2px;
  38 }
  39
  40 .blerg-header a {
  41         color: inherit;
  42         text-decoration: none;
  43 }
  44
  45 .blerg-header a:hover {
  46         text-decoration: underline;
  47 }
  48
  49 .blerg-header h2 {
  50         margin: 0;
  51         font-size: 28px;
  52         text-shadow: black 0px 1px;
  53 }
  54
  55 .blerg-controls {
  56         float: right;
  57         position: relative;
  58         width: 50%;
  59         margin-top: 8px;
  60         margin-right: 8px;
  61         font-size: large;
  62         text-align: right;
  63         height: 114px;
  64 }
  65
  66 .blerg-controls-toolbar {
  67         position: absolute;
  68         right: 0;
  69         bottom: 0;
  70 }
  71
  72 .blerg-controls-toolbar .onyx-button {
  73         margin-left: 4pt;
  74         font-size: 14pt;
  75 }
  76
  77 .feed-button.new {
  78         background-color: #E4C010;
  79 }
  80
  81 .spew-button {
  82         color: #333;
  83         background-color: #0D0;
  84         font-weight: bold;
  85 }
  86
  87 .spew-button::after {
  88         content: " ▼";
  89 }
  90
  91 .spew-button.active::after {
  92         content: " ▲";
  93 }
  94
  95 h2 {
  96         font-size: 20pt;
  97         margin-bottom: 28pt;
  98 }
  99
 100 h1, h2, h3 {
 101         font-family: "Alte Haas Grotesk Bold", sans-serif;
 102 }
 103
 104 .blerg-main {
 105         padding: 15pt 15pt 20pt 15pt;
 106 }
 107
 108 .blerg-main h2 {
 109         margin: 8pt 0;
 110 }
 111
 112 .blerg-post {
 113         padding: 20pt 20pt 16pt 20pt;
 114 }
 115
 116 .blerg-post h2 {
 117         font-size: 14pt;
 118         margin: 0;
 119 }
 120
 121 .blerg-post .buttons {
 122         text-align: right;
 123 }
 124
 125 .blerg-post .buttons .onyx-button {
 126         margin-left: 4pt;
 127         height: 0.4in;
 128         width: 1in;
 129 }
 130
 131 .blerg-post .onyx-input-decorator {
 132         display: block;
 133         border-color: #CCC;
 134         margin: 4pt 0;
 135 }
 136
 137 .blerg-post .onyx-textarea {
 138         display: block;
 139         width: 100%;
 140 }
 141
 142 .blerg-post .content {
 143         font-size: 14pt;
 144         font-family: sans-serif;
 145         height: 51pt;
 146 }
 147
 148 .login {
 149         display: inline-block;
 150         width: 200px;
 151 }
 152
 153 .login .onyx-button {
 154         width: 100%;
 155         margin-top: 4pt;
 156 }
 157
 158 .login .enyo-input {
 159         width: 100%;
 160 }
 161
 162 .blerg-user-controls {
 163         font-size: 14pt;
 164         text-align: right;
 165 }
 166
 167 .blerg-user-controls a {
 168         color: inherit;
 169         text-decoration: none;
 170         margin-left: 4pt;
 171 }
 172
 173 .blerg-user-controls a:hover {
 174         text-decoration: underline;
 175 }
 176
 177
 178 .record {
 179         margin: 8pt 0 24pt 0;
 180         font-size: 14pt;
 181 }
 182
 183 .record p {
 184         margin-bottom: 0;
 185 }
 186
 187 .record .info {
 188         color: #8F8F8F;
 189         font-size: small;
 190         font-style: italic;
 191 }
 192
 193 .record .info a {
 194         color: #8F8F8F;
 195 }
 196
 197 #navigation {
 198         font-size: small;
 199         color: #8F8F8F;
 200         text-align: right;
 201 }
 202
 203 .latest h2 {
 204         font-size: 16pt;
 205 }
 206
 207 .latest-tags {
 208         text-align: center;
 209         line-height: 2em;
 210 }
 211
 212 .latest-tags a {
 213         margin: 0 0.75em;
 214 }
 215
 216 .latest-posts {
 217         height: 184pt;
 218         overflow: hidden;
 219 }
 220
 221 .latest-posts .record {
 222         font-size: 12pt;
 223         margin: 8pt 0;
 224 }
 225
 226 .author {
 227         font-weight: bold;
 228 }
 229
 230 #usercontrols {
 231         font-weight: bold;
 232 }
 233
 234 .quote {
 235         border-left: 2px solid blue;
 236         padding-left: 6px;
 237         margin-left: 2px;
 238 }
 239
 240 .blerg-dialog {
 241         width: 300px;
 242         padding: 8px;
 243 }
 244
 245 .blerg-dialog h2 {
 246         font-size: 14pt;
 247         margin: 0;
 248 }
 249
 250 .blerg-dialog .onyx-groupbox {
 251         margin: 8px 0;
 252 }
 253
 254 .blerg-dialog .onyx-button {
 255         display: block;
 256         margin: 8px 0 0 0;
 257         width: 100%;
 258 }
 259
 260 .blerg-dialog .onyx-input {
 261         width: 100%;
 262 }