Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

add style

  • Loading branch information...
commit 798f870f18167e93ad0fb6baa0ba8ce586cba606 1 parent 466c73d
Mark Nottingham authored April 02, 2012
1  _layouts/layout.html
@@ -5,6 +5,7 @@
5 5
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6 6
     <meta name="author" content="Your Name" />
7 7
     <title>HTAPI - {{ page.title }}</title>
  8
+    <link rel="STYLESHEET" href="/style.css" type="text/css" />
8 9
   </head>
9 10
   <body>
10 11
     <header>
338  style.css
... ...
@@ -0,0 +1,338 @@
  1
+
  2
+/* main ---------------------- */
  3
+
  4
+body {
  5
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  6
+  font-size: 0.95em;
  7
+  line-height: 1.4em;
  8
+  color: #111;
  9
+  text-rendering: optimizeLegibility;
  10
+  -moz-font-feature-settings: "liga=1,kern=1";
  11
+  -ms-font-feature-settings: "liga" 1, "kern" 1;
  12
+  text-align: left;
  13
+}
  14
+h1, h2, h3, h4, h5, h6, pre {
  15
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  16
+  font-weight: normal;
  17
+  -moz-font-feature-settings: "swsh=1,cswh=1,liga=1,kern=1";
  18
+  -ms-font-feature-settings: "swsh" 1, "cswh" 1, "liga" 1, "kern" 1;
  19
+}
  20
+h1, .subtitle {
  21
+  font-weight: normal;
  22
+}
  23
+.example, code, pre, .spec {
  24
+  font-family: "Lucida Console", Courier, monospace;
  25
+}
  26
+
  27
+/* blocks -------------- */
  28
+
  29
+body {
  30
+  width: 820px;
  31
+  padding: 0px 36px;
  32
+  background-color: #fff;
  33
+  margin: 72px auto;
  34
+}
  35
+
  36
+
  37
+p { margin-top: .5em; }
  38
+
  39
+blockquote p, blockquote {
  40
+  margin-top: 0;
  41
+  margin-bottom: .5em;
  42
+  line-height: 1.4em;
  43
+}
  44
+
  45
+
  46
+/* width control ---------------- */
  47
+
  48
+#main {
  49
+  max-width: 600px;
  50
+}
  51
+
  52
+
  53
+/* links -------------- */
  54
+
  55
+a:link, a:visited, a:active {
  56
+  color: #303a86;
  57
+  text-decoration: none;
  58
+  background-color: transparent;
  59
+}
  60
+a:visited {
  61
+  color: #606a86;
  62
+}
  63
+a:active {
  64
+  color: #303a86;
  65
+  background-color: #acf; 
  66
+}
  67
+a.offsite:hover {
  68
+  background-color: #99A;
  69
+  color: white;
  70
+  text-decoration: none;
  71
+  border-bottom: none;
  72
+  padding: 0.2em 0;
  73
+}
  74
+
  75
+@media screen {
  76
+  a[type="application/pdf"]:after {
  77
+    content: " pdf";
  78
+    vertical-align: super;
  79
+    font-size: 0.75em;
  80
+  }
  81
+}
  82
+
  83
+img { max-width: 100%; }
  84
+
  85
+a img { border: none; }
  86
+
  87
+h1 [id]:hover:after
  88
+, h2 [id]:hover:after
  89
+, h3 [id]:hover:after
  90
+, h4 [id]:hover:after {
  91
+  content: " #" attr(id) " ";
  92
+  font-size: 75%;
  93
+  line-height: 75%;
  94
+  color: #ccc;
  95
+  text-decoration: none;
  96
+}
  97
+
  98
+/* headings -------------- */
  99
+
  100
+h1, h2, h3, h4, h5, h6 {
  101
+  color: #B50;
  102
+  background-color: transparent;
  103
+  text-transform: uppercase;
  104
+  margin: 1em 0 0 0;
  105
+  padding: 0;
  106
+  line-height: 1em;
  107
+  page-break-after: avoid;
  108
+  page-break-inside: avoid;
  109
+}
  110
+
  111
+h1 { 
  112
+  font-size: 3em;
  113
+  margin-top: 24px;
  114
+  color: #111;
  115
+  display: inline-block;
  116
+}
  117
+h2 { font-size: 1.65em; }
  118
+h3 { font-size: 1.2em; }
  119
+h4 { font-size: 1em; }
  120
+h5 { font-size: 1em; }
  121
+
  122
+h1 + p {margin-top: .5em; }
  123
+
  124
+h1 + .subtitle {
  125
+  font-size: 0.85em;
  126
+  line-height: 12pt;
  127
+  text-align: left;
  128
+  max-width: 178px;
  129
+  display: inline-block;
  130
+  margin-left: 0.5em;
  131
+}
  132
+
  133
+
  134
+
  135
+/* tables -------------- */
  136
+
  137
+table.grid th {
  138
+  font-weight: normal;
  139
+  text-align: right;
  140
+  color: white;
  141
+  background-color: #333;
  142
+  padding: 3px 6px;
  143
+}
  144
+
  145
+table.grid td {
  146
+  background-color: #d0dbe7;
  147
+  padding: 3px 6px;
  148
+}
  149
+
  150
+/* lists -------------- */
  151
+
  152
+ul {
  153
+  list-style-type: disc;
  154
+  margin: .5em 0;
  155
+  padding-left: 1.5em;
  156
+}
  157
+p + ul, div + ul {
  158
+  margin: -.5em 0 .5em 0;
  159
+}
  160
+
  161
+/* inline lists */
  162
+ul.inline { list-style-type: none; }
  163
+ul.inline li { display: inline; margin-right: 1em; white-space: nowrap}
  164
+ul.inline li:before { content: ''; }
  165
+
  166
+/* sep lists */
  167
+ul.sep li {
  168
+  list-style: none;
  169
+  border-bottom: 1px #ccc dotted;
  170
+  padding: 4pt 0pt;
  171
+  text-indent: 0;
  172
+}
  173
+ul.sep li:last-of-type {
  174
+  border-bottom: none;
  175
+}
  176
+ul.sep li:before { content: ''; }
  177
+
  178
+/* definition lists */
  179
+dt { font-weight: bold; }
  180
+dd { padding-bottom: .5em; }
  181
+
  182
+
  183
+/* other redefinitions -------------- */
  184
+
  185
+
  186
+acronym:hover, abbrev:hover { cursor: help; }
  187
+abbrev[title], acronym[title], span[title] {
  188
+  border-bottom: thin dotted;
  189
+  cursor: help;
  190
+}
  191
+
  192
+input[type='text'], textarea, select {
  193
+  border-color: black;
  194
+  border-style: solid;
  195
+  border-width: 1px;
  196
+  margin: 2px 1px;
  197
+  padding: 1px;
  198
+}
  199
+
  200
+b, strong {
  201
+  font-weight: 500;
  202
+}
  203
+
  204
+hr {
  205
+  border-style: none;
  206
+  background-color: #ddd;
  207
+  padding: 1px;
  208
+}
  209
+
  210
+
  211
+blockquote {
  212
+  border-style: solid;
  213
+  border-color: #d2dcdf;
  214
+  border-width: 0 0 0 .25em;
  215
+  padding-left: .5em;
  216
+  margin: 0.5em 1.5em;
  217
+}
  218
+
  219
+q { quotes: '\201C' '\201D' '\2018' '\2019'; }
  220
+q:before, q:after {
  221
+  font-size: 2em;
  222
+  line-height: 1px;
  223
+  position: relative;
  224
+  top: 8px;
  225
+  opacity: .7;  
  226
+}
  227
+q:before {
  228
+  content: "\201C";
  229
+  content: open-quote;
  230
+}
  231
+q:after {
  232
+  content: "\201D";
  233
+  content: close-quote;
  234
+}
  235
+
  236
+
  237
+
  238
+
  239
+/* text-based button */
  240
+.textbutton, a.textbutton:link, a.textbutton:visited, a.textbutton:active, a.textbutton:hover {
  241
+  border: 1px solid;
  242
+  border-color: #FC9 #630 #330 #F96;
  243
+  padding: 0 3px;
  244
+  font: bold 10px verdana,sans-serif;
  245
+  color: #fff;
  246
+  background: #F60;
  247
+  text-decoration: none;
  248
+}
  249
+
  250
+
  251
+.detail {
  252
+  font-size: .9em;
  253
+  page-break-inside: avoid;
  254
+}
  255
+
  256
+.warning {
  257
+  background-color: #F60;
  258
+  border: #C30 solid 1px;
  259
+  padding: 3px;
  260
+  text-align: center;
  261
+}
  262
+
  263
+.version {
  264
+  text-align: right;
  265
+  font-style: italic;
  266
+  font-size: .9em;
  267
+  margin: 0pt;
  268
+  padding-top: 12px;
  269
+  color: #999;
  270
+}
  271
+
  272
+.date {
  273
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  274
+  margin: .5em 0 -1em 0;
  275
+  color: #333;
  276
+  font-weight: bold;
  277
+}
  278
+
  279
+.example {
  280
+  font-size: .9em;
  281
+  line-height: 1.25em;
  282
+  background: #d2dcdf;
  283
+  margin: 0.25em;
  284
+  padding: .5em 1em;
  285
+  overflow: auto;
  286
+}
  287
+
  288
+.spec {
  289
+  font-size: .9em;
  290
+  margin-left: 1.2em;
  291
+  margin-right: 1.2em;
  292
+  overflow: auto;
  293
+}
  294
+
  295
+
  296
+
  297
+
  298
+
  299
+/* print -------------- */
  300
+
  301
+@media print {
  302
+  html {
  303
+    width: 100%;
  304
+    margin: 0;
  305
+    padding: 0;
  306
+  }
  307
+  body {
  308
+/*    margin: 24pt; */
  309
+    font: 12pt/14pt Palatino Linotype, palatino, Book Antiqua, serif;
  310
+  }
  311
+  #main { 
  312
+    width: 100%;
  313
+  }
  314
+  .callout {
  315
+    width: 30%;
  316
+    font-size: 1.1em;
  317
+    font-weight: 600;
  318
+    margin: 0.25em 0em 0.25em 2em;
  319
+  }
  320
+  .example, .spec {
  321
+    overflow: visible;
  322
+  }
  323
+  form, .navtop, .navigation, a.textbutton, .imgnav, .ad1, #sidebar {
  324
+    display: none;
  325
+  }
  326
+}
  327
+
  328
+
  329
+/* iPhone, Wii, etc... */
  330
+@media screen and (max-device-width: 900px) {
  331
+  #main {
  332
+    max-width: 900px;
  333
+  }
  334
+  body {
  335
+    font-size: 1.2em;
  336
+    line-height: 1.4em;
  337
+  }
  338
+}

0 notes on commit 798f870

Please sign in to comment.
Something went wrong with that request. Please try again.