newslash
Revisão | 9d738a297cde19687eaef8b60941cd7c50eb3074 (tree) |
---|---|
Hora | 2018-05-31 20:02:18 |
Autor | hylom <hylom@user...> |
Commiter | hylom |
css: rebuild CSS done
@@ -1,8 +1,5 @@ | ||
1 | 1 | /* newslash.less */ |
2 | 2 | |
3 | -/* reset margin and padding */ | |
4 | -* { margin: 0; padding: 0; } | |
5 | - | |
6 | 3 | @import "newslash/base.less"; |
7 | 4 | @import "newslash/default.less"; |
8 | 5 | @import "newslash/alert.less"; |
@@ -1,5 +1,6 @@ | ||
1 | 1 | /* base styles for mix-in and extend */ |
2 | 2 | |
3 | + | |
3 | 4 | /* bgcolor: backgound color */ |
4 | 5 | @background-color: #fbf9f7; |
5 | 6 | @primary-color: #8b4513; |
@@ -25,6 +26,9 @@ | ||
25 | 26 | @component-horizontal-margin: 8px; |
26 | 27 | @component-vertical-margin: 8px; |
27 | 28 | |
29 | +@mobile-horizontal-margin: 0; | |
30 | +@mobile-vertical-margin: 8px; | |
31 | + | |
28 | 32 | /* deprecated |
29 | 33 | |
30 | 34 | @text-color-weak1: #5e2f0d; |
@@ -47,7 +51,6 @@ | ||
47 | 51 | @comment-property-text-color: #997a49; |
48 | 52 | */ |
49 | 53 | |
50 | - | |
51 | 54 | .glyph { |
52 | 55 | position: relative; |
53 | 56 | top: 1px; |
@@ -61,15 +64,21 @@ | ||
61 | 64 | } |
62 | 65 | |
63 | 66 | |
67 | +/**** media query shorthand ****/ | |
68 | +@mobile: ~"only screen and (max-width: 480px)"; | |
69 | + | |
70 | + | |
64 | 71 | /**** list style ****/ |
65 | 72 | .flatten { |
66 | 73 | list-style: none; |
67 | 74 | display: inline-block; |
68 | - margin: 0 0.5em 0 0; | |
75 | + margin-right: 0.5em; | |
76 | + margin-left: 0; | |
69 | 77 | } |
70 | 78 | |
71 | 79 | .unstyled { |
72 | 80 | list-style: none; |
81 | + margin-left: 0; | |
73 | 82 | } |
74 | 83 | |
75 | 84 | /**** Text size ***/ |
@@ -1,5 +1,8 @@ | ||
1 | 1 | /* default styles */ |
2 | 2 | |
3 | +/**** reset margin and padding ****/ | |
4 | +* { margin: 0; padding: 0; } | |
5 | + | |
3 | 6 | body { |
4 | 7 | line-height: 180%; |
5 | 8 | background-color: @background-color; |
@@ -13,6 +16,10 @@ h1, h2, h3, h4, h5, h6 { | ||
13 | 16 | font-size: 100%; |
14 | 17 | } |
15 | 18 | |
19 | +li { | |
20 | + margin-left: 1.5em; | |
21 | +} | |
22 | + | |
16 | 23 | p { |
17 | 24 | margin-bottom: 1em; |
18 | 25 | } |
@@ -28,10 +35,7 @@ a:hover { | ||
28 | 35 | } |
29 | 36 | |
30 | 37 | @media(max-width:480px) { |
31 | - span.abbrevable, div.abbrevable { | |
32 | - display: none; | |
33 | - } | |
34 | - .btn.abbrevable { | |
35 | - .btn-text {display: none;} | |
38 | + .abbrevable { | |
39 | + display: none !important; | |
36 | 40 | } |
37 | 41 | } |
\ No newline at end of file |
@@ -4,70 +4,62 @@ | ||
4 | 4 | |
5 | 5 | .main-contents { |
6 | 6 | margin: 0 @component-horizontal-margin; |
7 | + @media @mobile { margin: 0 @mobile-horizontal-margin; } | |
7 | 8 | } |
8 | 9 | |
9 | 10 | .sidebar { |
10 | 11 | width: @sidebar-width; |
11 | 12 | margin: 0 @component-horizontal-margin; |
12 | -} | |
13 | -@media(max-width:480px) { | |
14 | - .sidebar { | |
13 | + @media @mobile { | |
15 | 14 | width: 100%; |
15 | + margin: 0 @mobile-horizontal-margin; | |
16 | 16 | } |
17 | 17 | } |
18 | 18 | |
19 | 19 | .timeline-wrapper { |
20 | 20 | display: flex; |
21 | + @media @mobile { display: block; } | |
22 | + | |
21 | 23 | .main-contents { |
22 | 24 | flex: 1 1 auto; |
23 | 25 | order: 0; |
26 | + @media @mobile { flex: none; } | |
24 | 27 | } |
25 | 28 | .sidebar { |
26 | 29 | flex: 0 0 auto; |
27 | 30 | order: 1; |
28 | - } | |
29 | -} | |
30 | -@media(max-width:480px) { | |
31 | - .timeline-wrapper { | |
32 | - display: block; | |
33 | - .main-contents { | |
34 | - flex: none; | |
35 | - } | |
36 | - .sidebar { | |
37 | - flex: none; | |
38 | - } | |
31 | + @media @mobile { flex: none; } | |
39 | 32 | } |
40 | 33 | } |
41 | 34 | |
35 | +/* | |
36 | + Google's content match ads doesn't display properly in flex, | |
37 | + so now use old-style margin layout | |
38 | +*/ | |
42 | 39 | .article-wrapper { |
43 | 40 | margin: 0 @component-horizontal-margin; |
41 | + @media @mobile { margin: 0 @mobile-horizontal-margin } | |
44 | 42 | .content-wrapper { |
45 | 43 | float: left; |
46 | 44 | width: 100%; |
47 | 45 | margin-right: -(@sidebar-width + @component-horizontal-margin * 2); |
46 | + @media @mobile { | |
47 | + float: none; | |
48 | + margin-right: inherit; | |
49 | + } | |
50 | + | |
48 | 51 | .main-contents { |
49 | 52 | margin-right: (300px + @component-horizontal-margin * 3) ; |
50 | 53 | paddding: 0; |
54 | + @media @mobile { margin-right: inherit; } | |
51 | 55 | } |
52 | 56 | } |
53 | 57 | .sidebar { |
54 | 58 | float: left; |
59 | + @media @mobile { float: none; } | |
55 | 60 | } |
56 | -} | |
57 | -@media(max-width:480px) { | |
58 | - .article-wrapper { | |
59 | - margin: 0 @component-horizontal-margin; | |
60 | - .content-wrapper { | |
61 | - float: none; | |
62 | - width: 100%; | |
63 | - margin-right: inherit; | |
64 | - .main-contents { | |
65 | - margin-right: inherit; | |
66 | - } | |
67 | - } | |
68 | - .sidebar { | |
69 | - float: none; | |
70 | - } | |
61 | + .related { | |
62 | + @media @mobile { display: none; } | |
71 | 63 | } |
72 | 64 | } |
73 | 65 |
@@ -25,7 +25,7 @@ | ||
25 | 25 | </ul> |
26 | 26 | </li> |
27 | 27 | [%- ELSE -%] |
28 | - <li><a href="https://srad.jp/my/newuser">アカウント作成</a></li> | |
28 | + <li class="abbrevable"><a href="https://srad.jp/my/newuser">アカウント作成</a></li> | |
29 | 29 | [%- IF noscript -%]<li><a href="/login?rpath=[% the_path %]">ログイン</a></li>[%- END -%] |
30 | 30 | <li><a data-toggle="modal" data-target="#login-modal" href="#">ログイン</a></li> |
31 | 31 | [%- END -%] |
@@ -82,16 +82,16 @@ | ||
82 | 82 | [%- IF prev_page -%] |
83 | 83 | <span class="prev"> |
84 | 84 | [%- IF start == item_per_page %] |
85 | - <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">≪前</a> | |
85 | + <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">前</a> | |
86 | 86 | [%- ELSE %] |
87 | - <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">≪最初</a> | |
88 | - <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start - item_per_page %]">≪前</a> | |
87 | + <a href="/search?q=[% query_words %][% target_token %][% sort_token %]">最初</a> | |
88 | + <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start - item_per_page %]">前</a> | |
89 | 89 | [%- END %] |
90 | 90 | </span> |
91 | 91 | [%- END -%] |
92 | 92 | [%- IF next_page -%] |
93 | 93 | <span class="next"> |
94 | - <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start + item_per_page %]">次≫</a> | |
94 | + <a href="/search?q=[% query_words %][% target_token %][% sort_token %]&start=[% start + item_per_page %]">次</a> | |
95 | 95 | </span> |
96 | 96 | [%- END -%] |
97 | 97 | </div> |