From 9d738a297cde19687eaef8b60941cd7c50eb3074 Mon Sep 17 00:00:00 2001
From: hylom <hylom@users.sourceforge.jp>
Date: Thu, 31 May 2018 20:02:18 +0900
Subject: [PATCH] css: rebuild CSS done

---
 src/newslash_web/css/newslash.less                 |  3 --
 src/newslash_web/css/newslash/base.less            | 13 +++++-
 src/newslash_web/css/newslash/default.less         | 14 +++---
 src/newslash_web/css/newslash/layout.less          | 50 +++++++++-------------
 .../templates/common/account_bar.html.tt2          |  2 +-
 src/newslash_web/templates/search/search.html.tt2  |  8 ++--
 6 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/newslash_web/css/newslash.less b/src/newslash_web/css/newslash.less
index aafd709b..5cf1ba88 100644
--- a/src/newslash_web/css/newslash.less
+++ b/src/newslash_web/css/newslash.less
@@ -1,8 +1,5 @@
 /* newslash.less */
 
-/* reset margin and padding */
-* { margin: 0; padding: 0; }
-
 @import "newslash/base.less";
 @import "newslash/default.less";
 @import "newslash/alert.less";
diff --git a/src/newslash_web/css/newslash/base.less b/src/newslash_web/css/newslash/base.less
index afcd561d..9a60d9e1 100644
--- a/src/newslash_web/css/newslash/base.less
+++ b/src/newslash_web/css/newslash/base.less
@@ -1,5 +1,6 @@
 /* base styles for mix-in and extend */
 
+
 /* bgcolor: backgound color */
 @background-color: #fbf9f7;
 @primary-color: #8b4513;
@@ -25,6 +26,9 @@
 @component-horizontal-margin: 8px;
 @component-vertical-margin: 8px;
 
+@mobile-horizontal-margin: 0;
+@mobile-vertical-margin: 8px;
+
 /* deprecated
 
 @text-color-weak1: #5e2f0d;
@@ -47,7 +51,6 @@
 @comment-property-text-color: #997a49;
 */
 
-
 .glyph {
   position: relative;
   top: 1px;
@@ -61,15 +64,21 @@
 }
 
 
+/**** media query shorthand ****/
+@mobile: ~"only screen and (max-width: 480px)";
+
+
 /**** list style ****/
 .flatten {
     list-style: none;
     display: inline-block;
-    margin: 0 0.5em 0 0;
+    margin-right: 0.5em;
+    margin-left: 0;
 }
 
 .unstyled {
     list-style: none;
+    margin-left: 0;
 }    
 
 /**** Text size ***/
diff --git a/src/newslash_web/css/newslash/default.less b/src/newslash_web/css/newslash/default.less
index cd6a7104..c1d95c47 100644
--- a/src/newslash_web/css/newslash/default.less
+++ b/src/newslash_web/css/newslash/default.less
@@ -1,5 +1,8 @@
 /* default styles */
 
+/**** reset margin and padding ****/
+* { margin: 0; padding: 0; }
+
 body {
     line-height: 180%;
     background-color: @background-color;
@@ -13,6 +16,10 @@ h1, h2, h3, h4, h5, h6 {
     font-size: 100%;
 }
 
+li {
+    margin-left: 1.5em;
+}
+
 p {
     margin-bottom: 1em;
 }
@@ -28,10 +35,7 @@ a:hover {
 }
 
 @media(max-width:480px) {
-    span.abbrevable, div.abbrevable {
-        display: none;
-    }
-    .btn.abbrevable {
-        .btn-text {display: none;}
+    .abbrevable  {
+        display: none !important;
     }
 }
\ No newline at end of file
diff --git a/src/newslash_web/css/newslash/layout.less b/src/newslash_web/css/newslash/layout.less
index 96bb720b..0b3d7510 100644
--- a/src/newslash_web/css/newslash/layout.less
+++ b/src/newslash_web/css/newslash/layout.less
@@ -4,70 +4,62 @@
 
 .main-contents {
     margin: 0 @component-horizontal-margin;
+    @media @mobile { margin: 0 @mobile-horizontal-margin; }
 }
 
 .sidebar {
     width: @sidebar-width;
     margin: 0 @component-horizontal-margin;
-}
-@media(max-width:480px) {
-    .sidebar {
+    @media @mobile {
         width: 100%;
+        margin: 0 @mobile-horizontal-margin;
     }
 }
 
 .timeline-wrapper {
     display: flex;
+    @media @mobile { display: block; }
+
     .main-contents {
         flex: 1 1 auto;
         order: 0;
+        @media @mobile { flex: none; }
     }
     .sidebar {
         flex: 0 0 auto;
         order: 1;
-    }
-}
-@media(max-width:480px) {
-    .timeline-wrapper {
-        display: block;
-        .main-contents {
-            flex: none;
-        }
-        .sidebar {
-            flex: none;
-        }
+        @media @mobile { flex: none; }
     }
 }
 
+/* 
+  Google's content match ads doesn't display properly in flex,
+  so now use old-style margin layout
+*/
 .article-wrapper {
     margin: 0 @component-horizontal-margin;
+    @media @mobile { margin: 0 @mobile-horizontal-margin }
     .content-wrapper {
         float: left;
         width: 100%;
         margin-right: -(@sidebar-width + @component-horizontal-margin * 2);
+        @media @mobile {
+            float: none;
+            margin-right: inherit;
+        }
+
         .main-contents {
             margin-right: (300px + @component-horizontal-margin * 3) ;
             paddding: 0;
+            @media @mobile { margin-right: inherit; }
         }
     }
     .sidebar {
         float: left;
+        @media @mobile { float: none; }
     }
-}
-@media(max-width:480px) {
-    .article-wrapper {
-        margin: 0 @component-horizontal-margin;
-        .content-wrapper {
-            float: none;
-            width: 100%;
-            margin-right: inherit;
-            .main-contents {
-                margin-right: inherit;
-            }
-        }
-        .sidebar {
-            float: none;
-        }
+    .related {
+        @media @mobile { display: none; }
     }
 }
     
diff --git a/src/newslash_web/templates/common/account_bar.html.tt2 b/src/newslash_web/templates/common/account_bar.html.tt2
index d0fe0b55..241521e2 100644
--- a/src/newslash_web/templates/common/account_bar.html.tt2
+++ b/src/newslash_web/templates/common/account_bar.html.tt2
@@ -25,7 +25,7 @@
       </ul>
     </li>
     [%- ELSE -%]
-    <li><a href="https://srad.jp/my/newuser">アカウント作成</a></li>
+    <li class="abbrevable"><a href="https://srad.jp/my/newuser">アカウント作成</a></li>
     [%- IF noscript -%]<li><a href="/login?rpath=[% the_path %]">ログイン</a></li>[%- END -%]
     <li><a data-toggle="modal" data-target="#login-modal" href="#">ログイン</a></li>
     [%- END -%]
diff --git a/src/newslash_web/templates/search/search.html.tt2 b/src/newslash_web/templates/search/search.html.tt2
index 44db651c..15e425db 100644
--- a/src/newslash_web/templates/search/search.html.tt2
+++ b/src/newslash_web/templates/search/search.html.tt2
@@ -82,16 +82,16 @@
         [%- IF prev_page -%]
         <span class="prev">
           [%- IF start == item_per_page %]
-          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">≪前</a>
+          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">前</a>
           [%- ELSE %]
-          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">≪最初</a>
-          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start - item_per_page %]">≪前</a>
+          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">最初</a>
+          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start - item_per_page %]">前</a>
           [%- END %]
         </span>
         [%- END -%]
         [%- IF next_page -%]
         <span class="next">
-          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start + item_per_page %]">次≫</a>
+          <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start + item_per_page %]">次</a>
         </span>
         [%- END -%]
       </div>
-- 
2.11.0