Add in media breakpoints to allow different widths and font sizes to …

…cater to different screensizes

README.md

@@ -8,7 +8,7 @@ https://ronancodes.github.io/chuck-norris-joke-generator/
 [] Use custom pipes and directives
 [] Add in more unit tests (using TestBed)
 [] Have the alternating colors swap whenever a new joke comes in
-[] Use breakpoints to make it look different on desktop
+[x] Use breakpoints to make it look different on desktop
 [] Add in a refresh button to the toolbar (icons should move into a burger menu when the width is too short)
 [] Hook it up to FireBase
 [] Have an option that is off by default to sync with firebase (via a toolbar icon)

src/app/shared/feature/joke-list/joke-list.component.scss

@@ -5,7 +5,19 @@
   height: 100%;
 
   ul {
-    width: 90%;
+    // Remove default margins on top and bottom:
+    margin: 0px;
+
+    width: 98%;
+
+    @media (min-width: 390px) {
+      width: 95%;
+    }
+
+    @media (min-width: 500px) {
+      width: 80%;
+    }
+
     height: 100%;
     justify-content: space-evenly;
 
@@ -31,7 +43,17 @@
 }
 
 li {
-  font-size: medium;
+  font-size: 0.75em;
+  line-height: normal;
+
+  @media (min-width: 390px) {
+    font-size: 1.2em;
+  }
+
+  @media (min-width: 500px) {
+    font-size: 1.5em;
+  }
+
   display: flex;
   align-items: center;
 }

src/app/views/home/home.component.scss

@@ -26,3 +26,13 @@ mat-toolbar {
 .content {
   padding-top: 1px;
 }
+
+.header {
+  @media (max-width: 500px) {
+    font-size: 90%;
+  }
+}
+
+main {
+  height: 100%;
+}