Skip to content

Commit 7c5423a

Browse files
Gabe-MitnickGabe-Mitnick
authored
Make CSS responsive to improve mobile layout (#64)
* enhance css and html template for better layout on mobile and small viewports * copy changes to duplicate style.css * add viewport meta tag to all html files that use style.css * add lang="en" to all <html> tags * fix wrapping for inline code for safari * update TODOs in readme
1 parent f3239b8 commit 7c5423a

36 files changed

+150
-42
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ The whole thing is completely free to read online, but the original is also avai
2020

2121
## TODOs:
2222
- [ ] refactor web code
23-
- [ ] make mobile-friendly
23+
- [x] make content mobile-friendly
24+
- [ ] make homepage mobile-friendly
2425
- [x] prepare "content edit request" interface on GitHub
2526
- [ ] add exercises
2627
- [ ] update (just overall, the outdated parts)

‎docs/a-fistful-of-monads.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>A Fistful of Monads - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

‎docs/assets/css/style.css‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@ h1 {
1313
font-family:georgia, Arial, serif;
1414
margin-bottom:15px;
1515
font-weight:normal;
16+
overflow-wrap:break-word;
17+
hyphens:auto;
18+
}
19+
@media screen and (max-width:400px) {
20+
h1 {
21+
font-size:40px;
22+
line-height:40px;
23+
}
1624
}
1725
h2 {
1826
font-size:20px;
@@ -43,17 +51,24 @@ em {
4351
list-style-type:disc;
4452
margin:25px 25px;
4553
}
54+
img {
55+
/* If width is limited by max-width, scale height proportionally */
56+
height:auto;
57+
}
4658
img.right {
4759
float: right;
4860
margin:10px;
61+
max-width:40%;
4962
}
5063
img.left {
5164
float: left;
5265
margin:10px;
66+
max-width:40%;
5367
}
5468
img.center {
5569
margin:10px auto 25px auto;
5670
display:block;
71+
max-width:100%;
5772
}
5873
pre.code {
5974
color:white;
@@ -100,15 +115,22 @@ pre.code {
100115
color:black;
101116
}
102117
.fixed {
103-
white-space:nowrap;
104118
font-family:Consolas, "Courier New", monospace;
105119
background-color:#ddd;
106120
font-weight:normal;
107121
padding:0px 3px;
108122
font-weight:bold;
123+
/* Allow inline code to wrap if necessary */
124+
/* These rules were based off the CSS used on the Stack Exchange website */
125+
white-space-collapse:preserve;
126+
overflow-wrap:break-word;
127+
text-wrap:wrap;
128+
/* Rounded corners help user connect two parts of one code snippet wrapped across lines */
129+
border-radius:4px;
109130
}
110131
#content {
111-
width:800px;
132+
/* For narrow viewports, the content width will be 90% of the viewport width */
133+
width:min(800px, 90vw);
112134
margin:0px auto;
113135
}
114136
.introcontent {
@@ -125,8 +147,8 @@ pre.code {
125147
font-family:arial,serif;
126148
font-size:24px;
127149
padding-left:25px;
128-
margin:0px;
129-
color:#408156 ;
150+
margin:0px;
151+
color:#408156;
130152
margin-bottom:25px;
131153
}
132154
.chapters > li {
@@ -179,6 +201,21 @@ pre.code {
179201
display:table-cell;
180202
width:33%;
181203
}
204+
/* For narrow viewports, let navigation links split to separate lines */
205+
@media screen and (max-width:300px) {
206+
.footdiv {
207+
display:unset;
208+
}
209+
.footdiv ul {
210+
display:unset;
211+
margin:0 25px 0 0 !important;
212+
}
213+
.footdiv ul li {
214+
display:block;
215+
width:unset;
216+
}
217+
}
218+
182219
.prevlink {
183220
padding-left:20px;
184221
background-image:url(https://s3.amazonaws.com/lyah/prv.png);

‎docs/chapters.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>Chapters - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

‎docs/faq.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>FAQ - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

‎docs/for-a-few-monads-more.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>For a Few Monads More - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

‎docs/functionally-solving-problems.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>Functionally Solving Problems - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

‎docs/functors-applicative-functors-and-monoids.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>Functors, Applicative Functors and Monoids - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

‎docs/higher-order-functions.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>Higher Order Functions - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

‎docs/input-and-output.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
22
"https://www.w3.org/TR/html4/strict.dtd">
3-
<html>
3+
<html lang="en">
44
<head>
55
<title>Input and Output - Learn You a Haskell for Great Good!</title>
66
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
78
<base href="">
89
<style type="text/css">
910
@import url('reset.css');

0 commit comments

Comments
 (0)