Skip to content

Commit a271b07

Browse files
FetzFetz
committed
docs: improve gh-page mobile
related issue #33
1 parent ff9dfd8 commit a271b07

File tree

1 file changed

+99
-39
lines changed

1 file changed

+99
-39
lines changed

‎src/www/index.html‎

Lines changed: 99 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,47 @@
1818
padding: 0 10px;
1919
}
2020

21+
.header {
22+
min-height: 149px;
23+
display: flex;
24+
align-items: center;
25+
overflow: hidden;
26+
width: 100%;
27+
}
28+
29+
.title {
30+
margin: 0;
31+
font-size: 2.6rem;
32+
padding-right: 149px;
33+
}
34+
35+
@media only screen and (min-width : 800px) {
36+
.header {
37+
min-height: auto;
38+
}
39+
.title {
40+
padding: 1.6rem .8rem;
41+
}
42+
}
2143

2244
/* TABS */
2345

2446
.anchor-tab {
2547
display: inline-block;
26-
margin: 0 0 -1px;
27-
padding: 15px 25px;
28-
font-weight: 600;
48+
margin: 0 0 -.08rem;
49+
padding: 2vw 2.4vw;
50+
text-decoration: none;
2951
text-align: center;
3052
color: #bbb;
31-
border: 1px solid transparent;
53+
border: .08rem solid transparent;
54+
font-size: 4.5vw;
55+
}
56+
57+
@media only screen and (min-width : 480px) {
58+
.anchor-tab {
59+
padding: .5rem .8rem;
60+
font-size: 1.2rem;
61+
}
3262
}
3363

3464
.anchor-tab:hover {
@@ -39,20 +69,22 @@
3969
main > a:nth-last-of-type(1),
4070
.anchor-tab:target {
4171
color: #555;
42-
border: 1px solid #ddd;
43-
border-top: 2px solid orange;
44-
border-bottom: 1px solid #fff;
72+
border: .08rem solid #ddd;
73+
border-top: .2rem solid orange;
74+
border-bottom: .08rem solid #fff;
75+
background: white;
4576
}
4677

4778
.anchor-tab:target ~a:nth-last-of-type(1) {
4879
color: #bbb;
49-
border: 1px solid transparent;
80+
border: .08rem solid transparent;
81+
background: transparent;
5082
}
5183

5284
.tab-section {
5385
display: none;
54-
padding: 20px 0 0;
55-
border-top: 1px solid #ddd;
86+
padding: 20px 0 40px;
87+
border-top: .08rem solid #ddd;
5688
}
5789

5890
main > section:nth-last-of-type(1),
@@ -69,18 +101,18 @@
69101

70102
/* END TABS */
71103

72-
.title {
73-
margin-top: 0;
74-
padding-top: 0.67em;
75-
}
104+
/* CODE PAGE */
76105

77106
#code-example-1,
78107
#code-example-2 {
79108
display: block;
80109
width: 100%;
81110
height: 8rem;
82111
}
83-
112+
113+
/* END CODE PAGE */
114+
115+
/* TRY ONLINE PAGE */
84116
#input {
85117
display: block;
86118
width: 100%;
@@ -93,8 +125,23 @@
93125
height: 8rem;
94126
}
95127

96-
#analyze {
97-
margin: .375rem;
128+
/* END TRY ONLINE PAGE */
129+
130+
/* COMMON */
131+
132+
.terminal {
133+
background: #202020;
134+
color: white;
135+
padding: .4rem;
136+
}
137+
138+
.terminal:before {
139+
content: "$ ";
140+
color: #f932b8;
141+
}
142+
143+
.button {
144+
margin: 5px 0;
98145
padding: .84rem 2.14rem;
99146
font-size: .81rem;
100147
background: #2194fa;
@@ -115,11 +162,11 @@
115162
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
116163
}
117164

118-
#analyze:hover {
165+
.button:hover {
119166
background: #4abde8;
120167
}
121168

122-
#analyze:active, #analyze:focus, #analyze:hover {
169+
.button:active, .button:focus, .button:hover {
123170
-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
124171
box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
125172
outline: 0;
@@ -132,33 +179,46 @@
132179
}
133180

134181
.controls__options {
135-
margin-right: 10px;
182+
display: block;
183+
margin-bottom: 10px;
136184
}
137185

138186
.controls__input {
139-
margin-right: 5px;
187+
margin-right: 5px;
188+
vertical-align: middle;
140189
}
141190

142-
.terminal {
143-
background: #202020;
144-
color: white;
191+
.text-input {
145192
padding: .4rem;
193+
width: 70%;
194+
border: none;
195+
border-bottom: .08rem solid #aaa;
196+
background: #eee;
146197
}
147198

148-
.terminal:before {
149-
content: "$ ";
150-
color: #f932b8;
199+
@media only screen and (min-width : 800px) {
200+
.controls__options {
201+
margin-right: 10px;
202+
display: inline;
203+
}
204+
205+
.text-input {
206+
width: 30%;
207+
}
151208
}
209+
210+
/* END COMMON */
152211
</style>
153212
</head>
154213
<body>
155-
<h1 class="title">JSON-ANALYZER</h1>
156-
<a href="https://github.com/fetz/json-analyzer"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
157-
214+
<header class="header">
215+
<h1 class="title">JSON ANALYZER</h1>
216+
<a href="https://github.com/fetz/json-analyzer"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
217+
</header>
158218
<main>
159219
<a href="#details" id="details" class="anchor-tab">Details</a>
160-
<a href="#cli-example" id="cli-example" class="anchor-tab">Use it on the terminal</a>
161-
<a href="#code-example" id="code-example" class="anchor-tab">Use it on your code</a>
220+
<a href="#cli-example" id="cli-example" class="anchor-tab">Terminal</a>
221+
<a href="#code-example" id="code-example" class="anchor-tab">Code</a>
162222
<a href="#try-online" id="try-online" class="anchor-tab">Try it online</a>
163223

164224
<section id="details-section" class="tab-section">
@@ -196,20 +256,20 @@ <h3>With npm:</h3>
196256
<div class="terminal">npm install -g json-analyzer</div>
197257
</article>
198258
<article>
199-
<h2>Execute it:</h2>
259+
<h2>how to use it:</h2>
200260
<div id="terminal" class="terminal">json-analyzer path/to/file.json</div>
201261
<fieldset class="controls">
202262
<label class="controls__options">
203-
<input class="controls__input" type="checkbox" name="terminal-pipe" id="terminal-pipe"/>pipe example
263+
<input class="controls__input" type="checkbox" name="terminal-pipe" id="terminal-pipe"/>with pipe
204264
</label>
205265
<label class="controls__options">
206266
<input class="controls__input" type="checkbox" name="terminal-verbose" id="terminal-verbose"/>verbose
207267
</label>
208268
<label class="controls__options">
209-
<input class="controls__input" type="number" name="terminal-maxDepth" id="terminal-maxDepth"/>a number of how many levels depth
269+
<input class="controls__input text-input" type="number" name="terminal-maxDepth" id="terminal-maxDepth" placeholder="max depth > 0"/>
210270
</label>
211271
<label class="controls__options">
212-
<input class="controls__input" type="text" name="terminal-target" id="terminal-target" placeholder="node[pos].node"/>where to start the analyze
272+
<input class="controls__input text-input" type="text" name="terminal-target" id="terminal-target" placeholder="target node example: node[pos].node"/>
213273
</label>
214274
</fieldset>
215275
</article>
@@ -252,14 +312,14 @@ <h3>Paste json below:</h3>
252312
<input class="controls__input" type="checkbox" name="verbose" id="verbose"/>verbose
253313
</label>
254314
<label class="controls__options">
255-
<input class="controls__input" type="number" name="maxDepth" id="maxDepth"/>a number of how many levels depth
315+
<input class="controls__input text-input" type="number" name="maxDepth" id="maxDepth" placeholder="max depth > 0"/>
256316
</label>
257317
<label class="controls__options">
258-
<input class="controls__input" type="text" name="target" id="target" placeholder="node[pos].node"/>where to start the analyze
318+
<input class="controls__input text-input" type="text" name="target" id="target" placeholder="target node example: node[pos].node"/>
259319
</label>
260320
</fieldset>
261321
</div>
262-
<button id="analyze">analyze</button>
322+
<button id="analyze" class="button">analyze</button>
263323
<div id="input-wrapper">
264324
<h3>Result:</h3>
265325
<div id="output"></div>

0 commit comments

Comments
 (0)