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