Добавляет сайдбар с навигацией (htmlacademy#49)

* Добавляет сайдбар с навигацией

* Возвращает исходные размеры текста.

* Удаляет ненужные стили

* Изменяет scroll-margin-top у заголовков

* Изменяет адрес ссылки с котиком

* Форматирует отступы для листингов кода

* Форматирует отступы в листингах кода

Author: extendsnull

css/style.css

@@ -1,3 +1,9 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 html {
   font-size: 16px;
   scroll-behavior: smooth;
@@ -14,12 +20,14 @@ body {
 
 a:link,
 a:visited {
-  color: #5a5a5a;
-  text-decoration: underline;
+  color: #3f3ccb;
+  text-decoration: none;
 }
 
-a:hover {
-  text-decoration: none;
+a:hover,
+a:focus {
+  color: #302683;
+  text-decoration: underline;
 }
 
 h1,
@@ -49,7 +57,7 @@ h2 {
 
 h3 {
   font-size: 1.75rem;
-  scroll-margin-top: 60px;
+  scroll-margin-top: 20px;
 }
 
 code,
@@ -155,12 +163,62 @@ header a:visited {
   height: 300px;
 }
 
-.chapter h2 {
+.guide-content {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+}
+
+.sidebar a {
+  display: block;
+  color: #5a5a5a;
+}
+
+.sidebar a:hover {
+  color: #3f3ccb;
+}
+
+.sidebar-col {
   padding: 2rem 1rem;
+}
+
+.sidebar-col + .sidebar-col {
+  border-top: 1px solid #e5e5e5;
+}
+
+.sidebar-col > a {
+  font-size: 1.75rem;
+  line-height: 1.25;
+}
 
+.sidebar-menu {
+  padding-left: 1rem;
+}
+
+.chapters {
+  width: 100%;
+}
+
+.chapter h2 {
+  padding: 2rem 1rem;
+  word-break: break-word;
   background-color: #e5e5e5;
 }
 
+.chapter h3[id]::before {
+  display: block;
+  height: 2rem;
+  margin-top: -2rem;
+  visibility: hidden;
+  content: "";
+}
+
 .chapter-part {
   display: flex;
   flex-direction: column;
@@ -275,6 +333,22 @@ footer {
 }
 
 @media (min-width: 48em) {
+  .sidebar {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    padding: 2rem 0;
+  }
+
+  .sidebar-col {
+    width: 50%;
+    padding: 1rem 3rem;
+  }
+
+  .sidebar-col + .sidebar-col {
+    border-top: 0;
+  }
+
   .chapter h2 {
     padding: 2rem 3rem 2.5rem;
   }
@@ -285,7 +359,7 @@ footer {
 
   .chapter-part-col {
     width: 50%;
-    padding: 3rem;
+    padding: 3rem 1.5rem;
   }
 
   .chapter-part-col--full-width {
@@ -297,6 +371,77 @@ footer {
   }
 }
 
+@media (min-width: 75em) {
+  .chapters {
+    width: calc(100% - 230px);
+  }
+
+  .sidebar {
+    position: sticky;
+    top: 0;
+    bottom: 0;
+
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-self: flex-start;
+
+    width: 230px;
+    height: 100vh;
+    padding: 0 1rem;
+
+    overflow-y: auto;
+    line-height: 1.25;
+    border-right: 1px solid #e5e5e5;
+  }
+
+  .sidebar-col {
+    flex-shrink: 0;
+
+    width: 100%;
+    padding: 0;
+  }
+
+  .sidebar-col-first {
+    padding-top: 1.75rem;
+  }
+
+  .sidebar-col-last {
+    padding-bottom: 1.75rem;
+  }
+
+  .sidebar-col + .sidebar-col {
+    margin-top: 1.75em;
+  }
+
+  .sidebar-col > a {
+    display: block;
+
+    font-size: 0.8rem;
+    font-weight: bold;
+  }
+
+  .sidebar-menu {
+    padding: 0;
+    margin: 0.5em 0 0;
+
+    list-style: none;
+
+    font-size: 0.7rem;
+  }
+
+  .sidebar-menu li {
+    margin: 0;
+
+    line-height: 1.45;
+  }
+
+  .sidebar-menu a {
+    display: block;
+
+    padding: 0.25em 0;
+  }
+}
+
 /* override default prism theme */
 code[class*="language-"],
 pre[class*="language-"] {