... | ... |
@@ -40,10 +40,9 @@ legend{ color:#000; } |
40 | 40 |
|
41 | 41 |
|
42 | 42 |
#boxA { |
43 |
- padding:20px; |
|
44 |
-} |
|
45 |
- |
|
46 |
-#boxB { |
|
43 |
+ border-bottom:1px solid #AAAAAA; |
|
44 |
+ padding-bottom:10px; |
|
45 |
+ margin-bottom:10px; |
|
47 | 46 |
} |
48 | 47 |
|
49 | 48 |
#boxC { |
... | ... |
@@ -70,6 +69,19 @@ body { |
70 | 69 |
margin-right:-250px; |
71 | 70 |
position:relative; |
72 | 71 |
z-index:2; |
72 |
+ font-size:15px; |
|
73 |
+ line-height:1.3em; |
|
74 |
+} |
|
75 |
+ |
|
76 |
+#boxB a { |
|
77 |
+ color:blue; |
|
78 |
+ text-decoration:none; |
|
79 |
+} |
|
80 |
+#boxB a:hover { |
|
81 |
+ color:blue; |
|
82 |
+} |
|
83 |
+#boxB a:visited { |
|
84 |
+ color:blue; |
|
73 | 85 |
} |
74 | 86 |
|
75 | 87 |
#boxB p { |
... | ... |
@@ -77,10 +89,16 @@ body { |
77 | 89 |
z-index:2; |
78 | 90 |
} |
79 | 91 |
|
80 |
-#boxC p, #boxC .para, #boxC h3, #boxC h2 { |
|
92 |
+#boxC p, #boxC h3, #boxC h2 { |
|
81 | 93 |
margin-left:250px; |
82 | 94 |
} |
83 | 95 |
|
96 |
+#boxC .para { |
|
97 |
+ margin-left:270px; |
|
98 |
+ text-indent:1em; |
|
99 |
+ margin-bottom:10px; |
|
100 |
+} |
|
101 |
+ |
|
84 | 102 |
|
85 | 103 |
#boxC { |
86 | 104 |
width:100%; |
... | ... |
@@ -92,6 +110,8 @@ body { |
92 | 110 |
#boxD { |
93 | 111 |
width:100%; |
94 | 112 |
clear:left; |
113 |
+ text-align:center; |
|
114 |
+ padding-top:10px; |
|
95 | 115 |
} |
96 | 116 |
|
97 | 117 |
|
... | ... |
@@ -99,3 +119,29 @@ h1 { |
99 | 119 |
font-weight:bold; |
100 | 120 |
font-size:20px; |
101 | 121 |
} |
122 |
+ |
|
123 |
+h2 { |
|
124 |
+ font-weight:bold; |
|
125 |
+ margin-bottom:10px; |
|
126 |
+ text-align:center; |
|
127 |
+ font-size:20px; |
|
128 |
+} |
|
129 |
+ |
|
130 |
+.chapter h3 { |
|
131 |
+ font-size:17px; |
|
132 |
+ font-weight:bold; |
|
133 |
+ margin-bottom:10px; |
|
134 |
+} |
|
135 |
+ |
|
136 |
+em { |
|
137 |
+ font-size:14px; |
|
138 |
+ color:#008B8B; |
|
139 |
+ padding-right:2px; |
|
140 |
+ |
|
141 |
+} |
|
142 |
+ |
|
143 |
+.chapter { |
|
144 |
+ font-size:18px; |
|
145 |
+ line-height:1.3em; |
|
146 |
+ color:#222222; |
|
147 |
+} |
... | ... |
@@ -3,8 +3,15 @@ |
3 | 3 |
my $op = param('op') // ''; |
4 | 4 |
my $book_id = param('book-id'); |
5 | 5 |
|
6 |
- my $books = $dbi->model('book')->select->all; |
|
6 |
+ my $books = $dbi->model('book')->select(['id', 'short_name'])->all; |
|
7 | 7 |
|
8 |
+ my $content; |
|
9 |
+ if ($book_id) { |
|
10 |
+ $content = $dbi->model('book')->select( |
|
11 |
+ 'content', |
|
12 |
+ where => {id => $book_id} |
|
13 |
+ )->value; |
|
14 |
+ } |
|
8 | 15 |
%> |
9 | 16 |
|
10 | 17 |
|
... | ... |
@@ -22,12 +29,12 @@ |
22 | 29 |
<button style="width:50px;padding:2px;">検索</button> |
23 | 30 |
</div> |
24 | 31 |
<div style="margin-bottom:10px;"> |
25 |
- <a href="" style="color:blue">聖書</a> |
|
32 |
+ <a href="<%= url_for('/') %>" style="color:blue">聖書</a> |
|
26 | 33 |
</div> |
27 | 34 |
<div style="border:1px solid gray;width:218px;height:400px;overflow:auto;padding:5px"> |
28 | 35 |
<ul style="list-style-type:none"> |
29 | 36 |
% for my $book (@$books) { |
30 |
- <li><a class="book" id="<%= "book-$book->{id}" %>" href="<%= url_for->query('book-id' => $book->{id}) %>"><%= $book->{name} %></a></li> |
|
37 |
+ <li><a class="book" id="<%= "book-$book->{id}" %>" href="<%= url_for->query('book-id' => $book->{id}) %>"><%= $book->{short_name} %></a></li> |
|
31 | 38 |
% } |
32 | 39 |
</ul> |
33 | 40 |
</div> |
... | ... |
@@ -36,15 +43,18 @@ |
36 | 43 |
<div id="boxC"> |
37 | 44 |
<p> |
38 | 45 |
% if ($book_id) { |
39 |
- %= include "/include/$book_id"; |
|
40 |
- % } else { |
|
41 |
- bbaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa |
|
46 |
+ %== $content |
|
42 | 47 |
% } |
43 | 48 |
</p> |
44 | 49 |
</div> |
45 | 50 |
|
46 | 51 |
|
47 | 52 |
<div id="boxD"> |
48 |
- フッタ |
|
53 |
+ <div style="border-top:1px solid #AAAAAA;padding-top:10px;"> |
|
54 |
+ This site is create by |
|
55 |
+ <a href="http://d.hatena.ne.jp/perlcodesample">Perl</a> + |
|
56 |
+ <a href="http://d.hatena.ne.jp/perlcodesample/20140319/1395203665">Mojolicious</a>. |
|
57 |
+ Auther is <a href="https://twitter.com/yukikimoto2">Yuki kimoto</a>. |
|
58 |
+ </div> |
|
49 | 59 |
</div> |
50 | 60 |
</div> |