hologram/01.basic/css/common.css at gh-pages · codegrid/hologram · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/*doc
---
title: heading
name: heading
category: block
---

見出しです。見出しの解説等をここに書きます。見出しです。見出しの解説等をここに書きます。見出しです。見出しの解説等をここに書きます。見出しです。見出しの解説等をここに書きます。見出しです。見出しの解説等をここに書きます。見出しです。見出しの解説等をここに書きます。

* この見出しはページに一回しか登場しません
* 箇条書きのリストが作れます

見出しです。こんなふうに解説を書きます。

1. 番号付きリストもかけます
2. 番号付きリストもかけます
3. 番号付きリストもかけます

## 以下は通常のHTMLとして書き出されます

<div class="heading">
  <div class="subText">見出しの補足見出しの補足</div>
  <h2 class="mainText">彼は背後にひそかな足音を聞いた。それはあまり良い意味を</h2>
</div>

## 以下はコードハイライトされて書き出されます

```html
<div class="heading">
  <div class="subText">見出しの補足見出しの補足</div>
  <h2 class="mainText">彼は背後にひそかな足音を聞いた。それはあまり良い意味を</h2>
</div>
```

*/

.heading {
  border: 1px solid #7f8c58;
  padding: 10px;
  color: #fff;
  background: #97a66c;
}
.heading .subText {
  font-size: 12px;
  padding: 0 0 8px;
  margin: 0;
}
.heading .mainText {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}


/*doc
---
title: textSet
name: textSet
category: block
---

テキストのセットです。`p`が繰り返されます。

## 以下は通常のHTMLとして書き出されます

<div class="textSet">
  <p>彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。</p>
  <p>彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。</p>
  <p>彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。</p>
</div>

## 以下はコードハイライトされて書き出されます

```html
<div class="textSet">
  <p>彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。</p>
  <p>彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。</p>
  <p>彼は背後にひそかな足音を聞いた。それはあまり良い意味を示すものではない。誰がこんな夜更けに、しかもこんな街灯のお粗末な港街の狭い小道で彼をつけて来るというのだ。</p>
</div>
```

*/

.textSet {
  border-top: 2px solid #986b39;
  border-bottom: 2px solid #986b39;
  padding: 20px 20px 10px;
  overflow: hidden;
  background: #fff;
}
.textSet p {
  padding: 0 0 10px;
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
}