4
5:- module(style, [page_style//0, blog_style//0]). 6:- use_module(library(http/html_write)). 7
8page_style -->
9 html(style(type('text/css'), "
10 body {
11 margin: 0;
12 font-family: Cantarell, sans-serif;
13 background: #fafafa;
14 }
15
16 #content {
17 max-width: 60rem;
18 margin: 3rem auto;
19 padding: 0 1.5rem;
20 }
21
22 h1 {
23 margin: 0 0 2rem 0;
24 font-size: 2.5rem;
25 }
26
27 table.blog_index {
28 width: 100%;
29 border-collapse: collapse;
30 font-size: 0.95rem;
31 }
32
33 table.blog_index th,
34 table.blog_index td {
35 padding: 0.4rem 0.2rem;
36 }
37
38 table.blog_index thead th {
39 border-bottom: 2px solid #222;
40 }
41
42 table.blog_index tbody tr:hover {
43 background: #f0f0f0;
44 }
45
46 table.blog_index td.date {
47 text-align: right;
48 white-space: nowrap;
49 padding-left: 1rem;
50 }
51
52 table.blog_index a {
53 text-decoration: none;
54 color: #2b3ebf;
55 }
56
57 table.blog_index a:hover {
58 text-decoration: underline;
59 }
60
61 table {
62 width: 100%;
63 border-collapse: collapse;
64 margin-top: 2rem;
65 }
66
67 th {
68 text-align: left;
69 font-size: 0.85rem;
70 color: #555;
71 font-weight: 600;
72 padding-bottom: 0.6rem;
73 }
74
75 td {
76 padding: 0.45rem 0;
77 vertical-align: top;
78 }
79
80 td.title a {
81 font-size: 1rem;
82 line-height: 1.4;
83 text-decoration: none;
84 font-family: 'Georgia', serif;
85 font-weight: 500;
86 }
87
88 td.title a:hover {
89 text-decoration: underline;
90 }
91
92 td.time {
93 font-size: 0.8rem;
94 color: #666;
95 white-space: nowrap;
96 min-width: 170px;
97 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
98 }
99
100 td.desc {
101 font-family: 'Georgia', serif;
102 font-size: 0.85rem;
103 color: #777;
104 line-height: 1.4;
105 max-width: 420px;
106 padding-left: 1.2rem;
107 font-style: italic;
108 }
109
110 #meta {
111 font-family: 'SF Mono','Menlo',monospace;
112 font-size: 0.75rem;
113 color: #777;
114
115 margin-top: 2rem;
116 padding-top: 0.9rem;
117 border-top: 1px solid #f0f0f0;
118
119 max-width: none;
120 line-height: 1.45;
121 }
122
123 #meta p {
124 margin: 0.35rem 0;
125 }
126
127 #meta strong {
128 font-weight: 600;
129 color: #555;
130 }
131
132 #meta code {
133 background: #f3f3f3;
134 padding: 0 0.2rem;
135 border-radius: 3px;
136 }
137
138 #meta a {
139 color: #222;
140 text-decoration: underline;
141 text-underline-offset: 2px;
142 text-decoration-thickness: 1px;
143 }
144
145 #meta a:hover {
146 color: #000;
147 }
148 ")).
149
150blog_style -->
151 html(style("
152 body {
153 margin: 0;
154 background: #fafafa;
155 font-family: Georgia, serif;
156 line-height: 1.55;
157 }
158
159 #content {
160 max-width: 60rem;
161 margin: 3rem auto;
162 padding: 0 1.5rem;
163 }
164
165 img.cover {
166 display: block;
167 margin: 2rem auto;
168 max-width: 100%;
169 border-radius: 4px;
170 }
171
172 h1 {
173 margin-bottom: 0.3rem;
174 font-size: 2.3rem;
175 line-height: 1.1;
176 }
177
178 h2 {
179 margin-top: 2.4rem;
180 font-size: 1.4rem;
181 }
182
183 a {
184 color: #2b3ebf;
185 }
186 "))