learnyouahaskell · smith558 · Apr 25, 2025 · May 31, 2024 · May 31, 2024 · May 31, 2024
@@ -20,7 +20,8 @@ The whole thing is completely free to read online, but the original is also avai
 
 ## TODOs:
 - [ ] refactor web code
-- [ ] make mobile-friendly
+- [x] make content mobile-friendly
+- [ ] make homepage mobile-friendly
 - [x] prepare "content edit request" interface on GitHub
 - [ ] add exercises
 - [ ] update (just overall, the outdated parts)

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>A Fistful of Monads - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -13,6 +13,14 @@ h1 {
     font-family:georgia, Arial, serif;
     margin-bottom:15px;
     font-weight:normal;
+    overflow-wrap:break-word;
+    hyphens:auto;
+}
+@media screen and (max-width:400px) {
+    h1 {
+        font-size:40px;
+        line-height:40px;
+    }
 }
 h2 {
     font-size:20px;
@@ -43,17 +51,24 @@ em {
     list-style-type:disc;
     margin:25px 25px;
 }
+img {
+    /* If width is limited by max-width, scale height proportionally */
+    height:auto;
+}
 img.right {
     float: right;
     margin:10px;
+    max-width:40%;
 }
 img.left {
     float: left;
     margin:10px;
+    max-width:40%;
 }
 img.center {
     margin:10px auto 25px auto;
     display:block;
+    max-width:100%;
 }
 pre.code {
     color:white;
@@ -100,15 +115,22 @@ pre.code {
     color:black;
 }
 .fixed {
-    white-space:nowrap;
     font-family:Consolas, "Courier New", monospace;
     background-color:#ddd;
     font-weight:normal;
     padding:0px 3px;
     font-weight:bold;
+    /* Allow inline code to wrap if necessary */
+    /* These rules were based off the CSS used on the Stack Exchange website */
+    white-space-collapse:preserve;
+    overflow-wrap:break-word;
+    text-wrap:wrap;
+    /* Rounded corners help user connect two parts of one code snippet wrapped across lines */
+    border-radius:4px;
 }
 #content {
-    width:800px;
+    /* For narrow viewports, the content width will be 90% of the viewport width */
+    width:min(800px, 90vw);
     margin:0px auto;
 }
 .introcontent {
@@ -125,8 +147,8 @@ pre.code {
     font-family:arial,serif;
     font-size:24px;
     padding-left:25px;
-    margin:0px; 
-    color:#408156 ;
+    margin:0px;
+    color:#408156;
     margin-bottom:25px;
 }
 .chapters > li {
@@ -179,6 +201,21 @@ pre.code {
     display:table-cell;
     width:33%;
 }
+/* For narrow viewports, let navigation links split to separate lines */
+@media screen and (max-width:300px) {
+    .footdiv {
+        display:unset;
+    }
+    .footdiv ul {
+        display:unset;
+        margin:0 25px 0 0 !important;
+    }
+    .footdiv ul li {
+        display:block;
+        width:unset;
+    }
+}
+
 .prevlink {
     padding-left:20px;
     background-image:url(https://s3.amazonaws.com/lyah/prv.png);

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Chapters - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>FAQ - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>For a Few Monads More - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Functionally Solving Problems - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Functors, Applicative Functors and Monoids - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Higher Order Functions - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Input and Output - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Introduction - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Making Our Own Types and Typeclasses - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Modules - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Recursion - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Starting Out - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -13,6 +13,14 @@ h1 {
     font-family:georgia, Arial, serif;
     margin-bottom:15px;
     font-weight:normal;
+    overflow-wrap:break-word;
+    hyphens:auto;
+}
+@media screen and (max-width:400px) {
+    h1 {
+        font-size:40px;
+        line-height:40px;
+    }
 }
 h2 {
     font-size:20px;
@@ -43,17 +51,24 @@ em {
     list-style-type:disc;
     margin:25px 25px;
 }
+img {
+    /* If width is limited by max-width, scale height proportionally */
+    height:auto;
+}
 img.right {
     float: right;
     margin:10px;
+    max-width:40%;
 }
 img.left {
     float: left;
     margin:10px;
+    max-width:40%;
 }
 img.center {
     margin:10px auto 25px auto;
     display:block;
+    max-width:100%;
 }
 pre.code {
     color:white;
@@ -100,15 +115,22 @@ pre.code {
     color:black;
 }
 .fixed {
-    white-space:nowrap;
     font-family:Consolas, "Courier New", monospace;
     background-color:#ddd;
     font-weight:normal;
     padding:0px 3px;
     font-weight:bold;
+    /* Allow inline code to wrap if necessary */
+    /* These rules were based off the CSS used on the Stack Exchange website */
+    white-space-collapse:preserve;
+    overflow-wrap:break-word;
+    text-wrap:wrap;
+    /* Rounded corners help user connect two parts of one code snippet wrapped across lines */
+    border-radius:4px;
 }
 #content {
-    width:800px;
+    /* For narrow viewports, the content width will be 90% of the viewport width */
+    width:min(800px, 90vw);
     margin:0px auto;
 }
 .introcontent {
@@ -125,8 +147,8 @@ pre.code {
     font-family:arial,serif;
     font-size:24px;
     padding-left:25px;
-    margin:0px; 
-    color:#408156 ;
+    margin:0px;
+    color:#408156;
     margin-bottom:25px;
 }
 .chapters > li {
@@ -179,6 +201,21 @@ pre.code {
     display:table-cell;
     width:33%;
 }
+/* For narrow viewports, let navigation links split to separate lines */
+@media screen and (max-width:300px) {
+    .footdiv {
+        display:unset;
+    }
+    .footdiv ul {
+        display:unset;
+        margin:0 25px 0 0 !important;
+    }
+    .footdiv ul li {
+        display:block;
+        width:unset;
+    }
+}
+
 .prevlink {
     padding-left:20px;
     background-image:url(https://s3.amazonaws.com/lyah/prv.png);

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Syntax in Functions - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Types and Typeclasses - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');

@@ -1,9 +1,10 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
-<html>
+<html lang="en">
 <head>
 <title>Zippers - Learn You a Haskell for Great Good!</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <base href="">
 <style type="text/css">
 	@import url('reset.css');