Use separated css file

2 files changed, 24 insertions, 25 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6e08109..9b8ab89 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,31 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 {{ partial "html-meta.html" . -}}
 <title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ .Site.Title }}</title>
-<style type="text/css">
-body{margin:16px auto;max-width:677px;padding:0 10px;color:#333;line-height:1.6}
-h1{line-height:2;font-size:160%}
-h2{line-height:1.6;font-size:120%}
-h3,h4,h5,h6{line-height:1.2;font-size:100%}
-header{margin:0;padding:0;border-bottom:1px solid #999;line-height:1}
-footer{margin:0;padding:10px 0;border-top:1px solid #999;line-height:1;text-align:center}
-p,div,table,ul,ol{margin:10px 0}
-img{margin:10px auto;width:90%;max-width:600px;padding:0 10px;height:auto;display:block}
-hr{border:none;border-top:1px dashed #999;color:#fff;background-color:#fff;height:1px}
-a{color:#00f;word-wrap:break-word}
-a:visited{color:#009}
-a:hover{color:#f00}
-header a,header a:visited,footer a,footer a:visited,h1 a,h1 a:visited,h2 a,h2 a:visited,h3 a,h3 a:visited,h4 a,h4 a:visited,h5 a,h5 a:visited,h6 a,h6 a:visited{text-decoration:none;color:#333}
-header a:hover,footer a:hover,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{text-decoration:none;color:#f00}
-nav{padding:10px 0;text-align:right}
-nav a{padding-left:15px}
-table{border-collapse:collapse}
-th,td{border:1px solid gray;padding:2px 5px}
-code{border:1px dotted #999;background-color:#f0f0f0;padding:1px 2px;line-height:200%;word-wrap:break-word}
-pre{border:1px solid #999;background-color:#f0f0f0;padding:5px;overflow:auto;max-height:500px}
-pre code{border:0;background:none;padding:0}
-ul.pagination{list-style-type:none;text-align:center}
-li.page-item{display:inline;padding-right:15px}
-</style>
+<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}/css/main.css">
 {{ with .Site.Params.favicon -}}
 <link rel="icon" href="{{ . }}" type="image/x-icon">
 {{ end -}}
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..9e0b74c
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,23 @@
+body{margin:16px auto;max-width:677px;padding:0 10px;color:#333;line-height:1.6}
+h1{line-height:2;font-size:160%}
+h2{line-height:1.6;font-size:120%}
+h3,h4,h5,h6{line-height:1.2;font-size:100%}
+header{margin:0;padding:0;border-bottom:1px solid #999;line-height:1}
+footer{margin:0;padding:10px 0;border-top:1px solid #999;line-height:1;text-align:center}
+p,div,table,ul,ol{margin:10px 0}
+img{margin:10px auto;width:90%;max-width:600px;padding:0 10px;height:auto;display:block}
+hr{border:none;border-top:1px dashed #999;color:#fff;background-color:#fff;height:1px}
+a{color:#00f;word-wrap:break-word}
+a:visited{color:#009}
+a:hover{color:#f00}
+header a,header a:visited,footer a,footer a:visited,h1 a,h1 a:visited,h2 a,h2 a:visited,h3 a,h3 a:visited,h4 a,h4 a:visited,h5 a,h5 a:visited,h6 a,h6 a:visited{text-decoration:none;color:#333}
+header a:hover,footer a:hover,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{text-decoration:none;color:#f00}
+nav{padding:10px 0;text-align:right}
+nav a{padding-left:15px}
+table{border-collapse:collapse}
+th,td{border:1px solid gray;padding:2px 5px}
+code{border:1px dotted #999;background-color:#f0f0f0;padding:1px 2px;line-height:200%;word-wrap:break-word}
+pre{border:1px solid #999;background-color:#f0f0f0;padding:5px;overflow:auto;max-height:500px}
+pre code{border:0;background:none;padding:0}
+ul.pagination{list-style-type:none;text-align:center}
+li.page-item{display:inline;padding-right:15px}