Skip to content

Commit 90b1cee

Browse files
paulroubpaulroub
committed
Fix display on narrow / small screens (curl#1)
1 parent c6621fd commit 90b1cee

File tree

1 file changed

+137
-93
lines changed

1 file changed

+137
-93
lines changed

‎index.html

+137-93
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,141 @@
1+
<!DOCTYPE html>
2+
<html>
13
<head>
2-
<title>everything on curl development</title>
4+
<title>everything on curl development</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
margin: 0px 0px 0px 0px;
14+
font-family: Lora, arial, helvetica, ariel, sans-serif;
15+
font-size: 140%;
16+
display: grid;
17+
min-height: 100vh;
18+
grid-template-columns: 1fr 1fr;
19+
grid-template-areas:
20+
"title title"
21+
"withcurl withlib"
22+
"devcurl devlib";
23+
}
24+
25+
.topic {
26+
overflow-x: auto;
27+
overflow-y: visible;
28+
padding: 10px;
29+
}
30+
31+
@media screen and (max-width: 60em) {
32+
body {
33+
grid-template-columns: 1fr;
34+
grid-template-areas:
35+
"title"
36+
"withcurl"
37+
"withlib"
38+
"devcurl"
39+
"devlib";
40+
}
41+
42+
.topic {
43+
overflow: visible;
44+
}
45+
}
46+
47+
a {
48+
text-decoration: none;
49+
color: #ffffff;
50+
}
51+
a:hover {
52+
text-decoration: none;
53+
color: #4040ff;
54+
background-color: #093754;
55+
}
56+
57+
a.light {
58+
text-decoration: none;
59+
color: #093754;
60+
}
61+
a:hover.light {
62+
text-decoration: none;
63+
color: #4040ff;
64+
background-color: #e0e0e0;
65+
}
66+
67+
h1 {
68+
margin: 1rem auto 0;
69+
}
70+
71+
.urls {
72+
margin: 0 auto 1rem;
73+
}
74+
75+
.title {
76+
grid-area: title;
77+
background: #202020;
78+
color: #ffffff;
79+
padding: 10px 0;
80+
text-align: center;
81+
align-items: center;
82+
display: grid;
83+
}
84+
85+
.withcurl {
86+
grid-area: withcurl;
87+
background: #093754;
88+
color: #ffffff;
89+
}
90+
91+
.withlib {
92+
grid-area: withlib;
93+
background: #ffffff;
94+
color: #093754;
95+
}
96+
97+
.devcurl {
98+
grid-area: devcurl;
99+
background: #cfcfcf;
100+
color: #0f564d;
101+
}
102+
103+
.devlib {
104+
grid-area: devlib;
105+
background: #0f564d;
106+
color: #ffffff;
107+
}
108+
109+
pre {
110+
overflow: auto;
111+
max-width: 100%;
112+
}
113+
114+
.term {
115+
padding: 4px 4px 4px 4px;
116+
border: 2px solid white;
117+
}
118+
119+
.whiteterm {
120+
padding: 4px 4px 4px 4px;
121+
border: 2px solid #093754;
122+
}
123+
124+
125+
</style>
126+
3127
</head>
4128
<body>
5-
<style>
6-
body {
7-
margin: 0px 0px 0px 0px;
8-
font-family: Lora, arial, helvetica, ariel, sans-serif;
9-
font-size: 140%;
10-
}
11-
a {
12-
text-decoration: none;
13-
color: #ffffff;
14-
}
15-
a:hover {
16-
text-decoration: none;
17-
color: #4040ff;
18-
background-color: #093754;
19-
}
20-
21-
a.light {
22-
text-decoration: none;
23-
color: #093754;
24-
}
25-
a:hover.light {
26-
text-decoration: none;
27-
color: #4040ff;
28-
background-color: #e0e0e0;
29-
}
30-
31-
.title {
32-
width: 50%;
33-
background: #202020;
34-
color: #ffffff;
35-
margin-left: auto;
36-
margin-right: auto;
37-
padding: 10px 0px 10px 0px;
38-
}
39-
40-
.withcurl {
41-
width: 48%;
42-
background: #093754;
43-
color: #ffffff;
44-
padding: 10px 10px 10px 10px;
45-
float: left;
46-
height: 40%;
47-
}
48-
.withlib {
49-
width: 48%;
50-
background: #ffffff;
51-
color: #093754;
52-
padding: 10px 10px 10px 10px;
53-
float: left;
54-
height: 40%;
55-
}
56-
.devcurl {
57-
width: 48%;
58-
background: #ffffff;
59-
color: #0f564d;
60-
padding: 10px 10px 10px 10px;
61-
float: left;
62-
clear: left;
63-
height: 100%;
64-
}
65-
.devlib {
66-
width: 48%;
67-
background: #0f564d;
68-
color: #ffffff;
69-
padding: 10px 10px 10px 10px;
70-
float: left;
71-
height: 100%;
72-
}
73-
.term {
74-
padding: 4px 4px 4px 4px;
75-
border: 2px solid white;
76-
}
77-
.whiteterm {
78-
padding: 4px 4px 4px 4px;
79-
border: 2px solid #093754;
80-
}
81-
82-
83-
</style>
84-
85-
<div class="title">
86-
<center><h1>curl development</h1>
129+
130+
<header class="title">
131+
<h1>curl development</h1>
132+
<section class="urls">
87133
<a href="https://everything.curl.dev/">"everything curl"</a> <br>
88134
<a href="https://curl.se/">curl.se</a>
89-
</center>
90-
<p>
91-
</div>
135+
</section>
136+
</header>
92137

93-
<div class="withcurl">
138+
<div class="withcurl topic">
94139
<h2>development with curl</h2>
95140
<pre class="term">
96141
$ curl https://example.com/
@@ -105,9 +150,9 @@ <h2>development with curl</h2>
105150
<li> <a href="https://everything.curl.dev/http">How to HTTP with the curl tool</a>
106151
<li> <a href="https://everything.curl.dev/http/browserlike">Scripting browser-like tasks</a>
107152
</ol>
108-
109153
</div>
110-
<div class="withlib">
154+
<div class="withlib topic">
155+
111156
<h2>development with libcurl</h2>
112157
<pre class="whiteterm">
113158
curl = curl_easy_init();
@@ -124,10 +169,9 @@ <h2>development with libcurl</h2>
124169
<li> <a class="light" href="https://everything.curl.dev/libcurl/drive">driving transfers with libcurl</a>
125170
<li> <a class="light" href="https://everything.curl.dev/libcurl-http">HTTP with libcurl</a>
126171
</ol>
127-
128172
</div>
129173

130-
<div class="devcurl">
174+
<div class="devcurl topic">
131175
<h2>development of curl</h2>
132176
<pre class="whiteterm">
133177
$ ./configure
@@ -139,10 +183,9 @@ <h2>development of curl</h2>
139183
<li> <a class="light" href="https://everything.curl.dev/opensource/license">the curl license</a>
140184
<li> <a class="light" href="https://everything.curl.dev/source">curl source code</a>
141185
</ol>
142-
143186
</div>
144187

145-
<div class="devlib">
188+
<div class="devlib topic">
146189
<h2>development of libcurl</h2>
147190
<pre class="term">
148191
$ ./configure
@@ -156,3 +199,4 @@ <h2>development of libcurl</h2>
156199
</ol>
157200
</div>
158201
</body>
202+
</html>

0 commit comments

Comments
 (0)