From 72d7c1db2e419187ec85444df881de4a0ad4c547 Mon Sep 17 00:00:00 2001
From: hylom <hylom@users.sourceforge.jp>
Date: Mon, 12 Sep 2016 22:16:06 +0900
Subject: [PATCH] update template and css

---
 dev/newslash_web/css/main.less                 |   3 +
 dev/newslash_web/css/main/article.less         | 102 +++++++++++++++++++++++++
 dev/newslash_web/css/main/colors.less          |  16 ++++
 dev/newslash_web/css/main/main.less            |   9 +--
 dev/newslash_web/templates/index/root.html.tt2 |   6 +-
 5 files changed, 128 insertions(+), 8 deletions(-)
 create mode 100644 dev/newslash_web/css/main/article.less
 create mode 100644 dev/newslash_web/css/main/colors.less

diff --git a/dev/newslash_web/css/main.less b/dev/newslash_web/css/main.less
index fbd6df4d..3e14125b 100644
--- a/dev/newslash_web/css/main.less
+++ b/dev/newslash_web/css/main.less
@@ -1 +1,4 @@
+@import "main/colors.less";
 @import "main/main.less";
+@import "main/article.less";
+
diff --git a/dev/newslash_web/css/main/article.less b/dev/newslash_web/css/main/article.less
new file mode 100644
index 00000000..0b8749f0
--- /dev/null
+++ b/dev/newslash_web/css/main/article.less
@@ -0,0 +1,102 @@
+// LESS for article
+
+@import "colors.less";
+
+article {
+    border: 1px solid @border-color-inactive;
+    padding: 6px 6px 0;
+    margin: 10px 4px;
+    box-shadow: 0 0 1px @border-color-inactive;
+    header {
+	margin-bottom: 10px;
+
+	h1 {
+	    font-size: 125%;
+	    background: @article-header-background;
+	    border: 1px solid @article-header-border;
+	    line-height: 110%;
+	    margin: 0;
+	    padding: 6px;
+
+	    a, a:visited {
+		   color: @article-header-text-color;
+		   text-decoration: none;
+	       }
+    
+	    a:hover, a:visited:hover {
+//			 color: @visited-text-color;
+			 text-decoration: underline;
+		     }
+	}
+
+	.property {
+	    font-size: 80%;
+	    color:@property-text-color;
+	    padding: 6px;
+	}
+    }
+
+    .body {
+	padding: 6px;
+	line-height: 150%;
+	font-size: 93%;
+    }
+
+    footer {
+	.link-to-story {
+	    text-align: center;
+	    margin-bottom: 6px;
+	    a {
+		display: inline-block;
+		font-size: 85%;
+		font-weight: bold;
+		color: @button-text-color;
+		background: @button-background;
+		border: 1px solid @button-text-color;
+		padding: 4px 8px;
+		border-radius: 10px;
+		-moz-border-radius: 10px;
+		-webkit-border-radius: 10px;
+	    }
+	}
+	.tag-bar {
+	    border-top: 1px solid @border-color-inactive;
+	    .tags {
+		display: block;
+		font-size: 90%;
+		color: @tags-color;
+		li {
+		    display: inline-block;
+		}
+	    }
+	}
+    }
+}
+
+.contents-text {
+    word-break: break-all;
+    word-wrap: break-word;
+    line-height: 150%;
+
+    p, ul, ol, blockquote, pre, code {
+	margin-bottom: 1.2em;
+	line-height: 150%;
+    }
+
+    a { text-decoration: underline; }
+    a:hover { color: #C33; }
+    ul {
+	list-style-type: disc;
+	padding-left: 1.5em;
+    }
+    ol {
+	list-style-type: decimal;
+	padding-left: 1.5em;
+    }
+    div.quote,
+    blockquote {
+	border-left: 3px solid #DDDDDD;
+	padding-left: 0.75em;
+	margin-left: 0;
+    }
+}
diff --git a/dev/newslash_web/css/main/colors.less b/dev/newslash_web/css/main/colors.less
new file mode 100644
index 00000000..b00a0327
--- /dev/null
+++ b/dev/newslash_web/css/main/colors.less
@@ -0,0 +1,16 @@
+// color definitions
+
+@background: #fbf9f7;
+@text-color: #1a150d;
+@text-color-weak1: #5e2f0d;
+@property-text-color: #775e38;
+
+@article-header-background: #e5dac9;
+@article-header-border: #e0d2bd;
+@article-header-text-color: #312718;
+
+@border-color-inactive: #e0d2bd;
+@tags-color: #997a49;
+
+@button-background: #f0eae0;
+@button-text-color: #775e38;
\ No newline at end of file
diff --git a/dev/newslash_web/css/main/main.less b/dev/newslash_web/css/main/main.less
index 8d941950..6dcac50a 100644
--- a/dev/newslash_web/css/main/main.less
+++ b/dev/newslash_web/css/main/main.less
@@ -1,6 +1,5 @@
 
-@background: #fbf9f7;
-@text-color: #1a150d;
+@import "colors.less";
 
 @sidebar-width: 300px;
 @sidebar-margin-left: 10px;
@@ -9,6 +8,9 @@
 @main-contents-margin-left: 10px;
 @main-contents-margin-right: 10px;
 
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
 body {
     background: @background;
     color: @text-color;
@@ -20,9 +22,6 @@ body {
     text-align: center;
 }
 
-article h1 {
-    
-}
 
 @main-col-offset: @sidebar-width + @sidebar-margin-right + @sidebar-margin-left;
 
diff --git a/dev/newslash_web/templates/index/root.html.tt2 b/dev/newslash_web/templates/index/root.html.tt2
index 02545e01..82063cb7 100644
--- a/dev/newslash_web/templates/index/root.html.tt2
+++ b/dev/newslash_web/templates/index/root.html.tt2
@@ -5,16 +5,16 @@
     [%- FOREACH story IN stories -%]
     <article>
       <header>
-	<h1>[% story.title %]</h1>
+	<h1><a href="/story/[% story.sid %]/">[% story.title %]</a></h1>
 	<div class="property">
 	  ストーリー by [% story.author %]
 	  [% story.time %]
 	  [% story.dept %] 部門より
 	</div>
       </header>
-      <div class="body">[% story.introtext %]</div>
+      <div class="body contents-text">[% story.introtext %]</div>
       <footer>
-	<div class="link-to-story">記事を読む</div>
+	<div class="link-to-story"><a href="/story/[% story.sid %]/">記事を読む</a></div>
 	<div class="tag-bar">
 	  <ul class="tags">
 	    [%- FOREACH topic IN story.topics -%]
-- 
2.11.0