/* newslash.less */
-/* reset margin and padding */
-* { margin: 0; padding: 0; }
-
@import "newslash/base.less";
@import "newslash/default.less";
@import "newslash/alert.less";
/* base styles for mix-in and extend */
+
/* bgcolor: backgound color */
@background-color: #fbf9f7;
@primary-color: #8b4513;
@component-horizontal-margin: 8px;
@component-vertical-margin: 8px;
+@mobile-horizontal-margin: 0;
+@mobile-vertical-margin: 8px;
+
/* deprecated
@text-color-weak1: #5e2f0d;
@comment-property-text-color: #997a49;
*/
-
.glyph {
position: relative;
top: 1px;
}
+/**** 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 ***/
/* default styles */
+/**** reset margin and padding ****/
+* { margin: 0; padding: 0; }
+
body {
line-height: 180%;
background-color: @background-color;
font-size: 100%;
}
+li {
+ margin-left: 1.5em;
+}
+
p {
margin-bottom: 1em;
}
}
@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
.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; }
}
}
</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 -%]
[%- 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>