basic responsive

sass/index.sass

@@ -50,7 +50,7 @@ ol
   font-family: 'Roboto', sans-serif
 
 .header-title
-  height: 300px
+  margin: 100px 0
   display: flex
   flex-direction: column
   align-items: center
@@ -136,3 +136,59 @@ ol
     font-family: 'Roboto Mono', monospace
     font-weight: normal
     padding: 0 10%
+
+i
+  margin-right: 20px
+
+@media screen and (max-width: 1000px)
+  .navigation
+    flex-direction: column
+
+    img
+      margin: 10px 0
+      padding: 0
+
+    *
+      margin: 5px 0
+
+  .header-title
+    text-align: center
+
+    h1
+      font-size: 50px
+      letter-spacing: 20px
+
+    h2
+      font-size: 20px
+      letter-spacing: 10px
+
+  .articles
+    width: 95%
+
+    div
+      margin: 10px 0
+
+  h3
+    font-size: 130%
+  p
+    font-size: 100%
+
+  .foot
+    flex-direction: column
+
+
+
+@media screen and (max-width: 500px)
+  .header-title
+    h1
+      font-size: 40px
+      letter-spacing: 5px
+
+    h2
+      letter-spacing: 3px
+
+  .article-description
+    p
+      display: flex
+      flex-direction: row
+      justify-content: space-between